/* =========================================================================== DomainLensIQ — design system Slate + Teal. Token-driven so the same class names render light & dark. Theme is selected by [data-theme="light"|"dark"] on ; the no-FOUC init script in layout.templ sets it before first paint. =========================================================================== */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; /* surfaces */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f4f6f8; /* zebra / subhead / inset rows */ --surface-inset: #eef1f4; --surface-hover: #eef2f5; /* text */ --text: #1a2330; --text-muted: #67748a; --text-faint: #9aa6b6; /* lines */ --border: #e3e7ec; --border-strong: #cdd4dd; /* brand / accent (teal) */ --accent: #0d9488; --accent-strong: #0f766e; --accent-soft: #e2f5f1; /* tint background */ --accent-contrast: #ffffff; /* nav (slate-900) */ --nav-bg: #1f2937; --nav-fg: #ffffff; --nav-fg-muted: #cbd3df; --nav-hover: #3a4658; --nav-underline: #2dd4bf; /* semantic — Buy / Watch / Avoid / Severe + status */ --buy-fg: #047857; --buy-bg: #d8f3e7; --watch-fg: #b45309; --watch-bg: #fdf0d6; --avoid-fg: #dc2626; --avoid-bg: #fde2e2; --severe-fg: #ffffff; --severe-bg: #b91c1c; --info-fg: #1e3a8a; --info-bg: #e6edfb; --ok-fg: #065f46; --ok-bg: #d1fae5; --warn-fg: #991b1b; --warn-bg: #fee2e2; --neutral-fg: #475569; --neutral-bg: #e7ebf0; /* score-cell tint backgrounds (lighter than badge bg) */ --buy-tint: #ecfdf5; --watch-tint: #fffbeb; --avoid-tint: #fef2f2; /* metric-source chips */ --src-ai-fg: #5b21b6; --src-ai-bg: #ede9fe; --src-derived-fg: #075985; --src-derived-bg: #e0f2fe; --src-manual-fg: #166534; --src-manual-bg: #dcfce7; /* control surfaces */ --btn-bg: #1f2937; --btn-fg: #ffffff; --btn-bg-hover: #111827; --btn-soft-bg: #eef1f4; --btn-soft-fg: #1f2937; --btn-soft-hover:#e2e7ec; --input-bg: #ffffff; --input-border: #cdd4dd; --bid-bg: #0f172a; --bid-fg: #ffffff; /* shape + depth */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(16,24,40,0.05); --shadow-2: 0 1px 3px rgba(16,24,40,0.08); --shadow-pop: 0 4px 12px rgba(16,24,40,0.18); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161b22; --surface-2: #1c232c; --surface-inset: #1b212a; --surface-hover: #1f2732; --text: #e6edf3; --text-muted: #8b98a8; --text-faint: #66717f; --border: #232b36; --border-strong: #313b48; --accent: #2dd4bf; --accent-strong: #5eead4; --accent-soft: #123630; --accent-contrast: #06231f; --nav-bg: #0b0e13; --nav-fg: #e6edf3; --nav-fg-muted: #8b98a8; --nav-hover: #1c232c; --nav-underline: #2dd4bf; /* muted, low-saturation tints so badges stay legible on dark surfaces */ --buy-fg: #34d399; --buy-bg: #0f2e23; --watch-fg: #fbbf24; --watch-bg: #33270c; --avoid-fg: #f87171; --avoid-bg: #38201f; --severe-fg: #ffffff; --severe-bg: #b91c1c; --info-fg: #93b4f5; --info-bg: #16233b; --ok-fg: #34d399; --ok-bg: #0f2e23; --warn-fg: #f87171; --warn-bg: #38201f; --neutral-fg: #aeb9c6; --neutral-bg: #232b36; --buy-tint: #112a21; --watch-tint: #2a2310; --avoid-tint: #2c1c1d; --src-ai-fg: #c4b5fd; --src-ai-bg: #281b3f; --src-derived-fg: #7dd3fc; --src-derived-bg: #0c2b3a; --src-manual-fg: #86efac; --src-manual-bg: #123022; --btn-bg: #2dd4bf; --btn-fg: #06231f; --btn-bg-hover: #5eead4; --btn-soft-bg: #232b36; --btn-soft-fg: #e6edf3; --btn-soft-hover:#2c3644; --input-bg: #0e1116; --input-border: #313b48; --bid-bg: #060a12; --bid-fg: #e6edf3; --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 1px 3px rgba(0,0,0,0.5); --shadow-pop: 0 4px 14px rgba(0,0,0,0.6); } /* ---- 2. Reset / base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: -apple-system, system-ui, sans-serif; margin: 0; color: var(--text); background: var(--bg); } h1 { margin-top: 0; } a { color: var(--accent); } a:hover { color: var(--accent-strong); } table { width: 100%; border-collapse: collapse; background: var(--surface); } th, td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; } table.dense th, table.dense td { padding: 5px 8px; font-size: 13px; } th { background: var(--surface-2); font-weight: 600; color: var(--text); } tr:hover td { background: var(--surface-hover); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .zebra tbody tr:nth-child(even) td { background: var(--surface-2); } .zebra tbody tr:hover td { background: var(--surface-hover); } th[title] { cursor: help; } label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } input[type=text], input[type=email], input[type=file], input[type=number] { width: 100%; padding: 6px 8px; box-sizing: border-box; } input[type=text], input[type=email], input[type=number], select, textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } select, textarea, input[type=number] { padding: 6px 8px; box-sizing: border-box; font: inherit; } textarea { width: 100%; min-height: 60px; } form .field { margin-bottom: 12px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } button { background: var(--btn-bg); color: var(--btn-fg); border: 0; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; } button:hover { background: var(--btn-bg-hover); } button[disabled] { opacity: 0.65; cursor: wait; } .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; font-weight: 600; } .button-link:hover { background: var(--btn-bg-hover); color: var(--btn-fg); } /* ---- 3. Layout: left-sidebar app shell ---------------------------------- */ :root { --sidebar-w: 232px; } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* Sidebar */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 4px; background: var(--nav-bg); color: var(--nav-fg); padding: 14px 12px; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--nav-fg); text-decoration: none; } .sidebar-brand:hover { color: var(--nav-fg); } .sidebar-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; } .sidebar-wordmark { font-weight: 650; font-size: 14px; } .sidebar-nav { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; } .sidebar-group { display: flex; flex-direction: column; gap: 2px; } .sidebar-group-label { color: var(--nav-fg-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 10px; opacity: 0.7; } .sidebar-link { display: block; color: var(--nav-fg-muted); text-decoration: none; font-size: 13.5px; padding: 7px 10px; border-radius: var(--radius-md); border-left: 2px solid transparent; } .sidebar-link:hover { color: var(--nav-fg); background: var(--nav-hover); } .sidebar-link.current { color: var(--nav-fg); font-weight: 600; background: var(--nav-hover); border-left-color: var(--nav-underline); } .sidebar-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); } .theme-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; color: var(--nav-fg-muted); border: 1px solid transparent; padding: 7px 10px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1; cursor: pointer; } .theme-toggle:hover { background: var(--nav-hover); color: var(--nav-fg); } .theme-glyph { font-size: 15px; } /* Content column */ .content { min-width: 0; margin: 24px auto; padding: 0 24px; width: 100%; max-width: 1180px; } .content.wide { max-width: none; } /* Mobile top bar + scrim (hidden on desktop) */ .topbar { display: none; align-items: center; gap: 12px; background: var(--nav-bg); color: var(--nav-fg); padding: 10px 14px; position: sticky; top: 0; z-index: 40; } .topbar-brand { font-weight: 650; font-size: 14px; } .icon-btn { background: transparent; color: var(--nav-fg); border: 0; font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; } .icon-btn:hover { background: var(--nav-hover); } .sidebar-scrim { display: none; } @media (max-width: 900px) { .topbar { display: flex; } .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; z-index: 60; width: 84vw; max-width: var(--sidebar-w); transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-pop); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.45); } .content { padding: 0 16px; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ---- Public landing page ----------------------------------------------- */ .landing-body { min-height: 100vh; background: linear-gradient(180deg, rgba(13,148,136,0.08), rgba(246,247,249,0) 420px), var(--bg); } .landing-shell { width: min(1180px, calc(100vw - 40px)); margin: 0 auto; padding: 22px 0 56px; } .landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; } .landing-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 750; } .landing-brand:hover { color: var(--text); } .landing-brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--text); color: var(--surface); font-size: 12px; } .landing-nav-links { display: flex; align-items: center; gap: 8px; } .landing-nav-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 650; padding: 8px 10px; border-radius: var(--radius-sm); } .landing-nav-links a:hover { color: var(--text); background: var(--surface-hover); } .landing-hero { min-height: clamp(600px, 72vh, 660px); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr); gap: 52px; align-items: center; padding: 28px 0 54px; } .landing-copy h1 { max-width: 760px; margin: 0; font-size: clamp(48px, 6.2vw, 78px); line-height: 1; letter-spacing: 0; color: var(--text); } .landing-kicker { margin: 0 0 12px; color: var(--accent-strong); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .landing-lede { max-width: 660px; margin: 20px 0 0; color: var(--text-muted); font-size: 20px; line-height: 1.55; } .landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .landing-actions .button-link { min-height: 42px; padding: 0 18px; line-height: 1; } .landing-secondary-link { display: inline-flex; align-items: center; min-height: 38px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 750; } .landing-secondary-link:hover { color: var(--accent-strong); } .landing-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 620px; } .landing-proof span { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: rgba(255,255,255,0.62); color: var(--text-muted); font-size: 12px; font-weight: 700; } .landing-product { position: relative; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: rgba(255,255,255,0.86); box-shadow: 0 24px 60px rgba(16,24,40,0.14); overflow: hidden; } .landing-product::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--accent), #f59e0b, #6366f1); } .product-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; } .product-topbar strong, .product-eyebrow, .product-score span, .product-grid span, .product-domain-row span { display: block; } .product-eyebrow { color: var(--text-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; } .product-topbar strong { margin-top: 3px; color: var(--text); font-size: 20px; } .product-pill { flex: 0 0 auto; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 800; } .product-score { display: grid; grid-template-columns: 1fr 98px; gap: 16px; align-items: center; padding: 18px; border-radius: var(--radius-md); background: #14213d; color: #ffffff; } .product-score span { color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 650; } .product-score strong { margin-top: 2px; font-size: 58px; line-height: 0.95; } .score-ring { width: 84px; height: 84px; border-radius: 50%; padding: 9px; background: conic-gradient(var(--accent) 0 78%, rgba(255,255,255,0.18) 78% 100%); } .score-ring span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #14213d; } .product-domain-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .product-domain-row strong { display: block; color: var(--text); font-size: 17px; } .product-domain-row span { margin-top: 3px; color: var(--text-muted); font-size: 13px; } .product-domain-row b { flex: 0 0 auto; border-radius: var(--radius-pill); padding: 5px 10px; background: var(--buy-bg); color: var(--buy-fg); font-size: 12px; } .product-domain-row-strong { border-color: rgba(13,148,136,0.35); } .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .product-grid div { min-width: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); } .product-grid span { color: var(--text-muted); font-size: 12px; } .product-grid strong { display: block; margin-top: 4px; color: var(--text); font-size: 16px; } .signal-stack { display: grid; gap: 8px; } .signal-line { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; font-weight: 650; } .signal-line span { width: 9px; height: 9px; border-radius: 50%; } .signal-line.good span { background: var(--buy-fg); } .signal-line.warn span { background: #f59e0b; } .signal-line.info span { background: #6366f1; } .product-table { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); } .product-table div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface); color: var(--text-muted); font-size: 13px; } .product-table b { color: var(--text); font-size: 12px; } .landing-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); } .landing-stats div { padding: 22px; background: var(--surface); } .landing-stats strong, .landing-stats span { display: block; } .landing-stats strong { color: var(--text); font-size: 18px; } .landing-stats span { margin-top: 7px; color: var(--text-muted); line-height: 1.45; } .landing-section, .landing-split, .landing-band, .waitlist-section { padding: 72px 0; border-bottom: 1px solid var(--border); } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; } .section-heading h2, .landing-split h2, .landing-band h2, .waitlist-copy h2 { margin: 0; color: var(--text); font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: 0; } .workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .workflow-card { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); } .workflow-card span { color: var(--accent-strong); font-size: 12px; font-weight: 850; } .workflow-card h3 { margin: 30px 0 8px; color: var(--text); font-size: 19px; line-height: 1.2; } .workflow-card p { margin: 0; color: var(--text-muted); line-height: 1.5; } .landing-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr); gap: 42px; align-items: start; } .landing-split p, .landing-band p, .waitlist-copy p { margin: 14px 0 0; color: var(--text-muted); line-height: 1.6; font-size: 17px; } .signal-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .signal-matrix div { padding: 18px; border-top: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-1); } .signal-matrix div:nth-child(2) { border-top-color: #f59e0b; } .signal-matrix div:nth-child(3) { border-top-color: #6366f1; } .signal-matrix div:nth-child(4) { border-top-color: #ef4444; } .signal-matrix strong, .signal-matrix span { display: block; } .signal-matrix strong { color: var(--text); font-size: 17px; } .signal-matrix span { margin-top: 7px; color: var(--text-muted); line-height: 1.45; } .landing-band { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .waitlist-section { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.72fr); gap: 44px; align-items: start; border-bottom: 0; } .waitlist-copy { position: sticky; top: 24px; } .waitlist-checks { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; } .waitlist-checks li { position: relative; padding-left: 24px; color: var(--text); line-height: 1.45; } .waitlist-checks li::before { content: ""; position: absolute; left: 0; top: 0.48em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .waitlist-form, .waitlist-success { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-2); } .waitlist-form label + input, .waitlist-form label + textarea { margin-bottom: 15px; } .waitlist-form input, .waitlist-form textarea { min-height: 42px; font-size: 15px; } .waitlist-form textarea { min-height: 112px; resize: vertical; } .waitlist-form button { width: 100%; min-height: 44px; margin-top: 2px; font-weight: 750; } .form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-fg); font-size: 14px; } .waitlist-success { border-left: 4px solid var(--accent); } .waitlist-success h3 { margin: 0 0 6px; font-size: 22px; } .waitlist-success p { margin: 0; color: var(--text-muted); } @media (max-width: 960px) { .landing-shell { width: min(100vw - 28px, 720px); } .landing-hero, .landing-split, .landing-band, .waitlist-section { grid-template-columns: 1fr; } .landing-hero { min-height: auto; gap: 34px; padding: 52px 0 40px; } .landing-product { order: 2; } .landing-stats, .workflow-grid { grid-template-columns: 1fr 1fr; } .waitlist-copy { position: static; } } @media (max-width: 640px) { .landing-shell { width: min(100vw - 24px, 560px); padding-top: 14px; } .landing-nav { align-items: flex-start; } .landing-nav-links { display: none; } .landing-hero { gap: 24px; padding: 42px 0 36px; } .landing-copy h1 { font-size: 43px; } .landing-lede { font-size: 17px; } .landing-actions { align-items: stretch; } .landing-actions .button-link { width: 100%; justify-content: center; } .landing-secondary-link, .landing-proof, .product-grid, .signal-stack, .product-table { display: none; } .landing-product { padding: 14px; border-radius: var(--radius-md); } .product-score { grid-template-columns: 1fr 78px; padding: 15px; } .product-score strong { font-size: 48px; } .score-ring { width: 70px; height: 70px; } .landing-stats, .workflow-grid, .signal-matrix { grid-template-columns: 1fr; } .landing-section, .landing-split, .landing-band, .waitlist-section { padding: 48px 0; } .section-heading { display: block; } .section-heading h2, .landing-split h2, .landing-band h2, .waitlist-copy h2 { font-size: 32px; } } /* ---- 4. Components ------------------------------------------------------- */ .muted { color: var(--text-muted); font-size: 13px; } /* spacing/display utilities (keep markup free of inline styles) */ .mt-0 { margin-top: 0; } .mt-12 { margin-top: 12px; } .d-inline { display: inline; } /* cards + definition lists */ .card { background: var(--surface); padding: 16px 20px; border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-1); } dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 0; } dt { color: var(--text-muted); } dd { margin: 0; } .fact-list { grid-template-columns: 120px 1fr; gap: 7px 12px; font-size: 14px; } .fact-list dt { font-size: 12px; } /* pills / badges */ .pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--neutral-fg); font-size: 12px; } .pill.ok { background: var(--ok-bg); color: var(--ok-fg); } .pill.warn { background: var(--warn-bg); color: var(--warn-fg); } .pill.big { font-size: 13px; padding: 3px 12px; font-weight: 600; } .pill.deal { background: var(--buy-bg); color: var(--buy-fg); margin-left: 6px; font-weight: 600; } .pill.act-enrich { background: var(--info-bg); color: var(--info-fg); font-weight: 600; } .pill.act-history { background: var(--src-ai-bg); color: var(--src-ai-fg); font-weight: 600; } .pill.act-flip { background: var(--src-derived-bg); color: var(--src-derived-fg); font-weight: 600; } /* Non-interactive Next-column pill shown while a bulk AI pass analyzes the row: the pass-colored pill plus an inline spinner. */ .analyzing-pill { display: inline-flex; align-items: center; gap: 5px; cursor: default; } .analyzing-pill .spinner-sm { flex: 0 0 auto; } .saved { color: var(--ok-fg); font-size: 12px; margin-left: 8px; } .group-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .group-header h3 { margin: 0; font-size: 16px; } /* recommendation / severity / review / auction semantic classes */ .rec-buy { background: var(--buy-bg); color: var(--buy-fg); } .rec-watch { background: var(--watch-bg); color: var(--watch-fg); } .rec-avoid { background: var(--avoid-bg); color: var(--avoid-fg); } .severity-low { background: var(--ok-bg); color: var(--ok-fg); } .severity-medium { background: var(--watch-bg); color: var(--watch-fg); } .severity-high { background: var(--avoid-bg); color: var(--avoid-fg); } .severity-severe { background: var(--severe-bg); color: var(--severe-fg); } .auction-active { background: var(--ok-bg); color: var(--ok-fg); } .auction-ended { background: var(--neutral-bg); color: var(--text-muted); } .review-unreviewed { background: var(--neutral-bg); color: var(--text-muted); } .review-in_review { background: var(--watch-bg); color: var(--watch-fg); } .review-reviewed { background: var(--ok-bg); color: var(--ok-fg); } .severe-banner { background: var(--avoid-bg); border-left: 4px solid var(--severe-bg); color: var(--avoid-fg); } .error-card { border-left: 4px solid var(--severe-bg); } /* dashboard */ .dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .dash-tile { background: var(--surface); border-radius: var(--radius-md); padding: 16px; border: 1px solid var(--border); border-left: 3px solid transparent; box-shadow: var(--shadow-1); } .dash-tile.act { border-left-color: var(--accent); } .dash-tile.warn { border-left-color: var(--watch-fg); } .dash-tile.zero { opacity: 0.55; box-shadow: none; background: var(--surface-2); } .dash-tile.zero .dash-tile-count { color: var(--text-faint); font-weight: 500; } .dash-tile-label { color: var(--text-muted); font-size: 13px; } .dash-tile-count { font-size: 28px; font-weight: 600; margin: 4px 0; font-variant-numeric: tabular-nums; } .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; } .dashboard h2 { font-size: 19px; margin: 28px 0 8px; } .dashboard > p.muted { margin-top: 0; } /* compact KPI strip: small tiles in a wrapping row, live numbers carry the weight */ .stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .stat-strip .dash-tile { flex: 1 1 148px; padding: 11px 13px; margin: 0; } .stat-strip .dash-tile-count { font-size: 22px; margin: 2px 0; } .stat-strip .dash-tile-label { font-size: 12px; } .stat-strip .dash-tile a.muted { font-size: 11px; } /* primary action surface gets a card frame; secondary row is lighter + smaller */ .dash-section { margin-bottom: 24px; } .dash-section-head { margin-bottom: 8px; } .dash-section-head h2 { margin: 0 0 2px; } .dash-section-head p.muted { margin: 0; } .dash-primary { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-1); } .dash-primary table { background: transparent; } .dash-secondary { margin-top: 8px; } .dash-secondary h2 { font-size: 16px; margin: 8px 0 6px; } .dash-secondary p.muted { margin-top: 0; } @media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } } /* detail header / nav / layout */ .detail-card-title { margin: 0 0 12px; font-size: 16px; } .compact-section { margin-bottom: 16px; } .compact-section h2 { margin: 0 0 8px; font-size: 18px; } .detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 16px; } .detail-title h1 { margin: 0 0 8px; line-height: 1.1; } .detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .detail-actions .button-link { padding: 8px 12px; } .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .detail-main, .detail-side { min-width: 0; } .detail-side { position: sticky; top: 188px; } /* Decision cockpit: keep verdict + bid countdown + risk + section tabs pinned. */ .detail-sticky { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-top: 8px; margin-bottom: 16px; } .detail-sticky .decision { margin-bottom: 10px; } .detail-sticky .verdict-card { padding: 14px 18px; } .detail-sticky .verdict-recs { margin: 10px 0 2px; } .detail-sticky .verdict-summary { margin-top: 8px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .detail-sticky .verdict-stats { margin-top: 10px; padding-top: 10px; } .detail-sticky .bid-card { padding: 14px 16px; } .cockpit-risk { align-self: center; } .detail-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .detail-tabs a { flex: 0 0 auto; color: var(--text-muted); text-decoration: none; font-size: 13px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; } .detail-tabs a:hover { color: var(--text); background: var(--surface-2); } .detail-tabs a.active { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); font-weight: 600; } @media (max-width: 980px) { .detail-sticky { position: static; } .detail-side { top: 16px; } } .source-table th, .source-table td { vertical-align: top; } .source-url { max-width: 280px; overflow-wrap: anywhere; } .source-notes { max-width: 360px; white-space: pre-wrap; } .score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .score-panel { border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface-2); } .score-panel h3 { margin-top: 0; } .score-panel table { background: transparent; } /* decision / verdict card */ .decision { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; } .verdict-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--border-strong); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-2); } .verdict-card.v-buy { border-top-color: var(--buy-fg); } .verdict-card.v-watch { border-top-color: var(--watch-fg); } .verdict-card.v-avoid { border-top-color: var(--avoid-fg); } .verdict-head { display: flex; align-items: flex-start; gap: 12px; } .verdict-label { font-size: 24px; font-weight: 700; line-height: 1.1; } .verdict-deal { margin-left: auto; text-align: right; line-height: 1.1; } .verdict-deal .num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; } .verdict-deal .cap { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .verdict-recs { display: flex; gap: 28px; margin: 18px 0 4px; } .verdict-rec .rec-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; } .rec-big { display: inline-flex; align-items: center; gap: 8px; } .rec-big .score { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .rec-sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; } .verdict-summary { color: var(--text); font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; } .summary-memo { white-space: pre-wrap; } .verdict-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .verdict-stat .k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } .verdict-stat .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; } /* bid card */ .bid-card { background: var(--bid-bg); color: var(--bid-fg); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-2); } .bid-card.light { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .bid-head { display: flex; align-items: center; gap: 8px; } .bid-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.85; } .bid-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bid-price { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; } .bid-meta { font-size: 13px; opacity: 0.8; } .bid-sub { font-size: 12px; opacity: 0.7; } .bid-card.light .bid-sub, .bid-card.light .bid-meta { color: var(--text-muted); opacity: 1; } .bid-countdown { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .bid-countdown.ends-soon { color: #fbbf24; } .bid-countdown.ends-critical { color: #fca5a5; } .bid-maxline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); } .bid-card.light .bid-maxline { border-top-color: var(--border); } .bid-maxbid { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; } .bid-cta { display: block; text-align: center; margin-top: 4px; background: #fff; color: #0f172a; text-decoration: none; padding: 9px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; } .bid-cta:hover { background: #e5e7eb; color: #0f172a; } .bid-card.light .bid-cta { background: var(--btn-bg); color: var(--btn-fg); } .bid-card.light .bid-cta:hover { background: var(--btn-bg-hover); } /* action bar */ .action-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--shadow-1); } .action-group { display: flex; flex-direction: column; gap: 6px; } .action-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 600; } .action-group-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .action-bar form { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .action-sep { width: 1px; background: var(--border); align-self: stretch; } .ab-link { display: inline-flex; align-items: center; background: var(--btn-soft-bg); color: var(--btn-soft-fg); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; } .ab-link:hover { background: var(--btn-soft-hover); color: var(--btn-soft-fg); } /* filters + command center */ .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; align-items: end; } .filter-field label { font-size: 12px; } .filter-field input, .filter-field select { width: 100%; box-sizing: border-box; padding: 4px 6px; font: inherit; } .checkline { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); margin-top: 2px; } .filter-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 4px; } .filter-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .filter-status { align-items: center; gap: 8px; margin-left: 12px; color: var(--accent-strong); font-size: 13px; } /* saved-views bar: command tiles restyled as compact horizontal chips */ .command-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .command-tile { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; } .command-tile:hover { border-color: var(--border-strong); } .command-tile.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); } .command-tile span { color: inherit; font-size: 13px; } .command-tile strong { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); } .command-tile.active strong { color: var(--accent-strong); } /* list toolbar + filter toggle */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .page-head h1 { margin: 0; } .list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; } .btn-soft { background: var(--btn-soft-bg); color: var(--btn-soft-fg); } .btn-soft:hover { background: var(--btn-soft-hover); } .filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; } .filter-toggle:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-size: 11px; font-weight: 700; } /* filter drawer (right-side off-canvas on all sizes; frees full table width when closed) */ .filter-drawer { position: fixed; top: 0; right: 0; z-index: 60; width: min(420px, 92vw); height: 100vh; display: flex; flex-direction: column; gap: 0; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform 0.2s ease; overflow-y: auto; padding: 0 18px 18px; } body.filters-open .filter-drawer { transform: translateX(0); } .filter-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; margin-bottom: 6px; background: var(--surface); border-bottom: 1px solid var(--border); } .filter-drawer-head strong { font-size: 15px; } .filter-group { border: 0; border-top: 1px solid var(--border); margin: 0; padding: 12px 0 4px; } .filter-group > legend { color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0; } .drawer-scrim { display: none; } body.filters-open .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.45); } @media (prefers-reduced-motion: reduce) { .filter-drawer { transition: none; } } .active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; font-size: 12px; } .filter-chip.clear { background: var(--surface-inset); color: var(--text-muted); } /* htmx states */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; } #filter-form.htmx-request { opacity: 0.82; } #filter-form.htmx-request input, #filter-form.htmx-request select { cursor: wait; } /* scoring status tiles + pagination */ .scoring-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } /* compact status strip: scoring / enrichment / AI history / AI flip side by side */ .status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .status-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-1); margin: 0; } .status-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .status-card-head h4 { margin: 0; font-size: 13px; font-weight: 600; } .status-metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .status-metrics li { display: flex; flex-direction: column; line-height: 1.15; } .status-metrics b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .status-metrics span { font-size: 11px; color: var(--text-muted); } .status-metrics li.is-fail b { color: var(--watch-fg); } .status-err { margin: 8px 0 0; font-size: 11px; color: var(--watch-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .status-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .status-strip { grid-template-columns: 1fr; } } /* queue page: live pass lists + run history */ .queue-history { margin-top: 18px; } .queue-history h2 { font-size: 16px; margin: 0 0 10px; } .queue-list { margin-top: 8px; } .queue-list-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .queue-list ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; } .queue-list li { font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: var(--radius-sm); padding: 1px 6px; } .queue-domain { font-weight: 500; font-variant-numeric: tabular-nums; } .queue-err { max-width: 420px; font-size: 12px; color: var(--watch-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .queue-err .muted { color: var(--text-muted); } .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; } .pagination-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pagination .button-link { min-height: 31px; padding: 6px 10px; font-size: 13px; } .button-link:hover { color: var(--btn-fg); } .button-link.disabled { background: var(--surface-inset); color: var(--text-faint); cursor: default; } /* domain table (dense, sticky) */ .table-scroll { overflow: auto; max-height: 72vh; border: 1px solid var(--border); background: var(--surface); } .domain-table { min-width: 1180px; } .domain-table thead th { position: sticky; top: 0; z-index: 3; } .domain-table .select-col { position: sticky; left: 0; z-index: 2; width: 36px; min-width: 36px; text-align: center; background: var(--surface); } .domain-table thead .select-col { z-index: 5; background: var(--surface-2); } .domain-table .sticky-watch { position: sticky; left: 36px; z-index: 2; width: 42px; min-width: 42px; background: var(--surface); } .domain-table thead .sticky-watch { z-index: 5; background: var(--surface-2); } .domain-table .sticky-domain { position: sticky; left: 78px; z-index: 2; min-width: 210px; max-width: 280px; background: var(--surface); box-shadow: 1px 0 0 var(--border); } .domain-table thead .sticky-domain { z-index: 5; background: var(--surface-2); } .domain-table tr:hover .select-col, .domain-table tr:hover .sticky-watch, .domain-table tr:hover .sticky-domain { background: var(--surface-hover); } /* A row whose bulk AI pass is in flight is tinted to that pass's color so the operator can see exactly which selected domains are being worked on. The sticky left columns set their own background, so the tint must cover every cell (including those) and outrank the hover rules above. */ .domain-table tr.row-analyzing-history td, .domain-table tr.row-analyzing-history:hover .select-col, .domain-table tr.row-analyzing-history:hover .sticky-watch, .domain-table tr.row-analyzing-history:hover .sticky-domain { background: var(--src-ai-bg); } .domain-table tr.row-analyzing-flip td, .domain-table tr.row-analyzing-flip:hover .select-col, .domain-table tr.row-analyzing-flip:hover .sticky-watch, .domain-table tr.row-analyzing-flip:hover .sticky-domain { background: var(--src-derived-bg); } .domain-table tr.row-analyzing .sticky-domain { box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--border); } /* bulk-select toolbar (Run AI history over the checked rows) */ .select-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface-2); } .select-bar-count { font-size: 14px; } .select-bar-hint { font-size: 12px; } .select-bar button[disabled] { opacity: 0.5; cursor: not-allowed; } .domain-name { font-weight: 600; white-space: nowrap; } .name-len { color: var(--text-faint); font-size: 12px; font-weight: 400; } .sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; } .sort-link:hover { color: var(--accent); } .sort-link.active { color: var(--accent-strong); } /* score cells */ .score-cell { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 86px; padding: 2px 4px 2px 8px; border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); } .score-value { min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .score-buy { border-left-color: var(--buy-fg); background: var(--buy-tint); } .score-watch { border-left-color: var(--watch-fg); background: var(--watch-tint); } .score-avoid { border-left-color: var(--avoid-fg); background: var(--avoid-tint); } .score-unknown { color: var(--text-muted); } .score-rec-empty { color: var(--text-faint); font-size: 12px; } /* metrics table */ .metrics-table th:nth-child(2), .metrics-table td:nth-child(2) { width: 45%; } .metrics-table .metric-action { white-space: nowrap; width: 1%; text-align: right; } .metrics-table .metric-action button { margin-left: 4px; } .metric-subhead td { background: var(--surface-2); font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .metric-subhead:hover td { background: var(--surface-2); } .metric-source { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: var(--radius-pill); vertical-align: middle; } .metric-source-AI { background: var(--src-ai-bg); color: var(--src-ai-fg); } .metric-source-derived { background: var(--src-derived-bg); color: var(--src-derived-fg); } .metric-source-manual { background: var(--src-manual-bg); color: var(--src-manual-fg); } /* inline editors / link buttons */ .link-btn { background: none; color: var(--accent); padding: 2px 4px; font-size: 13px; } .link-btn:hover { text-decoration: underline; background: none; } .edit-btn { background: var(--btn-soft-bg); color: var(--btn-soft-fg); padding: 4px 12px; font-size: 13px; } .edit-btn:hover { background: var(--btn-soft-hover); } .cancel-btn { background: none; color: var(--text-muted); padding: 8px 12px; } .cancel-btn:hover { text-decoration: underline; background: none; } .rec-edit { font-size: 14px; } .rec-edit-row td { background: var(--surface-2); } .rec-edit-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; } .rec-edit-domain { align-self: center; } .rec-edit-field { display: flex; flex-direction: column; gap: 2px; } .rec-edit-field label { margin: 0; } .rec-edit-reason { flex: 1 1 220px; } .rec-edit-reason input { width: 100%; padding: 4px 6px; font: inherit; } /* recommendation pair / notes */ .rec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rec-label { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; } .note-read { white-space: pre-wrap; margin: 4px 0 0; } .note-empty { color: var(--text-faint); font-style: italic; } .note-field-label { color: var(--text-muted); font-size: 12px; margin-top: 8px; } .note-field-label:first-of-type { margin-top: 0; } /* portfolio */ .pnl-pos { color: var(--buy-fg); } .pnl-neg { color: var(--avoid-fg); } .renewal-overdue { color: var(--avoid-fg); font-weight: 600; } .renewal-soon { color: var(--watch-fg); } /* watchlist star */ .watch-star { background: none; color: var(--text-muted); padding: 2px 8px; font-size: 16px; line-height: 1; } .watch-star.on { color: var(--watch-fg); } .watch-star:hover { color: var(--watch-fg); background: none; } /* action buttons (list row enrich/history/flip) */ .act-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; line-height: 1.4; } .act-btn:hover { filter: brightness(0.96); } .act-btn[disabled] { cursor: wait; } .act-btn.htmx-request .act-label { visibility: hidden; } /* Show the spinner only while THIS button's own request is in flight. Scoping to .act-btn.htmx-request (the requester gets the class) instead of the generic .htmx-indicator keeps the 5s #domain-results poll — which puts htmx-request on the results container, an ancestor of every row button — from lighting up every spinner in the table for the duration of the swap. */ .act-spinner { display: none; position: absolute; top: 50%; left: 50%; margin: -5.5px 0 0 -5.5px; } .act-btn.htmx-request .act-spinner { display: inline-flex; } .spinner-sm { width: 11px; height: 11px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } /* auction countdown urgency (list) */ .ends-in { white-space: nowrap; } .ends-soon { color: var(--watch-fg); font-weight: 600; } .ends-critical { color: var(--avoid-fg); font-weight: 700; } /* import status / spinner */ .download-action { min-width: 0; } .download-action .import-status { margin-bottom: 0; } .import-status { display: none; margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .import-status.active { display: flex; align-items: center; gap: 12px; } .spinner { width: 18px; height: 18px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: 0 0 auto; } .import-status-title { font-weight: 600; margin-bottom: 2px; } /* skeleton placeholders: shown while a page's heavy fragment lazy-loads */ .skeleton { position: relative; overflow: hidden; background: var(--accent-soft); border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--surface), transparent); animation: skeleton-shimmer 1.4s ease-in-out infinite; } /* domains workspace skeleton: shapes sized to the real status cards, command pills, and dense results table so the loading state previews the page. */ .skeleton-head { height: 13px; width: 52%; margin-bottom: 12px; } .skeleton-metrics { display: flex; gap: 14px; } .skeleton-metric { height: 28px; width: 34px; } .skeleton-pill { height: 31px; width: 104px; border-radius: var(--radius-pill); } .skeleton-pill:nth-child(3n) { width: 126px; } .skeleton-pill:nth-child(4n) { width: 86px; } .skeleton-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; background: none; } .skeleton-toolbar::after { display: none; } .skeleton-btn { height: 34px; width: 104px; } .skeleton-btn.right { margin-left: auto; width: 92px; } .skeleton-table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); } .skeleton-thead { height: 40px; border-radius: 0; } /* Cells grow proportionally so each row fills the full table width and adapts to the viewport, instead of clustering at fixed widths and leaving dead space. */ .skeleton-tr { display: flex; align-items: center; gap: 18px; height: 41px; padding: 0 14px; border-top: 1px solid var(--border); } .skeleton-cell { height: 12px; min-width: 0; } .skeleton-cell.c-xs { flex: 0 0 14px; } .skeleton-cell.c-sm { flex: 2 1 0; } .skeleton-cell.c-md { flex: 3 1 0; } .skeleton-cell.c-lg { flex: 5 1 0; } /* dashboard skeleton: stat tiles + section headings */ .skeleton-stat { flex: 1 1 148px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; box-shadow: var(--shadow-1); } .skeleton-stat-label { height: 11px; width: 72%; margin-bottom: 8px; } .skeleton-stat-count { height: 20px; width: 46%; } .skeleton-section { margin-bottom: 24px; } .skeleton-h2 { height: 20px; width: 220px; margin: 0 0 8px; } .skeleton-line { height: 12px; width: 60%; margin: 0 0 12px; } /* results-table loading state: dim the current rows and float a spinner while a filter change / saved-view tile fetches the new rows, so the click reads as "working" even before the swap lands. */ #domain-results.is-loading { position: relative; min-height: 140px; } #domain-results.is-loading > * { opacity: 0.4; transition: opacity 0.12s ease; pointer-events: none; } #domain-results.is-loading::after { content: ""; position: absolute; top: 64px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { #domain-results.is-loading::after { animation: none; } } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } /* toasts */ .toast-tray { position: fixed; bottom: 20px; right: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--accent-strong); color: var(--accent-contrast); padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-pop); opacity: 0; animation: toast-life 4s ease forwards; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes toast-life { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } /* secondary-page helpers: flash banners, in-page section nav, code samples */ .flash-ok { background: var(--ok-bg); color: var(--ok-fg); } .flash-err { background: var(--avoid-bg); color: var(--avoid-fg); } .flash-warn { background: var(--watch-bg); color: var(--watch-fg); } .section-nav { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; margin-bottom: 8px; background: var(--bg); } .section-nav a { color: var(--text-muted); text-decoration: none; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); } .section-nav a:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .code-block { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 12px; border-radius: var(--radius-sm); overflow: auto; font-size: 13px; } /* ---- 5. Responsive ------------------------------------------------------ */ @media (max-width: 900px) { .decision { grid-template-columns: 1fr; } } @media (max-width: 980px) { .detail-layout, .detail-header { grid-template-columns: 1fr; } .detail-side { position: static; } .detail-actions { justify-content: flex-start; } }