/* ============================================================
Vidara — App styles (Envoy light treatment)
Built from the "Vidara App Screens" design bundle.
Design tokens live in /styles/tokens.css and define the
--envoy-red, --carbon-*, --gem-*, --fg-*, --bg-* CSS vars
used throughout this file.
This file replaces the previous OmniSlides dark theme entirely.
Legacy class names from the existing markup are kept as aliases
in the "Legacy aliases" section near the bottom so the existing
/pages/index.js + /public/app.js wiring continues to work.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--font-sans);
background: var(--arctic);
color: var(--fg-1);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* Prevent a second (body) scrollbar while the landing overlay is shown.
The .auth-screen.landing element is position:fixed + overflow-y:auto so it
handles its own scroll; the post-auth markup beneath it would otherwise
make tall enough to show its own scrollbar at the same time. */
body:has(.auth-screen.landing:not(.hidden)) {
overflow: hidden;
}
/* ============================================================
Auth screen — simple sign-in card on Envoy arctic background
============================================================ */
.auth-screen {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: var(--arctic);
}
.auth-card {
display: flex; flex-direction: column; align-items: center;
gap: 20px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 44px 40px;
max-width: 400px;
width: calc(100% - 32px);
text-align: center;
box-shadow: var(--shadow-md);
}
.auth-logo {
display: inline-flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: var(--fw-bold);
color: var(--fg-1);
letter-spacing: -0.01em;
}
.auth-logo .logo-icon {
width: 32px; height: 32px;
background: var(--envoy-red);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 4px 12px -3px rgba(250, 67, 56, 0.45);
}
.auth-description {
color: var(--fg-3);
font-size: 14px;
line-height: 1.55;
margin: 0;
}
.auth-description strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.google-signin-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
background: #fff; color: var(--fg-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 12px 22px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: var(--fw-semibold);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.google-signin-btn:hover:not(:disabled) {
background: var(--arctic);
border-color: var(--carbon-30);
}
.google-signin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-error {
background: rgba(160, 12, 31, 0.08);
color: var(--garnet-70);
font-size: 13px;
font-weight: var(--fw-medium);
padding: 8px 12px;
border-radius: 6px;
width: 100%;
text-align: left;
margin: 0;
}
/* ============================================================
App frame — sidebar (232px) + page content
============================================================ */
.sidebar, .app-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
z-index: 100;
width: 232px;
background: #fff;
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
overflow: hidden;
}
.page-content {
margin-left: 232px;
min-height: 100vh;
background: var(--arctic);
}
.page-content > .main,
.page-content > #app-content > .main {
padding: 40px 56px 56px;
}
/* ----- Sidebar top (brand) ----- */
.sidebar-top, .app-sb-top {
display: flex; align-items: center; gap: 10px;
padding: 18px 18px 18px 20px;
border-bottom: 1px solid var(--border);
}
.logo {
display: inline-flex; align-items: center; gap: 10px;
}
.logo-icon, .app-brand-mark {
width: 28px; height: 28px;
background: var(--envoy-red);
border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 2px 6px -1px rgba(250, 67, 56, 0.4);
flex-shrink: 0;
}
.logo-text, .app-brand-word {
font-size: 17px;
font-weight: var(--fw-bold);
color: var(--fg-1);
letter-spacing: -0.01em;
}
/* ----- Sidebar nav ----- */
.sidebar-nav, .app-sb-nav {
display: flex; flex-direction: column;
padding: 12px 10px;
gap: 2px;
flex: 1;
overflow-y: auto;
}
/* Secondary nav (Settings, How To) pinned just above the user chip. Read
as supporting / utility links — smaller font, muted color, tighter
padding, no heavy divider — so they don't compete with the primary
navigation for visual weight. Linear / Notion / Vercel all use this kind
of subdued footer treatment for settings + help items. */
.sidebar-nav--secondary {
flex: 0 0 auto;
padding: 6px 10px 10px;
gap: 0;
}
.sidebar-nav--secondary .sidebar-nav-item {
padding: 7px 12px;
font-size: 13px;
font-weight: var(--fw-medium);
color: var(--fg-3);
}
.sidebar-nav--secondary .sidebar-nav-item:hover {
background: var(--arctic);
color: var(--fg-2);
}
.sidebar-nav--secondary .sidebar-nav-item > svg {
width: 15px;
height: 15px;
color: var(--fg-3);
}
.sidebar-nav--secondary .sidebar-nav-item:hover > svg { color: var(--fg-2); }
/* Active state is still the red pill, but slightly less prominent so it
matches the subdued type weight. */
.sidebar-nav--secondary .sidebar-nav-item.active,
.sidebar-nav--secondary .sidebar-nav-item.is-active {
background: rgba(250, 67, 56, 0.08);
}
/* Section header inside the sidebar nav — small uppercase label that groups
the items below it (Overview / Create / Library / Support). */
.sidebar-section-label {
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-3);
padding: 14px 12px 6px;
user-select: none;
}
.sidebar-section-label:first-child { padding-top: 4px; }
.sidebar-nav-item, .app-sb-item {
display: flex; align-items: center;
gap: 11px;
padding: 9px 12px;
border-radius: 8px;
color: var(--fg-2);
font-size: 14px;
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.sidebar-nav-item:hover, .app-sb-item:hover {
background: var(--arctic);
color: var(--fg-1);
}
.sidebar-nav-item.active,
.sidebar-nav-item.is-active,
.app-sb-item.is-active {
background: rgba(250, 67, 56, 0.1);
color: var(--envoy-red);
font-weight: var(--fw-semibold);
}
.sidebar-nav-item.active:hover,
.sidebar-nav-item.is-active:hover,
.app-sb-item.is-active:hover {
background: rgba(250, 67, 56, 0.14);
color: var(--envoy-red);
}
.sidebar-nav-item > svg,
.app-sb-item > .app-sb-icon { color: var(--fg-3); flex-shrink: 0; }
.sidebar-nav-item.active > svg,
.sidebar-nav-item.is-active > svg,
.app-sb-item.is-active > .app-sb-icon { color: var(--envoy-red); }
.sidebar-nav-label, .app-sb-label { flex: 1; }
.nav-chevron, .app-sb-trail {
color: var(--fg-3);
display: inline-flex;
flex: 0 0 auto; /* don't stretch — the label has flex:1; the chevron must stay its natural size */
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.nav-expandable.open .nav-chevron,
.app-sb-expand.open .app-sb-trail { transform: rotate(180deg); }
/* Suppress the default browser focus outline on sidebar links; use a subtle
focus-visible ring instead so keyboard users still get feedback. */
.sidebar-nav-item:focus,
.nav-sub-item:focus,
.app-sb-item:focus,
.app-sb-sub:focus { outline: none; }
.sidebar-nav-item:focus-visible,
.nav-sub-item:focus-visible,
.app-sb-item:focus-visible,
.app-sb-sub:focus-visible {
outline: 2px solid rgba(250, 67, 56, 0.4);
outline-offset: 1px;
}
/* Sub-panel under "Generate Slides" */
.nav-sub-panel, .app-sb-subpanel {
padding: 2px 0 4px 36px;
display: flex; flex-direction: column;
gap: 2px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease;
}
.nav-expandable.open .nav-sub-panel,
.app-sb-expand.open .app-sb-subpanel { max-height: 200px; }
.nav-sub-item, .app-sb-sub {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: 6px;
color: var(--fg-3);
font-size: 13px;
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
}
.nav-sub-item:hover, .app-sb-sub:hover {
background: var(--arctic);
color: var(--fg-1);
}
.nav-sub-item.active,
.nav-sub-item.is-active { color: var(--envoy-red); font-weight: var(--fw-semibold); }
/* ----- Sidebar bottom (user chip) ----- */
.sidebar-bottom, .app-sb-bottom {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--border);
}
.user-chip {
display: flex; align-items: center; gap: 10px;
width: 100%;
}
.user-chip.hidden { display: none; }
.user-avatar, .app-sb-avatar {
width: 30px; height: 30px;
border-radius: 999px;
background: linear-gradient(135deg, #FFE4EC 0%, #FFCCDB 100%);
color: #BE185D;
font-size: 12px; font-weight: var(--fw-bold);
display: inline-flex; align-items: center; justify-content: center;
object-fit: cover;
flex-shrink: 0;
}
.user-chip-info, .app-sb-userinfo {
display: flex; flex-direction: column;
gap: 3px;
min-width: 0;
}
.user-email, .app-sb-email {
font-size: 12px;
color: var(--fg-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sign-out-btn, .app-sb-signout {
background: transparent;
border: 0;
padding: 0;
color: var(--fg-1);
font-size: 11px;
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
cursor: pointer;
text-align: left;
}
.sign-out-btn:hover, .app-sb-signout:hover { color: var(--envoy-red); }
/* ============================================================
Home screen (Post-auth)
============================================================ */
.home-screen {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
padding: 40px 56px 56px;
}
.home-screen.hidden { display: none; }
.home-inner {
max-width: 880px;
display: flex; flex-direction: column;
gap: 32px; /* tighter than 48px since we now have more sections */
width: 100%;
}
/* Personalized greeting at the top of the post-auth home */
.home-greeting { display: flex; flex-direction: column; gap: 6px; }
.home-greeting-title {
font-size: 32px;
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
color: var(--fg-1);
margin: 0;
line-height: 1.1;
}
.home-greeting-title #home-greeting-name { color: var(--envoy-red); }
.home-greeting-sub {
font-size: 15px;
color: var(--fg-3);
margin: 0;
line-height: 1.5;
}
/* Two-column grid for Recent Queries + Saved Configurations */
.home-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
}
.home-panel {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px 18px 8px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.home-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.home-panel-titlebar {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--fg-1);
}
.home-panel-icon { color: var(--envoy-red); flex-shrink: 0; }
.home-panel-title {
font-size: 14px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0;
}
.home-panel-link {
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--fg-3);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s;
}
.home-panel-link:hover { color: var(--envoy-red); }
.home-panel-list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 -8px; /* negative margin so list items can have hover padding without breaking alignment */
min-height: 130px; /* keeps both panels the same height when one is empty */
}
.home-panel-empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 10px;
gap: 6px;
}
.home-panel-empty-text {
font-size: 13px;
font-weight: var(--fw-medium);
color: var(--fg-3);
margin: 0;
}
.home-panel-empty-sub {
font-size: 12px;
color: var(--fg-3);
margin: 0;
line-height: 1.5;
}
.home-panel-empty-cta {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 0;
padding: 4px 0;
color: var(--envoy-red);
font-family: var(--font-sans);
font-size: 12px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.home-panel-empty-cta:hover { text-decoration: underline; }
.home-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background 0.15s, transform 0.15s;
min-width: 0;
}
.home-list-item:hover {
background: var(--arctic);
transform: translateX(2px);
}
.home-list-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-1);
color: var(--gem-60);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-list-item:hover .home-list-icon {
background: rgba(78, 78, 218, 0.1);
color: var(--gem-70);
}
.home-list-body { flex: 1; min-width: 0; }
.home-list-title {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-list-meta {
font-size: 11px;
color: var(--fg-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-list-time {
font-size: 11px;
color: var(--fg-3);
font-weight: var(--fw-medium);
flex-shrink: 0;
white-space: nowrap;
}
.home-list-item:hover .home-list-time { color: var(--envoy-red); }
@media (max-width: 720px) {
.home-grid { grid-template-columns: 1fr; }
}
.home-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.home-hero-text { flex: 1; min-width: 0; }
.home-title {
font-size: 52px;
font-weight: var(--fw-bold);
letter-spacing: -0.03em;
line-height: 1.04;
color: var(--fg-1);
margin: 0 0 18px;
}
.home-subtitle, .home-sub {
font-size: 16px;
line-height: 1.55;
color: var(--fg-2);
margin: 0;
max-width: 380px;
}
/* Mini flow visual (Omni → Slides) */
.home-visual, .mfv {
display: flex; align-items: center; gap: 14px;
color: var(--envoy-red);
}
.hv-dashboard, .mfv-dash,
.hv-slides, .mfv-slides {
display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.hv-dash-label, .hv-slides-label, .mfv-label {
font-size: 10px;
font-weight: var(--fw-bold);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hv-tiles, .mfv-tiles {
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px;
width: 172px;
}
.hv-tile, .mfv-tile {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px;
height: 70px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
}
.hv-tile svg, .mfv-tile svg { width: 100%; height: auto; }
.hv-tile-kpi, .mfv-tile.mfv-kpi {
flex-direction: column;
gap: 3px;
}
.hv-kpi-num, .mfv-kpi-n {
font-size: 16px;
font-weight: var(--fw-bold);
color: var(--fg-1);
line-height: 1;
}
.hv-kpi-label, .mfv-kpi-l {
font-size: 9px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.07em;
}
.hv-arrow, .mfv-arrow { color: var(--envoy-red); }
.hv-arrow svg, .mfv-arrow svg { width: 44px; height: 22px; }
.hv-slide-stack, .mfv-stack {
position: relative;
width: 148px;
height: 108px;
}
.hv-slide, .mfv-slide {
position: absolute;
border-radius: 6px;
width: 124px; height: 84px;
border: 1px solid var(--border);
background: #fff;
box-shadow: var(--shadow-xs);
}
.hv-slide-1, .mfv-s1 {
top: 0; left: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
padding: 8px;
}
.hv-slide-1 svg, .mfv-s1 svg { width: 100%; height: auto; }
.hv-slide-2, .mfv-s2 { top: 10px; left: 12px; z-index: 2; background: #FAFAFC; }
.hv-slide-3, .mfv-s3 { top: 20px; left: 24px; z-index: 1; background: #F4F4F7; }
.hv-slide-chart { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* Action cards */
.home-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.home-action-card, .home-card {
display: flex; align-items: center; gap: 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px 20px;
text-decoration: none;
color: var(--fg-1);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
cursor: pointer;
}
.home-action-card:hover, .home-card:hover {
border-color: rgba(250, 67, 56, 0.3);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.home-action-icon, .home-card-icon {
width: 44px; height: 44px;
flex-shrink: 0;
background: rgba(250, 67, 56, 0.1);
color: var(--envoy-red);
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.home-action-card:first-child .home-action-icon,
.home-card.is-primary .home-card-icon {
background: var(--envoy-red);
color: #fff;
}
.home-action-body, .home-card-body { flex: 1; min-width: 0; }
.home-action-title, .home-card-t {
font-size: 15px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 4px;
}
.home-action-desc, .home-card-d {
font-size: 13px;
color: var(--fg-3);
line-height: 1.5;
margin: 0;
}
.home-action-arrow, .home-card-arrow {
color: var(--fg-3);
transition: transform 0.15s, color 0.15s;
flex-shrink: 0;
}
.home-action-card:hover .home-action-arrow,
.home-card:hover .home-card-arrow {
color: var(--envoy-red);
transform: translateX(3px);
}
.home-howto-hint, .home-hint {
display: flex; align-items: center; gap: 14px;
font-size: 13px;
color: var(--fg-3);
}
.home-howto-link, .home-hint-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--envoy-red);
text-decoration: none;
font-weight: var(--fw-semibold);
}
.home-howto-link:hover, .home-hint-link:hover { text-decoration: underline; }
/* ============================================================
Page header (shared across Generate Slides flow & others)
============================================================ */
.main {
width: 100%;
max-width: 1100px;
}
.templates-header, .page-head {
max-width: 960px;
margin-bottom: 28px;
}
.templates-title, .page-title, .flow-page-title, #flow-page-title {
font-size: 28px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.templates-subtitle, .page-sub, #flow-page-subtitle {
font-size: 15px;
color: var(--fg-3);
margin: 0;
line-height: 1.5;
}
/* ─── Slide Templates screen ──────────────────────────────────────────────
Tabs + sectioned grids of slide thumbnails. The JS in loadTemplatesScreen
renders `.tmpl-entry > .tmpl-item > .tmpl-thumb > ![]()
` with a `.tmpl-label`
sibling, plus `.tmpl-section-header` / `.tmpl-section-grid` wrappers. None
of these had any CSS, so the page was rendering as raw stacked HTML. */
.templates-tabs {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--arctic);
border: 1px solid var(--border);
padding: 4px;
border-radius: 10px;
margin-bottom: 24px;
}
.templates-tab {
appearance: none;
background: transparent;
border: 0;
padding: 7px 14px;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-3);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.templates-tab:hover { color: var(--fg-1); }
.templates-tab.active {
background: #fff;
color: var(--envoy-red);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.templates-grid { max-width: 1100px; }
.templates-grid.hidden { display: none; }
.tmpl-section-header {
font-size: 12px;
font-weight: var(--fw-bold);
color: var(--fg-2);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.tmpl-section-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px 14px;
margin-bottom: 28px;
}
.tmpl-entry {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tmpl-item {
width: 100%;
}
.tmpl-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tmpl-thumb:hover {
border-color: var(--carbon-30);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.tmpl-thumb > img {
display: block;
width: 100%;
height: 100%;
/* `contain` keeps the slide aspect ratio intact rather than upscaling +
cropping to fill, which is what was producing the soft/blurry edges on
the smaller-source thumbnails. */
object-fit: contain;
background: #fff;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Layout mockup thumbnails (the wireframe SVGs for Full / Text|Chart / Chart|Text).
These render in monochrome on the arctic background. */
.tmpl-thumb-layout {
background: #fff;
color: var(--fg-2);
padding: 12px;
}
.tmpl-thumb-layout > svg {
width: 100%;
height: 100%;
display: block;
}
.tmpl-label {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tmpl-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 80px 20px;
color: var(--fg-3);
}
.tmpl-error {
padding: 24px;
text-align: center;
color: var(--garnet-70);
background: rgba(160, 12, 31, 0.04);
border: 1px solid rgba(160, 12, 31, 0.2);
border-radius: var(--radius);
}
/* ─── Slide Templates header (title + Import button) ──────────────────────── */
.templates-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
max-width: 1100px;
}
.templates-header-row > div:first-child { min-width: 0; }
.templates-header-row .primary-btn {
flex-shrink: 0;
white-space: nowrap;
align-self: flex-start;
}
/* User-imported template entry — shows a small "×" remove button overlaid on
the thumbnail so the user can prune their custom set. */
.tmpl-entry--imported .tmpl-item { position: relative; }
.tmpl-entry-remove {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(31, 35, 45, 0.7);
border: 0;
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
.tmpl-entry--imported:hover .tmpl-entry-remove { opacity: 1; }
.tmpl-entry-remove:hover { background: var(--envoy-red); }
/* ─── Classify modal (Title/Body chooser for each imported slide) ─────────── */
.modal.modal-wide { max-width: 720px; width: 100%; }
.tmpl-classify-list {
max-height: 60vh;
overflow-y: auto;
padding: 8px 28px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.tmpl-classify-row {
display: grid;
grid-template-columns: 120px 1fr auto;
align-items: center;
gap: 16px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.tmpl-classify-thumb {
width: 120px;
aspect-ratio: 16 / 9;
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.tmpl-classify-thumb > img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
.tmpl-classify-name {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
line-height: 1.35;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
}
.tmpl-classify-toggle {
display: inline-flex;
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
flex-shrink: 0;
}
.tmpl-classify-opt {
appearance: none;
background: transparent;
border: 0;
padding: 6px 12px;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--fg-3);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tmpl-classify-opt:hover { color: var(--fg-1); }
.tmpl-classify-opt.active {
background: #fff;
color: var(--envoy-red);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* The "Exclude" pill is destructive — when active, use a muted grey
treatment to make it visually distinct from the Title / Body picks. */
.tmpl-classify-opt[data-type="exclude"].active {
color: var(--fg-3);
background: #fff;
}
/* Dim excluded rows so the user can see at a glance what they've cut. */
.tmpl-classify-row--exclude {
opacity: 0.55;
}
.tmpl-classify-row--exclude .tmpl-classify-thumb { filter: grayscale(0.6); }
/* Summary line at the top of the classify list showing fetch count + how
the user has classified them. Surfaces the total clearly so a
backend-truncated import is immediately obvious. */
.tmpl-classify-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--arctic);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 12px;
color: var(--fg-2);
margin-bottom: 6px;
}
.tmpl-classify-summary strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.tmpl-classify-summary-sep { color: var(--fg-4); }
.tmpl-classify-summary-muted { color: var(--fg-3); }
.tmpl-classify-summary-muted strong { color: var(--fg-2); }
@media (max-width: 720px) {
.tmpl-classify-row { grid-template-columns: 80px 1fr; row-gap: 8px; }
.tmpl-classify-thumb { width: 80px; }
.tmpl-classify-toggle { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1200px) {
.tmpl-section-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
.tmpl-section-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tmpl-section-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.tmpl-section-grid { grid-template-columns: 1fr; }
}
/* ============================================================
App card shell (wraps generate-slides flow)
============================================================ */
.card-section { width: 100%; }
.main-card, .app-card {
max-width: 960px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane.hidden { display: none; }
/* ----- Steps bar ----- */
.steps-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 28px;
border-bottom: 1px solid var(--border);
background: var(--arctic);
gap: 12px;
flex-wrap: nowrap;
}
.step {
display: inline-flex; align-items: center; gap: 8px;
color: var(--fg-3);
font-size: 13px;
font-weight: var(--fw-medium);
white-space: nowrap;
}
.step-number, .step-num {
width: 22px; height: 22px;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--fg-3);
flex-shrink: 0;
}
.step.active, .step.is-active {
color: var(--fg-1);
font-weight: var(--fw-semibold);
}
.step.active .step-number,
.step.active .step-num,
.step.is-active .step-number,
.step.is-active .step-num {
background: var(--envoy-red);
border-color: transparent;
color: #fff;
}
.step.is-done, .step.done {
color: var(--fg-2);
}
.step.is-done .step-number,
.step.is-done .step-num,
.step.done .step-number,
.step.done .step-num {
background: var(--cilantro-40);
border-color: transparent;
color: #fff;
}
.step-connector, .step-conn {
flex: 1;
min-width: 12px;
height: 1px;
background: var(--border);
margin: 0 4px;
}
/* ----- Panel container ----- */
.panel, .app-panel {
padding: 36px 40px;
}
.panel.hidden { display: none; }
/* ============================================================
Input form (Step 1)
============================================================ */
.input-group, .ig { margin-bottom: 22px; }
.input-label, .ig-label {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
font-weight: var(--fw-bold);
color: var(--fg-2);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.input-wrapper, .ig-wrap { position: relative; }
.input-wrapper input,
.ig-input {
width: 100%;
padding: 13px 48px 13px 16px;
background: #fff;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 14px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input-wrapper input::placeholder,
.ig-input::placeholder { color: var(--fg-4); }
.input-wrapper input:focus,
.ig-input:focus {
border-color: var(--envoy-red);
box-shadow: 0 0 0 3px rgba(250, 67, 56, 0.12);
}
.paste-btn, .ig-paste {
position: absolute; right: 10px; top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 6px;
border-radius: 6px;
color: var(--fg-3);
cursor: pointer;
display: inline-flex;
}
.paste-btn:hover, .ig-paste:hover { background: var(--arctic); color: var(--fg-1); }
.input-hint, .ig-hint {
margin: 8px 0 0;
font-size: 12px;
color: var(--fg-3);
line-height: 1.5;
}
.input-hint code, .ig-hint code {
font-family: var(--font-mono);
font-size: 11px;
background: var(--arctic);
color: var(--fg-2);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border-subtle);
}
/* URL field warning state (mismatched domain etc.) */
.url-warning {
margin: 8px 0 0;
font-size: 12px;
color: var(--garnet-70);
font-weight: var(--fw-medium);
}
.url-warning.hidden { display: none; }
/* ============================================================
Buttons
============================================================ */
.primary-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 13px 22px;
background: var(--envoy-red);
color: #fff;
border: 0;
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: 14px;
font-weight: var(--fw-bold);
cursor: pointer;
text-decoration: none;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s, opacity 0.15s;
width: 100%;
}
.primary-btn:hover:not(:disabled) {
background: var(--envoy-red-hover);
box-shadow: 0 6px 16px -4px rgba(250, 67, 56, 0.4);
transform: translateY(-1px);
}
.primary-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-arrow { transition: transform 0.2s; }
.primary-btn:hover .btn-arrow { transform: translateX(3px); }
.secondary-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 12px 22px;
background: #fff;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 14px;
font-weight: var(--fw-semibold);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.secondary-btn:hover { background: var(--arctic); border-color: var(--carbon-30); }
/* Compact modifier for buttons living inside cards / dense lists */
.small-btn {
padding: 7px 12px;
font-size: 13px;
border-radius: 6px;
}
.danger-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 12px 22px;
background: #fff;
border: 1px solid var(--garnet-70);
border-radius: var(--radius);
color: var(--garnet-70);
font-family: var(--font-sans);
font-size: 14px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.danger-btn:hover { background: rgba(160, 12, 31, 0.05); }
/* When combined with .small-btn, .danger-btn's own 12/22 padding wins via
source order. Re-apply the compact sizing here so a button with both
classes matches its sibling .secondary-btn.small-btn instead of towering
over it (this is exactly the Add Slide vs Clear All mismatch). */
.danger-btn.small-btn,
.small-btn.danger-btn {
padding: 7px 12px;
font-size: 13px;
border-radius: 6px;
}
/* ============================================================
Progress panel (Step 3/4/5 — extracting/gathering/generating)
============================================================ */
.progress-container {
display: flex; flex-direction: column;
gap: 22px;
text-align: center;
}
.progress-header { margin-bottom: 8px; }
.progress-label {
font-size: 18px;
font-weight: var(--fw-bold);
color: var(--fg-1);
}
.progress-bar-track {
width: 100%;
height: 8px;
background: var(--carbon-10);
border-radius: 999px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--envoy-red) 0%, var(--envoy-red-hover) 100%);
border-radius: 999px;
transition: width 0.3s ease;
}
.progress-log {
background: var(--arctic);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 16px;
max-height: 180px;
overflow-y: auto;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-2);
text-align: left;
line-height: 1.6;
}
/* ============================================================
Customize panel (Step 2 — mode selector + tile grid)
============================================================ */
.customize-header, .cz-head { margin-bottom: 22px; }
.customize-title, .cz-title {
font-size: 20px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 4px;
}
.customize-subtitle, .cz-sub {
font-size: 14px;
color: var(--fg-3);
margin: 0;
}
.customize-mode-grid, .cz-mode-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 32px;
}
.customize-mode-card, .cz-mode {
display: flex; align-items: center;
gap: 12px;
padding: 12px 14px; /* was 18px — tighter for a more compact card */
background: #fff;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-md);
text-align: left;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
font-family: var(--font-sans);
}
.customize-mode-card:hover, .cz-mode:hover { border-color: var(--carbon-30); }
.customize-mode-card.active,
.customize-mode-card.is-active,
.cz-mode.is-active {
border-color: var(--envoy-red);
background: rgba(250, 67, 56, 0.04);
}
.customize-mode-icon, .cz-mode-icon {
width: 32px; height: 32px; /* was 36 */
border-radius: 8px;
background: var(--envoy-red);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.customize-mode-icon > svg, .cz-mode-icon > svg { width: 18px; height: 18px; }
.customize-mode-card:not(.active):not(.is-active) .customize-mode-icon,
.cz-mode:not(.is-active) .cz-mode-icon {
background: #F4F4F7;
color: var(--carbon-60);
}
.customize-mode-body, .cz-mode > div { flex: 1; min-width: 0; }
/* The markup uses an `` (and `` for the older skin). Without an
explicit override the `` renders at the browser default (huge), which
was blowing the card up to ~120px tall. Constrain heading + paragraph to
the same compact type scale we use elsewhere. */
.customize-mode-card h3,
.customize-mode-card h4,
.cz-mode h3,
.cz-mode h4 {
font-size: 14px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 2px;
line-height: 1.25;
letter-spacing: -0.005em;
}
.customize-mode-card p, .cz-mode p {
font-size: 12px;
color: var(--fg-3);
margin: 0;
line-height: 1.4;
}
/* Tile grid */
.basic-tiles-section { margin-bottom: 28px; }
.basic-tiles-header, .cz-tiles-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
}
.basic-tiles-label, .cz-tiles-label {
font-size: 12px;
font-weight: var(--fw-bold);
color: var(--fg-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.basic-tiles-meta, .cz-tiles-meta {
display: flex; align-items: center;
gap: 14px;
}
.basic-tiles-count, .cz-count {
font-size: 12px;
color: var(--fg-3);
font-weight: var(--fw-medium);
}
.cz-selall {
display: inline-flex; align-items: center;
gap: 8px;
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
cursor: pointer;
}
.cz-check {
width: 16px; height: 16px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: #fff;
}
.basic-tiles-grid, .cz-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 28px;
}
.tilec {
position: relative;
background: #fff;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius);
padding: 12px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
color: var(--gem-60);
}
.tilec:hover { border-color: var(--carbon-30); }
.tilec.is-selected, .tilec.selected { border-color: var(--envoy-red); }
.tilec.is-selected .tilec-check,
.tilec.selected .tilec-check {
background: var(--envoy-red);
border-color: var(--envoy-red);
}
.tilec.is-selected .tilec-check::after,
.tilec.selected .tilec-check::after {
content: ""; position: absolute; inset: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center / 65%;
}
.tilec-check {
position: absolute; top: 10px; right: 10px;
width: 16px; height: 16px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: #fff;
}
.tilec-preview {
height: 80px;
margin-bottom: 10px;
border-radius: 6px;
background: var(--arctic);
padding: 10px;
display: flex; align-items: center; justify-content: center;
}
.tilec-preview svg { width: 100%; height: 100%; }
.tilec-kpi {
font-size: 22px;
font-weight: var(--fw-bold);
color: var(--fg-1);
letter-spacing: -0.01em;
}
.tilec-table {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 4px; width: 100%; height: 100%;
padding: 4px;
}
.tilec-table span {
background: currentColor;
opacity: 0.25;
border-radius: 2px;
}
.tilec-name {
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
line-height: 1.3;
}
/* ─── Chart tile cards (basic-tiles-grid) ────────────────────────────────────
The JS in `showCustomizePanel` builds tiles with the class names
`.tile-card`, `.tile-card-check`, `.tile-card-name`, `.tile-card-footer`,
`.tile-card-type`, `.tile-card-type-dot`. The earlier `.tilec*` styles up
above never matched, so the cards were rendering completely unstyled —
giant block-level names, no checkbox, no card chrome. These rules give
them proper card layout, selection state, and a type badge. */
.tile-card {
position: relative;
background: #fff;
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
padding-right: 36px; /* leave room for the absolute checkbox */
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 76px;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tile-card:hover {
border-color: var(--carbon-30);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tile-card.selected {
border-color: var(--envoy-red);
background: rgba(250, 67, 56, 0.03);
}
.tile-card-check {
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.tile-card-check > svg {
opacity: 0;
transition: opacity 0.15s;
}
.tile-card.selected .tile-card-check {
background: var(--envoy-red);
border-color: var(--envoy-red);
}
.tile-card.selected .tile-card-check > svg { opacity: 1; }
.tile-card-name {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
margin: 0;
}
.tile-card-footer {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.tile-card-type {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: var(--fw-semibold);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tile-card-type-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--gem-60, #4e4eda);
display: inline-block;
}
/* ─── "Select all" toggle in the basic-tiles header ──────────────────────── */
.tile-select-all-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
cursor: pointer;
user-select: none;
}
.tile-select-all-check {
position: relative;
width: 16px;
height: 16px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.tile-select-all-check .tile-check-icon {
opacity: 0;
transition: opacity 0.15s;
}
.tile-select-all-check.all-selected {
background: var(--envoy-red);
border-color: var(--envoy-red);
}
.tile-select-all-check.all-selected .tile-check-icon { opacity: 1; }
.tile-select-all-check.partial {
background: var(--envoy-red);
border-color: var(--envoy-red);
}
.tile-select-all-check.partial::after {
content: "";
position: absolute;
inset: 50% 3px auto 3px;
height: 2px;
background: #fff;
border-radius: 1px;
transform: translateY(-50%);
}
/* Footer actions inside customize panel */
.customize-footer, .cz-foot {
display: flex;
justify-content: space-between;
gap: 12px;
}
.customize-footer .primary-btn,
.cz-foot .primary-btn { width: auto; }
.customize-footer .secondary-btn,
.cz-foot .secondary-btn { width: auto; }
/* Group the Save layout + Generate Slides buttons on the right while Back
sits on the left. `space-between` on .customize-footer pushes the two
sides apart automatically. */
.customize-footer-right {
display: inline-flex;
align-items: center;
gap: 10px;
}
.basic-selection-warning,
.basic-tiles-error {
display: flex;
align-items: center;
gap: 10px;
background: rgba(184, 131, 12, 0.08);
border: 1px solid rgba(184, 131, 12, 0.3);
color: #8a6310;
padding: 10px 14px;
border-radius: var(--radius);
font-size: 13px;
line-height: 1.4;
margin-bottom: 14px;
}
.basic-selection-warning > svg {
flex-shrink: 0;
color: #b8830c;
}
.basic-tiles-error {
background: rgba(160, 12, 31, 0.06);
border-color: rgba(160, 12, 31, 0.3);
color: var(--garnet-70);
}
.basic-tiles-loading {
display: flex; align-items: center; justify-content: center;
padding: 60px 20px;
color: var(--fg-3);
font-size: 14px;
}
/* Sheets-mode notice when KPI tiles get filtered out of the chart picker. */
.basic-tiles-skipped-note {
font-size: 12px;
color: var(--fg-3);
font-style: italic;
margin: 0 0 10px;
}
/* ============================================================
Result panel (Step 5 — success)
============================================================ */
.result-container, .result-panel {
text-align: center;
padding: 48px 40px;
}
.result-icon, .rs-icon {
width: 52px; height: 52px;
border-radius: 999px;
background: var(--cilantro-20);
color: var(--cilantro-60);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.result-title, .rs-title {
font-size: 24px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.result-subtitle, .rs-sub, #result-subtitle {
font-size: 14px;
color: var(--fg-3);
margin: 0 0 32px;
}
.result-preview, .rs-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 720px;
margin: 0 auto 32px;
}
.rs-slide {
aspect-ratio: 16/9;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
text-align: left;
box-shadow: var(--shadow-xs);
position: relative;
}
.rs-eyebrow {
font-size: 9px;
font-weight: var(--fw-bold);
color: var(--envoy-red);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rs-title-l {
font-size: 16px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin-top: 6px;
line-height: 1.15;
}
.rs-byline { font-size: 9px; color: var(--fg-3); margin-top: 4px; }
.rs-h {
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin-bottom: 8px;
}
.rs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rs-kl {
font-size: 8px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--fw-semibold);
}
.rs-kv {
font-size: 13px;
font-weight: var(--fw-bold);
color: var(--fg-1);
}
.result-actions, .rs-actions {
display: flex; gap: 10px; justify-content: center;
}
.result-actions .primary-btn,
.rs-actions .primary-btn,
.result-actions .secondary-btn,
.rs-actions .secondary-btn { width: auto; }
.result-secondary-links {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin-top: 16px;
font-size: 13px;
}
.result-secondary-links a,
.result-secondary-links .download-pdf-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--fg-3);
text-decoration: none;
font-weight: var(--fw-medium);
font-family: var(--font-sans);
font-size: 13px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
transition: color 0.15s;
}
.result-secondary-links a:hover,
.result-secondary-links .download-pdf-link:hover { color: var(--envoy-red); }
.result-secondary-sep { color: var(--fg-4); }
/* ─── "Charts included" list on the success screen ──────────────────────────
2-column card so dashboards with 40+ charts don't produce a wall of rows.
The .query-items wrapper is a CSS grid; the header sits above it. */
.query-summary {
margin: 32px auto 0;
max-width: 900px;
text-align: left;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.query-summary > p {
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border);
background: var(--arctic);
}
.query-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.query-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-top: 1px solid var(--border);
min-width: 0;
}
/* No top border on the first row (items 1+2) — the header above already
provides the separator. Using top-borders (instead of bottom-borders)
keeps things clean for odd counts: the last row never has a dangling
border below it. */
.query-item:nth-child(-n+2) { border-top: 0; }
/* Vertical divider between the two columns. */
.query-item:nth-child(odd) { border-right: 1px solid var(--border); }
.query-name {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--fg-1);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.query-rows {
font-size: 11px;
font-weight: var(--fw-medium);
color: var(--fg-3);
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 999px;
padding: 2px 8px;
white-space: nowrap;
flex-shrink: 0;
}
/* Drop to a single column on narrow screens — the card stops being useful
as a table when each column is only ~200px wide. */
@media (max-width: 640px) {
.query-items { grid-template-columns: 1fr; }
.query-item:nth-child(odd) { border-right: 0; }
}
/* ============================================================
Preview / Slide builder (used in custom mode)
============================================================ */
.preview-container { padding: 8px 0; }
.preview-title {
font-size: 18px;
font-weight: var(--fw-bold);
color: var(--fg-1);
margin: 0 0 6px;
}
.preview-subtitle {
font-size: 13px;
color: var(--fg-3);
margin: 0 0 20px;
}
/* Generic loading spinner. The `.spinner` class had no CSS at all so the
div was rendering as an empty box — now it's a 40px circle with a partial
ring that rotates. Sized via `width/height` on the element itself when the
caller wants something smaller (e.g. inline `style={{ width: '14px' }}`). */
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border);
border-top-color: var(--envoy-red);
border-radius: 50%;
animation: spinner-rotate 0.85s linear infinite;
}
@keyframes spinner-rotate {
to { transform: rotate(360deg); }
}
.preview-spinner {
margin: 0 auto 18px;
}
/* Progress bar shown under the chart name in the Generating Slides step,
plus the "Slide N of M" caption below it. */
.preview-progress {
max-width: 360px;
margin: 4px auto 6px;
height: 6px;
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
}
.preview-progress-fill {
height: 100%;
background: var(--envoy-red);
width: 0%;
transition: width 0.3s ease;
border-radius: 999px;
}
.preview-count {
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--fg-3);
margin: 6px 0 0;
}
/* Slide builder — single column layout (the broken 2-column grid was leaving
"Your slides" + Add Slide / Clear All on one side and the slide cards
wandering to the other). */
.slide-builder {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 28px;
}
.slide-builder-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.slide-builder-label {
font-size: 12px;
font-weight: var(--fw-bold);
color: var(--fg-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.slide-builder-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.slide-list {
display: flex; flex-direction: column;
gap: 10px;
}
.drop-line {
height: 2px;
background: var(--envoy-red);
border-radius: 1px;
margin: -4px 0;
}
.drop-line.hidden { display: none; }
.add-slide-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 14px;
background: #fff;
border: 1.5px dashed var(--border-strong);
border-radius: var(--radius);
color: var(--fg-2);
font-size: 13px;
font-weight: var(--fw-semibold);
cursor: pointer;
}
.add-slide-btn:hover { border-color: var(--envoy-red); color: var(--envoy-red); }
/* ─── Slide card (custom mode) ──────────────────────────────────────────────
Each entry in the slide-list. Layout: drag handle • thumbnail/preview •
inline editors (type select + title input or tab dropdown) • action buttons
(Change background, remove). Without these rules the children rendered as
raw unstyled HTML controls stacked vertically — what the screenshot showed. */
.slide-card {
position: relative; /* anchor for .slide-layout-popup */
display: grid;
grid-template-columns: 24px 120px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.15s, box-shadow 0.15s;
}
.slide-card:hover {
border-color: var(--carbon-30);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.slide-card.dragging { opacity: 0.5; }
.slide-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 100%;
color: var(--fg-3);
cursor: grab;
user-select: none;
}
.slide-drag-handle:hover { color: var(--fg-1); }
.slide-drag-handle:active { cursor: grabbing; }
.slide-card-bg {
position: relative;
width: 120px;
aspect-ratio: 16 / 9;
border-radius: 6px;
background-color: var(--arctic);
border: 1px solid var(--border);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.slide-card-blank-bg {
font-size: 9px;
font-weight: var(--fw-bold);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
}
/* ─── Mini "change layout" button rendered inside the slide thumbnail ─────
Body slide cards include a small overlay that previews the slide layout
(full / text-chart / chart-text) and opens a popup to swap between them.
Without these rules it was rendering as a raw stretched button stuck in
the bottom-right of the thumbnail. */
.slide-layout-overlay-btn {
position: absolute;
right: 4px;
bottom: 4px;
width: 24px;
height: 16px;
padding: 0;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--border);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-2);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.slide-layout-overlay-btn:hover {
background: #fff;
border-color: var(--envoy-red);
color: var(--envoy-red);
}
.slide-layout-overlay-btn > svg { width: 16px; height: 10px; }
.slide-layout-overlay-btn--light {
background: rgba(31, 35, 45, 0.85);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.slide-layout-overlay-btn--light:hover {
background: rgba(31, 35, 45, 0.95);
border-color: #fff;
color: #fff;
}
/* Popup of layout choices. Anchored to `.slide-card` (which is now
`position: relative`) so it can escape the thumbnail's `overflow: hidden`
clip and appear above the action area on the right side of the card —
close to the "Change Layout" button that triggers it. */
.slide-layout-popup {
position: absolute;
bottom: calc(100% - 8px);
right: 12px;
z-index: 20;
display: flex;
gap: 4px;
padding: 6px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.slide-layout-popup.hidden { display: none; }
.slide-layout-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 8px;
background: transparent;
border: 1.5px solid transparent;
border-radius: 6px;
color: var(--fg-3);
font-size: 10px;
font-weight: var(--fw-semibold);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.slide-layout-opt:hover {
background: var(--arctic);
color: var(--fg-1);
}
.slide-layout-opt.active {
border-color: var(--envoy-red);
color: var(--envoy-red);
background: rgba(250, 67, 56, 0.04);
}
.slide-layout-opt > svg { display: block; }
/* KPI-grid layout: six narrow selects in a 3×2 arrangement, replacing the
single chart-tab dropdown when the user picks the "KPI Grid" layout. */
.slide-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
min-width: 0;
}
/* chart-kpis layout: chart select up top, three KPI selects stacked below. */
.slide-kpi-stack {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
min-width: 0;
margin-top: 4px;
}
.slide-kpi-cell {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--fw-medium);
color: var(--fg-1);
background: #fff;
border: 1px solid var(--border);
border-radius: 5px;
padding: 4px 18px 4px 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 10px 10px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.slide-kpi-cell:focus {
outline: none;
border-color: var(--envoy-red);
box-shadow: 0 0 0 2px rgba(250, 67, 56, 0.12);
}
/* Optional inline text input on text-chart / chart-text layouts. */
.slide-text-input {
width: 100%;
font-family: var(--font-sans);
font-size: 12px;
color: var(--fg-2);
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 9px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.slide-text-input:focus {
outline: none;
border-color: var(--envoy-red);
box-shadow: 0 0 0 3px rgba(250, 67, 56, 0.1);
background: #fff;
}
.slide-card-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.slide-type-select {
align-self: flex-start;
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg-3);
background: var(--arctic);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
}
.slide-type-select:focus { outline: none; border-color: var(--envoy-red); }
.slide-title-input,
.slide-card-info select:not(.slide-type-select) {
width: 100%;
font-family: var(--font-sans);
font-size: 13px;
font-weight: var(--fw-medium);
color: var(--fg-1);
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
transition: border-color 0.15s, box-shadow 0.15s;
}
/* Custom-style the chart-tab