/* Ingenee — prototype stylesheet. build: 2026-06-16T1645 */ /* Ingenee — prototype stylesheet. * * Imports the design tokens and implements every component from * ../components.md as a real, usable HTML/CSS primitive. * Light is the default theme; switches. */ @import url('tokens.css'); /* Reset */ *,*::before,*::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } /* Typography utilities */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; } .muted { color: var(--ink-3); } .subtle { color: var(--ink-2); } .t-xs { font-size: 11px; } .t-sm { font-size: 12px; } .t-md { font-size: 13px; } .t-lg { font-size: 16px; font-weight: 600; } .t-xl { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .t-2xl { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } /* Layout: top nav + sidebar + main */ .app { min-height: 100vh; display: grid; grid-template-rows: 48px 1fr; grid-template-columns: 240px 1fr; grid-template-areas: "topnav topnav" "sidebar main"; } .app[data-impersonating="true"] { grid-template-rows: 36px 48px 1fr; grid-template-areas: "impban impban" "topnav topnav" "sidebar main"; } /* ── Impersonation band ─────────────────────────────────────── */ .impban { grid-area: impban; background: var(--st-error); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-family: var(--font-mono); font-size: 13px; } .impban .btn { background: rgba(255,255,255,0.18); color: white; border-color: rgba(255,255,255,0.3); } /* ── Top nav ────────────────────────────────────────────────── */ .topnav { grid-area: topnav; background: var(--surface-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 16px; gap: 16px; z-index: 50; } .topnav .wordmark { font-weight: 700; letter-spacing: -0.025em; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; text-decoration: none; } .topnav .wordmark:hover { text-decoration: none; } .topnav .wordmark .mark { width: 24px; height: 24px; display: inline-block; } .topnav .org-switcher { color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-s); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: -0.01em; transition: background 120ms ease; } .topnav .org-switcher:hover { background: var(--surface-2); color: var(--ink); } .topnav .org-switcher .org-sw-logo { display: inline-flex; width: 22px; height: 22px; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,0.18); margin-right: 8px; } .topnav .org-switcher .org-sw-logo svg { display: block; } .topnav .primary-nav { display: flex; gap: 4px; margin-left: 24px; } .topnav .primary-nav a { color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-s); position: relative; } .topnav .primary-nav a:hover { background: var(--surface-2); text-decoration: none; } .topnav .primary-nav a.active { color: var(--ink); } .topnav .primary-nav a.active::after { content: ""; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: var(--accent); } .topnav .spacer { flex: 1; } .topnav .cmd-btn { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 120ms ease, border-color 120ms ease; } .topnav .cmd-btn:hover { background: var(--surface-3); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .topnav .icon-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; position: relative; } .topnav .icon-btn:hover { background: var(--surface-2); color: var(--ink); } .topnav .icon-btn .badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px; background: var(--st-review); color: white; font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); } .topnav .avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; } /* Trial banner under nav */ .trialban { background: var(--accent-soft); color: var(--ink); padding: 6px 16px; font-size: 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); grid-column: 1 / -1; } /* ── Sidebar ────────────────────────────────────────────────── */ .sidebar { grid-area: sidebar; background: var(--surface-2); border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; } .sidebar .primary-action { width: 100%; margin-bottom: 12px; } .sidebar .section { margin-top: 8px; } .sidebar .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 8px 8px 4px; font-weight: 600; } /* Collapsible sections — click the label to fold/unfold; state persists. */ .sidebar .section.collapsible > .section-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; user-select: none; border-radius: var(--r-s); transition: background 120ms ease, color 120ms ease; } .sidebar .section.collapsible > .section-label:hover { background: var(--surface-3); color: var(--ink-2); } .sidebar .section.collapsible > .section-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sidebar .section.collapsible > .section-label .sec-chev { font-size: 10px; line-height: 1; color: var(--ink-3); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; } .sidebar .section.collapsible.collapsed > .section-label .sec-chev { transform: rotate(-90deg); } .sidebar .section.collapsible > :not(.section-label) { transition: opacity 140ms ease; } .sidebar .section.collapsible.collapsed > :not(.section-label) { display: none; } .sidebar .nav-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: var(--r-s); color: var(--ink-2); margin: 1px 0; font-size: 13px; cursor: pointer; } .sidebar .nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .sidebar .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar .nav-item .count { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; } .sidebar .nav-item.active .count { color: var(--accent); } .sidebar .nav-item .count.review { color: var(--st-review); } .sidebar hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; } .sidebar .saved-views { padding-left: 8px; } .sidebar .saved-views .nav-item { font-size: 12px; padding: 4px 8px; } /* ── Main ──────────────────────────────────────────────────── */ .main { grid-area: main; overflow: auto; } .page { padding: 24px 28px; max-width: 1600px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .page-header > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .page-header h1 { margin: 0; line-height: 1.15; } .page-header h1.t-2xl + .page-sub { margin-top: 0; } .page-header .actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .page-sub { color: var(--ink-2); font-size: 13px; margin: 0; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .page-sub > * { margin: 0; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; text-decoration: none; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn-primary { background: var(--accent); color: white; border-color: var(--accent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); } .btn-danger { background: var(--st-error); color: white; border-color: var(--st-error); } .btn-danger:hover { background: color-mix(in srgb, var(--st-error) 88%, black); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } .btn-sm { padding: 4px 8px; font-size: 12px; } .btn-lg { padding: 8px 16px; font-size: 14px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; padding: 1px 4px; border: 1px solid var(--line-soft); border-radius: 3px; } .btn-primary .kbd { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); } /* Split-button */ .btn-split { display: inline-flex; } .btn-split .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); } .btn-split .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; padding: 6px 8px; } /* ── Chips ─────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-draft); } .chip.draft::before { background: var(--st-draft); } .chip.enriched::before { background: var(--st-enriched); } .chip.enriched { color: var(--st-enriched); } .chip.review::before { background: var(--st-review); } .chip.review { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); } .chip.approved::before { background: var(--st-approved); } .chip.approved { color: var(--st-approved); } .chip.scheduled::before { background: var(--st-scheduled); } .chip.scheduled { color: var(--st-scheduled); } .chip.live { color: var(--ink); font-weight: 600; } .chip.live::before { background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } .chip.error { background: var(--st-error); color: white; border-color: var(--st-error); } .chip.error::before { background: white; } .chip.paused::before { background: var(--ink-3); } .chip.expired { background: var(--st-error); color: white; border-color: var(--st-error); } .chip.expired::before { background: white; } .chip-row { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* Policy tags */ .pol { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--r-s); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .pol.auto { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } .pol.review { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); } .pol.human { background: color-mix(in srgb, var(--st-error) 14%, transparent); color: var(--st-error); } .pol.readthrough { background: color-mix(in srgb, var(--st-error) 14%, transparent); color: var(--st-error); } /* Confidence meter */ .conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; } .conf .bar { display: inline-flex; gap: 2px; } .conf .bar i { width: 4px; height: 10px; border-radius: 1px; background: var(--surface-3); display: block; } .conf.hi .bar i { background: var(--ai); } .conf.mid .bar i:nth-child(-n+2) { background: var(--ink-3); } .conf.lo .bar i:nth-child(1) { background: var(--st-review); } .conf.lo { color: var(--st-review); } /* Provenance */ .prov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); } .prov.ai { color: var(--ai); } .prov.ai::before { content: "⬡"; } .prov.human::before { content: "👤"; font-size: 10px; } /* ── Data grid ─────────────────────────────────────────────── */ .dgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface-1); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); } .dgrid th, .dgrid td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .dgrid th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); position: sticky; top: 0; font-size: 12px; } .dgrid th.right, .dgrid td.right { text-align: right; } .dgrid th.center, .dgrid td.center { text-align: center; } .dgrid tbody tr { cursor: pointer; } .dgrid tbody tr:hover { background: var(--surface-2); } .dgrid tbody tr.selected { background: var(--accent-soft); } .dgrid tbody tr:last-child td { border-bottom: 0; } .dgrid td.mono, .dgrid th.mono { font-family: var(--font-mono); font-size: 12px; } .dgrid input[type="checkbox"] { margin: 0; } .dgrid .col-check { width: 32px; padding-right: 0; } .dgrid .dim { color: var(--ink-3); } .dgrid .strike { text-decoration: line-through; color: var(--ink-3); } /* Compact density */ .dgrid.compact th, .dgrid.compact td { padding: 6px 10px; } .dgrid.ultra th, .dgrid.ultra td { padding: 4px 8px; font-size: 12px; } /* ── Filter bar ────────────────────────────────────────────── */ .filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .filterbar .grow { flex: 1; } .filterbar .pickr { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink-2); cursor: pointer; } .filterbar .pickr:hover { background: var(--surface-2); color: var(--ink); } .filterbar .pickr::after { content: "▾"; font-size: 10px; color: var(--ink-3); } .filterbar input[type="search"] { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); width: 240px; } .filterbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* ── Loud counter strip ────────────────────────────────────── */ .loudstrip { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .loudstrip .item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-size: 13px; } .loudstrip .item:hover { background: var(--surface-2); } .loudstrip .item .count { font-family: var(--font-mono); font-weight: 600; } .loudstrip .item.review { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); } .loudstrip .item.review .count { color: var(--st-review); } .loudstrip .item.error { border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); } .loudstrip .item.error .count { color: var(--st-error); } /* ── Tiles (3-up dashboard stat tiles) ─────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; cursor: pointer; } .tile:hover { background: var(--surface-2); } .tile .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .tile .value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); margin: 8px 0 4px; letter-spacing: -0.02em; } .tile .delta { font-family: var(--font-mono); font-size: 12px; } .tile .delta.up { color: var(--st-approved); } .tile .delta.down { color: var(--st-error); } .tile .delta.flat { color: var(--ink-3); } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; margin-bottom: 12px; } .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-h h3 { margin: 0; font-size: 14px; font-weight: 600; } .card .row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; } .card .row + .row { border-top: 1px solid var(--line-soft); } .adaptergrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .adapter-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; } .adapter-card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; } .adapter-card .desc { color: var(--ink-3); font-size: 12px; margin-bottom: 10px; } .adapter-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-bottom: 10px; } .adapter-card .actions { display: flex; gap: 6px; } /* ── Banners ───────────────────────────────────────────────── */ .banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-m); margin-bottom: 16px; font-size: 13px; } .banner.error { background: color-mix(in srgb, var(--st-error) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--ink); } .banner.review { background: color-mix(in srgb, var(--st-review) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); color: var(--ink); } .banner.info { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--ink); } .banner .glyph { font-family: var(--font-mono); font-weight: 700; } .banner.error .glyph { color: var(--st-error); } .banner.review .glyph { color: var(--st-review); } .banner .grow { flex: 1; } /* ── Inspector / drawer / modal ───────────────────────────── */ .scrim { position: fixed; inset: 0; background: rgba(15, 20, 30, 0.4); z-index: 60; display: none; } .scrim.open { display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 66vw); background: var(--surface-1); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 70; overflow-y: auto; box-shadow: -16px 0 32px rgba(0,0,0,0.06); } .drawer.open { transform: translateX(0); } .drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-1); z-index: 1; } .drawer-h h2 { margin: 0; font-size: 16px; font-weight: 600; } .drawer-body { padding: 16px 20px; } .drawer-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface-1); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 16px)); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 80px rgba(0,0,0,0.18); width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; z-index: 70; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1); } .modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; } .modal.wide { width: min(880px, 92vw); } .modal-h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .modal-h h2 { margin: 0; font-size: 16px; font-weight: 600; } .modal-body { padding: 16px 20px; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; } .close-btn { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .close-btn:hover { background: var(--surface-2); color: var(--ink); } /* ── Inspector .field ──────────────────────────────────────── */ .field { display: grid; grid-template-columns: 140px 1fr 180px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; } .field .lab { color: var(--ink-3); font-size: 12px; padding-top: 2px; } .field .val { font-size: 13px; } .field .val .old { text-decoration: line-through; color: var(--ink-3); display: block; font-size: 12px; } .field .val .new { color: var(--ink); border-left: 2px solid var(--ai); padding-left: 8px; margin-top: 4px; display: block; font-size: 13px; } .field .meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .field .meta .row1 { display: inline-flex; gap: 6px; align-items: center; } .field .acts { display: inline-flex; gap: 4px; margin-top: 4px; } .field.locked .val .new { border-left-color: var(--ink-3); color: var(--ink-2); } .field.locked .lock { color: var(--ink-3); font-size: 12px; } .field.genprose .val .new { border-left-color: var(--st-review); background: color-mix(in srgb, var(--st-review) 4%, transparent); padding: 8px 12px; border-radius: var(--r-s); } /* ── Storefront preview ───────────────────────────────────── */ .preview-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-1); } .tv-canvas { background: #0a0d12; color: white; padding: 24px; min-height: calc(100vh - 96px); } .tv-hero { aspect-ratio: 21/9; background: linear-gradient(135deg, #1a2436 0%, #2a3a5c 100%); border-radius: var(--r-l); margin-bottom: 24px; display: flex; align-items: flex-end; padding: 32px; } .tv-hero .hero-title { font-size: 36px; font-weight: 700; max-width: 50%; } .tv-shelf { margin-bottom: 24px; } .tv-shelf-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; } /* Lane = wrapper around the horizontally-scrolling tiles + chevron buttons. */ .tv-lane { position: relative; } .tv-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 2px 4px; scrollbar-width: none; -ms-overflow-style: none; } .tv-tiles::-webkit-scrollbar { display: none; } /* Chevron scroll buttons — only way to traverse since we hide the scrollbar. Fade-in/out is driven by JS that watches scrollLeft vs scrollWidth. */ .tv-scroll { position: absolute; top: 0; bottom: 0; width: 48px; border: 0; background: transparent; color: white; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 180ms ease, background 140ms ease; } .tv-scroll.prev { left: -4px; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 60%, transparent 100%); border-top-left-radius: var(--r-s); border-bottom-left-radius: var(--r-s); } .tv-scroll.next { right: -4px; background: linear-gradient(-90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 60%, transparent 100%); border-top-right-radius: var(--r-s); border-bottom-right-radius: var(--r-s); } .tv-scroll:hover { background-color: rgba(255,255,255,0.04); } .tv-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .tv-tile { flex: 0 0 220px; aspect-ratio: 16/9; background: #1a2436 center/cover no-repeat; border-radius: var(--r-s); position: relative; cursor: pointer; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease; } .tv-tile:hover { transform: scale(1.04); box-shadow: 0 4px 20px rgba(0,0,0,0.5); outline: 2px solid var(--accent); } .tv-tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%); color: white; } .tv-tile-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-tile-meta { font-size: 10px; color: rgba(255,255,255,0.75); margin-top: 2px; } /* Hero polish */ .tv-hero { position: relative; aspect-ratio: 21/9; border-radius: var(--r-l); margin-bottom: 24px; overflow: hidden; background: #0a0d12; } .tv-hero .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; } .tv-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 40%, transparent 80%); } .tv-hero .hero-content { position: relative; z-index: 1; padding: 36px 40px; max-width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .tv-hero .hero-tag { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .tv-hero .hero-title { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .tv-hero .hero-meta { font-size: 12px; color: rgba(255,255,255,0.7); } .tv-hero .hero-desc { font-size: 14px; color: rgba(255,255,255,0.85); max-width: 540px; line-height: 1.5; } .tv-hero .hero-acts { display: flex; gap: 8px; margin-top: 6px; } .btn-ghost-on-dark { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.3); } .btn-ghost-on-dark:hover { background: rgba(255,255,255,0.2); } /* ── Hero rotating banner — used on storefront-preview.html ───────────────── */ .tv-hero-slider { position: relative; aspect-ratio: 21/9; border-radius: var(--r-l); margin-bottom: 24px; overflow: hidden; background: #0a0d12; } .tv-hero-slider .hero-slides { position: absolute; inset: 0; } .tv-hero-slider .hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity 600ms ease, transform 800ms ease; pointer-events: none; } .tv-hero-slider .hero-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; } .tv-hero-slider .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; } .tv-hero-slider .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 40%, transparent 80%); } .tv-hero-slider .hero-content { position: relative; z-index: 1; padding: 36px 40px; max-width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: white; } .tv-hero-slider .hero-tag { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .tv-hero-slider .hero-title { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .tv-hero-slider .hero-meta { font-size: 12px; color: rgba(255,255,255,0.7); } .tv-hero-slider .hero-desc { font-size: 14px; color: rgba(255,255,255,0.85); max-width: 540px; line-height: 1.5; } .tv-hero-slider .hero-acts { display: flex; gap: 8px; margin-top: 6px; } /* Chevron nav + dots + pause */ .tv-hero-slider .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: white; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; transition: background 140ms ease, opacity 140ms ease; opacity: 0; } .tv-hero-slider:hover .hero-nav { opacity: 1; } .tv-hero-slider .hero-nav:hover { background: rgba(0,0,0,0.7); } .tv-hero-slider .hero-nav.prev { left: 16px; } .tv-hero-slider .hero-nav.next { right: 16px; } .tv-hero-slider .hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .tv-hero-slider .hero-dot { width: 28px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,0.35); padding: 0; cursor: pointer; transition: background 200ms ease, width 200ms ease; } .tv-hero-slider .hero-dot.active { background: white; width: 36px; } .tv-hero-slider .hero-dot:hover { background: rgba(255,255,255,0.6); } .tv-hero-slider .hero-pause { position: absolute; bottom: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: white; font-size: 12px; cursor: pointer; z-index: 3; transition: background 140ms ease, opacity 140ms ease; opacity: 0; } .tv-hero-slider:hover .hero-pause { opacity: 1; } .tv-hero-slider .hero-pause:hover { background: rgba(0,0,0,0.7); } /* Shelf title accents */ .tv-shelf-title .shelf-pill { display: inline-block; margin-left: 8px; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.1); font-weight: 600; vertical-align: middle; } .tv-shelf-title .shelf-pill.ai { background: color-mix(in srgb, var(--ai) 30%, transparent); color: var(--ai); } .tv-shelf-title .shelf-pill.spo { background: rgba(255,255,255,0.16); } /* ── Schedule timeline .tl ────────────────────────────────── */ .tl-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } .tl-recon { display: flex; gap: 12px; padding: 6px 16px; background: var(--surface-1); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); } .tl-day { border-bottom: 1px solid var(--line); } .tl-day-h { padding: 8px 16px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: var(--surface-2); display: flex; gap: 12px; } .tl-ruler { position: relative; height: 28px; border-bottom: 1px solid var(--line-soft); display: flex; padding: 0 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .tl-ruler .tick { flex: 1; border-left: 1px solid var(--line-soft); padding-left: 4px; padding-top: 8px; } .tl-ruler .tick:first-child { border-left: 0; } .tl-lane { position: relative; height: 64px; display: flex; padding: 4px 16px; gap: 1px; border-bottom: 1px solid var(--line-soft); } .tl-lane.cuelane { height: 18px; padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, var(--st-review) 4%, var(--surface-1)); border-bottom: 1px solid var(--line); } .tl-lane.cuelane .cue { width: 8px; align-self: center; height: 12px; background: var(--st-review); border-radius: 1px; cursor: pointer; } .tl-prog { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 10px; font-size: 11px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; overflow: hidden; } .tl-prog:hover { border-color: var(--accent); } .tl-prog .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-prog .ptc { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; } .tl-prog.avail { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); } .tl-prog.gap { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--st-error) 14%, var(--surface-1)) 0 6px, var(--surface-1) 6px 12px); border-color: color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--st-error); } .tl-prog.aif { background: transparent; border: 1px dashed var(--ai); color: var(--ai); } .tl-prog.live { box-shadow: inset 0 0 0 2px var(--st-live); } .tl-watershed { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ai); pointer-events: none; } /* ── Rail row .railrow ───────────────────────────────────── */ .railrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); margin-bottom: 6px; cursor: pointer; } .railrow:hover { background: var(--surface-2); } .railrow.selected { background: var(--accent-soft); border-color: var(--accent); } .railrow .drag { color: var(--ink-3); cursor: grab; } .railrow .name { font-weight: 500; } .railrow .badge { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-s); text-transform: uppercase; font-weight: 700; } .railrow .badge.pin { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .railrow .badge.spn { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } .railrow .why { font-size: 11px; color: var(--ink-3); margin-left: auto; max-width: 240px; } .railrow .perf { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .railrow .perf.low { color: var(--st-review); } .railrow .tilestrip { display: flex; gap: 2px; } .railrow .tilestrip .t { width: 24px; height: 14px; background: var(--surface-3); border-radius: 2px; } .railrow .pos { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); width: 18px; text-align: right; } /* ── Bulk row .bulk ───────────────────────────────────────── */ .bulk-grp { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 14px; overflow: hidden; } .bulk-grp-h { padding: 10px 14px; background: var(--surface-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); } .bulk-row { display: grid; grid-template-columns: 1fr 80px 160px 200px; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-soft); align-items: center; } .bulk-row .desc { font-size: 13px; } .bulk-row .cnt { font-family: var(--font-mono); font-weight: 600; } .bulk-row.error { background: color-mix(in srgb, var(--st-error) 4%, transparent); } .bulk-row .acts { display: flex; gap: 6px; } /* ── Form controls ─────────────────────────────────────────── */ label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); width: 100%; font-size: 13px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .form-row { margin-bottom: 12px; } .form-row.inline { display: flex; gap: 12px; align-items: center; } .form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 16px; align-items: center; } .form-grid label { margin: 0; } .radiocard { display: flex; flex-direction: column; gap: 8px; } .radiocard label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; } .radiocard label:hover { background: var(--surface-2); } .radiocard input { margin-top: 2px; } .helper { font-size: 11px; color: var(--ink-3); margin-top: 4px; } /* ── Empty / error states ──────────────────────────────────── */ .empty { text-align: center; padding: 64px 24px; border: 2px dashed var(--line); border-radius: var(--r-l); background: var(--surface-1); } .empty .ctx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .empty .msg { font-size: 16px; color: var(--ink); margin-bottom: 12px; } .empty .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; } .empty .acts { display: flex; gap: 8px; justify-content: center; } /* ── Toasts ────────────────────────────────────────────────── */ .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 80; max-width: 360px; } .toast { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; } .toast .undo { color: var(--accent); font-weight: 500; cursor: pointer; } /* ── Two-column layouts ───────────────────────────────────── */ .col2 { display: grid; grid-template-columns: 360px 1fr; gap: 16px; } .col3 { display: grid; grid-template-columns: 280px 1fr 320px; gap: 16px; } .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } /* ── Command palette ──────────────────────────────────────── */ .cmdk { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); width: min(640px, 92vw); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 80px rgba(0,0,0,0.16); z-index: 80; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 200ms ease; } .cmdk.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cmdk input { border: 0; padding: 16px; background: transparent; font-size: 14px; } .cmdk input:focus { outline: 0; } .cmdk .group { padding: 8px 0; border-top: 1px solid var(--line-soft); } .cmdk .group-label { padding: 4px 16px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; } .cmdk .item { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px; cursor: pointer; } .cmdk .item:hover, .cmdk .item.focused { background: var(--accent-soft); color: var(--accent); } .cmdk .item .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: auto; } /* ── Auth pages ────────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; } .auth-card { width: 100%; max-width: 360px; } .auth-wordmark { text-align: center; margin-bottom: 32px; } .auth-wordmark img, .auth-wordmark svg { height: 64px; display: block; margin: 0 auto; } .auth-card form { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .auth-card form h2 { margin: 0 0 16px; font-size: 18px; } .auth-sub { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ink-3); } /* ── Misc ──────────────────────────────────────────────────── */ hr.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } .spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 999px; animation: spin 800ms linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: var(--ink-2); } .stat { display: inline-flex; align-items: baseline; gap: 6px; } .stat .num { font-family: var(--font-mono); font-weight: 600; font-size: 18px; } .stat .lab { color: var(--ink-3); font-size: 12px; } /* Progress bars */ .pbar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; position: relative; } .pbar .fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .pbar .fill.review { background: var(--st-review); } .pbar .fill.error { background: var(--st-error); } .pbar .fill.running::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.4s ease-in-out infinite; } /* ── Animation library ─────────────────────────────────────────── */ /* Page-load: every page fades + slides in subtly */ .main { animation: pageEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Topnav fade-in */ .topnav, .sidebar { animation: chromeEnter 240ms ease-out both; } @keyframes chromeEnter { from { opacity: 0; } to { opacity: 1; } } /* Shimmer for loading + skeleton + running bars */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skeleton-load 1.4s ease-in-out infinite; border-radius: var(--r-s); height: 14px; } @keyframes skeleton-load { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Button press feedback */ .btn { transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease; } .btn:active { transform: scale(0.97); } .btn-primary { box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent); } .btn-primary:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(0,0,0,0.08); } .btn-primary:active { box-shadow: 0 0 0 rgba(0,0,0,0); } .btn-danger { box-shadow: 0 1px 3px color-mix(in srgb, var(--st-error) 30%, transparent); } .btn-danger:hover { box-shadow: 0 2px 6px color-mix(in srgb, var(--st-error) 40%, transparent); } /* Card hover lift */ .card, .adapter-card, .tile { transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .tile:hover, .adapter-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .screen-card { transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .screen-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); } /* Sidebar item — slide in active accent */ .sidebar .nav-item { position: relative; transition: background 160ms ease, color 160ms ease, padding 160ms ease; } .sidebar .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent); border-radius: 0 2px 2px 0; } .sidebar .nav-item:hover { padding-left: 10px; } .sidebar .nav-item.active:hover { padding-left: 8px; } /* Sidebar icon support */ .sidebar .nav-item .ic { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; } .sidebar .nav-item.active .ic { opacity: 1; } .sidebar .nav-item { display: flex; align-items: center; gap: 8px; } .sidebar .nav-item .label { flex: 1; } /* Topnav icon polish */ .topnav .primary-nav a { display: inline-flex; align-items: center; gap: 6px; transition: color 160ms ease, background 160ms ease; } .topnav .primary-nav a .ic { width: 14px; height: 14px; opacity: 0.7; } .topnav .primary-nav a.active .ic { opacity: 1; color: var(--accent); } .topnav .primary-nav a:hover .ic { opacity: 1; } /* Inline icon helper */ .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; } /* Force SVG sprite icons to render as outlined glyphs. Some browsers don't inherit fill="none" from down to shadow tree, which made icons appear as solid filled shapes (or invisible in light theme). */ .ic, .ic * { fill: none; stroke: currentColor; } .ic [fill="currentColor"] { fill: currentColor; stroke: none; } .ic [fill="none"] { fill: none; } .ic [stroke="none"] { stroke: none; } .ic circle[r="2"] { fill: currentColor; stroke: none; } .ic circle[fill="currentColor"], .ic rect[fill="currentColor"], .ic path[fill="currentColor"] { fill: currentColor; } /* Topnav action icons — make them visible + always at a clear stroke weight */ .topnav .icon-btn { color: var(--ink); } .topnav .icon-btn:hover { color: var(--accent); background: var(--surface-2); } .topnav .icon-btn .ic { width: 20px; height: 20px; } .topnav .icon-btn .ic, .topnav .icon-btn .ic * { fill: none; stroke: currentColor; stroke-width: 2; } .topnav .icon-btn .ic [fill="currentColor"], .topnav .icon-btn .ic circle[r="2"], .topnav .icon-btn .ic circle[r="0.8"] { fill: currentColor; stroke: none; } /* The assistant (Ingenee AI) button — always teal */ .topnav .copilot-btn { color: var(--ai); } .topnav .copilot-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); } .topnav .copilot-btn .ic { width: 20px; height: 20px; } .topnav .copilot-btn .ic, .topnav .copilot-btn .ic * { stroke: var(--ai); } .topnav .copilot-btn .ic [fill="currentColor"], .topnav .copilot-btn .ic circle[r="2"] { fill: var(--ai); } .ic-sm { width: 12px; height: 12px; vertical-align: -2px; } .ic-lg { width: 20px; height: 20px; vertical-align: -4px; } /* Click ripple */ .btn, .nav-item, .pickr, .chip, .railrow, .tile, .adapter-card, .severity-tile, .gate-row { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 999px; pointer-events: none; transform: scale(0); animation: ripple 600ms ease-out; background: currentColor; opacity: 0.18; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } /* Drawer + modal — smoother spring */ .drawer { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .modal { transition: opacity 160ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .scrim { transition: opacity 200ms ease; opacity: 0; } .scrim.open { opacity: 1; } /* Command palette polish */ .cmdk { transition: opacity 140ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(-50%) translateY(-12px); } .cmdk.open { transform: translateX(-50%) translateY(0); } .cmdk input { width: 100%; } /* Toast slide-in (right) */ .toast { animation: toastIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: bottom right; } .toast.leaving { animation: toastOut 220ms ease-in both; } @keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { to { opacity: 0; transform: translateX(20px) scale(0.96); } } /* Chip — subtle press */ .chip { transition: transform 80ms ease, background 160ms ease; } .chip:active { transform: scale(0.95); } /* Smooth chip dot scaling for live state stays */ /* Row hover slide accent (in dgrid) */ .dgrid tbody tr { transition: background 100ms ease, transform 100ms ease; } /* Form focus glow */ input:focus, select:focus, textarea:focus, button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* Scrim click cursor */ .scrim { cursor: zoom-out; } /* Page exit (fading on navigation) */ body.page-leaving .main { animation: pageExit 200ms ease-in both; } @keyframes pageExit { to { opacity: 0; transform: translateY(-4px); } } /* "Coming next" toast variant — used when a dead link is hit */ .toast.hint { border-color: color-mix(in srgb, var(--ai) 30%, var(--line)); background: color-mix(in srgb, var(--ai) 6%, var(--surface-1)); } .toast.hint::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--ai); mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; flex-shrink: 0; } /* Custom scrollbar (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* Active row pulse-once when freshly inserted (data="just-now") */ .dgrid tr[data-fresh="true"] { animation: rowFresh 1600ms ease-out; } @keyframes rowFresh { 0% { background: color-mix(in srgb, var(--st-approved) 18%, var(--surface-1)); } 100% { background: transparent; } } /* Mini ON-AIR indicator (small chip variant for inline use) */ .live-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink); } .live-mini::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; } /* Building-spinner used in chips */ .chip.review .spin, .chip.live .spin { display: none; } /* Smooth focus on inputs */ input, select, textarea { transition: border-color 120ms ease, box-shadow 120ms ease; } /* Subtle "fresh" highlight on success */ .success-flash { animation: successFlash 1200ms ease-out; } @keyframes successFlash { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--st-approved) 14%, transparent); } } /* Smooth chevron flip in dropdowns */ .flip { transition: transform 200ms ease; } .flip.open { transform: rotate(180deg); } /* Logo idle animation — ultra-subtle */ .topnav .wordmark img { transition: transform 240ms ease; } .topnav .wordmark:hover img { transform: rotate(15deg); } /* Reduce motion respect (in addition to tokens.css base) */ @media (prefers-reduced-motion: reduce) { .main, .topnav, .sidebar, .toast, .drawer, .modal, .cmdk, .ripple, .pbar .fill.running::after, .skeleton { animation: none !important; transition: none !important; } .chip.live::before, .live-mini::before { animation: none !important; } .btn:active { transform: none !important; } } /* ── Grid functional behaviors ────────────────────────────────── */ /* Sortable header */ .dgrid thead th { transition: background 120ms ease, color 120ms ease; } .dgrid thead th:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); color: var(--ink); } .dgrid thead th.sorted-asc, .dgrid thead th.sorted-desc { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent); } .dgrid thead th .sort-arr { display: inline-block; font-family: var(--font-mono); font-weight: 700; margin-left: 2px; color: var(--accent); } /* Filter popover */ .filter-pop { position: fixed; width: 260px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 90; display: flex; flex-direction: column; animation: popIn 200ms cubic-bezier(0.16, 1, 0.3, 1) both; max-height: 70vh; } @keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .filter-pop-h { padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line-soft); } .filter-pop-search { margin: 8px 10px; padding: 6px 8px; font-size: 12px; } .filter-pop-body { padding: 4px 4px; max-height: 280px; overflow-y: auto; } .filter-pop-body label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-s); cursor: pointer; font-size: 13px; margin: 0; } .filter-pop-body label:hover { background: var(--surface-2); } .filter-pop-body label input { margin: 0; } .filter-pop-body label span { flex: 1; color: var(--ink); } .filter-pop-f { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line-soft); background: var(--surface-2); } .filter-pop-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: white; font-size: 10px; font-weight: 700; margin-left: 6px; font-family: var(--font-mono); } /* Active pickr (has filter applied) */ .pickr:has(.filter-pop-count) { border-color: var(--accent); color: var(--accent); } /* Grid footer */ .grid-foot { display: flex; align-items: center; gap: 12px; padding: 10px 4px; margin-top: 8px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line-soft); } .grid-foot .status { font-family: var(--font-mono); } .grid-foot .grow { flex: 1; } .grid-foot .page-size { width: auto; padding: 4px 8px; font-size: 12px; } .grid-foot .pager { display: flex; align-items: center; gap: 4px; transition: opacity 200ms ease; } .grid-foot .pager .btn { padding: 2px 8px; font-family: var(--font-mono); } .grid-foot .pager .page-num { padding: 0 8px; } /* Empty-state row inside a grid */ .grid-empty-row td { background: var(--surface-2); } /* Bulk action bar — slides up from bottom on selection */ .bulk-bar { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 12px 8px 16px; border-radius: var(--r-l); box-shadow: 0 12px 36px rgba(0,0,0,0.18); display: flex; align-items: center; gap: 12px; font-size: 13px; z-index: 65; transition: bottom 280ms cubic-bezier(0.16, 1, 0.3, 1); min-width: 320px; } .bulk-bar.open { bottom: 20px; } .bulk-bar .count { color: var(--accent); } .bulk-bar .btn { background: rgba(255,255,255,0.12); color: white; border-color: transparent; } .bulk-bar .btn:hover { background: rgba(255,255,255,0.2); } .bulk-bar .btn-ghost { background: transparent; color: rgba(255,255,255,0.65); } :root[data-theme="dark"] .bulk-bar { background: var(--surface-3); color: var(--ink); } :root[data-theme="dark"] .bulk-bar .count { color: var(--accent); } /* Pickr indicator subtle pulse on hover */ .pickr { transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .pickr:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } /* ── Editable field (content-edit page) ──────────────────────── */ /* Group container for a section of fields */ .fgroup { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 14px; overflow: hidden; } .fgroup-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-3); } .fgroup-h .grow { flex: 1; } .fgroup-h .pol { margin-left: 4px; } /* The editable field row */ .cfield { display: grid; grid-template-columns: 180px 1fr 220px; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line-soft); align-items: center; transition: background 120ms ease; } .cfield:first-child { border-top: 0; } .cfield:hover { background: var(--surface-2); } .cfield .lab { color: var(--ink-3); font-size: 13px; padding-top: 2px; } .cfield .val { font-size: 13px; min-height: 28px; display: flex; align-items: center; gap: 8px; } .cfield .val .display { flex: 1; padding: 4px 0; } .cfield .val input, .cfield .val textarea, .cfield .val select { padding: 6px 10px; } .cfield .meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .cfield .acts { display: inline-flex; gap: 4px; align-items: center; } /* Edit affordance — appears on hover */ .cfield .edit-btn { opacity: 0; transition: opacity 120ms ease; padding: 2px 6px; border-radius: var(--r-s); background: transparent; border: 1px solid transparent; color: var(--ink-3); font-size: 12px; cursor: pointer; } .cfield:hover .edit-btn { opacity: 1; } .cfield .edit-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); } /* Modes */ .cfield.mode-edit { background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); } .cfield.mode-edit .val .display { display: none; } .cfield .val .editor { display: none; flex: 1; width: 100%; } .cfield.mode-edit .val .editor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cfield.mode-edit .val input, .cfield.mode-edit .val textarea, .cfield.mode-edit .val select { width: 100%; } /* State — pending unsaved changes (operator-modified, not yet committed) */ .cfield.state-pending { background: color-mix(in srgb, var(--st-review) 5%, var(--surface-1)); border-left: 3px solid var(--st-review); padding-left: 11px; } .cfield.state-pending .val .display { font-weight: 500; } .cfield.state-pending .pending-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--st-review); color: white; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* State — modified by AI, awaiting approval */ .cfield.state-ai-proposed { background: color-mix(in srgb, var(--ai) 5%, var(--surface-1)); border-left: 3px solid var(--ai); padding-left: 11px; } .cfield.state-ai-proposed .pending-tag { background: var(--ai); } /* State — modified by another editor, awaiting your approval */ .cfield.state-needs-approval { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border-left: 3px solid var(--st-review); padding-left: 11px; } /* State — locked */ .cfield.state-locked .val .display { color: var(--ink-2); } .cfield.state-locked .lock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--r-s); background: var(--surface-3); color: var(--ink-2); font-size: 11px; } .cfield.state-locked .edit-btn { display: none; } /* State — read-only by policy */ .cfield.state-readonly .val .display { color: var(--ink-2); } .cfield.state-readonly .edit-btn { display: none; } /* Diff display (old/new on a modified field) */ .cfield .diff-old { text-decoration: line-through; color: var(--ink-3); font-size: 12px; display: block; margin-bottom: 2px; } .cfield .diff-new { color: var(--ink); display: block; padding: 4px 8px; background: color-mix(in srgb, var(--st-review) 8%, transparent); border-radius: var(--r-s); border-left: 2px solid var(--st-review); } .cfield.state-ai-proposed .diff-new { background: color-mix(in srgb, var(--ai) 8%, transparent); border-left-color: var(--ai); } /* Per-field action buttons (compact) */ .cfield .acts .btn { padding: 3px 8px; font-size: 11px; } .cfield .acts .btn-primary { box-shadow: none; } /* Save bar — slides up when there are unsaved changes */ .save-bar { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-l); box-shadow: 0 16px 48px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 12px; font-size: 13px; z-index: 65; transition: bottom 320ms cubic-bezier(0.16, 1, 0.3, 1); min-width: 480px; } .save-bar.open { bottom: 20px; } .save-bar .count { font-family: var(--font-mono); font-weight: 700; color: var(--st-review); } .save-bar .btn { background: rgba(255,255,255,0.14); color: white; border-color: transparent; } .save-bar .btn:hover { background: rgba(255,255,255,0.22); } .save-bar .btn-primary { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); } .save-bar .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); } .save-bar .btn-ghost { background: transparent; color: rgba(255,255,255,0.6); } :root[data-theme="dark"] .save-bar { background: var(--surface-3); } /* Modifications strip (top of content-edit page) */ .mod-strip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); margin-bottom: 14px; font-size: 13px; } .mod-strip .glyph { color: var(--st-review); font-family: var(--font-mono); font-weight: 700; } /* Field history sub-row */ .cfield .history-link { font-size: 11px; color: var(--ink-3); } .cfield .history-link:hover { color: var(--accent); } /* Inline lock icon (small) */ .lock-icon { display: inline-flex; align-items: center; } .lock-icon::before { content: "🔒"; font-size: 11px; opacity: 0.8; } /* Approver picker (shown on hover of bulk approve) */ .approve-meta { font-size: 11px; color: var(--ink-3); } /* Tag chip row inside a field (for multi-value fields like Genre tags) */ .tag-row { display: inline-flex; gap: 4px; flex-wrap: wrap; } .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; } .tag-chip .remove { color: var(--ink-3); cursor: pointer; } .tag-chip .remove:hover { color: var(--st-error); } .tag-chip.added { background: color-mix(in srgb, var(--st-review) 14%, transparent); border-color: var(--st-review); color: var(--st-review); } .tag-chip.removed { text-decoration: line-through; color: var(--ink-3); } /* Sub-field meta row */ .cfield-sub { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 4px 14px; font-size: 11px; color: var(--ink-3); } /* ── Smoother navigation polish ─────────────────────────────── */ /* Topnav active link — slide-in underline */ .topnav .primary-nav a { position: relative; padding: 8px 12px; border-radius: var(--r-s); transition: color 200ms ease, background 200ms ease; } .topnav .primary-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--accent); transition: left 240ms cubic-bezier(0.16, 1, 0.3, 1), right 240ms cubic-bezier(0.16, 1, 0.3, 1); } .topnav .primary-nav a.active::after, .topnav .primary-nav a:hover::after { left: 12px; right: 12px; } .topnav .primary-nav a.active::after { background: var(--accent); } .topnav .primary-nav a:not(.active)::after { background: var(--ink-3); opacity: 0.4; } /* Sidebar section group fades in on load */ .sidebar .section { animation: sidebarSectionIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both; } .sidebar .section:nth-child(1) { animation-delay: 0ms; } .sidebar .section:nth-child(2) { animation-delay: 40ms; } .sidebar .section:nth-child(3) { animation-delay: 80ms; } .sidebar .section:nth-child(4) { animation-delay: 120ms; } .sidebar .section:nth-child(5) { animation-delay: 160ms; } .sidebar .section:nth-child(6) { animation-delay: 200ms; } .sidebar .section:nth-child(7) { animation-delay: 240ms; } @keyframes sidebarSectionIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } /* Sidebar nav-item — improved active state with smooth slide indicator */ .sidebar .nav-item { transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease, padding-left 200ms ease; padding-left: 8px; } .sidebar .nav-item::before { transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease; height: 0; } .sidebar .nav-item.active::before { height: 18px; } .sidebar .nav-item:not(.active):hover { padding-left: 12px; } /* Sidebar section label — consistent style */ .sidebar .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 8px 4px; font-weight: 700; opacity: 0.75; } /* Sidebar primary-action — slight bottom margin */ .sidebar .primary-action { margin-bottom: 14px; } /* Tabs — sliding indicator under active tab */ [role="tablist"] { position: relative; } [role="tab"] { position: relative; transition: color 200ms ease, background 120ms ease; cursor: pointer; } [role="tab"]:hover { color: var(--ink) !important; background: var(--surface-2); } [role="tab"][data-active="true"] { color: var(--ink) !important; font-weight: 600; } /* Page transitions — smoother */ body.page-leaving .main { animation: pageExit 180ms cubic-bezier(0.4, 0, 1, 1) both; } body.page-leaving .sidebar, body.page-leaving .topnav { opacity: 0.8; transition: opacity 160ms ease; } /* Main content reveal — staggered children */ .main .page > * { animation: rowReveal 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } .main .page > *:nth-child(1) { animation-delay: 0ms; } .main .page > *:nth-child(2) { animation-delay: 30ms; } .main .page > *:nth-child(3) { animation-delay: 60ms; } .main .page > *:nth-child(4) { animation-delay: 90ms; } .main .page > *:nth-child(5) { animation-delay: 120ms; } .main .page > *:nth-child(6) { animation-delay: 150ms; } .main .page > *:nth-child(n+7) { animation-delay: 180ms; } @keyframes rowReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Smooth chevron rotation on dropdowns */ .flip-on-open { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); } .flip-on-open.open { transform: rotate(180deg); } /* Hover states on dgrid rows — slide ever-so-slightly */ .dgrid tbody tr { transition: background 140ms ease, transform 140ms ease; } .dgrid tbody tr:hover { transform: translateX(1px); } /* Sidebar count badges pulse subtly when value changes (use class .pulse) */ @keyframes countPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .count.pulse { display: inline-block; animation: countPulse 500ms ease-out; } /* Buttons in primary nav get a subtle press scale */ .primary-nav a:active { transform: scale(0.97); } /* Smooth fade for loud-strip items on hover */ .loudstrip .item { transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .loudstrip .item:hover { transform: translateY(-1px); background: var(--surface-2); } .loudstrip .item:active { transform: scale(0.98); } /* Mod-strip animates in with slight glow */ .mod-strip { animation: modStripIn 540ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes modStripIn { from { opacity: 0; transform: translateY(4px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Empty-row reveal in filtered table */ .grid-empty-row { animation: emptyRevealIn 320ms ease-out both; } @keyframes emptyRevealIn { from { opacity: 0; } to { opacity: 1; } } /* Toast — better positioning + entrance */ .toasts { gap: 10px; } .toast { backdrop-filter: blur(8px); } /* Smoother chip transitions */ .chip { will-change: transform; } /* Dialog backdrop fade smoother */ .scrim { transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); } /* ── Standardized sidebar sections (reference pattern) ──── */ /* Order: primary-action · core section · approvals · saved-views · pinned · related-modules · footer */ /* ── Severity tile (air-readiness) ────────────────────────── */ .severity-tile { display: grid; grid-template-columns: 1fr 80px 200px 140px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; font-size: 13px; } .severity-tile .label { font-weight: 500; } .severity-tile .count { font-family: var(--font-mono); font-weight: 600; } .severity-tile.red .label { color: var(--st-error); } .severity-tile.red .count { color: var(--st-error); } .severity-tile.amber .count { color: var(--st-review); } .severity-grp { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; overflow: hidden; } .severity-grp-h { padding: 10px 14px; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-2); } .severity-grp.red .severity-grp-h { color: var(--st-error); background: color-mix(in srgb, var(--st-error) 8%, var(--surface-2)); } .severity-grp.amber .severity-grp-h { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 8%, var(--surface-2)); } /* ── Publish gate sections ────────────────────────────────── */ .gate-section { margin-bottom: 20px; } .gate-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; } .gate-section.blockers h3 { color: var(--st-error); } .gate-section.warnings h3 { color: var(--st-review); } .gate-section.passing h3 { color: var(--st-approved); } .gate-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-s); margin-bottom: 4px; } .gate-row .glyph { width: 16px; text-align: center; font-family: var(--font-mono); font-weight: 700; } .gate-row.x { background: color-mix(in srgb, var(--st-error) 6%, var(--surface-1)); } .gate-row.x .glyph { color: var(--st-error); } .gate-row.w { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); } .gate-row.w .glyph { color: var(--st-review); } .gate-row.p .glyph { color: var(--st-approved); } .gate-row .grow { flex: 1; } /* ── Rotation chips (.rot) ──────────────────────────────────── */ .rot { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; border: 1px solid var(--line); white-space: nowrap; line-height: 1.4; } .rot::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0; } /* FAST rotation tiers — graded by frequency / attention */ .rot.fast-heavy { color: #b54708; background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); } .rot.fast-medium { color: #92400e; background: color-mix(in srgb, #d97706 10%, transparent); border-color: color-mix(in srgb, #d97706 25%, var(--line)); } .rot.fast-light { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); } .rot.fast-catalog { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-soft); opacity: 0.85; } /* VOD shelf membership */ .rot.vod { color: var(--st-scheduled); background: color-mix(in srgb, var(--st-scheduled) 10%, transparent); border-color: color-mix(in srgb, var(--st-scheduled) 30%, var(--line)); } /* Promo flag */ .rot.promo { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); font-weight: 700; } .rot.promo::before { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; } /* Music-video rotation (Music-Video archetype only) */ .rot.mv-heavy { color: #b54708; background: color-mix(in srgb, #f59e0b 18%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); } .rot.mv-medium { color: var(--ink-2); background: var(--surface-2); } .rot.mv-light { color: var(--ink-3); background: var(--surface-2); opacity: 0.9; } .rot.mv-recurrent { color: var(--ink-3); background: var(--surface-2); opacity: 0.7; } /* Off-rotation */ .rot.off { color: var(--ink-3); background: transparent; border-color: var(--line-soft); } /* A row of rotation chips */ .rot-row { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; } /* Rotation legend (used in the library explainer) */ .rot-legend { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 14px; font-size: 12px; color: var(--ink-2); } .rot-legend-h { font-weight: 600; color: var(--ink); margin-bottom: 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .rot-legend-h .grow { flex: 1; } .rot-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; } .rot-legend-item { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; } .rot-legend-item .desc { color: var(--ink-2); } .rot-legend-item .desc strong { color: var(--ink); } /* ── Rights territory × scope matrix ─────────────────────── */ .rmatrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } .rmatrix th, .rmatrix td { padding: 8px 10px; text-align: center; border: 1px solid var(--line-soft); } .rmatrix th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); } .rmatrix th:first-child, .rmatrix td:first-child { text-align: left; font-weight: 600; background: var(--surface-2); position: sticky; left: 0; } .rmatrix td.cell-active { background: color-mix(in srgb, var(--st-approved) 12%, transparent); color: var(--st-approved); font-weight: 600; } .rmatrix td.cell-expired { background: color-mix(in srgb, var(--st-error) 12%, transparent); color: var(--st-error); font-weight: 600; } .rmatrix td.cell-expiring { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-weight: 600; } .rmatrix td.cell-blocked { background: var(--surface-3); color: var(--ink-3); } .rmatrix td.cell-unknown { background: var(--surface-2); color: var(--ink-3); font-style: italic; } .rmatrix td.cell-override { box-shadow: inset 0 0 0 2px var(--accent); } .rmatrix .cell-content { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; } .rmatrix .cell-content .dates { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; } .rmatrix .cell-content .icon { font-size: 11px; } /* Block warnings panel (inline in rail/schedule builders) */ .block-warnings { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 12px; } .block-warnings-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--st-review); margin-bottom: 8px; } .block-warnings .grow { flex: 1; } .block-warnings ul { margin: 0; padding-left: 20px; font-size: 12px; } .block-warnings ul li { margin: 4px 0; } .block-warnings .override { color: var(--accent); cursor: pointer; } .block-warnings .override:hover { text-decoration: underline; } /* Distribution snapshot widget */ /* ── Rotation Intelligence panel (library page) ─────────────────────────── A programmer-focused replacement for the old .dsnap widget. Four sections stacked: header → score+histogram row → state tiles → action lanes. Uses the design-system tokens (operator azure, AI teal, status colors; amber pulls the eye only where action is needed). Tiles + list rows are compact / dense — this is a lean-forward operations tool, not a dashboard. */ .rotint { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; margin-bottom: 14px; } .rotint-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .rotint-h h3 { margin: 0; font-size: 14px; } /* Row 1 — dense composition strip (8 micro-cards in a row) ───────────── Replaces the older 2-card row (big score + big histogram). Each cell is sleeker, ~110px tall, surfaces one library-manager signal with a tiny chart. Auto-fits to row width. */ .rotint-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } @media (max-width: 1400px) { .rotint-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ri-mini { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; min-height: 108px; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; cursor: default; } .ri-mini:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: 0 4px 12px rgba(15,23,42,0.06); } .ri-mini .lab { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .ri-mini .lab .delta { margin-left: auto; font-weight: 700; } .ri-mini .lab .delta.up { color: var(--st-approved); } .ri-mini .lab .delta.down { color: var(--st-review); } .ri-mini .big { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ri-mini .big .of { font-size: 11px; color: var(--ink-3); font-weight: 600; } .ri-mini .sub { font-size: 10px; color: var(--ink-3); margin-top: -2px; } .ri-mini .chart { flex: 1; min-height: 28px; display: flex; align-items: flex-end; } .ri-mini svg { display: block; width: 100%; height: auto; } /* mini SVG sparkline (for health) — 0..100, gradient fill */ .ri-mini .spark { width: 100%; height: 32px; } /* mini distribution histogram (compact) */ .ri-mini-hist { display: flex; align-items: flex-end; gap: 2px; height: 36px; width: 100%; } .ri-mini-hist .b { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; } .ri-mini-hist .b.cold { background: var(--surface-3); } .ri-mini-hist .b.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); } .ri-mini-hist .b.good { background: var(--st-approved); } .ri-mini-hist .b.over { background: var(--st-review); } .ri-mini-hist .b.sweet { background: var(--st-approved); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-approved) 60%, transparent) inset; } /* mini stacked bar — horizontal, e.g. catalog mix */ .ri-stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; } .ri-stack > span { display: block; transition: opacity 140ms ease; } .ri-stack > span:hover { opacity: 0.8; } .ri-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); font-weight: 600; } .ri-stack-legend span { display: inline-flex; align-items: center; gap: 4px; } .ri-stack-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; } /* mini horizontal bar list (genre top-5) */ .ri-hbar { display: grid; grid-template-columns: 60px 1fr 32px; gap: 6px; align-items: center; font-size: 10px; line-height: 1.2; } .ri-hbar .nm { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ri-hbar .bar { height: 6px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-3)); border-radius: 3px; overflow: hidden; } .ri-hbar .bar .fill { height: 100%; background: var(--accent); border-radius: 3px; } .ri-hbar .pct { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; } /* decade strip — 8 narrow vertical bars */ .ri-decades { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-items: end; height: 38px; } .ri-decades .d { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 4px; opacity: 0.78; transition: opacity 140ms ease; cursor: pointer; } .ri-decades .d:hover { opacity: 1; } .ri-decades-axis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; font-family: var(--font-mono); font-size: 8px; color: var(--ink-3); text-align: center; font-weight: 600; } /* mini gauge — 0..100% semi-arc */ .ri-gauge { width: 100%; height: 38px; } /* enrichment progress — 4 stacked thin bars */ .ri-prog { display: flex; flex-direction: column; gap: 4px; } .ri-prog-row { display: grid; grid-template-columns: 54px 1fr 28px; gap: 6px; align-items: center; font-size: 9px; font-family: var(--font-mono); color: var(--ink-2); } .ri-prog-row .pname { color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .ri-prog-row .pbar { height: 4px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-3)); border-radius: 2px; overflow: hidden; } .ri-prog-row .pbar > .fill { height: 100%; background: var(--accent); } .ri-prog-row .pbar > .fill.warn { background: var(--st-review); } .ri-prog-row .pct { color: var(--ink-2); text-align: right; } /* mini donut */ .ri-donut { position: relative; width: 56px; height: 56px; } .ri-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ri-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); } .ri-donut .ctr .lab { font-size: 8px; color: var(--ink-3); font-weight: 600; } /* mini row with donut + caption */ .ri-donut-row { display: flex; align-items: center; gap: 10px; } .ri-donut-row .leg { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-family: var(--font-mono); color: var(--ink-2); } .ri-donut-row .leg span { display: flex; align-items: center; gap: 5px; } .ri-donut-row .leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; } /* legacy alias — old .rotint-top still used elsewhere */ .rotint-top { display: grid; grid-template-columns: 320px 1fr; gap: 12px; margin-bottom: 12px; } .rotint-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; } .ri-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; font-family: var(--font-mono); } .ri-score-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .ri-score { font-family: var(--font-mono); font-size: 44px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; } .ri-score .ri-of { font-size: 14px; color: var(--ink-3); font-weight: 600; margin-left: 2px; } .ri-trend { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-s); } .ri-trend.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 10%, transparent); } .ri-trend.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); } .ri-trend.flat { color: var(--ink-3); background: var(--surface-3); } .ri-target { margin-bottom: 8px; } .ri-spark { width: 100%; height: 56px; margin-top: 6px; display: block; } .ri-spark-axis { display: flex; gap: 4px; margin-top: -2px; } /* Distribution histogram */ .rotint-card.distro { display: flex; flex-direction: column; } .ri-distro-wrap { position: relative; flex: 1; min-height: 120px; margin: 4px 0 8px; } .ri-target-band { position: absolute; left: 27.27%; width: 36.36%; top: 0; bottom: 22px; background: color-mix(in srgb, var(--st-approved) 8%, transparent); border-left: 1px dashed color-mix(in srgb, var(--st-approved) 40%, transparent); border-right: 1px dashed color-mix(in srgb, var(--st-approved) 40%, transparent); pointer-events: none; } .ri-target-band::before { content: "TARGET · 3–6"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: color-mix(in srgb, var(--st-approved) 80%, black); padding: 1px 6px; border-radius: 2px; background: var(--surface-2); } .ri-hist { display: flex; gap: 4px; height: calc(100% - 22px); align-items: flex-end; padding: 0 2px; } .ri-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 4px; transition: opacity 140ms ease, transform 140ms ease; cursor: pointer; } .ri-bar.cold { background: var(--surface-3); } .ri-bar.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); } .ri-bar.good { background: var(--st-approved); } .ri-bar.over { background: var(--st-review); } .ri-bar:hover { transform: scaleY(1.04); opacity: 0.88; } .ri-axis { position: absolute; left: 2px; right: 2px; bottom: 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 0 2px; } .ri-axis span { flex: 1; text-align: center; } .ri-distro-foot { display: flex; align-items: center; gap: 10px; } .ri-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: middle; margin-right: 3px; } .ri-dot.sweet { background: var(--st-approved); } .ri-dot.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); } .ri-dot.good { background: var(--st-approved); } .ri-dot.over { background: var(--st-review); } /* Row 2 — state tiles */ .rotint-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .ri-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-m); text-decoration: none; color: var(--ink); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; } .ri-tile:hover { transform: translateY(-1px); background: var(--surface-1); } .ri-tile.stale { border-left-color: var(--st-review); } .ri-tile.good { border-left-color: var(--st-approved); } .ri-tile.under { border-left-color: color-mix(in srgb, var(--st-review) 60%, var(--surface-3)); } .ri-tile.cold { border-left-color: var(--ink-3); } .ri-tile-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; font-family: var(--font-mono); } .ri-tile-num { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .ri-tile-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); } .ri-delta { font-weight: 700; font-size: 11px; } .ri-delta.up { color: var(--st-review); } .ri-delta.up.good { color: var(--st-approved); } .ri-delta.down { color: var(--st-approved); } .ri-tile.stale .ri-delta.up { color: var(--st-review); } .ri-tile.under .ri-delta.up { color: var(--st-review); } .ri-tile-action { color: var(--accent); font-weight: 600; } /* Row 3 — action lanes */ .rotint-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ri-lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; } .ri-lane-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .ri-lane-h strong { font-size: 13px; } .ri-lane-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .ri-lane-icon.over { background: color-mix(in srgb, var(--st-review) 16%, var(--surface-2)); color: color-mix(in srgb, var(--st-review) 90%, black); } .ri-lane-icon.under { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); } .ri-lane-icon.rights { background: color-mix(in srgb, var(--st-review) 20%, var(--surface-2)); color: color-mix(in srgb, var(--st-review) 90%, black); } .ri-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .ri-list li { display: grid; grid-template-columns: 18px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: var(--r-s); transition: background 100ms ease; font-size: 12px; } .ri-list li:hover { background: var(--surface-1); } .ri-list .rl-rank { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; text-align: center; } .ri-list .rl-rank.rights { color: var(--st-review); } .ri-list .rl-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ri-list .rl-meta { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ri-list .rl-trend { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; } .ri-list .rl-trend.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); } .ri-list .rl-trend.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 10%, transparent); } .ri-list .rl-trend.flat { color: var(--ink-3); background: var(--surface-3); } .ri-list .rl-runout { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--st-review) 12%, var(--surface-3)); color: color-mix(in srgb, var(--st-review) 90%, black); } .ri-list .rl-runout.urgent { background: var(--st-review); color: white; } .ri-list li button.btn-sm { font-size: 11px; padding: 3px 8px; } /* ─────────────────────────────────────────────────────────────────────────── Analytics primitives — Tableau-inspired, sleek + modern. - Cards: soft shadows (no hard borders), generous padding, 12-14px radius - Numbers: bigger, tabular-nums, tighter tracking - Bars / fills: gradient instead of flat - Hover: lift on shadow, not transform - Chart elements: rounded ends, smooth strokes Naming: an-* so they don't collide with rotation intelligence (ri-*). ─────────────────────────────────────────────────────────────────────────── */ .an-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; padding: 18px 22px 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04); transition: box-shadow 200ms ease; } .an-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); } .an-card-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; } .an-card-h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .an-card-h .an-card-sub { font-size: 12px; color: var(--ink-3); font-family: inherit; font-weight: 400; } .an-card-h .grow { flex: 1; } /* Download buttons — pill, ghost-on-surface, hover lifts color */ .an-dl { display: inline-flex; gap: 4px; } .an-dl button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; background: transparent; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; color: var(--ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; } .an-dl button:hover { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .an-dl button:active { transform: scale(0.97); } /* KPI tile — bigger numbers, gradient accent strip, tabular-nums */ .an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .an-kpi { display: grid; grid-template-columns: 1fr 100px; gap: 14px; align-items: end; padding: 18px 20px; position: relative; overflow: hidden; background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04); transition: box-shadow 200ms ease, transform 200ms ease; } .an-kpi:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } /* Gradient color stripe on the left edge (replaces hard left border) */ .an-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); border-radius: 12px 0 0 12px; } .an-kpi.ai::before { background: linear-gradient(180deg, var(--ai), color-mix(in srgb, var(--ai) 40%, transparent)); } .an-kpi.good::before { background: linear-gradient(180deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 40%, transparent)); } .an-kpi.warn::before { background: linear-gradient(180deg, var(--st-review), color-mix(in srgb, var(--st-review) 40%, transparent)); } .an-kpi .lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; font-family: inherit; margin-bottom: 6px; } .an-kpi .num { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; } .an-kpi .num .unit { font-size: 18px; color: var(--ink-3); font-weight: 600; margin-left: 3px; } .an-kpi .delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; } .an-kpi .delta.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 12%, transparent); } .an-kpi .delta.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 12%, transparent); } .an-kpi .delta.flat { color: var(--ink-3); background: color-mix(in srgb, var(--ink-3) 12%, transparent); } .an-kpi.warn .delta.up { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 12%, transparent); } .an-kpi.warn .delta.down { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 12%, transparent); } .an-kpi .an-mini-spark { width: 100px; height: 40px; display: block; } /* Inline mini-sparkline */ .an-mini-spark { width: 60px; height: 18px; display: inline-block; vertical-align: middle; overflow: visible; } .an-mini-spark path.line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .an-mini-spark path.area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; } .an-mini-spark.warn path.line { stroke: var(--st-review); } .an-mini-spark.warn path.area { fill: color-mix(in srgb, var(--st-review) 18%, transparent); } .an-mini-spark.good path.line { stroke: var(--st-approved); } .an-mini-spark.good path.area { fill: color-mix(in srgb, var(--st-approved) 18%, transparent); } .an-mini-spark.ai path.line { stroke: var(--ai); } .an-mini-spark.ai path.area { fill: color-mix(in srgb, var(--ai) 18%, transparent); } /* Multi-line area chart — generous height, soft grid, smooth strokes */ .an-line { display: block; width: 100%; height: 240px; overflow: visible; } .an-line .axis text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); font-weight: 500; } .an-line .grid line { stroke: color-mix(in srgb, var(--line-soft) 80%, transparent); stroke-width: 1; stroke-dasharray: 2 4; } .an-line .series-a-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); } .an-line .series-a-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .an-line .series-b-line { fill: none; stroke: var(--ai); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .an-line .endpoint-a { fill: var(--accent); stroke: white; stroke-width: 2; } .an-line .endpoint-b { fill: var(--ai); stroke: white; stroke-width: 2; } .an-line .annot-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; } .an-line .annot-text { font-family: var(--font-mono); font-size: 10px; fill: var(--accent); font-weight: 600; } .an-line .legend { display: flex; gap: 18px; font-size: 12px; color: var(--ink-2); margin-top: 10px; align-items: center; } .an-line .legend .lk { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; } .an-line .legend .lk.a { background: var(--accent); } .an-line .legend .lk.b { background: var(--ai); } /* 7×24 daypart heatmap — rounded cells, smooth color */ .an-heatmap { display: grid; grid-template-columns: 36px repeat(24, 1fr); grid-template-rows: 18px repeat(7, 22px); gap: 3px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); } .an-heatmap .axis-h { grid-row: 1; text-align: center; line-height: 18px; font-weight: 500; } .an-heatmap .axis-v { grid-column: 1; line-height: 1; padding-right: 6px; text-align: right; align-self: center; font-weight: 500; } .an-heatmap .corner { grid-row: 1; grid-column: 1; } .an-heatmap .cell { border-radius: 4px; min-height: 18px; cursor: pointer; background: color-mix(in srgb, var(--accent) calc(var(--int, 0) * 1%), color-mix(in srgb, var(--surface-3) 80%, transparent)); transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease; } .an-heatmap .cell:hover { transform: scale(1.25); z-index: 2; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); outline: 2px solid white; } .an-heatmap .cell.peak { box-shadow: 0 0 0 2px white, 0 0 0 3px var(--accent), 0 6px 16px rgba(15, 23, 42, 0.15); } /* Audience funnel — rounded, with inner shadow and animated reveal */ .an-funnel { display: flex; align-items: stretch; gap: 4px; margin: 12px 0 8px; height: 84px; } .an-funnel .seg { position: relative; flex-grow: var(--w, 1); flex-basis: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(100% - var(--depth, 0) * 11%), var(--surface-3)) 0%, color-mix(in srgb, var(--accent) calc(85% - var(--depth, 0) * 11%), var(--surface-3)) 100%); padding: 10px 14px; color: white; display: flex; flex-direction: column; justify-content: space-between; min-width: 80px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(15, 23, 42, 0.06); transition: transform 200ms ease, box-shadow 200ms ease; } .an-funnel .seg:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(15, 23, 42, 0.12); } .an-funnel .seg .lab { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.92; } .an-funnel .seg .num { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .an-funnel .seg .pct { font-family: var(--font-mono); font-size: 11px; opacity: 0.92; font-weight: 500; } .an-funnel-drops { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-bottom: 4px; } .an-funnel-drops .gap { flex-grow: var(--w, 1); flex-basis: 0; text-align: center; padding: 0 4px; font-weight: 500; } .an-funnel-drops .gap.flag { color: var(--st-review); font-weight: 700; } /* Donut chart — bigger, with white gap between segments */ .an-donut { width: 144px; height: 144px; display: block; margin: 0 auto; overflow: visible; } .an-donut circle.track { fill: none; stroke: color-mix(in srgb, var(--surface-3) 80%, transparent); stroke-width: 16; } .an-donut circle.slice { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1); } .an-donut text.center-num { font-family: var(--font-mono); font-weight: 700; font-size: 22px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; letter-spacing: -0.02em; } .an-donut text.center-lab { font-size: 10px; fill: var(--ink-3); text-anchor: middle; dominant-baseline: middle; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .an-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); margin-top: 10px; } .an-donut-legend .li { display: flex; align-items: center; gap: 8px; } .an-donut-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } /* Horizontal geo / device bar list — gradient fills */ .an-geo-bar { display: flex; flex-direction: column; gap: 10px; font-size: 12px; } .an-geo-bar .row { display: grid; grid-template-columns: 90px 1fr 80px; gap: 10px; align-items: center; } .an-geo-bar .row .nm { font-weight: 500; color: var(--ink); } .an-geo-bar .row .bar { background: color-mix(in srgb, var(--surface-3) 80%, transparent); height: 8px; border-radius: 999px; overflow: hidden; } .an-geo-bar .row .fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--ai))); height: 100%; border-radius: 999px; transition: width 600ms cubic-bezier(.2,.8,.2,1); } .an-geo-bar .row .val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } /* Semi-circular gauge */ .an-gauge { display: inline-block; width: 84px; height: 50px; vertical-align: middle; } .an-gauge .track { stroke: var(--surface-3); stroke-width: 8; fill: none; } .an-gauge .arc { stroke: var(--accent); stroke-width: 8; fill: none; stroke-linecap: round; } .an-gauge .arc.warn { stroke: var(--st-review); } .an-gauge .arc.good { stroke: var(--st-approved); } .an-gauge .val { font-family: var(--font-mono); font-size: 14px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; } /* Stacked confidence × outcome bar */ .an-conf-stack { display: flex; flex-direction: column; gap: 10px; font-size: 12px; } .an-conf-stack .row { display: grid; grid-template-columns: 56px 1fr 64px; gap: 10px; align-items: center; } .an-conf-stack .row .lab { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; } .an-conf-stack .bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--surface-3) 80%, transparent); } .an-conf-stack .bar .seg { height: 100%; transition: flex-basis 400ms ease; } .an-conf-stack .bar .seg.accept { background: linear-gradient(90deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 80%, var(--ai))); } .an-conf-stack .bar .seg.over { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai))); } .an-conf-stack .bar .seg.reject { background: linear-gradient(90deg, var(--st-error), color-mix(in srgb, var(--st-error) 70%, white)); opacity: 0.92; } .an-conf-stack .row .total { font-family: var(--font-mono); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } .an-conf-stack-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); margin-top: 10px; } .an-conf-stack-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } /* Position-lift chart — gradient bars with hover lift */ .an-pos-lift { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; } .an-pos-lift .pbar { flex: 1; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai))); border-radius: 5px 5px 0 0; min-height: 6px; position: relative; transition: transform 160ms ease, filter 160ms ease; cursor: pointer; filter: saturate(.9); } .an-pos-lift .pbar:hover { filter: saturate(1.1) brightness(1.05); transform: scaleY(1.02); transform-origin: bottom; } .an-pos-lift .pbar::after { content: attr(data-lab); position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 500; white-space: nowrap; } /* Health composite indicator */ .an-health-dots { display: inline-flex; gap: 3px; vertical-align: middle; } .an-health-dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--surface-3) 80%, transparent); } .an-health-dots span.on { background: var(--st-approved); } .an-health-dots.warn span.on { background: var(--st-review); } .an-health-dots.bad span.on { background: var(--st-error); } /* Layout rows */ .an-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .an-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 1280px) { .an-row-3 { grid-template-columns: 1fr 1fr; } .an-kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .an-row-2 { grid-template-columns: 1fr; } .an-row-3 { grid-template-columns: 1fr; } .an-kpis { grid-template-columns: 1fr; } } /* Scheduled-report cards */ .an-sched-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 1280px) { .an-sched-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .an-sched-grid { grid-template-columns: 1fr; } } .an-sched { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow 200ms ease, transform 200ms ease; } .an-sched:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .an-sched .nm { font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; } .an-sched .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 500; } .an-sched .acts { display: flex; gap: 6px; margin-top: 8px; } /* Trend-lane reuse */ .an-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1024px) { .an-lanes { grid-template-columns: 1fr; } } /* Period selector — segmented control look */ .an-period { display: inline-flex; background: color-mix(in srgb, var(--surface-3) 50%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 999px; padding: 3px; } .an-period button { background: transparent; border: 0; padding: 6px 14px; font-size: 12px; font-family: inherit; color: var(--ink-3); cursor: pointer; border-radius: 999px; font-weight: 500; transition: background 160ms ease, color 160ms ease; } .an-period button:hover { color: var(--ink); } .an-period button.active { background: var(--surface-1); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04); font-weight: 600; } /* State chips */ .an-state-ok { color: var(--st-approved); font-weight: 600; } .an-state-warn { color: var(--st-review); font-weight: 600; } .an-state-err { color: var(--st-error); font-weight: 600; } /* ─────────────────────────────────────────────────────────────────────────── Series + Collections (sr-* / col-*) ─────────────────────────────────────────────────────────────────────────── */ /* SERIES list card — poster · title · stats · usage */ .sr-list-row { display: grid; grid-template-columns: 60px 1fr 80px 80px 80px 1fr 110px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent); } .sr-list-row:last-child { border-bottom: 0; } .sr-list-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); } .sr-poster { width: 60px; aspect-ratio: 2/3; border-radius: 6px; background: var(--surface-3) center/cover no-repeat; box-shadow: 0 1px 3px rgba(15,23,42,0.1); } .sr-title-cell { min-width: 0; } .sr-title-cell .nm { font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; } .sr-title-cell .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .sr-title-cell .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; } /* SERIES DETAIL · Seasons grid */ .sr-seasons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .sr-season { background: var(--surface-1); border: 1.5px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all 160ms cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; gap: 6px; position: relative; } .sr-season:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); } .sr-season.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), 0 4px 12px rgba(15,23,42,0.06); } .sr-season .s-lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .sr-season .s-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .sr-season .s-meta { font-size: 11px; color: var(--ink-2); margin-top: 4px; } .sr-season .s-chip { position: absolute; top: 10px; right: 10px; font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: 700; background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono); } .sr-season .s-chip.now { background: var(--st-live); color: white; } .sr-season .s-chip.new { background: var(--accent); color: white; } .sr-season .s-chip.done { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } /* Episode list */ .sr-ep-list { display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; overflow: hidden; } .sr-ep { display: grid; grid-template-columns: 32px 110px 1fr 90px 90px 80px 110px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent); transition: background 120ms ease; cursor: pointer; } .sr-ep:last-child { border-bottom: 0; } .sr-ep:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .sr-ep .ep-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; text-align: center; } .sr-ep .ep-thumb { width: 110px; aspect-ratio: 16/9; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; } .sr-ep .ep-title { font-weight: 600; font-size: 13px; color: var(--ink); } .sr-ep .ep-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .sr-ep .ep-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .sr-ep.live { background: color-mix(in srgb, var(--st-live) 6%, transparent); } .sr-ep .ep-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 700; background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; } .sr-ep .ep-badge.premiere { background: var(--accent); color: white; } .sr-ep .ep-badge.finale { background: var(--st-error); color: white; } .sr-ep .ep-badge.aired { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } /* Series detail — 2-column layout (main left, usage right) */ .sr-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-bottom: 14px; } @media (max-width: 1280px) { .sr-detail-grid { grid-template-columns: 1fr; } } /* Series mini usage chip block (right column) */ .sr-usage { display: flex; flex-direction: column; gap: 14px; } .sr-usage-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; padding: 14px 16px; } .sr-usage-card h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; font-family: var(--font-mono); } .sr-usage-list { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .sr-usage-list .li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent); } .sr-usage-list .li:first-child { border-top: 0; } .sr-usage-list .nm { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; } .sr-usage-list .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } /* Episode-detail page · large hero */ .ep-hero { display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin-bottom: 18px; } @media (max-width: 900px) { .ep-hero { grid-template-columns: 1fr; } } .ep-hero-art { aspect-ratio: 16/9; border-radius: 10px; background: var(--surface-3) center/cover no-repeat; box-shadow: 0 4px 12px rgba(15,23,42,0.1); } .ep-prev-next { display: flex; gap: 8px; margin-top: 10px; } .ep-prev-next .btn { flex: 1; justify-content: center; } /* COLLECTIONS list card */ .col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; } .col-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease; display: flex; flex-direction: column; } .col-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); } .col-strip { display: flex; gap: 2px; height: 140px; background: var(--surface-3); } .col-strip .ti { flex: 1; background: var(--surface-3) center/cover no-repeat; position: relative; overflow: hidden; } .col-strip .ti.more { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; color: white; background: color-mix(in srgb, var(--ink) 75%, transparent); font-size: 16px; } .col-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .col-mode { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; align-self: flex-start; } .col-mode.manual { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .col-mode.ai { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); } .col-mode.suggested { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); } .col-card .nm { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .col-card .desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; } .col-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent); display: flex; gap: 10px; flex-wrap: wrap; } /* AI-suggested-collection card variant */ .col-suggestion { background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 6%, var(--surface-1)), var(--surface-1)); border: 1px dashed color-mix(in srgb, var(--ai) 50%, var(--line)); } .col-suggestion .col-mode.suggested { background: var(--ai); color: white; } /* Collection-detail layout */ .col-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; } @media (max-width: 1280px) { .col-detail-grid { grid-template-columns: 1fr; } } /* Collection title order — drag rows */ .col-titles { display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; overflow: hidden; } .col-title-row { display: grid; grid-template-columns: 28px 24px 50px 1fr 80px 110px 90px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent); transition: background 120ms ease; cursor: grab; } .col-title-row:last-child { border-bottom: 0; } .col-title-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .col-title-row:active { cursor: grabbing; } .col-title-row .drag { color: var(--ink-3); font-size: 16px; line-height: 1; user-select: none; } .col-title-row .pos { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; text-align: center; } .col-title-row .thumb { width: 50px; aspect-ratio: 2/3; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; } .col-title-row .nm { font-weight: 600; font-size: 13px; color: var(--ink); } .col-title-row .sub { font-size: 10px; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); } .col-title-row .lock { color: var(--ink-3); cursor: pointer; transition: color 120ms ease; } .col-title-row .lock.on { color: var(--accent); } /* ── Top-nav theme-toggle + nav icons (radio mark, etc.) ─────────────── */ .topnav .icon-btn.theme-icon { color: var(--ink-2); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .topnav .icon-btn.theme-icon:hover { background: var(--surface-2); color: var(--accent); } .topnav .icon-btn.theme-icon .ic { width: 16px; height: 16px; } .nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: currentColor; opacity: 0.85; } .nav-ic svg { width: 16px; height: 16px; } .topnav .primary-nav a:hover .nav-ic, .topnav .primary-nav a.active .nav-ic { opacity: 1; } /* ── Audio equalizer "now-playing" animation (radio) ──────────────────── 4 vertical bars pulsing at different phases. Used in the .rd-now strip and inline anywhere a track is currently airing. */ .eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 18px; height: 14px; } .eq .b { width: 3px; background: currentColor; border-radius: 1px; animation: eq-bounce 1.05s ease-in-out infinite; transform-origin: bottom; } .eq .b:nth-child(1) { height: 30%; animation-delay: -0.4s; } .eq .b:nth-child(2) { height: 80%; animation-delay: -0.2s; } .eq .b:nth-child(3) { height: 55%; animation-delay: -0.6s; } .eq .b:nth-child(4) { height: 95%; animation-delay: 0s; } @keyframes eq-bounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1.0); } } @media (prefers-reduced-motion: reduce) { .eq .b { animation: none; } } /* large variant for now-playing strip */ .eq.lg { width: 28px; height: 22px; } .eq.lg .b { width: 4px; } .eq.live { color: var(--st-live); } /* Pulsing dot for the timecode (current-time indicator) */ .tc-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--st-live); margin-right: 6px; vertical-align: middle; animation: pulse 1.4s ease-in-out infinite; } /* ── RADIO + MUSIC programming (.rd-*) ────────────────────────────────── 24h ribbons, hour-clock wheels, now-playing strip, energy curves, separation matrix, rotation tier bars, PRO meters. */ /* Now-playing strip — big art + track + time bar */ .rd-now { display: grid; grid-template-columns: 96px 1fr 200px; gap: 16px; align-items: center; padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface-1)), var(--surface-1)); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); box-shadow: 0 4px 16px rgba(15,23,42,0.06); } .rd-now .art { width: 96px; height: 96px; border-radius: 8px; background: var(--surface-3) center/cover no-repeat; box-shadow: 0 4px 12px rgba(15,23,42,0.1); } .rd-now .meta .lab { font-family: var(--font-mono); font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rd-now .meta .tk { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; } .rd-now .meta .ar { font-size: 13px; color: var(--ink-2); margin-top: 2px; } .rd-now .meta .alb { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; } .rd-now .time { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .rd-now .time .clock { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .rd-now .time .bar { width: 200px; height: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; overflow: hidden; } .rd-now .time .bar .fill { height: 100%; background: var(--accent); } .rd-now .time .ctrl { display: flex; gap: 4px; margin-top: 4px; } /* Hour clock — 24-hour daypart ribbon */ .rd-daypart-ribbon { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; height: 32px; background: var(--line-soft); border-radius: 6px; overflow: hidden; margin-top: 6px; } .rd-daypart-cell { background: var(--surface-2); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); font-weight: 700; cursor: pointer; transition: background 120ms ease; } .rd-daypart-cell:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); } .rd-daypart-cell.morning { background: color-mix(in srgb, #fbbf24 28%, var(--surface-1)); color: #92400e; } .rd-daypart-cell.midday { background: color-mix(in srgb, #38bdf8 22%, var(--surface-1)); color: #075985; } .rd-daypart-cell.drive { background: color-mix(in srgb, var(--accent) 28%, var(--surface-1)); color: var(--accent); } .rd-daypart-cell.evening { background: color-mix(in srgb, #a78bfa 20%, var(--surface-1)); color: #5b21b6; } .rd-daypart-cell.overnight{ background: color-mix(in srgb, var(--ink) 18%, var(--surface-1)); color: var(--ink-2); } .rd-daypart-cell.now { box-shadow: inset 0 0 0 2px var(--st-live); z-index: 2; } /* Hour-clock wheel — 60-minute circular schedule */ .rd-clock-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; } @media (max-width: 1100px) { .rd-clock-wrap { grid-template-columns: 1fr; } } .rd-clock { width: 280px; height: 280px; position: relative; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent), 0 4px 14px rgba(15,23,42,0.06); } .rd-clock-center { position: absolute; inset: 24%; border-radius: 50%; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15,23,42,0.06); } .rd-clock-center .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rd-clock-center .num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .rd-clock-center .sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; } /* Clock list — 60-minute schedule as ranked rows */ .rd-clock-list { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 8px; max-height: 320px; overflow-y: auto; } .rd-clock-row { display: grid; grid-template-columns: 44px 80px 1fr 52px 60px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; font-size: 12px; transition: background 120ms ease; } .rd-clock-row:hover { background: var(--surface-1); } .rd-clock-row.now { background: color-mix(in srgb, var(--st-live) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-live) 30%, transparent); } .rd-clock-row .min { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; } .rd-clock-row .cat { font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } .rd-clock-row .cat.power { background: color-mix(in srgb, #ef4444 18%, transparent); color: #b91c1c; } .rd-clock-row .cat.current { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .rd-clock-row .cat.recurrent { background: color-mix(in srgb, #38bdf8 18%, transparent); color: #075985; } .rd-clock-row .cat.gold { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #92400e; } .rd-clock-row .cat.sweeper { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-2); } .rd-clock-row .cat.spot { background: color-mix(in srgb, var(--st-review) 18%, transparent); color: var(--st-review); } .rd-clock-row .cat.talk { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #5b21b6; } .rd-clock-row .tk { font-weight: 500; color: var(--ink); } .rd-clock-row .ar { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); } .rd-clock-row .bpm { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; } .rd-clock-row .dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; font-weight: 600; } /* Queue — past + upcoming */ .rd-queue { display: flex; flex-direction: column; gap: 0; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; overflow: hidden; } .rd-q-row { display: grid; grid-template-columns: 60px 40px 1fr 70px 60px; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent); font-size: 12px; } .rd-q-row:last-child { border-bottom: 0; } .rd-q-row.played { opacity: 0.55; } .rd-q-row.now { background: color-mix(in srgb, var(--st-live) 6%, transparent); } .rd-q-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .rd-q-row .thumb { width: 32px; height: 32px; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; } .rd-q-row .tk { font-weight: 600; color: var(--ink); font-size: 12px; } .rd-q-row .ar { font-size: 10px; color: var(--ink-3); } .rd-q-row .cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; } .rd-q-row .dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; } /* Rotation tiers — bar list */ .rd-tier { display: grid; grid-template-columns: 90px 1fr 70px 60px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent); font-size: 12px; } .rd-tier:last-child { border-bottom: 0; } .rd-tier .nm { font-weight: 600; color: var(--ink); } .rd-tier .nm .sub { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); font-weight: 400; display: block; margin-top: 2px; } .rd-tier .pbar { height: 8px; } .rd-tier .spd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; } .rd-tier .pool { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; } /* Separation rules matrix */ .rd-sep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .rd-sep-cell { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--accent); } .rd-sep-cell .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .rd-sep-cell .val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 4px; } .rd-sep-cell .meta { font-size: 10px; color: var(--ink-2); margin-top: 2px; } /* Energy curve — line chart over 24h with current marker */ .rd-energy { position: relative; background: var(--surface-2); border-radius: 10px; padding: 12px; margin-top: 8px; } .rd-energy svg { width: 100%; height: 80px; display: block; } .rd-energy .axis { display: grid; grid-template-columns: repeat(8, 1fr); font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); font-weight: 600; margin-top: 4px; } .rd-energy .axis span { text-align: left; } /* Station card list — radio + MV channels */ .rd-station-row { display: grid; grid-template-columns: 56px 1fr 130px 100px 200px 110px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); cursor: pointer; transition: background 120ms ease; } .rd-station-row:last-child { border-bottom: 0; } .rd-station-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); } .rd-station-row .logo { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #38bdf8)); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; box-shadow: 0 3px 10px rgba(15,23,42,0.1); } .rd-station-row .logo.mv { background: linear-gradient(135deg, var(--ai), color-mix(in srgb, var(--ai) 60%, #a78bfa)); } .rd-station-row .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .rd-station-row .fmt { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .rd-station-row .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; } .rd-station-row .now-tk { font-size: 12px; color: var(--ink-2); } .rd-station-row .now-tk strong { color: var(--ink); font-weight: 600; display: block; } /* PRO reporting meter */ .rd-pro { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; font-size: 11px; } .rd-pro .name { font-family: var(--font-mono); font-weight: 700; color: var(--ink); min-width: 60px; } .rd-pro .pbar { flex: 1; height: 6px; } .rd-pro .pct { font-family: var(--font-mono); color: var(--ink-2); min-width: 50px; text-align: right; } /* Artist + track cards */ .rd-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; } .rd-artist-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease; display: flex; flex-direction: column; } .rd-artist-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); } .rd-artist-card .art { aspect-ratio: 1; background: var(--surface-3) center/cover no-repeat; } .rd-artist-card .body { padding: 12px; } .rd-artist-card .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .rd-artist-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; } /* ── Promotions Gantt timeline (vod-promotions.html) ────────────────────── Months on a sticky axis · one row per promo · Tableau-y bars with hover lift and color coding by promotion kind. */ .pt-swatch { display:inline-block; width:14px; height:10px; border-radius:3px; vertical-align:middle; margin-right:4px; } /* Top month axis */ .pt-axis { position: relative; height: 26px; margin-left: 180px; margin-right: 90px; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); } .pt-axis-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--line) 60%, transparent); } .pt-axis-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dotted color-mix(in srgb, var(--line) 80%, transparent); } .pt-axis-tick .pt-axis-lab { position: absolute; left: 4px; top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } /* One row = label gutter (180px) · timeline track (1fr) · status (90px) */ .pt-row { display: grid; grid-template-columns: 180px 1fr 90px; gap: 16px; align-items: center; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line) 50%, transparent); } .pt-row:last-child { border-bottom: 0; } .pt-row-lab { padding-right: 6px; } .pt-row-name { font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; } .pt-row-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; } .pt-row-track { position: relative; height: 28px; background: color-mix(in srgb, var(--surface-3) 35%, transparent); border-radius: 8px; overflow: hidden; } /* Bar — gradient by kind, rounded, hover-lift, text inside if it fits */ .pt-bar { position: absolute; top: 4px; bottom: 4px; min-width: 8px; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; text-decoration: none; color: white; font-size: 11px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.18); transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease, filter 160ms ease; cursor: pointer; } .pt-bar:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.22); } .pt-bar-text { overflow: hidden; text-overflow: ellipsis; } .pt-bar.hero { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai))); } .pt-bar.campaign { background: linear-gradient(135deg, var(--ai), color-mix(in srgb, var(--ai) 70%, var(--accent))); } .pt-bar.boost { background: linear-gradient(135deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 70%, var(--ai))); } .pt-bar.tilepin { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, white), color-mix(in srgb, var(--accent) 80%, white)); border: 1.5px solid var(--accent); color: var(--accent); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); } .pt-bar.tilepin:hover { color: var(--accent); filter: none; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 30%, white)); } .pt-bar.sponsor { background: linear-gradient(135deg, var(--st-review), color-mix(in srgb, var(--st-review) 70%, var(--accent))); } .pt-bar.ab { background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 40%, white), color-mix(in srgb, var(--ink) 55%, white)); } .pt-row-status .chip { font-size: 10px; } /* Today vertical marker — rendered inside every track + the axis */ .pt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); z-index: 1; pointer-events: none; } .pt-axis .pt-today { top: 6px; bottom: 0; } .pt-axis .pt-today::after { content: "TODAY"; position: absolute; left: -16px; top: -6px; font-family: var(--font-mono); font-size: 8px; font-weight: 800; color: var(--accent); background: var(--surface-1); padding: 1px 5px; border-radius: 3px; letter-spacing: 0.08em; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); white-space: nowrap; } /* Holiday / editorial moments strip — below the bars */ .promo-moments { position: relative; } .pt-moments-rail { position: relative; height: 56px; margin-left: 180px; margin-right: 90px; background: color-mix(in srgb, var(--surface-3) 25%, transparent); border-radius: 8px; } .pt-moment { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 4px 6px; pointer-events: auto; } .pt-moment-flag { width: 100%; height: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--st-review) 60%, white), color-mix(in srgb, var(--st-review) 30%, white)); border: 1px solid color-mix(in srgb, var(--st-review) 50%, white); border-radius: 4px; opacity: 0.85; transition: opacity 160ms ease; } .pt-moment:hover .pt-moment-flag { opacity: 1; } .pt-moment-lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 500; } /* Tabular nums for any mono cells inside analytics surfaces */ .an-card .mono, .an-card .dgrid .mono { font-variant-numeric: tabular-nums; } .an-card .dgrid { font-size: 12.5px; } .an-card .dgrid th { font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .an-card .dgrid td { padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent); } .an-card .dgrid tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); } .an-card .dgrid.compact th { padding: 8px; } .an-card .dgrid.compact td { padding: 8px; } /* Multi-week queue strip */ .mwstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 14px; } .mw-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; } .mw-card.current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); } .mw-card.building { border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); } .mw-card .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; } .mw-card .week { font-size: 13px; font-weight: 600; margin: 4px 0; } .mw-card .state { font-size: 11px; color: var(--ink-2); } .mw-card .pbar { margin-top: 6px; } /* ── Custom tooltip via [data-tip] ────────────────────────── */ [data-tip] { position: relative; } [data-tip]::before, [data-tip]::after { position: absolute; pointer-events: none; opacity: 0; transition: opacity 140ms ease 0ms, transform 140ms ease 0ms; z-index: 100; } [data-tip]::after { content: attr(data-tip); top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-3px); background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: var(--r-s); font-size: 12px; line-height: 1.4; font-weight: 500; white-space: nowrap; max-width: 320px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } [data-tip]::before { content: ""; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--ink); } [data-tip][data-tip-wrap]::after { white-space: normal; width: 240px; } [data-tip][data-tip-pos="top"]::after { top: auto; bottom: calc(100% + 8px); } [data-tip][data-tip-pos="top"]::before { top: auto; bottom: calc(100% + 2px); border-bottom-color: transparent; border-top-color: var(--ink); } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 250ms; } [data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; transition-delay: 250ms; } :root[data-theme="dark"] [data-tip]::after { background: var(--surface-3); color: var(--ink); } :root[data-theme="dark"] [data-tip]::before { border-bottom-color: var(--surface-3); } :root[data-theme="dark"] [data-tip][data-tip-pos="top"]::before { border-top-color: var(--surface-3); border-bottom-color: transparent; } @media (prefers-reduced-motion: reduce) { [data-tip]::before, [data-tip]::after { transition: none !important; } } /* ── AI copilot drawer ────────────────────────────────────── */ .copilot-btn { position: relative; } .copilot-btn::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 999px; background: var(--ai); animation: pulse 1.6s ease-in-out infinite; } .copilot-btn .ic { color: var(--ai); } .copilot-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); } .copilot-drawer { width: min(440px, 92vw); } .copilot-drawer .drawer-h { background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 10%, var(--surface-1)), var(--surface-1)); } .copilot-drawer .drawer-h h2 { display: flex; align-items: center; gap: 8px; } .copilot-drawer .drawer-h h2::before { content: ""; width: 14px; height: 14px; background: var(--ai); mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .copilot-greet { padding: 14px 16px 4px; font-size: 13px; color: var(--ink-2); } .copilot-greet strong { color: var(--ink); } .copilot-section { padding: 8px 16px 14px; } .copilot-section-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .copilot-section-h .grow { flex: 1; } .copilot-insight { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; font-size: 13px; } .copilot-insight + .copilot-insight { border-top: 1px solid var(--line-soft); } .copilot-insight .icon { color: var(--ink-3); flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; } .copilot-insight.review .icon { color: var(--st-review); } .copilot-insight.error .icon { color: var(--st-error); } .copilot-insight.ok .icon { color: var(--st-approved); } .copilot-insight .body { flex: 1; } .copilot-insight .meta { color: var(--ink-3); font-size: 11px; margin-top: 2px; } .copilot-suggest { background: color-mix(in srgb, var(--ai) 4%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--ai) 20%, var(--line)); border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 8px; transition: border-color 160ms ease, background 160ms ease; } .copilot-suggest:hover { background: color-mix(in srgb, var(--ai) 8%, var(--surface-1)); border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); } .copilot-suggest .what { font-weight: 500; font-size: 13px; } .copilot-suggest .why { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .copilot-suggest .acts { display: flex; gap: 6px; margin-top: 8px; } .copilot-ask { padding: 14px 16px; background: var(--surface-2); border-top: 1px solid var(--line); } .copilot-ask label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; display: block; } .copilot-ask textarea { width: 100%; resize: vertical; min-height: 48px; padding: 8px 10px; font-size: 13px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); } .copilot-ask textarea:focus { outline: 2px solid var(--ai); outline-offset: 1px; border-color: var(--ai); } .copilot-ask .examples { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; } .copilot-ask .example { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); cursor: pointer; border: 0; } .copilot-ask .example:hover { background: color-mix(in srgb, var(--ai) 12%, var(--surface-3)); color: var(--ai); } .copilot-ask .submit-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; } .copilot-ask .submit-row .grow { flex: 1; } .copilot-recent { padding: 14px 16px; border-top: 1px solid var(--line-soft); } .copilot-recent .item { display: flex; gap: 8px; padding: 6px 0; font-size: 12px; align-items: flex-start; } .copilot-recent .item .icon { color: var(--ai); flex-shrink: 0; font-family: var(--font-mono); } .copilot-recent .item .body { flex: 1; color: var(--ink-2); } .copilot-recent .item .body strong { color: var(--ink); font-weight: 500; } .copilot-recent .item .when { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; margin-top: 2px; display: block; } /* Episode tag on series-block tiles in schedule timeline */ .tl-prog .ep-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-family: var(--font-mono); font-size: 9px; font-weight: 700; margin-top: 2px; align-self: flex-start; } .tl-prog.aif .ep-tag { background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); } /* Next-up-at-slot preview strip on schedule builder */ .nextup-strip { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; } .nextup-strip .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; flex-shrink: 0; } .nextup-strip .grow { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .nextup-strip .ep-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; } .nextup-strip .ep-pill.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); color: var(--accent); font-weight: 600; } .nextup-strip .ep-pill .when { color: var(--ink-3); font-size: 10px; } /* ── Endpoints page ─────────────────────────────────────────── */ .endpoint-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .endpoint-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); align-items: center; } .endpoint-row.featured { border-left: 3px solid var(--accent); } .endpoint-row .ep-kind { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .endpoint-row .ep-body { min-width: 0; } .endpoint-row .ep-title { font-size: 14px; margin-bottom: 4px; color: var(--ink); } .endpoint-row .ep-url { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .endpoint-row .ep-url .url { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding: 4px 8px; background: var(--accent-soft); border-radius: var(--r-s); user-select: all; } .endpoint-row .ep-meta { color: var(--ink-3); font-size: 11px; margin-bottom: 6px; } .endpoint-row .ep-stats { display: flex; gap: 18px; flex-wrap: wrap; } .endpoint-row .ep-stats .stat { display: flex; flex-direction: column; gap: 1px; } .endpoint-row .ep-stats .stat .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; } .endpoint-row .ep-stats .stat .val { font-size: 12px; color: var(--ink); } .endpoint-row .ep-stats .stat .val.ok { color: var(--st-approved); } .endpoint-row .ep-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .ep-fmt { display: inline-block; padding: 2px 8px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--ink-2); } /* ── EPG full-grid view ─────────────────────────────────────── */ .epg-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; flex-wrap: wrap; } .epg-toolbar .seg { display: inline-flex; gap: 0; } .epg-toolbar .seg .btn { border-radius: 0; } .epg-toolbar .seg .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); } .epg-toolbar .seg .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; } .epg-toolbar .seg .btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); z-index: 1; } .epg-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; } .epg-toolbar .ck input { margin: 0; } .epg { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; } .epg-h { display: flex; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; } .epg-h .ch-col-h { width: 220px; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; border-right: 1px solid var(--line); flex-shrink: 0; } .epg-ruler { flex: 1; display: flex; } .epg-ruler .tk { flex: 1; border-left: 1px solid var(--line-soft); padding: 8px 0 8px 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .epg-ruler .tk:first-child { border-left: 0; } .epg-ruler .tk.wsh { color: var(--ai); font-weight: 600; } .epg-row { display: flex; border-bottom: 1px solid var(--line-soft); min-height: 72px; } .epg-row:last-child { border-bottom: 0; } .epg-row:hover .ch-col { background: var(--surface-2); } .ch-col { width: 220px; padding: 8px 12px; border-right: 1px solid var(--line); flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; } .ch-col .ch-name { font-size: 13px; color: var(--ink); } .ch-col .ch-meta { font-size: 10px; color: var(--ink-3); } .ch-col .ch-status { margin-top: 2px; } .ch-col.active-tune { background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); box-shadow: inset 3px 0 0 var(--accent); } .ch-col .ch-name { cursor: pointer; } .ch-col .ch-name:hover { color: var(--accent); } .epg-lane { flex: 1; display: flex; padding: 6px 0; gap: 1px; min-width: 0; } .epg .prog { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 8px; font-size: 11px; display: flex; flex-direction: column; justify-content: space-between; cursor: grab; overflow: hidden; min-width: 0; user-select: none; transition: border-color 120ms ease, transform 120ms ease; } .epg .prog:hover { border-color: var(--accent); } .epg .prog:active { cursor: grabbing; } .epg .prog.dragging { opacity: 0.5; transform: scale(0.98); } .epg .prog .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .epg .prog .ptime { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; } .epg .prog.live { box-shadow: inset 0 0 0 2px var(--st-live); } .epg .prog.aif { background: transparent; border: 1px dashed var(--ai); color: var(--ai); } .epg .prog.aif .pname { color: var(--ai); } .epg .prog.warn { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); } .epg .prog.warn .pname { color: var(--ink); } .epg .prog.anchor { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .epg .prog.gap { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--st-error) 14%, var(--surface-1)) 0 6px, var(--surface-1) 6px 12px); border-color: color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--st-error); cursor: default; } .epg .prog .ai-tag, .epg .prog .warn-tag, .epg .prog .ep-tag, .epg .prog .hot-tag, .epg .prog .block-tag { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; align-self: flex-start; margin-bottom: 2px; } .epg .prog .ai-tag { background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); } .epg .prog .warn-tag { background: color-mix(in srgb, var(--st-review) 18%, transparent); color: var(--st-review); } .epg .prog .ep-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .epg .prog .hot-tag { background: color-mix(in srgb, var(--st-error) 18%, transparent); color: var(--st-error); } .epg .prog .block-tag { background: var(--surface-3); color: var(--ink-2); } .epg-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--st-live); pointer-events: none; z-index: 4; } .epg-now .lab { position: absolute; top: -2px; left: 6px; background: var(--st-live); color: white; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 0 0 var(--r-s) 0; pointer-events: auto; } .epg-watershed { position: absolute; top: 36px; bottom: 0; width: 0; border-left: 2px dashed var(--ai); pointer-events: none; z-index: 3; } /* Inspector panel under the EPG */ .ins-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .ins-block { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); } .ins-block.warn-blk { background: color-mix(in srgb, var(--st-review) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); } .ins-block .ins-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; } .ins-block .ins-val { font-size: 12px; color: var(--ink); margin-bottom: 8px; line-height: 1.5; } .ins-block .alt-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; margin-right: 4px; margin-bottom: 4px; cursor: pointer; } .ins-block .alt-pill:hover { border-color: var(--accent); color: var(--accent); } .ins-block .ins-actions { display: flex; gap: 4px; flex-wrap: wrap; } /* ── New-title page ─────────────────────────────────────────── */ /* Standalone segmented button group (outside epg-toolbar) */ .seg { display: inline-flex; gap: 0; } .seg .btn { border-radius: 0; } .seg .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); } .seg .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; } .seg .btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); z-index: 1; position: relative; } /* Pull-from-provider card (uses .card + .fgroup-h heading) */ .fgroup-card { padding: 14px; } .fgroup-card .fgroup-h { background: transparent; border-bottom: 0; padding: 0 0 10px; margin: -4px 0 6px; } .pull-pane { padding: 4px 0; } /* Candidate list (hidden until search) */ .candidates { display: none; padding: 14px; margin-bottom: 12px; } .candidates.visible { display: block; } .cand-list { display: flex; flex-direction: column; gap: 8px; } .cand { display: grid; grid-template-columns: 28px 96px 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); cursor: pointer; align-items: center; transition: border-color 120ms ease, background 120ms ease; } .cand:hover { border-color: var(--accent); background: var(--surface-2); } .cand.selected { border-color: var(--accent); background: var(--accent-soft); } .cand input[type="radio"] { margin: 0; justify-self: center; } .cand-art { width: 96px; aspect-ratio: 16/9; border-radius: var(--r-s); } .cand-body { min-width: 0; } .cand-title { font-size: 14px; color: var(--ink); margin-bottom: 2px; } .cand-meta { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; } .cand-ids { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); flex-wrap: wrap; margin-bottom: 6px; } .cand-ids .lab { color: var(--ink-3); text-transform: uppercase; margin-right: 4px; font-size: 9px; letter-spacing: 0.05em; font-weight: 700; } .cand-prov { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .prov-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); } .prov-pill .ic { width: 12px; height: 12px; } .cand-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } /* Success strip after picking a candidate (hidden until pick) */ .detected-strip { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--st-approved) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-approved) 30%, var(--line)); border-radius: var(--r-m); margin: -4px 0 14px; font-size: 13px; } .detected-strip.visible { display: flex; } /* Form labels + inputs on long forms */ .fl { font-size: 12px; color: var(--ink-2); padding-top: 8px; font-weight: 500; } .fl .req { color: var(--st-review); margin-left: 2px; font-weight: 700; } .ffi { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink); width: 100%; font-family: inherit; } textarea.ffi { font-family: inherit; resize: vertical; } .ffi:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .prov-line { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 11px; flex-wrap: wrap; } .req-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } /* Artwork cell */ .art-cell { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; } .art-thumb { border-radius: var(--r-s); flex-shrink: 0; background-size: cover; background-position: center; } .art-thumb.empty { background: var(--surface-2); border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); } .art-thumb.empty .empty-glyph { font-size: 24px; font-weight: 300; } .art-thumb.empty .empty-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; } .art-body { flex: 1; } /* Cast chip with role */ .cast-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; } .cast-chip .role { color: var(--ink-3); font-size: 11px; } .cast-chip .remove { color: var(--ink-3); cursor: pointer; font-weight: 600; margin-left: 2px; } .cast-chip .remove:hover { color: var(--st-error); } /* Small inline editors used by channel-new tiers/dayparts editor */ .ffi-mini { width: 60px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s); font-family: var(--font-mono); font-size: 12px; } .ffi-tiny { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 12px; width: 100%; min-width: 100px; } /* ── Billing console (settings/billing.html) ────────────────── */ .modlist { display: flex; flex-direction: column; gap: 8px; } .modrow { display: grid; grid-template-columns: 28px 1fr 120px auto; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); align-items: center; } .modrow.base { border-color: var(--accent); background: var(--accent-soft); } .modrow.off { background: color-mix(in srgb, var(--ink) 2%, var(--surface-1)); opacity: 0.92; } .modrow.future { opacity: 0.7; } .modrow .ic-lg { width: 22px; height: 22px; color: var(--accent); } .modrow .m-name { font-size: 14px; } .modrow .m-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .modrow .m-tag.base { background: var(--accent); color: white; } .modrow .m-tag.on { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } .modrow .m-tag.off { background: var(--surface-3); color: var(--ink-3); } .modrow .m-tag.soon { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); } .modrow .m-price { font-weight: 600; text-align: right; font-size: 14px; } .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .meter { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px; } .meter.warn { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); background: color-mix(in srgb, var(--st-review) 4%, var(--surface-2)); } .meter .m-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; } .meter .m-l { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } .meter .m-v { font-size: 13px; font-weight: 700; } .meter .m-foot { display: flex; justify-content: space-between; margin-top: 6px; align-items: center; } .meter .pbar { height: 6px; } /* ── Pricing page (pre-auth) ────────────────────────────────── */ body.pricing-page { background: var(--bg); } .pricing-top { display: flex; align-items: center; gap: 16px; padding: 14px 36px; border-bottom: 1px solid var(--line); background: var(--surface-1); position: sticky; top: 0; z-index: 5; } .pricing-top .pricing-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; } .pricing-top .pricing-nav a { padding: 6px 12px; border-radius: var(--r-s); color: var(--ink-2); } .pricing-top .pricing-nav a:hover { background: var(--surface-2); text-decoration: none; } .pricing-top .pricing-nav a.active { color: var(--ink); font-weight: 600; } .pricing-hero { text-align: center; padding: 60px 24px 30px; max-width: 760px; margin: 0 auto; } .pricing-hero h1 { font-size: 40px; letter-spacing: -0.02em; margin: 0 0 12px; } .pricing-hero p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0 auto 24px; max-width: 580px; } .bill-toggle { display: inline-flex; } .plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 36px 40px; max-width: 1400px; margin: 0 auto; } .plan-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform 140ms ease, box-shadow 140ms ease; } .plan-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); position: relative; } .plan-card .plan-h { position: relative; } .plan-card .plan-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .plan-card .plan-tag { color: var(--ink-3); font-size: 13px; margin-top: 2px; } .plan-card .plan-rec { position: absolute; top: -34px; right: -8px; background: var(--accent); color: white; font-size: 10px; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .plan-card .plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .plan-card .plan-price .curr { font-size: 18px; color: var(--ink-2); font-weight: 600; } .plan-card .plan-price .amt { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; font-family: var(--font-mono); } .plan-card .plan-price .per { color: var(--ink-3); font-size: 13px; margin-left: 4px; } .plan-card .plan-sub { color: var(--ink-3); font-size: 12px; margin-top: -8px; } .plan-card .btn-block { width: 100%; justify-content: center; padding: 10px 16px; font-size: 14px; } .plan-card .plan-includes { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; } .plan-card .plan-includes .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; margin-bottom: 6px; margin-top: 10px; } .plan-card .plan-includes .lab:first-child { margin-top: 0; } .plan-card .plan-includes ul { margin: 0 0 8px; padding-left: 0; list-style: none; font-size: 12px; color: var(--ink-2); line-height: 1.7; } .plan-card .plan-includes ul.scale li { font-size: 12px; color: var(--ink); } .plan-card .plan-includes ul.scale .muted { font-size: 11px; } .pricing-section { max-width: 1100px; margin: 0 auto; padding: 40px 36px; } .pricing-section h2 { font-size: 24px; margin: 0 0 8px; letter-spacing: -0.01em; } .pricing-section > p { color: var(--ink-2); margin-bottom: 24px; } .alc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .alc-mod { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; } .alc-mod.base { border-color: var(--accent); background: var(--accent-soft); } .alc-mod.future { opacity: 0.7; } .alc-mod .alc-h { display: flex; align-items: center; gap: 10px; font-size: 14px; } .alc-mod .alc-h .ic { color: var(--accent); width: 20px; height: 20px; } .alc-mod .alc-price { font-size: 16px; font-weight: 600; } .alc-mod .alc-desc { font-size: 12px; color: var(--ink-2); line-height: 1.55; } .alc-mod .alc-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-left: auto; } .enterprise .ent-card { display: grid; grid-template-columns: 1fr 220px; gap: 24px; padding: 28px 32px; background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ai) 50%, var(--ink)) 100%); color: white; border-radius: var(--r-l); align-items: center; } .enterprise .ent-card h2, .enterprise .ent-card p, .enterprise .ent-card ul { color: white; } .enterprise .ent-card .muted, .enterprise .ent-card li { color: rgba(255,255,255,0.85); } .enterprise .ent-card .btn-primary { background: white; color: var(--ink); border-color: white; } .faq { display: flex; flex-direction: column; gap: 6px; } .faq details { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); } .faq summary { cursor: pointer; font-weight: 600; } .faq details > div { padding-top: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.55; } .pricing-foot { text-align: center; padding: 40px 24px; color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--line); } /* ── Block-new wizard ──────────────────────────────────────── */ .kind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .kind-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); cursor: pointer; background: var(--surface-1); transition: border-color 140ms ease, background 140ms ease; position: relative; } .kind-tile:hover { border-color: var(--accent); } .kind-tile.selected { border-color: var(--accent); background: var(--accent-soft); } .kind-tile input { position: absolute; top: 12px; right: 12px; } .kind-tile .ic-lg { width: 22px; height: 22px; color: var(--accent); } .kind-tile .kn { font-size: 14px; font-weight: 700; } .kind-tile .kd { font-size: 11px; color: var(--ink-2); line-height: 1.45; } .day-chip { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-size: 12px; font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); position: relative; } .day-chip input { position: absolute; opacity: 0; pointer-events: none; } .day-chip:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); } .series-picker .series-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); } .series-picker .series-card.chosen { border-color: var(--accent); background: var(--accent-soft); } .series-picker .series-card img { width: 40px; height: 60px; border-radius: 3px; object-fit: cover; flex-shrink: 0; } .series-picker .series-card .sb { flex: 1; min-width: 0; } .series-picker .series-card .sb > div:first-child { font-size: 13px; } .prog-strip { position: relative; height: 6px; border-radius: 999px; background: var(--surface-3); } .prog-strip .prog-fill { height: 100%; background: var(--accent); border-radius: 999px; } .prog-strip .prog-marker { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 999px; background: white; border: 2px solid var(--accent); transform: translateX(-50%); } .pool-list { display: flex; flex-direction: column; gap: 4px; } .pool-list .pool-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13px; } .pool-list .pool-item img { width: 28px; height: 40px; border-radius: 3px; object-fit: cover; } .pool-list .pool-item .remove { color: var(--ink-3); cursor: pointer; font-weight: 600; padding: 0 6px; } .pool-list .pool-item .remove:hover { color: var(--st-error); } .scope-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .scope-h { font-size: 13px; margin-bottom: 10px; } .scope-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .scope-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--r-m); cursor: pointer; background: var(--surface-1); transition: border-color 140ms ease, background 140ms ease; } .scope-card:hover { border-color: var(--accent); } .scope-card.selected { border-color: var(--accent); background: var(--accent-soft); } .scope-card input { position: absolute; opacity: 0; } .scope-card .ic { color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; } .scope-card .sn { font-weight: 600; font-size: 13px; } .scope-card .sd { line-height: 1.4; } /* ── Manual 7-day scheduler (schedule-builder · view-7day) ─── */ .sb7-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; flex-wrap: wrap; } .sb7-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; } .sb7-toolbar .ck input { margin: 0; } .sb7 { display: grid; grid-template-columns: 1fr; gap: 12px; height: calc(100vh - 320px); min-height: 600px; } .sb7.editing { grid-template-columns: 280px 1fr; } /* Catalog rail */ .sb7-rail { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sb7-rail .rail-h { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: space-between; flex-shrink: 0; } .sb7-rail .rail-search { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .sb7-rail .rail-search input { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; } .sb7-rail .rail-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .sb7-rail .rail-filters { display: flex; gap: 4px; } .sb7-rail .rail-filters .pickr { font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink-2); cursor: pointer; } .sb7-rail .rail-tabs { display: flex; padding: 0 10px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; } .sb7-rail .rt-tab { padding: 8px 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-3); cursor: pointer; font-size: 12px; } .sb7-rail .rt-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } .sb7-rail .rt-tab .mono { font-size: 10px; color: var(--ink-3); margin-left: 4px; } .sb7-rail .rail-list { overflow-y: auto; flex: 1; padding: 6px; } .rail-row { display: grid; grid-template-columns: 36px 1fr 16px; gap: 8px; padding: 6px 8px; border-radius: var(--r-s); align-items: center; cursor: grab; transition: background 100ms ease; } .rail-row:hover { background: var(--surface-2); } .rail-row:active { cursor: grabbing; } .rail-row.dragging { opacity: 0.4; } .rail-row .rr-thumb { width: 36px; height: 54px; background: var(--surface-3) center/cover no-repeat; border-radius: 3px; flex-shrink: 0; } .rail-row .rr-body { min-width: 0; } .rail-row .rr-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-row .rr-meta { font-size: 10px; color: var(--ink-3); } .rail-row .rr-drag { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; align-self: center; user-select: none; } /* ─────────────────────────────────────────────────────────────── Premium 7-day EPG · variable-height tiles · in-program ad bands ─────────────────────────────────────────────────────────────── */ .epg7-wrap { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: auto; min-height: 0; max-height: calc(100vh - 320px); } .epg7 { display: grid; grid-template-columns: 58px repeat(7, minmax(140px, 1fr)); grid-auto-rows: 38px 1fr; position: relative; } .epg7-corner { position: sticky; top: 0; left: 0; z-index: 5; background: var(--surface-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 8px; display: flex; align-items: center; justify-content: center; } .epg7-dh { position: sticky; top: 0; z-index: 4; background: var(--surface-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; justify-content: center; } .epg7-dh:last-of-type { border-right: 0; } .epg7-dh.today { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-bottom-color: var(--accent); } .epg7-dh .dh-dow { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; } .epg7-dh .dh-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; } .epg7-dh.today .dh-tag { color: var(--accent); } /* Time gutter — sticky-left so the hour labels stay visible while scrolling. */ .epg7-times { position: sticky; left: 0; z-index: 3; background: var(--surface-2); border-right: 1px solid var(--line); } .epg7-tk { position: absolute; left: 0; right: 0; padding: 2px 6px 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; transform: translateY(-7px); border-top: 1px solid var(--line-soft); } .epg7-tk:first-child { border-top: 0; transform: translateY(0); } /* Day column — programs are absolutely positioned inside. */ .epg7-col { position: relative; border-right: 1px solid var(--line-soft); background: var(--surface-1); overflow: hidden; } .epg7-col:last-child { border-right: 0; } .epg7-col.today { background: color-mix(in srgb, var(--accent) 2%, var(--surface-1)); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent); } /* Hour rule lines */ .epg7-rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-soft); pointer-events: none; } .epg7-rule.strong { background: color-mix(in srgb, var(--ink) 8%, transparent); } /* Pre-watershed shading — covers 00:00 → 21:00 on every column. Subtle warm tint so the operator's eye knows where the "kids zone" is. The exact pixel boundary matches the JS PX_PER_MIN constant (1px/min × 21h × 60). */ .epg7-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1260px; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--st-review) 1.5%, transparent) 0 30px, transparent 30px 60px); pointer-events: none; z-index: 0; } .epg7-col.today::before { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--st-review) 2.5%, transparent) 0 30px, transparent 30px 60px); } /* Watershed (21:00) line — dashed, AI teal, with a small label on the right edge. */ .epg7-watershed { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--ai) 70%, transparent); pointer-events: none; z-index: 1; } .epg7-watershed::after { content: "21:00 watershed"; position: absolute; right: 4px; top: -7px; background: color-mix(in srgb, var(--ai) 90%, black); color: white; font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 2px; opacity: 0; transition: opacity 120ms ease; } .epg7-col:hover .epg7-watershed::after { opacity: 1; } /* Live "now" line on today's column */ .epg7-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--st-live); z-index: 4; pointer-events: none; } .epg7-now .now-lab { position: absolute; left: 4px; top: -16px; background: var(--st-live); color: white; padding: 1px 5px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; border-radius: 2px; } /* Program tile — variable height (top/height set inline). Backdrop image is overlaid with a dark gradient so name/runtime is always legible. */ .epg7-prog { position: absolute; left: 4px; right: 4px; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; cursor: grab; overflow: hidden; transition: transform 120ms ease, box-shadow 120ms ease; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); } .epg7-prog:hover { transform: scale(1.015); z-index: 6; box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 1px var(--accent); } .epg7-prog:active { cursor: grabbing; } .epg7-prog.dragging { opacity: 0.4; } .epg7-prog .ep-overlay { position: absolute; inset: 0; padding: 6px 8px 8px; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%); color: white; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; } .epg7-prog .ep-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .epg7-prog .ep-time { font-size: 10px; color: rgba(255,255,255,0.92); font-weight: 700; letter-spacing: 0.04em; } .epg7-prog .ep-name { font-size: 13px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,0.5); margin-top: auto; } .epg7-prog .ep-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .epg7-prog .ep-meta { font-size: 10px; color: rgba(255,255,255,0.85); } /* AI / lock badge — small chip in the top-left corner of every program tile. */ .epg7-prog .ep-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 3px; border-radius: 3px; font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; } .epg7-prog .ep-badge .ic { width: 10px; height: 10px; } .epg7-prog .ep-badge.ai { background: color-mix(in srgb, var(--ai) 88%, black); color: white; } .epg7-prog .ep-badge.locked { background: rgba(255,255,255,0.92); color: var(--ink); } /* Ad-pod inventory chip in the bottom-right of each tile. Visible whenever the tile has cues — shows the operator the SCTE plan at a glance. */ .epg7-prog .ep-ads { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--st-review) 85%, black); color: white; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; opacity: 0; transition: opacity 120ms ease; } .epg7.ads-on .epg7-prog .ep-ads { opacity: 0.94; } /* Size variants — small tiles drop the time stamp; tiny drops the meta too. */ .epg7-prog.small .ep-overlay { padding: 4px 6px; gap: 2px; } .epg7-prog.small .ep-name { font-size: 11px; } .epg7-prog.small .ep-meta { font-size: 9px; } .epg7-prog.small .ep-time { font-size: 9px; } .epg7-prog.small .ep-ads { font-size: 8px; padding: 0 4px; } .epg7-prog.tiny .ep-overlay { padding: 2px 5px; gap: 0; } .epg7-prog.tiny .ep-time { display: none; } .epg7-prog.tiny .ep-name { font-size: 10px; font-weight: 700; line-height: 1.05; } .epg7-prog.tiny .ep-meta { display: none; } .epg7-prog.tiny .ep-ads { display: none; } .epg7-prog.tiny .ep-badge { font-size: 7px; padding: 0 3px; } .epg7-prog.tiny .ep-badge .ic { width: 8px; height: 8px; } .epg7-prog.big .ep-name { font-size: 16px; line-height: 1.1; } .epg7-prog.big .ep-meta { font-size: 11px; } /* Live-now tile gets a red ring */ .epg7-prog.live { box-shadow: 0 0 0 2px var(--st-live), 0 6px 18px rgba(0,0,0,0.2); } .epg7-prog.live .ep-time { color: white; } /* SCTE-35 cue ticks — small markers on the right edge for each mid-roll. Pre/post become thin top/bottom strips. Hidden by default; .epg7.ads-on shows. */ .ep-cue { position: absolute; right: 0; width: 4px; height: 8px; background: var(--st-review); opacity: 0; pointer-events: auto; z-index: 2; transition: opacity 120ms ease; border-radius: 2px 0 0 2px; box-shadow: -1px 0 0 rgba(255,255,255,0.5); } .ep-cue.pre, .ep-cue.post { left: 0; right: 0; width: auto; height: 4px; border-radius: 0; background: color-mix(in srgb, var(--st-review) 92%, black); } .ep-cue.pre { top: 0 !important; } .ep-cue.post { bottom: 0 !important; top: auto; } .epg7.ads-on .ep-cue { opacity: 0.9; } .epg7.ads-on .epg7-prog:hover .ep-cue { opacity: 1; } /* Gap — unfilled stretch. Highlighted amber backdrop. */ .epg7-gap { position: absolute; left: 4px; right: 4px; border-radius: 4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-review) 12%, transparent) 0 8px, color-mix(in srgb, var(--st-review) 22%, transparent) 8px 16px); border: 1px dashed color-mix(in srgb, var(--st-review) 60%, transparent); pointer-events: none; opacity: 0; transition: opacity 120ms ease; z-index: 1; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; } .epg7-gap .g-tag { font-size: 9px; font-weight: 800; color: color-mix(in srgb, var(--st-review) 90%, black); letter-spacing: 0.05em; } .epg7-gap .g-sub { font-size: 9px; } .epg7.gaps-on .epg7-gap { opacity: 1; } /* Rescue tile — what would air during a gap (channel-default bumper loop). */ .epg7-rescue { position: absolute; left: 8px; right: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ai) 18%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--ai) 65%, transparent); padding: 4px 8px; z-index: 3; pointer-events: auto; cursor: pointer; } .epg7-rescue .rs-name { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--ai) 90%, black); } .epg7-rescue .rs-meta { font-size: 9px; color: var(--ink-3); margin-top: 2px; } /* Drop-target visuals — when dragging a title from the rail. */ .epg7-col.hover, .epg7-col.drag-over { background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); box-shadow: inset 0 0 0 2px var(--accent); } /* Tile × button — hidden until the tile is hovered. Sits above the AI/LOCK badge. */ .epg7-prog .ep-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.65); color: white; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms ease, background 120ms ease, transform 120ms ease; z-index: 7; padding: 0; display: flex; align-items: center; justify-content: center; } .epg7-prog:hover .ep-remove { opacity: 1; } .epg7-prog .ep-remove:hover { background: var(--st-error); transform: scale(1.1); } /* "MANUAL" badge — replaces AI / LOCK on tiles dropped in from the rail. */ .epg7-prog .ep-badge.manual { background: color-mix(in srgb, var(--accent) 80%, black); color: white; } /* Tile click popover — anchored above (or below) the clicked tile. */ .ep-popover { position: absolute; z-index: 80; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); min-width: 280px; max-width: 360px; animation: pop-in 140ms ease-out; } @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ep-popover .pop-head { font-size: 13px; margin-bottom: 4px; } .ep-popover .pop-meta { font-family: var(--font-mono); font-size: 11px; margin-bottom: 10px; } .ep-popover .pop-acts { display: flex; flex-wrap: wrap; gap: 6px; } .ep-popover .btn-danger { color: var(--st-error); border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); } .ep-popover .btn-danger:hover { background: color-mix(in srgb, var(--st-error) 10%, var(--surface-1)); } /* Legend strip below the EPG */ .epg7-legend { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-top: 8px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); font-size: 11px; color: var(--ink-2); flex-wrap: wrap; } .epg7-legend .lg-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; } .epg7-legend .lg-key.ai-key { background: color-mix(in srgb, var(--ai) 88%, black); } .epg7-legend .lg-key.ad { background: var(--st-review); } .epg7-legend .lg-key.live { background: var(--st-live); } .epg7-legend .lg-key.locked { background: var(--ink); border: 1px solid rgba(255,255,255,0.6); } .epg7-legend .lg-key.gap { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-review) 14%, transparent) 0 4px, color-mix(in srgb, var(--st-review) 28%, transparent) 4px 8px); border: 1px dashed color-mix(in srgb, var(--st-review) 60%, transparent); width: 16px; height: 12px; } .epg7-legend .lg-key.rescue { background: color-mix(in srgb, var(--ai) 25%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--ai) 65%, transparent); width: 16px; height: 12px; } /* ─────────────────────────────────────────────────────────────── AI-built provenance banner — explicit "schedule was machine-built" signal at top of 7-day view. Confidence chip + freshness + Re-propose. ─────────────────────────────────────────────────────────────── */ .ai-built { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--ai) 8%, var(--surface-1)) 0%, var(--surface-1) 60%); border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--line)); border-left: 3px solid var(--ai); border-radius: var(--r-m); } .ai-built .aib-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--ai) 18%, var(--surface-1)); color: var(--ai); } .ai-built .aib-icon .ic { width: 18px; height: 18px; } .ai-built .aib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ai-built .aib-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); flex-wrap: wrap; } .ai-built .aib-head strong { color: var(--ai); } .ai-built .aib-head .chip { font-size: 10px; } .ai-built .aib-meta { font-size: 11px; color: var(--ink-3); } .ai-built .aib-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ─────────────────────────────────────────────────────────────── Watershed validator — surfaces mature-rated tiles scheduled pre-21:00. Blocks the publish gate until count is zero. ─────────────────────────────────────────────────────────────── */ .watershed-validator { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 12px; background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 45%, var(--line)); border-left: 3px solid var(--st-review); border-radius: var(--r-m); } .watershed-validator .wsv-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--st-review) 20%, var(--surface-1)); color: color-mix(in srgb, var(--st-review) 90%, black); font-size: 16px; font-weight: 800; } .watershed-validator .wsv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .watershed-validator .wsv-head { font-size: 13px; color: var(--ink); } .watershed-validator .wsv-head strong { color: color-mix(in srgb, var(--st-review) 90%, black); font-size: 14px; } .watershed-validator .wsv-list { display: flex; flex-direction: column; gap: 1px; font-size: 10px; } .watershed-validator .wsv-row { line-height: 1.4; } .watershed-validator .wsv-actions { display: flex; gap: 6px; flex-shrink: 0; } /* Per-tile rating chip — always visible so violations are scannable from the wall. */ .epg7-prog .ep-rating { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; } .epg7-prog .ep-rating.family { background: rgba(255,255,255,0.85); color: var(--ink); } .epg7-prog .ep-rating.mid { background: color-mix(in srgb, var(--st-review) 50%, rgba(255,255,255,0.9)); color: var(--ink); } .epg7-prog .ep-rating.mature { background: var(--st-review); color: white; } /* Watershed status pill — bottom row of the tile. Red for violations, AI-teal for benign crosses. */ .epg7-prog .ep-ws-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; } .epg7-prog .ep-ws-pill.error { background: var(--st-error); color: white; } .epg7-prog .ep-ws-pill.info { background: color-mix(in srgb, var(--ai) 80%, black); color: white; } /* Violation outline — replaces the tile shadow with a red ring so it's unmissable, even at small sizes. Pulse on auto-fix flash. */ .epg7-prog.violation { box-shadow: 0 0 0 2px var(--st-error), 0 6px 18px rgba(239,68,68,0.35) !important; } .epg7-prog.violation::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--st-error) 22%, transparent); pointer-events: none; mix-blend-mode: multiply; } .epg7-prog.violation.live { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 4px var(--st-live), 0 6px 18px rgba(0,0,0,0.2) !important; } .epg7-prog.crosses-ws:not(.violation) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ai) 70%, transparent), 0 1px 3px rgba(0,0,0,0.08); } .epg7-prog.ws-flash { animation: ws-flash 1.4s ease; } @keyframes ws-flash { 0% { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 16px rgba(239,68,68,0.3); } 60% { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 4px rgba(239,68,68,0.0); } 100% { box-shadow: 0 0 0 2px var(--st-error), 0 6px 18px rgba(239,68,68,0.35); } } .epg7-prog.ws-fixed { box-shadow: 0 0 0 2px var(--st-approved), 0 6px 18px rgba(16,185,129,0.25) !important; transition: box-shadow 600ms ease; } /* ── Live PIP — small fixed-position channel preview ───────── */ .live-pip { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: 320px; background: #0a0d12; border-radius: var(--r-m); box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); overflow: hidden; transition: width 200ms ease, transform 200ms ease; } .live-pip.minimized { width: 180px; } .live-pip.minimized .pip-meta { display: none; } .live-pip.minimized video { height: 100px; } .live-pip .pip-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,0.04); color: white; font-size: 11px; } .live-pip .pip-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--st-live); color: white; font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .live-pip .pip-badge::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: white; animation: pulse 1.4s ease-in-out infinite; } .live-pip .pip-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-pip .pip-btn { background: transparent; border: 0; color: rgba(255,255,255,0.6); cursor: pointer; padding: 2px 6px; font-size: 12px; border-radius: 3px; } .live-pip .pip-btn:hover { background: rgba(255,255,255,0.1); color: white; } .live-pip .pip-frame { position: relative; aspect-ratio: 16/9; height: 180px; background: #000; } .live-pip.minimized .pip-frame { height: 100px; } .live-pip .pip-frame video { width: 100%; height: 100%; display: block; background: #000; object-fit: cover; } .live-pip .pip-frame .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: white; font-size: 30px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .live-pip .pip-frame.needs-tap .play-overlay { opacity: 1; pointer-events: auto; } .live-pip .pip-frame .play-overlay::before { content: "▶"; } .live-pip .pip-frame .pip-pulse { position: absolute; top: 8px; left: 8px; } .live-pip .pip-meta { padding: 6px 10px; color: rgba(255,255,255,0.7); font-size: 10px; font-family: var(--font-mono); border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 6px; } .live-pip .pip-meta .pip-url { color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .live-pip.hidden { display: none; } .live-pip-fab { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 999px; background: var(--ink); color: white; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.25); cursor: pointer; z-index: 60; border: 0; font-size: 18px; } .live-pip-fab:hover { background: var(--accent); } /* ── Channel live status bar (ticking clock + counters) ───── */ .channel-statusbar { display: grid; grid-template-columns: 1.3fr 1.3fr 1.3fr 1fr 1fr; gap: 0; background: var(--ink); color: white; border-radius: var(--r-m); padding: 0; margin-bottom: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.08); } .channel-statusbar .cs-cell { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,0.08); position: relative; min-width: 0; } .channel-statusbar .cs-cell:last-child { border-right: 0; } .channel-statusbar .cs-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-statusbar .cs-val { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-statusbar .cs-val.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; } .channel-statusbar .cs-meta { font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-statusbar .cs-flag { font-size: 18px; margin-right: 2px; } .channel-statusbar .cs-cell.region { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, var(--ink)), var(--ink)); } .channel-statusbar .cs-cell.time .cs-clock { color: var(--ai); } .channel-statusbar .cs-cell.uptime .cs-uptime::before { content: "● "; color: var(--st-live); font-size: 12px; animation: pulse 1.4s ease-in-out infinite; } .channel-statusbar .cs-cell.counter .cs-counter { color: white; transition: color 200ms ease; } .channel-statusbar .cs-cell.counter .cs-counter.bump { color: var(--ai); transform: scale(1.05); } .channel-statusbar .cs-cell.counter .cs-val { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; } .channel-statusbar .cs-cell.next .cs-next { color: var(--st-review); } @media (max-width: 1280px) { .channel-statusbar { grid-template-columns: 1fr 1fr 1fr; } .channel-statusbar .cs-cell.counter, .channel-statusbar .cs-cell.next { display: none; } } /* ── VOD publish gate (vod-publish-gate.html) ──────────────── */ .vod-pg-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .vod-pg-tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); } .vod-pg-tile.blocker { border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); background: color-mix(in srgb, var(--st-error) 4%, var(--surface-1)); } .vod-pg-tile.warn { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); background: color-mix(in srgb, var(--st-review) 4%, var(--surface-1)); } .vod-pg-tile.ok { border-color: color-mix(in srgb, var(--st-approved) 40%, var(--line)); background: color-mix(in srgb, var(--st-approved) 4%, var(--surface-1)); } .vod-pg-tile.info { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); } .vod-pg-tile .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; } .vod-pg-tile .val { font-size: 28px; font-weight: 700; font-family: var(--font-mono); margin: 4px 0 2px; letter-spacing: -0.02em; } .vod-pg-tile.blocker .val { color: var(--st-error); } .vod-pg-tile.warn .val { color: var(--st-review); } .vod-pg-tile.ok .val { color: var(--st-approved); } .vod-pg-tile.info .val { color: var(--accent); } .vod-pg-tile .meta { font-size: 11px; color: var(--ink-3); } .vod-pg-section { margin-bottom: 32px; } .vod-pg-section h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; } .vod-pg-section .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; } .vod-pg-section .dot.blocker { background: var(--st-error); } .vod-pg-section .dot.warn { background: var(--st-review); } .vod-pg-section .dot.ok { background: var(--st-approved); } .vod-pg-section .dot.info { background: var(--accent); } .vod-pg-card { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); margin-bottom: 8px; align-items: flex-start; } .vod-pg-card.blocker { border-left: 3px solid var(--st-error); } .vod-pg-card.warn { border-left: 3px solid var(--st-review); } .vod-pg-card .vod-pg-row { flex: 1; min-width: 0; } .vod-pg-card .vod-pg-row-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .vod-pg-card .vod-pg-row-acts { display: flex; gap: 4px; flex-shrink: 0; align-items: center; flex-wrap: wrap; max-width: 240px; } .vod-pg-grid-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .vod-pg-check { padding: 6px 10px; background: color-mix(in srgb, var(--st-approved) 5%, var(--surface-1)); border-left: 2px solid var(--st-approved); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 12px; color: var(--ink-2); } /* ── Page-detail layout (storefront-detail.html) ────────────── */ .page-detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; } .page-title-edit { display: flex; align-items: center; gap: 10px; } .page-title-edit #page-title-text.editing { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; padding: 0 4px; } .shelf-list { display: flex; flex-direction: column; gap: 4px; } .shelf-editor-pane { min-width: 0; } .shelf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .shelf-head h2 { font-size: 17px; letter-spacing: -0.01em; } .railrow .badge.incomplete { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); border: 1px solid color-mix(in srgb, var(--st-review) 30%, transparent); font-size: 9px; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .railrow .badge.draft { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); font-size: 9px; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Library picker modal (reusable for Add / Replace) ──────── */ .modal.wide#library-picker { max-width: 960px; } .lp-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; } .lp-toolbar input[type="search"] { flex: 1; min-width: 220px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; } .lp-toolbar input[type="search"]:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .lp-toolbar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 12px; } .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 14px; max-height: 60vh; overflow-y: auto; background: var(--surface-1); } .lp-card { display: grid; grid-template-columns: 22px 60px 1fr; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); cursor: pointer; align-items: center; transition: border-color 100ms ease, background 100ms ease; } .lp-card:hover { border-color: var(--accent); background: var(--surface-2); } .lp-card input { margin: 0; justify-self: center; } .lp-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .lp-card .lp-poster { width: 60px; height: 90px; border-radius: 3px; background: #1a2436 center/cover no-repeat; flex-shrink: 0; } .lp-card .lp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lp-card .lp-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── AI suggestion multi-chip rows ──────────────────────────── */ .ai-axes-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .ai-axes-table th, .ai-axes-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .ai-axes-table th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); text-align: left; } .ai-axes-table td:first-child, .ai-axes-table th:first-child { width: 28px; } .ai-axes-table .num { width: 64px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-s); text-align: right; font-family: var(--font-mono); } .multi-chips { display: flex; flex-wrap: wrap; gap: 4px; } .multi-chips .mchip { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); padding: 3px 9px; border-radius: 999px; font-size: 11px; cursor: pointer; transition: all 100ms ease; } .multi-chips .mchip:hover { border-color: var(--accent); color: var(--accent); } .multi-chips .mchip.on { background: var(--accent); color: white; border-color: var(--accent); } /* ── Explainer drawer ───────────────────────────────────────── */ #explainer-drawer { width: 460px; } .exp-section { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); } .exp-section .exp-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; } .exp-table { width: 100%; border-collapse: separate; border-spacing: 0; } .exp-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 4px 8px 4px 0; width: 110px; vertical-align: top; } .exp-table td { font-size: 13px; padding: 4px 0; color: var(--ink); } .exp-items { list-style: decimal; padding-left: 20px; } .exp-items li { padding: 4px 0; font-size: 13px; } /* ── VOD shelf editor (storefront-detail.html) ─────────────── */ .shelf-toolbar { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; } .shelf-toolbar .btn .ic { width: 14px; height: 14px; } /* VOD shelf is a horizontal row — Move ← / → arrows use i-arrow-left / right unrotated. */ .row-acts .btn .ic { transform: none; } .shelf-tile .st-acts .st-act .ic { transform: none; } .shelf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 0 0 12px; } .shelf-tile { position: relative; aspect-ratio: 2/3; border-radius: 4px; background: #1a2436 center/cover no-repeat; cursor: grab; overflow: hidden; transition: transform 120ms ease, box-shadow 120ms ease; } .shelf-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); } .shelf-tile:hover .st-acts { opacity: 1; } .shelf-tile:active { cursor: grabbing; } .shelf-tile.dragging { opacity: 0.4; } .shelf-tile.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; } .shelf-tile .st-pos { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.7); color: white; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; z-index: 2; } .shelf-tile .st-lock { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; font-size: 10px; padding: 1px 4px; border-radius: 2px; z-index: 2; } .shelf-tile .st-name { position: absolute; left: 4px; right: 4px; bottom: 18px; color: white; font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none; } .shelf-tile .st-acts { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(0,0,0,0.65); opacity: 0; transition: opacity 120ms ease; z-index: 3; } .shelf-tile .st-acts .st-act { width: 28px; height: 28px; border-radius: 4px; background: rgba(255,255,255,0.18); border: 0; color: white; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .shelf-tile .st-acts .st-act .ic { width: 14px; height: 14px; } .shelf-tile .st-acts .st-act:hover { background: var(--accent); } .shelf-tile .st-acts .st-act.danger:hover { background: var(--st-error); } .row-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; } /* ── Library title cell with mini poster ───────────────────── */ .title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .title-poster { width: 32px; height: 48px; border-radius: 3px; background: var(--surface-3) center/cover no-repeat; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .title-cell > span:last-child { min-width: 0; } .title-cell strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } /* ── Catalog wizard (catalog-new.html) ──────────────────────── */ .step-rail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 22px; } .step-pip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .step-pip:hover { border-color: var(--accent); } .step-pip.done { background: color-mix(in srgb, var(--st-approved) 6%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-approved) 30%, var(--line)); } .step-pip.active { border-color: var(--accent); background: var(--accent-soft); } .step-pip .n { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; flex-shrink: 0; color: var(--ink-3); } .step-pip.done .n { background: var(--st-approved); color: white; border-color: var(--st-approved); } .step-pip.active .n { background: var(--accent); color: white; border-color: var(--accent); } .step-pip .lab { font-weight: 600; flex: 1; color: var(--ink); } .step-pip .meta { font-size: 11px; color: var(--ink-3); } .wiz-step { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; margin-bottom: 14px; transition: opacity 200ms ease; } .wiz-step.done { opacity: 0.92; background: color-mix(in srgb, var(--st-approved) 3%, var(--surface-1)); } .wiz-step.active { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .step-h-n { width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex-shrink: 0; } .wiz-step.done .step-h-n { background: var(--st-approved); } .sidebar .nav-item.step-nav { gap: 8px; } .sidebar .nav-item.step-nav .step-n { width: 18px; height: 18px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); font-size: 10px; font-family: var(--font-mono); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar .nav-item.step-nav.active .step-n { background: var(--accent); color: white; } .src-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .src-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; position: relative; transition: border-color 120ms ease, background 120ms ease; } .src-tile:hover { border-color: var(--accent); background: var(--surface-2); } .src-tile.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .src-tile input { position: absolute; top: 10px; right: 10px; } .src-tile .ic-lg { width: 28px; height: 28px; color: var(--accent); } .src-tile .src-name { font-weight: 600; font-size: 14px; color: var(--ink); } .src-tile .src-desc { font-size: 12px; color: var(--ink-2); line-height: 1.45; } .src-tile .src-meta { font-size: 10px; color: var(--ink-3); } .dgrid tbody tr.needs-attn { background: color-mix(in srgb, var(--st-review) 6%, transparent); } .prelist { display: flex; flex-direction: column; gap: 6px; } .preitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-s); font-size: 13px; } .preitem.ok { background: color-mix(in srgb, var(--st-approved) 6%, transparent); color: var(--ink); } .preitem.ok .ic { color: var(--st-approved); } .preitem.warn { background: color-mix(in srgb, var(--st-review) 8%, transparent); color: var(--ink); } .preitem.warn .ic { color: var(--st-review); } /* Ingenee AI brand icon — always teal, slight nudge inline with text */ .ic-ai { color: var(--ai); width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; } .btn-primary .ic-ai { color: white; } h2 .ic-ai, h3 .ic-ai { width: 18px; height: 18px; vertical-align: -3px; } /* ── Channel calendar (per-channel big-picture month view) ──── */ .cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) 0 0; border-bottom: 0; flex-wrap: wrap; } .cal-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; } .cal-toolbar .ck input { margin: 0; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-1); border: 1px solid var(--line); border-radius: 0; gap: 1px; padding: 1px; } .cal-dh { background: var(--surface-2); padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; } .cal-d { background: var(--surface-1); min-height: 96px; padding: 6px 8px; cursor: pointer; transition: background 100ms ease; display: flex; flex-direction: column; gap: 3px; } .cal-d:hover { background: var(--surface-2); } .cal-d.past { background: color-mix(in srgb, var(--ink) 2%, var(--surface-1)); color: var(--ink-3); } .cal-d.past .cal-dn { color: var(--ink-3); } .cal-d.today { background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--accent); } .cal-d.future { background: color-mix(in srgb, var(--ai) 2%, var(--surface-1)); } .cal-d .cal-dn { font-family: var(--font-mono); font-size: 12px; color: var(--ink); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .cal-evt { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-evt.rotation-heavy { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; } .cal-evt.rotation-medium { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); } .cal-evt.rotation-light { background: var(--surface-2); color: var(--ink-2); } .cal-evt.promo { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); font-weight: 600; } .cal-evt.premiere { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); font-weight: 600; } .cal-evt.warn { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-weight: 600; } .cal-summary { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); flex-wrap: wrap; margin-bottom: 14px; } .cal-leg { display: flex; gap: 8px; flex-wrap: wrap; } .cal-leg .legkey { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); } .cal-leg .legkey.rotation-heavy { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .cal-leg .legkey.rotation-medium { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); } .cal-leg .legkey.rotation-light { background: var(--surface-3); color: var(--ink-2); } .cal-leg .legkey.promo { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); } .cal-leg .legkey.premiere { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); } .cal-leg .legkey.warn { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); } .cal-stats { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; } .cal-stats .stat { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; } .cal-stats .stat .lab { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; } .cal-stats .stat .val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .cal-stats .stat.warn .val { color: var(--st-review); }