@font-face { font-family:'Neue Swiss'; src:url('/fonts/NeueSwiss-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Neue Swiss'; src:url('/fonts/NeueSwiss-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Neue Swiss'; src:url('/fonts/NeueSwiss-Semibold.woff2') format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; } :root { /* Dashboard palette aliases the shared @theme tokens (input.css) wherever the values match, so a brand change propagates instead of silently drifting. The two lighter dashboard surface tints (--ct-cream/--ct-rule) and the status colors are local on purpose. */ --ct-paper: var(--color-parchment, #ffffff); --ct-cream: #f5f5f5; /* lighter dashboard surface than --color-cream */ --ct-ink: var(--color-obsidian, #1b1b1b); --ct-charcoal: var(--color-charcoal, #3a3a3a); --ct-ash: var(--color-ash, #5c5c5c); --ct-stone: var(--color-stone, #6c6c6c); --ct-rule: #efefef; /* lighter dashboard hairline than --color-rule */ --ct-blue: var(--color-dune, #2357D9); --ct-blue-tint: var(--color-dune-light, #E2E9FF); /* DS-bundle token names used by v2 surfaces. app.html loads the compiled @theme tokens, not the vendored bundle, so bridge the bundle's names here instead of repeating hex fallbacks per call site. Cobalt ink has no @theme twin; value matches the bundle's --color-cobalt-ink (AA on soft cobalt). */ --color-panel: var(--color-parchment); --color-ink: var(--color-obsidian); --color-cobalt: var(--color-dune); --color-cobalt-soft: var(--color-dune-light); --color-cobalt-ink: #1740A3; --ct-red: var(--color-signal-red, #C84632); --ct-red-ink: #9D2F20; --ct-red-tint: var(--color-signal-red-tint, #F8E3DE); --ct-green: var(--color-signal-green, #2C7A4B); --ct-green-tint: var(--color-signal-green-tint, #E3EFE6); --ct-status-on: var(--color-status-on, #3E7C5A); --ct-clay: #8a8a8a; /* Warning family: fatigue 'refresh' chips, strategy warnings. */ --ct-amber: #9e651a; --ct-amber-ink: #7A5318; --ct-amber-tint: color-mix(in oklab, var(--color-amber) 16%, var(--color-panel)); /* Five performance bands — Strategy matrix objective-aware cell grades (matrix redesign SPEC §12). Inks hold 4.5:1 on their tints. */ --band-winner-bg: #D9EBE1; --band-winner-ink: #17603A; --band-solid-bg: #EAF3ED; --band-solid-ink: #2C7A4B; --band-mid-bg: transparent; --band-mid-ink: #3a3a3a; --band-weak-bg: color-mix(in oklab, var(--color-amber) 16%, var(--color-panel)); --band-weak-ink: #7A5318; --band-loser-bg: #F6DFD9; --band-loser-ink: #A03A28; } body { font-family:'Neue Swiss',system-ui,sans-serif; background:var(--ct-paper); letter-spacing:0; } button, input, select, textarea { font-family:inherit; } .password-visibility-toggle { position:absolute; top:0; right:0; bottom:0; width:44px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:0 8px 8px 0; background:transparent; color:var(--ct-stone); cursor:pointer; transition:color .15s ease, box-shadow .15s ease; } .password-visibility-toggle:hover { color:var(--ct-ink); } .password-visibility-toggle:focus-visible { outline:none; box-shadow:inset 0 0 0 2px rgba(35,87,217,.45); } .password-visibility-toggle svg { flex:0 0 auto; } .auth-shell { min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(340px,44%) minmax(480px,56%); background:var(--ct-paper); } .auth-shell.hidden { display:none; } .auth-context { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding:48px; background:var(--ct-ink); color:var(--ct-paper); } .auth-context .ct-wordmark { color:var(--ct-paper); } .auth-context .ct-byline { color:#B9B1A5; } .auth-context-main { width:100%; max-width:500px; margin:auto 0; padding:64px 0; } .auth-context-kicker { margin-bottom:18px; color:#B9C8FF; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .auth-context-title { max-width:470px; margin:0; font-size:44px; font-weight:500; line-height:1.06; letter-spacing:0; } .auth-context-copy { max-width:460px; margin-top:20px; color:#D8D2C9; font-size:16px; line-height:1.6; } .auth-context-flow { max-width:480px; margin-top:40px; border-top:1px solid rgba(253,252,250,.17); } .auth-context-step { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:58px; border-bottom:1px solid rgba(253,252,250,.17); } .auth-context-step-number { color:#B9C8FF; font-size:11px; font-weight:700; } .auth-context-step-name { color:var(--ct-paper); font-size:14px; font-weight:500; } .auth-context-step-state { color:#B9B1A5; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .auth-context-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; color:#B9B1A5; font-size:12px; } .auth-context-footer a { color:var(--ct-paper); text-decoration:none; } .auth-context-footer a:hover { color:#B9C8FF; } .auth-form-panel { min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:56px; background:var(--ct-paper); } .auth-form-wrap { width:100%; max-width:420px; } .auth-form-kicker { margin-bottom:14px; color:var(--ct-blue); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .auth-form-title { margin:0; color:var(--ct-ink); font-size:34px; font-weight:500; line-height:1.12; letter-spacing:0; } .auth-form-description { margin-top:12px; color:var(--ct-ash); font-size:15px; line-height:1.55; } .auth-form { margin-top:30px; } .auth-field + .auth-field { margin-top:18px; } .auth-field-label-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; } .auth-field-label { color:var(--ct-charcoal); font-size:13px; font-weight:500; } .auth-field-link { border:0; padding:0; background:transparent; color:var(--ct-blue); font-size:12px; cursor:pointer; } .auth-field-link:hover { color:var(--ct-ink); } .auth-input { width:100%; height:48px; border:1px solid var(--ct-rule); border-radius:8px; padding:0 14px; background:#fff; color:var(--ct-ink); font-size:14px; transition:border-color .15s ease, box-shadow .15s ease; } .auth-input::placeholder { color:var(--ct-ash); } .auth-input:focus { outline:none; border-color:var(--ct-blue); box-shadow:0 0 0 3px rgba(35,87,217,.12); } .auth-input-with-action { padding-right:52px; } .auth-primary-button { width:100%; height:48px; margin-top:22px; border:0; border-radius:8px; background:var(--ct-ink); color:var(--ct-paper); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease, opacity .15s ease; } .auth-primary-button:hover { background:var(--ct-charcoal); } .auth-primary-button:disabled { cursor:wait; opacity:.6; } .auth-account-note { margin-top:14px; border-left:2px solid var(--ct-blue); border-radius:0 6px 6px 0; padding:11px 13px; background:rgba(35,87,217,.055); color:var(--ct-ash); font-size:12px; line-height:1.5; } .auth-secondary-action { width:100%; margin-top:16px; border:0; padding:6px; background:transparent; color:var(--ct-blue); font-size:13px; font-weight:500; cursor:pointer; } .auth-secondary-action:hover { color:var(--ct-ink); } .auth-legal { margin-top:18px; color:var(--ct-ash); font-size:11px; line-height:1.5; text-align:center; } .auth-legal a { color:var(--ct-charcoal); text-decoration:underline; text-underline-offset:2px; } .auth-legal a:hover { color:var(--ct-ink); } .auth-recovery-state { margin-top:30px; } .auth-recovery-state p { color:var(--ct-ash); font-size:14px; line-height:1.55; } .auth-error { margin-top:14px; border-radius:6px; padding:10px 12px; background:var(--ct-red-tint); color:#9D2F20; font-size:13px; line-height:1.45; } .auth-error-actions { margin-top:8px; display:flex; flex-wrap:wrap; gap:8px 16px; } .auth-error-link { border:0; padding:0; background:transparent; color:#9D2F20; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-family:inherit; } .auth-error-link:hover { color:#7C2417; } .auth-mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:24px; padding:4px; border:1px solid var(--ct-rule); border-radius:10px; background:var(--ct-cream); } .auth-mode-toggle.hidden { display:none; } .auth-mode-tab { height:38px; border:0; border-radius:7px; background:transparent; color:var(--ct-ash); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; font-family:inherit; } .auth-mode-tab:hover { color:var(--ct-ink); } .auth-mode-tab[aria-selected="true"] { background:#fff; color:var(--ct-ink); box-shadow:0 1px 2px rgba(13,13,13,.08); } .auth-mode-tab:focus-visible { outline:2px solid var(--ct-blue); outline-offset:2px; } .auth-form-panel button:focus-visible { outline:2px solid var(--ct-blue); outline-offset:3px; } .auth-context a:focus-visible { outline:2px solid #B9C8FF; outline-offset:3px; } @media (max-width:820px) { .auth-shell { display:block; } .auth-context { min-height:auto; padding:22px 24px; } .auth-context-main, .auth-context-footer { display:none; } .auth-form-panel { min-height:calc(100svh - 66px); align-items:flex-start; padding:48px 24px 36px; } } @media (max-width:520px) { .auth-form-panel { padding:38px 20px 28px; } .auth-form-title { font-size:30px; } .auth-form { margin-top:26px; } } @media (min-width:821px) and (max-height:720px) { .auth-context { padding:32px 40px; } .auth-context-main { padding:30px 0; } .auth-context-title { font-size:38px; } .auth-context-copy { margin-top:14px; } .auth-context-flow { margin-top:24px; } .auth-form-panel { padding:36px 48px; } .auth-form { margin-top:22px; } } .drop-zone.dragover { border-color: var(--ct-blue); background: rgba(35,87,217,0.05); } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 5px; font-size: 12px; font-weight: 500; font-family:'Neue Swiss',system-ui,sans-serif; background: #fff; border: 1px solid var(--ct-rule); color: var(--ct-ink); line-height: 1; } .tag-active { background: var(--ct-blue); border-color: var(--ct-blue); color: #fff; } .tag-muted { background: transparent; border-color: #CFC5B7; color: var(--ct-ash); } .tag-blue { background: rgba(35,87,217,.09); border-color: rgba(35,87,217,.25); color: #1740A3; } .tag-red { background: rgba(200,70,50,.09); border-color: rgba(200,70,50,.25); color: var(--ct-red); } .tag-green { background: rgba(44,122,75,.10); border-color: rgba(44,122,75,.25); color: #24633D; } .ct-billing-switch { position:relative; display:inline-flex; flex:0 0 auto; width:42px; height:24px; } .ct-billing-switch input { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .ct-billing-switch-track { position:absolute; inset:0; border:1px solid #CFC5B7; border-radius:999px; background:#D8D1C8; transition:background .16s ease,border-color .16s ease; } .ct-billing-switch-track::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(30,28,25,.24); transition:transform .16s ease; } .ct-billing-switch input:checked + .ct-billing-switch-track { border-color:var(--ct-blue); background:var(--ct-blue); } .ct-billing-switch input:checked + .ct-billing-switch-track::after { transform:translateX(18px); } .ct-billing-switch input:focus-visible + .ct-billing-switch-track { outline:2px solid var(--ct-blue); outline-offset:3px; } .ct-billing-switch input:disabled { cursor:not-allowed; } .ct-billing-switch input:disabled + .ct-billing-switch-track { opacity:.48; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ct-blue); font-family:'Neue Swiss',system-ui,sans-serif; } .ct-lockup { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } .ct-wordmark { font-family:'Neue Swiss',system-ui,sans-serif; font-size: 22px; line-height: 1; font-style: normal; font-weight:700; color: var(--ct-ink); letter-spacing: 0; } .ct-wordmark-small { font-family:'Neue Swiss',system-ui,sans-serif; font-size: 18px; line-height: 1; font-style: normal; font-weight:700; color: var(--ct-ink); letter-spacing: 0; } .ct-byline { font-size: 11px; font-weight: 600; color: var(--ct-stone); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .ct-proof-tabs { display: none; gap: 4px; align-items: center; } .ct-proof-tabs span { width: 18px; height: 5px; border-radius: 999px; display: block; } .ct-proof-tabs span:nth-child(1) { background: var(--ct-red); } .ct-proof-tabs span:nth-child(2) { background: var(--ct-green); } .ct-proof-tabs span:nth-child(3) { background: var(--ct-blue); } .ct-card { position: relative; background:#fff; border: 1px solid var(--ct-rule); border-radius: 8px; box-shadow:none; } .ct-card::before { display:none; } .ct-panel { background: #fff; border: 1px solid var(--ct-rule); border-radius: 8px; box-shadow:none; } .ct-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ct-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ct-rule); background: #fff; border-radius: 6px; padding: 5px 9px; font-size: 11px; font-weight: 700; color: var(--ct-charcoal); } .ct-library-hero { background:#fff; border: 1px solid var(--ct-rule); border-radius: 8px; } .ct-table-wrap { border: 1px solid var(--ct-rule); border-radius: 8px; background: #fff; box-shadow:none; overflow: auto; } .ct-read-note { border-left: 2px solid var(--ct-blue); background:#fff; } /* H4: success toasts auto-fade and never trap clicks; error toasts persist visibly until dismissed (UX4) — the old blanket fadeOut faded errors to invisible clickable layers bottom-right. */ .toast { animation: slideUp 0.3s ease-out; } .toast-success { animation: slideUp 0.3s ease-out, fadeOut 0.3s ease-in 1.7s forwards; pointer-events: none; } #mcpSetupModalClose { display:grid; min-width:44px; min-height:44px; place-items:center; margin:-10px -10px 0 8px; } .mcp-setup-url { min-width:0; overflow-wrap:anywhere; } .mcp-setup-copy { min-width:44px; min-height:44px; } @media (max-width:640px) { #mcpSetupModal { padding:12px; } #mcpSetupModalPanel { max-height:calc(100dvh - 24px); padding:20px; } .mcp-setup-url-row { align-items:stretch; flex-direction:column; } .mcp-setup-url { white-space:normal; word-break:break-word; } .mcp-setup-copy { align-self:stretch; border:1px solid rgba(159,182,255,.42); border-radius:7px; padding:0 12px; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeOut { to { opacity: 0; } } .spinner { border: 3px solid var(--ct-rule); border-top-color: var(--ct-blue); border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .result-card { animation: fadeIn 0.22s cubic-bezier(0.25, 1, 0.5, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .app-tab.app-tab-active { color: var(--ct-blue); border-color: var(--ct-blue); } .app-tab:not(.app-tab-active) { border-color: transparent; } .import-tab.tab-active { color: var(--ct-blue); border-color: var(--ct-blue); } .import-tab:not(.tab-active) { border-color: transparent; color: var(--ct-ash); } .import-tab:not(.tab-active):hover { color: var(--ct-ink); } /* Skeleton shimmer */ .skeleton { background: linear-gradient(90deg, var(--ct-cream) 25%, #E8E3DB 50%, var(--ct-cream) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Account-loading strip: a slim, persistent status banner shown on every main surface while a new workspace is still syncing from Meta or classifying its creatives. Reuses the onboarding live-dot pulse and the indeterminate sweep so it stays honest — a determinate fill only when the API reports real counts/eta, otherwise an indeterminate animation that never fakes a percentage. (keyframes obLive / obSyncIndeterminate are defined further down.) */ #accountLoadingBanner { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 9px 14px; border: 1px solid var(--ct-rule); border-radius: 10px; background: var(--ct-cream); overflow: hidden; } #accountLoadingBanner.hidden { display: none; } .ct-load-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ct-blue); box-shadow: 0 0 0 3px rgba(35,87,217,.12); animation: obLive 1.7s ease-in-out infinite; } #accountLoadingBanner[data-phase="classify"] .ct-load-dot, .ct-analyzing .ct-load-dot { background: var(--ct-green); box-shadow: 0 0 0 3px rgba(44,122,75,.14); } .ct-load-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ct-load-text { min-width: 0; font-size: 13px; font-weight: 600; color: var(--ct-charcoal); } .ct-load-detail { font-size: 11px; line-height: 1.35; color: var(--ct-ash); } .ct-load-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ct-rule); overflow: hidden; } .ct-load-bar-fill { display: block; height: 100%; width: 0; background: var(--ct-blue); transition: width .5s ease; } #accountLoadingBanner[data-phase="classify"] .ct-load-bar-fill { background: var(--ct-green); } #accountLoadingBanner[data-phase="failed"] { align-items: flex-start; flex-wrap: wrap; border-color: var(--ct-red); background: var(--ct-cream); } #accountLoadingBanner [data-meta-sync-banner-copy] { flex: 1 1 360px; min-width: 0; } #accountLoadingBanner [data-meta-sync-banner-actions] { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px; } #accountLoadingBanner[data-progress-complete="true"] { margin-bottom: 10px; padding: 4px 0 8px; border-color: transparent; border-radius: 0; background: transparent; } #accountLoadingBanner[data-progress-complete="true"] .ct-load-dot { width: 6px; height: 6px; flex-basis: 6px; background: var(--ct-green); box-shadow: none; animation: none; } #accountLoadingBanner[data-progress-complete="true"] .ct-load-bar { display: none; } .ct-load-bar.is-indeterminate .ct-load-bar-fill { width: 34%; transition: none; animation: obSyncIndeterminate 1.3s ease-in-out infinite; } .ct-analyzing .skeleton { height: 14px; } @media (prefers-reduced-motion: reduce) { .ct-load-dot, .ct-load-bar-fill { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } .file-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ct-cream); border: 1px solid var(--ct-rule); border-radius: 5px; font-size: 13px; } .file-row .name { flex: 1; color: var(--ct-charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row .remove { color: var(--ct-stone); cursor: pointer; } .file-row .remove:hover { color: var(--ct-red); } .creative-stage { aspect-ratio: 16 / 9; min-height: 260px; max-height: 560px; background: #11100E; display: flex; align-items: center; justify-content: center; overflow: hidden; } .creative-stage.portrait { aspect-ratio: 9 / 16; max-height: 680px; max-width: 430px; margin-inline: auto; } .creative-stage.square { aspect-ratio: 1 / 1; max-height: 620px; max-width: 620px; margin-inline: auto; } .creative-stage img, .creative-stage video, .creative-stage iframe { width: 100%; height: 100%; object-fit: contain; border: 0; } .chat-focus .creative-stage { min-height: 180px; max-height: 320px; } .chat-focus .creative-stage.portrait { max-height: 360px; max-width: 240px; } .chat-focus .creative-stage.square { max-height: 320px; max-width: 320px; } /* UX-25: Creative Review modal media-first stage. Deliberately not .lightbox-stage — that box is sized in JS (mediaLightboxFit) relative to the viewport for the full-screen overlay, which isn't safe to reuse inside a bounded modal panel (see the comment on renderReviewMediaStage). This box has a determinate height, so plain CSS max-width/max-height + width/height:auto already caps media at its natural size without upscaling — no JS fit needed. Click-through still opens the real UX-12 lightbox for the true full-size view. */ .review-media-stage { position: relative; width: 100%; height: clamp(220px, 42vh, 420px); background: #11100E; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Media FILLS the stage (contain -> never cropped) so even Meta's tiny 64px sync thumbnail renders visibly instead of sitting intrinsic-size in a black box (the review-modal media bug). It's honestly labelled low-res by reviewMediaProbe when the source is genuinely small. */ .review-media-stage img, .review-media-stage video { width: 100%; height: 100%; object-fit: contain; display: block; } .review-media-empty { color: #9A9081; font-size: 13px; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .review-media-empty a { color: #B9C8FF; text-decoration: none; border: 1px solid rgba(185,200,255,.35); border-radius: 999px; padding: 5px 13px; font-size: 12px; } .review-media-empty a:hover { color: #fff; border-color: rgba(185,200,255,.6); } .review-media-pending { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: #B9B1A5; z-index: 2; } /* Honest state chip when the only media on file is a low-resolution sync thumbnail — clinical, factual, no personality. Revealed by reviewMediaProbe once the image's natural size is known. */ .review-media-lowres { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 5px 11px; border-radius: 999px; background: rgba(17,16,14,.82); color: #EDE7DC; font-size: 11px; line-height: 1.25; letter-spacing: .01em; backdrop-filter: blur(2px); border: 1px solid rgba(253,252,250,.14); } .review-media-lowres.hidden { display: none; } /* Shared low-resolution treatment for ANY thumbnail box (modal stage, Home hero, wall-of-winners, table/card thumbs): a blurred, enlarged copy of the same image fills the letterbox bars behind the contained sharp copy, so a tiny sync thumb reads as an intentional letterbox rather than a broken blur-stretch. --ct-thumb-bg is set in JS (markLowResThumb / reviewMediaProbe) once the image is confirmed small. No new visual language — same blur/backdrop tokens already used by the lightbox + modal overlays. */ .is-lowres { position: relative; } /* Stacking: the ::before backdrop, the media, and any overlay all stay z-index:auto positioned, so they paint in DOM order — backdrop (generated first) under the media, overlays (later siblings) above it. Giving the media an explicit z-index here buried the play badges/chips behind the poster (Codex review round 1, finding 3). */ .is-lowres::before { content: ""; position: absolute; inset: 0; background-image: var(--ct-thumb-bg); background-size: cover; background-position: center; filter: blur(18px) brightness(.62) saturate(1.05); transform: scale(1.3); } .is-lowres > img, .is-lowres > video { position: relative; } /* Belt-and-braces: badge/affordance spans (card play badge, .home-play) are absolutely positioned — pin them above the media explicitly. */ .is-lowres > span { z-index: 2; } .is-lowres .ct-lowres-img { object-fit: contain; } /* UX-12: creative viewer lightbox — click any thumbnail (Home hero, wall of winners, Creatives table) to see the real media full size. Unlike .creative-stage above, media here keeps its own intrinsic size (capped by max-width/max-height, never stretched to fill a fixed box) so a small synced thumbnail renders at natural size instead of blurring out to full-bleed — that upscale is the bug this viewer exists to kill. */ .lightbox-backdrop.hidden { display: none; } .lightbox-backdrop:not(.hidden) { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17,16,14,.86); backdrop-filter: blur(3px); animation: ctModalFade .18s ease-out; } .lightbox-panel { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 94vw; max-height: 94vh; animation: ctModalRise .2s cubic-bezier(.25,1,.5,1); } .lightbox-close { position: absolute; top: -16px; right: -16px; width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(30,28,25,.7); color: var(--ct-paper); font-size: 26px; line-height: 1; border: 1px solid rgba(253,252,250,.2); cursor: pointer; transition: background .14s; } .lightbox-close:hover { background: rgba(30,28,25,.92); } .lightbox-close:focus-visible { outline: 2px solid var(--ct-blue); outline-offset: 2px; } .lightbox-stage { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 85vh; text-align: center; } /* width/height start empty (auto) and stay invisible until mediaLightboxFit() sets an explicit natural-size px value in JS — this nested "shrink to fit" centering chain can otherwise resolve a ratio-only replaced element's width:auto/height:auto to 0 before its real size is known. max-width/max-height stay on as a fallback cap. See mediaLightboxFit for the sizing (never upscale, always fit within the viewport). */ .lightbox-stage img, .lightbox-stage video { display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: 2px; visibility: hidden; } .lightbox-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 56px; color: #B8B0A5; text-align: center; } .lightbox-pending-note { margin-top: 10px; font-size: 11px; color: #9A9081; text-align: center; } .lightbox-caption { width: 100%; max-width: 640px; margin-top: 16px; padding: 12px 18px; border-radius: 10px; background: rgba(30,28,25,.6); color: var(--ct-paper); text-align: center; } .lightbox-caption-name { font-size: 14px; font-weight: 600; line-height: 1.3; } .lightbox-caption-meta { margin-top: 4px; font-size: 11px; color: #B9B1A5; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .lightbox-caption-meta a { color: #B9C8FF; text-decoration: none; } .lightbox-caption-meta a:hover { color: #fff; text-decoration: underline; } /* Shared affordance for every thumbnail that opens the lightbox. */ .lightbox-trigger { cursor: pointer; } .lightbox-trigger:focus-visible { outline: 2px solid var(--ct-blue); outline-offset: -3px; border-radius: 4px; } @media (max-width: 768px) { .lightbox-backdrop:not(.hidden) { padding: 12px; } .lightbox-close { top: 8px; right: 8px; } .lightbox-caption { max-width: 100%; } } /* Mobile responsive */ @media (max-width: 900px) { .import-tab svg { display: none; } .import-tab { padding: 8px 10px; font-size: 12px; } .creative-stage { min-height: 220px; } #sidebar { position: fixed; left: 0; top: 0; z-index: 60; height: 100dvh; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(30,28,25,.18); } #sidebar.mobile-open { transform: translateX(0); } #navBackdrop.mobile-open { display: block; } /* Creative report drawer becomes a full-screen sheet on mobile. */ #creativeDrawerPanel { max-width: 100%; } } /* ===== Sidebar app shell ===== */ #sidebar { width: 232px; } #mobileTopbar { display: none; position: sticky; top: 0; z-index: 50; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ct-parchment, #ffffff); border-bottom: 1px solid var(--ct-rule, #efefef); } #navBackdrop { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(30,28,25,.45); } /* Keep this after the base #mobileTopbar rule. With the mobile rule above it, equal specificity made source order hide the only menu trigger while the sidebar itself was already translated offscreen. */ @media (max-width: 900px) { #mobileTopbar { display: flex; } } .navlink { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:6px; border-left:2px solid transparent; font-size:13px; font-weight:500; color:var(--ct-ash); text-align:left; transition:background .12s, color .12s, border-color .12s; cursor:pointer; } /* UX2: the inline .navlink display:flex would otherwise beat Tailwind's .hidden (source order) — keep hidden nav items actually hidden. */ .navlink.hidden { display:none; } .navlink:hover { background:#fff; color:var(--ct-ink); } .navlink.nav-active { background:#fff; color:var(--ct-ink); border-left-color:var(--ct-blue); } .navlink.nav-active .nav-ico { color:var(--ct-blue); } .nav-ico { width:17px; height:17px; flex-shrink:0; color:var(--ct-stone); } .navlink:hover .nav-ico { color:var(--ct-ash); } .nav-badge { margin-left:auto; font-size:11px; background:rgba(35,87,217,.09); color:var(--ct-blue); border:1px solid rgba(35,87,217,.18); border-radius:9999px; padding:1px 7px; font-weight:700; } .nav-section { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ct-stone); padding:16px 12px 6px; } .page-hero { background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:22px; } .page-title { font-size:clamp(34px,5vw,64px); line-height:.98; font-weight:700; letter-spacing:0; color:var(--ct-ink); } .quiet-panel { background:#fff; border:1px solid var(--ct-rule); border-radius:8px; } .quiet-action { text-align:left; background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:16px; transition:border-color .12s, background .12s; } .quiet-action:hover { border-color:var(--ct-blue); background:#FCFCFB; } .primary-action { background:var(--ct-ink); color:var(--ct-paper); border-color:var(--ct-ink); } .primary-action:hover { background:var(--ct-charcoal); } .primary-action .text-stone, .primary-action .text-ash { color:#C9C0B6; } .screen { animation: fadeIn .2s ease-out; } /* Hidden screens must not run fadeIn. WebKit otherwise keeps the from-keyframe (opacity: 0) on the first show until a resize, so a fresh /brain load at 390px paints chrome only. */ .screen.hidden { animation: none; } /* ===== Chat ===== */ .chat-msg { max-width:82%; padding:11px 15px; border-radius:15px; font-size:14px; line-height:1.55; } .chat-user { background:var(--ct-ink); color:var(--ct-paper); border-bottom-right-radius:4px; } .chat-asst { background:var(--ct-cream); color:var(--ct-ink); border:1px solid var(--ct-rule); border-bottom-left-radius:4px; } .chat-asst h1,.chat-asst h2,.chat-asst h3 { font-family:'Neue Swiss',system-ui,sans-serif; font-weight:700; font-size:14px; margin:9px 0 4px; } .chat-asst ul { margin:4px 0; padding-left:18px; list-style:disc; } .chat-asst ol { margin:4px 0; padding-left:20px; list-style:decimal; } .chat-asst li { margin:2px 0; } .chat-asst strong { font-weight:700; color:var(--ct-ink); } .chat-asst p { margin:6px 0; } .chat-asst code { background:#E2DCD2; padding:1px 5px; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:12px; } .chat-asst table { border-collapse:collapse; width:100%; margin:8px 0; font-size:12.5px; } .chat-asst th, .chat-asst td { border:1px solid var(--ct-rule); padding:4px 9px; text-align:left; } .chat-asst th { background:#E2DCD2; font-weight:700; } .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--ct-stone); display:inline-block; animation:typing 1.2s infinite; } @keyframes typing { 0%,60%,100%{opacity:.25} 30%{opacity:1} } .suggestion { text-align:left; background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:11px 13px; font-size:13px; color:var(--ct-charcoal); transition:border-color .12s, background .12s; cursor:pointer; } .suggestion:hover { border-color:var(--ct-blue); background:var(--ct-cream); } /* ===== KPI + report cards ===== */ .kpi { background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:13px 14px; } .kpi .kpi-v { font-family:'Neue Swiss',system-ui,sans-serif; font-size:24px; line-height:1.05; color:var(--ct-ink); font-weight:500; } .kpi .kpi-l { font-size:11px; color:var(--ct-ash); margin-top:3px; } .heat-cell { min-width:0; border-radius:7px; padding:7px 9px; font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--ct-ink); } .report-combo-row { align-items:flex-start; } .report-combo-parts { display:flex; flex-wrap:wrap; gap:4px; min-width:0; } .report-combo-chip { max-width:100%; border:1px solid rgba(26,23,20,.12); background:rgba(248,246,241,.55); border-radius:6px; padding:2px 6px; font-size:11px; line-height:1.35; } .strategy-shell { background:#fff; border:1px solid var(--ct-rule); border-radius:8px; box-shadow:none; font-family:'Neue Swiss',system-ui,sans-serif; } .strategy-shell h2, .strategy-metric { font-family:'Neue Swiss',system-ui,sans-serif; letter-spacing:0; } .strategy-template { text-align:left; border:1px solid var(--ct-rule); background:var(--ct-paper); border-radius:8px; padding:10px 12px; min-height:86px; transition:border-color .12s, background .12s; } .strategy-template:hover, .strategy-template.strategy-template-active { border-color:var(--ct-blue); background:#fff; } .strategy-control { background:var(--ct-paper); border:1px solid var(--ct-rule); border-radius:8px; padding:8px 9px; font-size:12px; color:var(--ct-ink); min-width:0; } .strategy-matrix-wrap { overflow:auto; border:1px solid var(--ct-rule); border-radius:8px; background:var(--ct-paper); } .strategy-grid { display:grid; gap:1px; width:100%; min-width:0; background:var(--ct-rule); } .strategy-head, .strategy-row-head, .strategy-cell { background:#fff; } .strategy-head { padding:9px 10px; font-size:11px; font-weight:800; color:var(--ct-ash); text-transform:uppercase; letter-spacing:.05em; min-width:0; overflow-wrap:anywhere; } .strategy-row-head { padding:10px; font-size:13px; font-weight:700; color:var(--ct-ink); min-width:0; overflow-wrap:anywhere; } .strategy-cell { text-align:left; min-height:126px; padding:10px; display:flex; flex-direction:column; gap:8px; min-width:0; overflow-wrap:anywhere; } .strategy-cell.muted { opacity:.42; } .strategy-cell:hover { outline:2px solid rgba(35,87,217,.22); outline-offset:-2px; } .strategy-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-charcoal); } .strategy-dot { width:8px; height:8px; border-radius:999px; flex:0 0 auto; } .strategy-metric { font-size:24px; line-height:1; color:var(--ct-ink); font-weight:500; } .strategy-queue-item { width:100%; text-align:left; border:1px solid var(--ct-rule); background:var(--ct-paper); border-radius:9px; padding:10px; } .strategy-queue-item + .strategy-queue-item { margin-top:8px; } .strategist-briefs-grid .strategy-queue-item + .strategy-queue-item { margin-top:0; } .strategy-agent { background:#171511; color:var(--ct-paper); border-radius:10px; padding:14px; } .strategy-agent pre { white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; font-size:11px; line-height:1.45; } .analyst-table-wrap { overflow:auto; border:1px solid var(--ct-rule); border-radius:8px; background:#fff; } .analyst-table { width:100%; min-width:1120px; border-collapse:separate; border-spacing:0; font-size:12px; } .analyst-table th { position:sticky; top:0; z-index:1; background:#F8F5EF; border-bottom:1px solid var(--ct-rule); color:var(--ct-ash); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:800; text-align:left; padding:10px 11px; white-space:nowrap; } .analyst-table td { border-bottom:1px solid #F0EBE4; padding:9px 11px; color:var(--ct-charcoal); white-space:nowrap; vertical-align:middle; } .analyst-table tbody tr:hover td { background:rgba(35,87,217,.035); } .analyst-table .metric-good { color:var(--ct-green); font-weight:700; } .analyst-table .metric-watch { color:var(--ct-red); font-weight:700; } .metric-pill { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--ct-rule); border-radius:999px; padding:4px 8px; background:#fff; font-size:11px; color:var(--ct-charcoal); } .metric-pill-active { border-color:rgba(35,87,217,.35); background:rgba(35,87,217,.08); color:var(--ct-blue); } .brief-card, .brain-card { background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:14px; } .brain-card { min-height:116px; min-width:0; max-width:100%; } .brand-evidence-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); } .brand-evidence-grid, .brand-evidence-grid > * { min-width:0; } .brand-evidence-content { min-width:0; } .brand-evidence-name { margin:0; color:var(--ct-ink); font-size:14px; font-weight:500; line-height:1.35; white-space:normal; overflow-wrap:anywhere; word-break:normal; } .brand-evidence-source { margin:6px 0 0; min-width:0; color:var(--ct-ash); font-size:12px; line-height:1.45; white-space:normal; overflow-wrap:anywhere; word-break:normal; } .brand-evidence-source-label { margin-right:4px; color:var(--ct-stone); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .brain-chat { background:#fff; border:1px solid var(--ct-rule); border-radius:12px; padding:16px; } /* Brain owns five summary facts. Keep them as one deliberate band on desktop; the runtime-inserted Tailwind breakpoint class was not reliably generated and left Revenue orphaned in a half row. */ .brain-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; } /* Strategist chat is the primary task. Its empty thread used to reserve 260px before the suggestions/composer, while its useful secondary controls were rendered at 10px in the lightest text token. */ .strategist-thread { min-height:104px; } .strategist-empty { padding:18px; color:var(--ct-ash); font-size:14px; line-height:1.55; text-align:center; } .strategist-secondary-action { min-height:44px; padding:9px 10px; border-radius:7px; color:var(--ct-ash); font-size:12px; font-weight:600; } .strategist-secondary-action:hover { color:var(--ct-ink); background:var(--ct-cream); } .strategist-inline-action { display:inline-flex; min-height:44px; align-items:center; padding:0 4px; color:var(--ct-ash); font-size:12px; font-weight:600; line-height:1.4; } .strategist-inline-action:hover { color:var(--ct-ink); } #screen-chat, #strategistConversation, #strategistConversation > *, #chatFocusPanel, #strategistMetaSnapshot { min-width:0; max-width:100%; } #chatFocusSelect { min-width:0; max-width:100%; text-overflow:ellipsis; } .strategist-composer { min-width:0; max-width:100%; transition:border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .strategist-composer:focus-within { border-color:var(--ct-blue); box-shadow:0 0 0 3px rgba(35,87,217,.18); } .strategist-composer[data-chat-pending="true"] { opacity:.72; } #chatInput { width:100%; min-height:44px; } #chatSend { min-width:64px; min-height:44px; } #chatInput:disabled, #chatSend:disabled { cursor:wait; } #chatSend:disabled { opacity:.68; } .suggestion { min-height:44px; } .strategist-memory { min-width:0; max-width:100%; overflow:hidden; overflow-wrap:anywhere; color:var(--ct-charcoal); font-size:13px; line-height:1.5; } .strategist-memory-row { min-width:0; } .strategist-memory-row > :first-child { min-width:0; overflow-wrap:anywhere; } .strategist-memory-row > :last-child { flex:0 0 auto; white-space:nowrap; } .strategist-memory .text-stone { color:var(--ct-ash); } @media (max-width: 900px) { .brain-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .brain-kpi-grid > :last-child:nth-child(odd) { grid-column:1 / -1; } } @media (max-width: 480px) { .brain-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; } .brain-kpi-grid .kpi { min-width:0; padding:11px 12px; } .brain-kpi-grid .kpi-v { font-size:clamp(20px,6vw,24px); overflow-wrap:anywhere; } } .report-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .report-toolbar select, .report-toolbar input { background:var(--ct-paper); border:1px solid var(--ct-rule); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--ct-ink); } .status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* ---- Strategy toolbar + matrix spreadsheet (overhaul) ---- */ .ct-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ct-spacer { flex:1 1 auto; } .ct-seg { display:inline-flex; border:1px solid var(--ct-rule); border-radius:8px; overflow:hidden; background:var(--ct-paper); } .ct-seg-btn { padding:7px 12px; font-size:12px; font-weight:600; color:var(--ct-ash); background:transparent; } .ct-seg-btn.on { background:#fff; color:var(--ct-ink); box-shadow:inset 0 -2px 0 var(--ct-blue); } .ct-tool-btn { border:1px solid var(--ct-rule); background:#fff; border-radius:8px; padding:7px 11px; font-size:12px; font-weight:500; color:var(--ct-ink); } .ct-tool-btn:hover { border-color:var(--ct-blue); color:var(--ct-blue); } .ct-inline-field { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-stone); } .ct-inline-field select { text-transform:none; font-weight:500; letter-spacing:0; } .ct-chips { display:flex; flex-wrap:wrap; gap:6px; } .ct-chip { border:1px solid var(--ct-rule); background:var(--ct-paper); border-radius:999px; padding:5px 11px; font-size:12px; color:var(--ct-charcoal); } .ct-chip:hover { border-color:var(--ct-blue); color:var(--ct-blue); } /* Strategy toolbar on phones: stack every control into its own full-width row so nothing wedges into leftover space, and give each a ≥44px tap target. */ @media (max-width: 640px) { .ct-toolbar { flex-direction:column; align-items:stretch; gap:10px; } .ct-toolbar .ct-spacer { display:none; } .ct-seg { display:flex; } .ct-seg-btn { flex:1; padding:12px 12px; text-align:center; } .ct-inline-field { display:flex; justify-content:space-between; align-items:center; gap:12px; } .ct-inline-field > select { flex:1 1 auto; min-height:44px; } .ct-tool-btn { min-height:44px; padding:11px 14px; text-align:center; } } .strategy-warning { border:1px solid color-mix(in oklab, var(--color-amber) 22%, transparent); background:color-mix(in oklab, var(--color-amber) 8%, transparent); color:var(--ct-amber-ink); border-radius:8px; padding:8px 10px; font-size:12px; } /* UX2: larger, more legible strategy matrix — bigger cells, clearer heat + labels. */ /* ===== Strategy matrix — objective-aware five-band cells (matrix redesign §6/§12) ===== */ /* QA batch (2026-07-27) item 1: the wrap was already horizontally scrollable (206px of travel at 1440x900 on a typical matrix), but the scrollbar sat far below the fold and macOS overlay scrollbars render 0px thick, so a reviewer had no reachable affordance to discover the scroll at all. max-height pulls the bar onto screen; the ::-webkit-scrollbar rules defeat the overlay style so it's visible before the drag gesture starts. Not drag-to-pan — that's new interaction code, deliberately out of scope here. */ .ct-mx-wrap { overflow-x:auto; max-height:min(70vh, 620px); scrollbar-width:thin; overscroll-behavior-x:contain; } .ct-mx-wrap::-webkit-scrollbar { height:10px; width:10px; } .ct-mx-wrap::-webkit-scrollbar-thumb { background:#C9C4BA; border-radius:5px; } .ct-mx-wrap::-webkit-scrollbar-track { background:transparent; } .ct-mx { border-collapse:separate; border-spacing:0; width:100%; min-width:720px; font-size:13px; } .ct-mx th, .ct-mx td { border-bottom:1px solid var(--ct-rule); } .ct-mx thead th { border-bottom:1px solid var(--ct-ink); padding:0 10px 10px; } .ct-mx-corner { text-align:left; vertical-align:bottom; width:176px; min-width:150px; padding-left:0 !important; } .ct-mx-axis { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ct-stone); } .ct-mx-axis-x { display:block; font-size:11px; color:var(--ct-stone); padding:1px 0; } .ct-mx-colhead { font-size:13px; font-weight:600; color:var(--ct-ink); text-align:left; vertical-align:bottom; max-width:150px; line-height:1.25; } .ct-mx-rowhead { font-size:13px; font-weight:600; color:var(--ct-ink); text-align:left; padding:10px 16px 10px 0; width:176px; min-width:150px; line-height:1.3; vertical-align:middle; position:sticky; left:0; background:var(--ct-paper); z-index:2; } .ct-mx td { padding:0; vertical-align:middle; } .ct-mx-cell { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; width:100%; min-height:76px; min-width:96px; padding:12px 12px 11px; text-align:left; position:relative; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; transition:filter .12s ease; } .ct-mx-cell:hover { filter:brightness(.975); } .ct-mx-cell:focus-visible { outline:2px solid var(--ct-blue); outline-offset:-2px; border-radius:4px; } .ct-mx-cell.muted { opacity:.45; } .ct-mx-goal { display:flex; align-items:baseline; gap:5px; } .ct-mx-goal-label { font-size:11px; font-weight:600; letter-spacing:.05em; opacity:.75; } .ct-mx-goal-val { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; } .ct-mx-sub { font-size:12px; font-weight:500; color:var(--ct-ash); font-variant-numeric:tabular-nums; } .ct-mx-mixed { position:absolute; top:7px; right:9px; font-size:11px; color:var(--ct-ash); } /* Opportunity badge (additive; graded cells only) — kind-differentiated, reason in the title. Never changes the grade band or the cell sort. */ .ct-mx-opp { position:absolute; right:8px; bottom:7px; display:inline-flex; align-items:center; gap:3px; max-width:calc(100% - 16px); padding:1px 6px 1px 5px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1.5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:1px solid transparent; background:var(--ct-blue-tint); color:#1740A3; border-color:rgba(35,87,217,.28); } .ct-mx-opp-glyph { font-size:11px; line-height:1; } .ct-mx-opp.is-underfunded_winner { background:var(--ct-green-tint); color:#24633D; border-color:rgba(44,122,75,.3); } .ct-mx-opp.is-scale_signal { background:var(--ct-blue-tint); color:#1740A3; border-color:rgba(35,87,217,.28); } .ct-mx-opp.is-thin_winner { background:var(--ct-amber-tint); color:var(--ct-amber-ink); border-color:color-mix(in oklab, var(--color-amber) 32%, transparent); } .ct-opp-chip.is-on { background:var(--ct-ink); color:#fff; border-color:var(--ct-ink); } .ct-cellpanel-opp[hidden] { display:none; } .ct-cellpanel-opp { margin-top:9px; font-size:12px; line-height:1.5; color:var(--ct-charcoal); } .ct-cellpanel-opp .ct-mx-opp { position:static; margin-right:6px; vertical-align:middle; } .ct-mx-cell.is-winner { background:var(--band-winner-bg); } .ct-mx-cell.is-winner .ct-mx-goal { color:var(--band-winner-ink); } .ct-mx-cell.is-solid { background:var(--band-solid-bg); } .ct-mx-cell.is-solid .ct-mx-goal { color:var(--band-solid-ink); } .ct-mx-cell.is-mid { background:var(--band-mid-bg); } .ct-mx-cell.is-mid .ct-mx-goal { color:var(--band-mid-ink); } .ct-mx-cell.is-weak { background:var(--band-weak-bg); } .ct-mx-cell.is-weak .ct-mx-goal { color:var(--band-weak-ink); } .ct-mx-cell.is-loser { background:var(--band-loser-bg); } .ct-mx-cell.is-loser .ct-mx-goal { color:var(--band-loser-ink); } .ct-mx-cell.is-lowdata { background:var(--ct-cream); } .ct-mx-cell.is-lowdata .ct-mx-goal-val { color:var(--ct-stone); } .ct-mx-cell.is-lowdata .ct-mx-sub { color:var(--ct-stone); } .ct-mx-cell.is-objective-pending, .ct-mx-cell.is-ungraded { background:transparent; } .ct-mx-pending-label { color:var(--ct-charcoal); font-size:12px; font-weight:600; } .ct-mx-pending-cta { color:var(--ct-blue); font-size:11px; font-weight:600; } .ct-mx-cell.is-untested { align-items:center; justify-content:center; gap:2px; } .ct-mx-cell.is-untested::after { content:""; position:absolute; inset:6px; border:1.5px dashed var(--ct-rule); border-radius:8px; pointer-events:none; transition:border-color .12s ease, background .12s ease; } .ct-mx-gap-label { font-size:12px; font-weight:500; color:var(--ct-stone); } .ct-mx-gap-cta { font-size:12px; font-weight:600; color:var(--ct-blue); opacity:0; transition:opacity .12s ease; } .ct-mx-cell.is-untested:hover, .ct-mx-cell.is-untested:focus-visible { filter:none; } .ct-mx-cell.is-untested:hover::after, .ct-mx-cell.is-untested:focus-visible::after { border-color:var(--ct-blue); background:rgba(35,87,217,.07); } .ct-mx-cell.is-untested:hover .ct-mx-gap-cta, .ct-mx-cell.is-untested:focus-visible .ct-mx-gap-cta { opacity:1; } .ct-mx-addhead { vertical-align:bottom; width:44px; } .ct-mx-add { color:var(--ct-stone); font-size:15px; font-weight:500; line-height:1; border:1px dashed var(--ct-rule); background:transparent; border-radius:8px; padding:6px 10px; cursor:pointer; transition:all .12s ease; white-space:nowrap; } .ct-mx-add:hover, .ct-mx-add:focus-visible { color:var(--ct-blue); border-color:var(--ct-blue); background:var(--ct-blue-tint); } .ct-mx-addrow th { padding:12px 16px 12px 0; border-bottom:0; } .ct-mx-addrow td { border-bottom:0; } .ct-mx-addrow .ct-mx-add { font-size:12px; font-weight:600; } .ct-mx-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--ct-ash); } .ct-mx-legend .leg { display:inline-flex; align-items:center; gap:5px; } .ct-mx-legend .leg i { width:11px; height:11px; border-radius:3px; display:inline-block; } .ct-mx-legend .sw-winner { background:var(--band-winner-bg); border:1px solid var(--band-winner-ink); } .ct-mx-legend .sw-solid { background:var(--band-solid-bg); border:1px solid var(--band-solid-ink); } .ct-mx-legend .sw-mid { background:#fff; border:1px solid var(--ct-rule); } .ct-mx-legend .sw-weak { background:var(--band-weak-bg); border:1px solid var(--band-weak-ink); } .ct-mx-legend .sw-loser { background:var(--band-loser-bg); border:1px solid var(--band-loser-ink); } .ct-mx-legend .sw-low { background:var(--ct-cream); border:1px solid var(--ct-rule); } .ct-mx-legend .sw-gap { background:transparent; border:1.5px dashed var(--ct-stone); } .ct-mx-legend .sw-pending { background:transparent; border:1px solid var(--ct-stone); } .ct-mx-legend .legend-note { color:var(--ct-stone); } @media (max-width:768px) { .ct-mx-rowhead { box-shadow:2px 0 0 var(--ct-rule); } } @media print { .ct-mx-cell { print-color-adjust:exact; -webkit-print-color-adjust:exact; } .ct-cellpanel, .ct-cellpanel-scrim, .ct-addpop, .ct-mx-colresize, .ct-mx-rowresize, .ct-colchooser-menu { display:none !important; } } /* ===== Matrix interactions (drag-resize, sort, metric switch) ===== */ /* Fixed layout makes column widths authoritative (colgroup-driven) so a drag can set an exact width; the trailing spacer col absorbs slack and the pinned first column keeps its sticky-left offset while metrics scroll. Row height is a per-row CSS var with a stable fallback. */ .ct-mx { table-layout:fixed; --mx-row-h-default:76px; } .ct-mx-cell { min-height:var(--mx-row-h, var(--mx-row-h-default, 76px)); } .ct-mx-corner { position:sticky; left:0; z-index:3; background:var(--ct-paper); } /* Sortable column + row-label headers: the label is a real button so Enter/Space toggle the sort; the ⇅/▲/▼ indicator names the state (never color-only). Sorting only reorders rows — it never re-grades a cell. */ .ct-mx-sortbtn { display:inline-flex; align-items:center; gap:5px; width:100%; background:transparent; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; } .ct-mx-colhead .ct-mx-sortbtn { align-items:flex-end; } .ct-mx-sortbtn:hover { color:var(--ct-blue); } .ct-mx-sortbtn:focus-visible { outline:2px solid var(--ct-blue); outline-offset:2px; border-radius:3px; } .ct-mx-sortind { flex:0 0 auto; font-size:11px; line-height:1; color:var(--ct-stone); opacity:0; transition:opacity .12s ease; } .ct-mx-sortbtn:hover .ct-mx-sortind { opacity:.6; } .ct-mx-sortbtn[data-sort="asc"] .ct-mx-sortind, .ct-mx-sortbtn[data-sort="desc"] .ct-mx-sortind { opacity:1; color:var(--ct-blue); } /* Drag handles: wide invisible hit area on the column-right / row-bottom edge, with a hairline that inks on hover. Pointer-driven; keyboard resize is available via the header button's arrow keys. */ .ct-mx-colhead { position:relative; } .ct-mx-colresize { position:absolute; top:0; right:-5px; width:11px; height:100%; cursor:col-resize; z-index:4; touch-action:none; background:transparent; border:0; padding:0; } .ct-mx-colresize::after { content:""; position:absolute; top:18%; bottom:8px; left:4px; width:2px; border-radius:2px; background:transparent; transition:background .12s ease; } .ct-mx-colhead:hover .ct-mx-colresize::after, .ct-mx-colresize:hover::after, .ct-mx-colresize:focus-visible::after { background:var(--ct-blue); } .ct-mx-colresize:focus-visible { outline:2px solid var(--ct-blue); outline-offset:-2px; } /* QA batch item 1 coupling: giving .ct-mx-wrap a max-height makes overflow-y start to matter, surfacing this handle's 1px bleed past the row bottom as a stray vertical scrollbar. -4px keeps the handle inside the scroller's content box. */ .ct-mx-rowresize { position:absolute; left:0; right:0; bottom:-4px; height:11px; cursor:row-resize; z-index:4; touch-action:none; background:transparent; border:0; padding:0; } .ct-mx-rowresize::after { content:""; position:absolute; left:0; right:16px; top:4px; height:2px; border-radius:2px; background:transparent; transition:background .12s ease; } .ct-mx-rowhead:hover .ct-mx-rowresize::after, .ct-mx-rowresize:hover::after, .ct-mx-rowresize:focus-visible::after { background:var(--ct-blue); } .ct-mx-resizing, .ct-mx-resizing * { cursor:col-resize !important; user-select:none !important; } .ct-mx-resizing.is-row, .ct-mx-resizing.is-row * { cursor:row-resize !important; } /* View-controls toolbar row + column chooser dropdown. Dedicated classes (not .ct-inline-field / .ct-seg) so they never collide with the axis picker + view-toggle guards. */ .ct-toolbar-view { align-items:center; } .ct-view-field { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-stone); } .ct-view-field select { text-transform:none; font-weight:500; letter-spacing:0; } .ct-colchooser { position:relative; display:inline-block; } .ct-colchooser > summary { list-style:none; display:inline-flex; align-items:center; gap:6px; } .ct-colchooser > summary::-webkit-details-marker { display:none; } .ct-colchooser[open] > summary { border-color:var(--ct-blue); color:var(--ct-blue); } .ct-colchooser-menu { position:absolute; z-index:20; top:calc(100% + 6px); left:0; min-width:210px; background:var(--ct-paper); border:1px solid var(--ct-rule); border-radius:10px; box-shadow:0 14px 36px rgba(30,28,25,.16); padding:8px; max-height:280px; overflow:auto; } .ct-colchooser-item { display:flex; align-items:center; gap:9px; padding:7px 8px; font-size:12.5px; color:var(--ct-ink); border-radius:6px; cursor:pointer; } .ct-colchooser-item:hover { background:var(--ct-cream); } .ct-colchooser-item input { accent-color:var(--ct-blue); width:14px; height:14px; } .ct-colchooser-note { font-size:11px; color:var(--ct-stone); padding:6px 8px 2px; } @media (max-width:640px) { .ct-toolbar-view { flex-direction:column; align-items:stretch; } .ct-view-field { display:flex; justify-content:space-between; align-items:center; gap:12px; } .ct-view-field > select { flex:1 1 auto; min-height:44px; } .ct-colchooser, .ct-colchooser > summary { display:flex; justify-content:space-between; } .ct-colchooser-menu { left:0; right:0; } } /* Coverage strip (UX-19) — the matrix's honesty layer */ .ct-coverage { padding:12px 0 16px; border-bottom:1px solid var(--ct-rule); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .ct-coverage-bar { flex:1 1 200px; max-width:280px; height:5px; border-radius:999px; background:var(--ct-cream); overflow:hidden; } .ct-coverage-bar i { display:block; height:100%; background:var(--ct-blue); border-radius:999px; } .ct-coverage-text { font-size:13px; color:var(--ct-ash); font-variant-numeric:tabular-nums; } .ct-coverage-text b { color:var(--ct-ink); font-weight:600; } .ct-coverage-cta { font-size:13px; font-weight:600; color:var(--ct-blue); border:1px solid var(--ct-blue-tint); background:var(--ct-blue-tint); border-radius:999px; padding:5px 14px; cursor:pointer; } .ct-coverage-cta:hover { filter:brightness(.97); } /* Strategy inline stat row (replaces the 4-card summary grid) */ .ct-statrow { display:flex; gap:24px; flex-wrap:wrap; } .ct-statrow .stat { display:flex; align-items:baseline; gap:7px; } .ct-statrow .stat b { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; } .ct-statrow .stat span { font-size:11px; font-weight:600; color:var(--ct-stone); text-transform:uppercase; letter-spacing:.07em; } /* Cell drill-down side panel (§8) — replaces the inline drill + preview modal */ .ct-cellpanel-scrim { position:fixed; inset:0; background:rgba(30,28,25,.28); opacity:0; pointer-events:none; transition:opacity .16s ease; z-index:70; } .ct-cellpanel-scrim.open { opacity:1; pointer-events:auto; } .ct-cellpanel { position:fixed; top:0; right:0; bottom:0; width:420px; max-width:100vw; background:var(--ct-paper); border-left:1px solid var(--ct-rule); box-shadow:-16px 0 40px rgba(30,28,25,.10); z-index:71; display:flex; flex-direction:column; transform:translateX(102%); transition:transform .18s ease; visibility:hidden; } .ct-cellpanel.open { transform:translateX(0); visibility:visible; } .ct-cellpanel-head { position:relative; padding:24px 24px 16px; border-bottom:1px solid var(--ct-rule); } .ct-cellpanel-close { position:absolute; top:16px; right:16px; font-size:18px; color:var(--ct-stone); padding:4px 8px; border-radius:8px; background:transparent; border:0; cursor:pointer; } .ct-cellpanel-close:hover { color:var(--ct-ink); background:var(--ct-cream); } .ct-cellpanel-title { font-size:17px; font-weight:650; line-height:1.3; letter-spacing:-0.01em; padding-right:32px; outline:none; } .ct-cellpanel-meta { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; font-size:12px; color:var(--ct-ash); font-variant-numeric:tabular-nums; } .ct-grade-chip { font-size:11px; font-weight:650; border-radius:999px; padding:3px 10px; text-transform:capitalize; } .ct-cellpanel-bench { margin-top:8px; font-size:12.5px; color:var(--ct-ash); font-variant-numeric:tabular-nums; } .ct-cellpanel-bench b { color:var(--ct-ink); font-weight:600; } .ct-cellpanel-mixed { margin-top:8px; font-size:12px; color:var(--ct-ash); background:var(--ct-cream); border-radius:8px; padding:8px 10px; } .ct-cellpanel-body { flex:1; overflow-y:auto; padding:16px 24px; } .ct-cellpanel-foot { padding:16px 24px 24px; border-top:1px solid var(--ct-rule); display:flex; gap:8px; } .ct-drill-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--ct-rule); } .ct-drill-item:last-child { border-bottom:0; } .ct-drill-thumb { width:44px; height:44px; flex:0 0 44px; border-radius:8px; background:var(--ct-cream); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:650; color:var(--ct-stone); letter-spacing:.04em; border:1px solid var(--ct-rule); overflow:hidden; cursor:pointer; padding:0; } .ct-drill-thumb img, .ct-drill-thumb video { width:100%; height:100%; object-fit:cover; } .ct-drill-mid { flex:1; min-width:0; } .ct-drill-name { display:block; max-width:100%; font-size:12.5px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; background:transparent; border:0; padding:0; font-family:inherit; color:inherit; text-align:left; } .ct-drill-name:hover { color:var(--ct-blue); } .ct-drill-metrics { font-size:12px; color:var(--ct-ash); font-variant-numeric:tabular-nums; margin-top:1px; } .ct-drill-decide { display:inline-flex; border:1px solid var(--ct-rule); border-radius:8px; overflow:hidden; flex:0 0 auto; } .ct-drill-decide button { font-size:11px; font-weight:600; padding:5px 8px; color:var(--ct-stone); background:transparent; border:0; border-right:1px solid var(--ct-rule); cursor:pointer; } .ct-drill-decide button:last-child { border-right:0; } .ct-drill-decide button:hover { color:var(--ct-ink); background:var(--ct-cream); } .ct-drill-decide button.is-on.is-keep { background:var(--ct-green-tint); color:var(--ct-green); } .ct-drill-decide button.is-on.is-iterate { background:var(--ct-amber-tint); color:var(--ct-amber-ink); } .ct-drill-decide button.is-on.is-kill { background:var(--ct-red-tint); color:var(--ct-red); } .ct-evidence-row { display:flex; gap:8px; margin:6px 0 2px; } @media (max-width:768px) { .ct-cellpanel { width:100vw; } } /* +Add value popover (UX-22) */ .ct-addpop { position:fixed; z-index:75; width:300px; background:var(--ct-paper); border:1px solid var(--ct-rule); border-radius:14px; padding:18px; box-shadow:0 16px 48px rgba(30,28,25,.16); display:none; } .ct-addpop.open { display:block; } .ct-addpop h3 { font-size:13px; font-weight:650; margin-bottom:12px; } .ct-addpop label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-stone); margin:10px 0 4px; } .ct-addpop label:first-of-type { margin-top:0; } .ct-addpop input, .ct-addpop textarea { width:100%; font:inherit; font-size:13px; color:var(--ct-ink); background:#fff; border:1px solid var(--ct-rule); border-radius:8px; padding:7px 10px; } .ct-addpop input:focus, .ct-addpop textarea:focus { outline:2px solid var(--ct-blue); outline-offset:-1px; } .ct-addpop .counter { float:right; text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; } .ct-addpop .fine { font-size:11px; color:var(--ct-stone); margin-top:10px; line-height:1.5; } @media (max-width:640px) { .ct-addpop { left:16px !important; right:16px; width:auto; top:auto !important; bottom:16px; } } .ct-vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (prefers-reduced-motion: reduce) { .ct-cellpanel, .ct-cellpanel-scrim, .ct-mx-cell, .ct-mx-gap-cta, .ct-mx-cell.is-untested::after { transition:none; } .skeleton { animation:none; } } /* UX2: centered popup modal used by the creative report + matrix cell preview. Guard on :not(.hidden) so the inline