/* * Gender Truth Publisher, Design System * Single source of truth for all colours, type, spacing, and components. * No hex values anywhere else. Dark mode via [data-theme="dark"] on . */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --gold: #C08000; --gold-hover: #D4900A; --gold-tint: #FFF8EE; --gold-border: #E8D8B8; /* Brand palette — these values must match the public site exactly (site/src/index.js). Two-cream pattern: --bg is the deeper canvas, --surface-2 is the white sheet that floats on top via pub-section. */ --bg: #F0EBE4; --surface: #FDFBF9; --surface-2: #FFFFFF; --surface-3: #F5F0EA; --text: #1A1A1A; --text-2: #5A4A3A; --text-3: #9A8A7A; --text-4: #7A6A5A; --border: #E8DDD2; --border-2: #F0E8DC; --border-3: #D8CFC8; --green: #2D7A3A; --green-tint: #EAF5EC; --amber: #B86800; --amber-tint: #FFF3E0; --red: #B03030; --red-tint: #FDEAEA; --blue: #4355B9; --blue-tint: #EAF0FF; --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 3px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.10); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --font-sans: Arial, sans-serif; --font-serif: Georgia, serif; --transition: .15s ease; } [data-theme="dark"] { /* Brand palette — these values must match the public site exactly (site/src/index.js dark theme). */ --bg: #16120E; --surface: #1E1C1A; --surface-2: #242220; --surface-3: #2A2520; --text: #E8E0D8; --text-2: #B0A090; --text-3: #7A6A5A; --text-4: #7A6A5A; --border: #3A3530; --border-2: #3A3530; --border-3: #4A4540; --gold-tint: #2A2520; --gold-border: #5A4A30; --green-tint: #1A2E1C; --amber-tint: #2A2010; --red-tint: #2E1A1A; --shadow-sm: 0 1px 4px rgba(0,0,0,.20); --shadow-md: 0 3px 12px rgba(0,0,0,.30); --shadow-lg: 0 8px 32px rgba(0,0,0,.40); } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); font-size: 1rem; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; padding-top: 60px; padding-bottom: 50px; accent-color: var(--gold); } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-hover); text-decoration: underline; } img { max-width: 100%; display: block; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .pub-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; } .pub-wrap--narrow { max-width: 640px; } .pub-wrap--medium { max-width: 980px; } .pub-wrap--wide { max-width: 1200px; } @media (max-width: 640px) { .pub-wrap, .pub-wrap--narrow, .pub-wrap--medium, .pub-wrap--wide { padding: 0 16px; } } /* ── Header ──────────────────────────────────────────────────────────────── */ /* * Editorial single-row header, mirroring the public site: * [brand: Gender Truth | Publisher] Create · Sammy · Review · Helen · ☾ · Sign out * * Brand and separators in gold, role and nav links in serif text-2/3, * dot separators between the right-hand items, no icons. The active * nav link is rendered in gold with bold weight, no underline tab bar. */ /* House-style header — matches site/.site-header in position, height, background and gold underline so publisher and site read as one. */ .pub-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 50px; background: var(--surface); border-bottom: 2px solid var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: 1rem; } .pub-header__brand { font-family: var(--font-serif); font-size: .88rem; color: var(--text-2); text-decoration: none; white-space: nowrap; } .pub-header__brand:hover { text-decoration: none; } .pub-header__brand:hover .pub-header__brand-name { text-decoration: underline; } .pub-header__brand-name { color: var(--gold); transition: color var(--transition); } .pub-header__sep { color: var(--gold); margin: 0 .3rem; } .pub-header__role { color: var(--text-2); } .pub-header__right { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; } .pub-header__nav-link { font-family: var(--font-serif); font-size: .82rem; color: var(--text-3); text-decoration: none; transition: color var(--transition); white-space: nowrap; } .pub-header__nav-link:hover { color: var(--gold); text-decoration: none; } .pub-header__nav-link.active { color: var(--gold); font-weight: 600; } .pub-header__sep-dot { color: var(--border-3); font-size: .82rem; } .pub-header__user { font-family: var(--font-serif); font-size: .82rem; color: var(--text-3); } .pub-header__user strong { color: var(--text-2); font-weight: normal; } @media (max-width: 900px) { .pub-header__role { display: none; } .pub-header__sep { display: none; } } @media (max-width: 640px) { .pub-header__user { display: none; } .pub-header__user + .pub-header__sep-dot { display: none; } .pub-header { padding: 0 1rem; gap: .7rem; } } /* ── Footer ──────────────────────────────────────────────────────────────── */ /* House-style footer — matches site/.site-footer: fixed-position thin strip across the bottom with the same brand chrome. */ .pub-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; height: 34px; background: var(--surface); border-top: 1px solid var(--border); font-family: var(--font-serif); font-size: .7rem; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: .55rem; } .pub-footer a { color: var(--gold); text-decoration: none; } .pub-footer a:hover { text-decoration: underline; } .pub-footer .fsep { color: var(--border-3); } .pub-footer__tagline { font-style: italic; color: var(--text-3); } @media (max-width: 640px) { .pub-footer__tagline, .pub-footer .fsep:last-of-type { display: none; } } /* ── Legacy .pub-nav (separate row) ──────────────────────────────────────── */ /* Retained but unused in base.html. Leaving the rule for any standalone pages that might still reference it; remove in a later cleanup. */ .pub-nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; } .pub-nav::-webkit-scrollbar { display: none; } .pub-nav__link { display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: .82rem; color: var(--text-3); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition), border-color var(--transition); } .pub-nav__link:hover { color: var(--gold); text-decoration: none; border-bottom-color: var(--gold-border); } .pub-nav__link.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; } /* ── Page shell ──────────────────────────────────────────────────────────── */ .pub-page { padding: 28px 0 96px; } .pub-page__header { margin-bottom: 32px; } .pub-page__header--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pub-page__title { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.25; font-weight: normal; color: var(--text); margin-bottom: 6px; } .pub-page__sub { font-size: .95rem; color: var(--text-3); line-height: 1.7; } /* ── Cards ───────────────────────────────────────────────────────────────── */ /* * House style, identical to the public site: * * ┌──── canvas (var(--bg), brand cream) ──────────────┐ * │ │ * │ ┌── .pub-section (var(--surface-2), white) ─┐ │ * │ │ Page title and ALL page content lives │ │ * │ │ inside this pale sheet, mirroring the │ │ * │ │ site's .content-box exactly. │ │ * │ │ │ │ * │ │ ┌── .pub-card (var(--surface)) ─┐ │ │ * │ │ │ Pale cream item tile. │ │ │ * │ │ └─────────────────────────────────┘ │ │ * │ └─────────────────────────────────────────────┘ │ * │ │ * └───────────────────────────────────────────────────┘ * * .pub-section is the house-style page card. Background and border * match the public site's .content-box token-for-token so the two * products read as one system. * * .pub-card is the inner item tile, sitting inside .pub-section. Its * background is var(--surface) (pale cream, not white) so it reads as * a soft tile against the white sheet. */ .pub-section { background: var(--surface-2); border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: 12px; padding: 28px 32px; overflow: hidden; } .pub-section + .pub-section { margin-top: 16px; } .pub-section--flush { padding: 0; } .pub-section--tight { padding: 18px 22px; } @media (max-width: 640px) { .pub-section { padding: 20px 18px; } .pub-section--tight { padding: 14px 16px; } } /* Item cards: cream tile on the white sheet. The card background matches the page canvas (var(--bg)) so the cream comes through the white pub-section sheet. Same value used by site/.card. */ .pub-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; } .pub-card--hover { transition: box-shadow var(--transition), border-color var(--transition); cursor: pointer; } .pub-card--hover:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); } /* .pub-list is the standard stack of inner cards inside a section. */ .pub-list { display: flex; flex-direction: column; gap: 10px; } .pub-list--grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Suppress legacy item-card margins when stacked inside a .pub-list, so spacing is controlled by the list gap and stays consistent. */ .pub-list > .pub-card, .pub-list > .tr-card, .pub-list > .fc, .pub-list > .nc { margin-bottom: 0; margin-top: 0; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: .6rem 1.25rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); text-decoration: none; white-space: nowrap; line-height: 1.4; } .pub-btn:hover { text-decoration: none; } .pub-btn:disabled { opacity: .5; cursor: not-allowed; } .pub-btn--primary { background: var(--gold); color: #fff; border-color: var(--gold); } .pub-btn--primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #fff; } .pub-btn--secondary { background: transparent; color: var(--gold); border-color: var(--gold); } .pub-btn--secondary:hover { background: var(--gold-tint); color: var(--gold-hover); } .pub-btn--ghost { background: transparent; color: var(--text-3); border-color: var(--border-3); } .pub-btn--ghost:hover { color: var(--text); border-color: var(--border); background: var(--surface-3); } .pub-btn--xs { padding: .2rem .55rem; font-size: .65rem; } .pub-btn--sm { padding: .35rem .8rem; font-size: .72rem; } .pub-btn--lg { padding: .85rem 1.8rem; font-size: 1rem; } .pub-btn--full { width: 100%; } /* ── Forms ───────────────────────────────────────────────────────────────── */ .pub-field { margin-bottom: 20px; } .pub-label { display: block; font-size: .82rem; color: var(--text-2); margin-bottom: 6px; } .pub-input, .pub-textarea, .pub-select { width: 100%; padding: .6rem .9rem; font-family: var(--font-sans); font-size: .92rem; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition); appearance: none; } .pub-input:focus, .pub-textarea:focus, .pub-select:focus { border-color: var(--gold); background: var(--surface-2); } .pub-input::placeholder, .pub-textarea::placeholder { color: var(--text-3); } .pub-textarea { resize: vertical; min-height: 100px; line-height: 1.6; field-sizing: content; } .pub-input-note { font-size: .72rem; color: var(--text-3); margin-top: 4px; } /* ── Badges ──────────────────────────────────────────────────────────────── */ .pub-badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 10px; border: 1px solid transparent; } .pub-badge--gold { background: var(--gold-tint); border-color: var(--gold-border); color: var(--gold); } /* Green, amber and red were once tinted pills. House style is one neutral palette, so all three render as the grey pill below — kept as aliases so existing markup works without per-template edits. */ .pub-badge--green, .pub-badge--amber, .pub-badge--red, .pub-badge--grey { background: var(--surface-3); border-color: var(--border-3); color: var(--text-3); } /* ── Divider ─────────────────────────────────────────────────────────────── */ .pub-divider { border: none; border-top: 1px solid var(--border-2); margin: 24px 0; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .pub-empty { text-align: center; padding: 64px 24px; color: var(--text-3); } .pub-empty__icon { font-size: 2.5rem; margin-bottom: 16px; opacity: .4; } .pub-empty__title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text-2); margin-bottom: 8px; } .pub-empty__sub { font-size: .82rem; line-height: 1.6; max-width: 360px; margin: 0 auto 24px; } /* ── Dark mode toggle ────────────────────────────────────────────────────── */ .pub-dm-toggle { background: none; border: 1.5px solid var(--border-3); border-radius: 20px; padding: .2rem .55rem; cursor: pointer; font-size: .85rem; color: var(--text-3); line-height: 1; flex-shrink: 0; transition: border-color var(--transition), color var(--transition); } .pub-dm-toggle:hover { border-color: var(--gold); color: var(--gold); } /* ── Flash messages ──────────────────────────────────────────────────────── */ /* Soft on-brand notice. Gold accent on the leading edge, surface background, body-text colour, sized like a card label rather than a shouty banner. Mirrors the live site's .content-synopsis aesthetic so the publisher and the public site read as one design system. */ .pub-flash { padding: 10px 14px; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: .9rem; line-height: 1.55; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--gold); color: var(--text-2); } .pub-flash--success, .pub-flash--info { border-left-color: var(--gold); } .pub-flash--error { border-left-color: var(--text-2); } /* ── Spinner ─────────────────────────────────────────────────────────────── */ .pub-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: pub-spin .7s linear infinite; vertical-align: middle; } @keyframes pub-spin { to { transform: rotate(360deg); } } /* ── Home nav grid ───────────────────────────────────────────────────────── */ .pub-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } @media (max-width: 900px) { .pub-nav-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .pub-nav-grid { grid-template-columns: 1fr; } } .pub-nav-card { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; text-decoration: none; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .pub-nav-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-border); transform: translateY(-2px); text-decoration: none; } .pub-nav-card__icon { font-size: 2rem; margin-bottom: 16px; display: block; line-height: 1; } .pub-nav-card__title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text); margin-bottom: 8px; font-weight: normal; } .pub-nav-card__desc { font-size: .82rem; color: var(--text-3); line-height: 1.6; } .pub-nav-card__arrow { display: block; margin-top: 20px; font-size: .82rem; color: var(--gold); font-weight: 600; } /* Sectioned home dashboard. Four sections (Share, Create, Review, Mentor) stacked vertically on the home page, each with its own grid of cards. The card grid uses auto-fit minmax so dense sections (Review has ~14 cards) flow into a tighter column count on wide screens and stack cleanly on narrow ones. */ .pub-home-section { margin-bottom: 48px; } .pub-home-section:last-child { margin-bottom: 0; } .pub-home-section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-2); } .pub-home-section__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: normal; color: var(--text); margin: 0; } .pub-home-section__sub { font-size: .82rem; color: var(--text-3); } .pub-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .pub-home-grid--2x2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 520px) { .pub-home-grid--2x2 { grid-template-columns: 1fr; } } .pub-home__tagline { margin: 22px 0 0; text-align: center; font-size: 1.05rem; line-height: 1.5; color: var(--text-3); } .pub-home-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 140px; padding: 32px 24px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); position: relative; } .pub-home-card:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); transform: translateY(-1px); text-decoration: none; } .pub-home-card__icon { font-size: 1.4rem; margin-bottom: 10px; display: block; line-height: 1; } .pub-home-card__title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text); font-weight: normal; } .pub-home-card__desc { font-size: .76rem; color: var(--text-3); line-height: 1.5; } /* Coming-soon cards: greyed-out placeholder that keeps the same shape and alignment as an active card but reads as not-yet-available. */ .pub-home-card--soon { cursor: default; pointer-events: none; opacity: .5; } .pub-home-card--soon:hover { transform: none; box-shadow: none; border-color: var(--border); } .pub-home-card--soon .pub-home-card__title { color: var(--text-3); } /* ── Static pages editor ─────────────────────────────────────────────────── */ .sp-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; } .sp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; cursor: pointer; } .sp-card-title { font-family: var(--font-serif); font-size: 1rem; color: var(--text); flex: 1; } .sp-card-meta { font-size: .72rem; color: var(--text-3); } .sp-card-body { display: none; } .sp-card-body.open { display: block; } .sp-chevron { font-size: .9rem; color: var(--text-3); } .sp-save-row { display: flex; gap: 8px; align-items: center; } .sp-save-status { font-size: .78rem; color: var(--text-3); } .sp-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sp-edit { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } /* * Static-page content preview. * * One house-style surface for every static page. The preview is rendered using * design-system tokens so it reads correctly in both light and dark publisher * themes, and mirrors how the public site will display the same HTML. Any * inline colour or background baked into stored content is overridden so * legacy content doesn't go dark-on-dark in dark mode. */ .sp-content { background: var(--surface-2); color: var(--text); min-height: 240px; font-family: var(--font-sans); font-size: .95rem; line-height: 1.85; border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 24px 28px; outline: none; transition: border-color var(--transition); } .sp-content:focus { border-color: var(--gold); } /* Formatting toolbar that sits above a contenteditable editor. Injected automatically by the script in base.html. Provides bold, italic, underline, H3 heading, paragraph, bulleted list, numbered list, link, and clear formatting. */ .sp-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; background: var(--surface); border: 1.5px solid var(--border-3); border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; margin-bottom: -1.5px; } .sp-toolbar + .sp-content, .sp-toolbar + .fe-article, .sp-toolbar + [contenteditable="true"] { border-top-left-radius: 0; border-top-right-radius: 0; } .sp-tb-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 4px 10px; min-width: 32px; cursor: pointer; color: var(--text-2); font-family: var(--font-sans); font-size: .85rem; line-height: 1.2; transition: all .12s; } .sp-tb-btn:hover { border-color: var(--border-3); color: var(--gold); background: var(--surface-2); } .sp-tb-btn:active { background: var(--gold-tint); border-color: var(--gold); } .sp-tb-btn--flash { background: var(--gold-tint) !important; border-color: var(--gold) !important; color: var(--gold) !important; } .sp-tb-sep { width: 1px; background: var(--border-2); margin: 2px 4px; } .sp-content h1, .sp-content h2, .sp-content h3 { font-family: var(--font-serif); font-weight: normal; color: var(--text); line-height: 1.3; } .sp-content h1 { font-size: 1.55rem; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-2); } .sp-content h1:first-child { margin-top: 0; } .sp-content h2 { font-size: 1.2rem; margin: 24px 0 8px; } .sp-content h3 { font-size: 1.2rem; margin: 22px 0 6px; } .sp-content p { margin: 0 0 12px; } .sp-content ul, .sp-content ol { margin: 8px 0 14px 1.5rem; } .sp-content li { margin-bottom: 6px; } .sp-content a { color: var(--gold); text-decoration: underline; } .sp-content strong { color: var(--text); font-weight: 600; } .sp-content em { font-style: italic; } .sp-content hr { border: none; border-top: 1px solid var(--border-2); margin: 22px 0; } .sp-content blockquote { border-left: 3px solid var(--gold); padding: 2px 14px; margin: 14px 0; color: var(--text-2); font-style: italic; } /* Minimal, targeted defence for legacy pasted content. Only intervenes on elements that actually carry inline styling or font tags; otherwise the standard cascade above applies and headings render Georgia naturally. */ .sp-content font[color] { color: inherit; } .sp-content font[face] { font-family: inherit; } .sp-content [style] { background-color: transparent !important; background-image: none !important; } .sp-content { background-color: var(--surface-2) !important; color: var(--text) !important; } /* ── Editor tabs + preview ──────────────────────────────────────────────── */ /* Shared tab strip used on insight_edit, news_edit etc. to switch between the edit form and a live preview rendered with article-page typography. */ .pub-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--border-3); } .pub-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 18px; font: inherit; color: var(--text-2); cursor: pointer; margin-bottom: -1px; border-radius: 0; } .pub-tab:hover { color: var(--text); } .pub-tab--active { color: var(--gold); border-bottom-color: var(--gold); } /* Article preview pane. Renders the edit-form state using on-site article typography so Helen can see the piece read before publishing. */ .pub-preview__feature img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); margin-bottom: 18px; } .pub-preview__title { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1.2; margin: 0 0 14px; font-weight: normal; } .pub-preview__summary, .pub-preview__answer { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--text-2); margin: 0 0 22px; } .pub-preview__body { border: 0; padding: 0; min-height: 0; background: transparent; } .pub-preview__source { margin-top: 22px; font-size: .9rem; color: var(--text-2); font-style: italic; } .pub-preview__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; } .pub-preview__tag { font-size: .78rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border-3); border-radius: 999px; padding: 3px 10px; } .pub-preview__actions { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-3); display: flex; align-items: center; gap: 14px; } /* .pub-edit-stack sets display:flex which beats UA [hidden] without !important. Force the hide so the tab toggle actually swaps panes. */ .pub-edit-stack[hidden] { display: none !important; } /* ── Login ───────────────────────────────────────────────────────────────── */ .pub-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .pub-login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 400px; } .pub-login-card__brand { font-family: var(--font-serif); font-size: 1rem; color: var(--text); margin-bottom: 4px; font-weight: normal; } .pub-login-card__sub { font-size: .78rem; color: var(--text-3); margin-bottom: 32px; line-height: 1.5; } .pub-login-card__title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--text); margin-bottom: 24px; font-weight: normal; } .pub-login-error { background: var(--gold-tint); border: 1px solid var(--gold-border); color: var(--gold); border-radius: var(--radius-md); padding: 12px 16px; font-size: .82rem; margin-bottom: 20px; } /* ── Panel (togglable add/import panels) ─────────────────────────────────── */ .pub-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; display: none; } .pub-panel.open { display: block; } .pub-panel__title { font-family: var(--font-serif); font-size: .95rem; font-weight: normal; margin-bottom: 4px; color: var(--text); } .pub-panel__desc { font-size: .78rem; color: var(--text-3); margin-bottom: 14px; line-height: 1.5; } .pub-panel__divider { font-size: .78rem; color: var(--text-3); text-align: center; margin: 6px 0; } /* ── Utility rows ─────────────────────────────────────────────────────────── */ .pub-btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pub-btn-row--between { justify-content: space-between; } .pub-btn-row--mb { margin-bottom: 14px; } .pub-btn-row--mb-sm { margin-bottom: 10px; } .pub-btn--file { cursor: pointer; margin: 0; } .pub-btn--muted { color: var(--text-3); } .pub-status-text { font-size: .78rem; color: var(--text-3); } .pub-results { margin-top: 10px; font-size: .82rem; color: var(--text-2); line-height: 1.6; } .pub-search { flex: 1; max-width: 300px; } .pub-select--sm { max-width: 140px; } .pub-select--md { max-width: 200px; } .pub-url-row { display: flex; gap: 8px; align-items: flex-end; } .pub-url-row__input { flex: 1; } .doc-grid__full { grid-column: 1 / -1; } /* Review list rows (JS-generated) */ .doc-review-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-2); } .doc-review-drive-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-2); } .doc-review-body { flex: 1; min-width: 0; } .doc-review-cb { margin-top: 4px; flex-shrink: 0; } .doc-review-title { font-size: .82rem; color: var(--text); margin-bottom: 3px; } .doc-strikethrough { text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .doc-url-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .pub-input--sm { font-size: .82rem; padding: 4px 8px; } /* ── Stats bar ────────────────────────────────────────────────────────────── */ .pub-stats { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .pub-stat { font-size: .82rem; color: var(--text-2); } .pub-stat strong { color: var(--text); } .pub-stat--green { color: var(--text); } .pub-stat--gold { color: var(--gold); } .pub-stat--ml { margin-left: auto; } /* Push a child to the end of its flex parent. Use for right-aligning a button or link inside an already-flex row like .pub-section-head-row. */ .pub-push-right { margin-left: auto; } /* ── Drive set-all tier row ───────────────────────────────────────────────── */ .drive-set-all { margin-bottom: 12px; padding: 10px 12px; background: var(--gold-tint); border: 1px solid var(--gold-border); border-radius: var(--radius-md); } /* ── Inline notes (JS-injected feedback) ─────────────────────────────────── */ .pub-note { font-size: .72rem; margin-top: 4px; line-height: 1.4; } .pub-note--success { color: var(--text); } .pub-note--info { color: var(--text-2); } .pub-note--error { color: var(--text-2); } /* ── Status pills ─────────────────────────────────────────────────────────── */ /* Status pills are uniform pale to keep the house style consistent. The state name is the signal, not the colour. */ .status-pill { border-radius: 20px; padding: 2px 9px; font-size: .7rem; display: inline-block; background: var(--surface-3); color: var(--text-3); } .status-ingested, .status-pending, .status-fetched, .status-failed, .status-skipped { background: var(--surface-3); color: var(--text-3); } /* Transcript status pills */ .st-transcribed, .st-transcribing, .st-uploading, .st-queued, .st-error, .st-pending { background: var(--surface-3); color: var(--text-3); } /* Transcript label pills */ .rag-pill, .rag-pill--warn { background: var(--surface-3); color: var(--text-3); border-radius: 20px; padding: 2px 8px; font-size: .7rem; } /* ── Pipeline legend ─────────────────────────────────────────────────────── */ .pub-legend { display: flex; gap: 16px; margin-bottom: 16px; font-size: .72rem; color: var(--text-3); flex-wrap: wrap; } .pub-legend-item { display: flex; align-items: center; gap: 4px; } .pub-legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .pub-legend-dot--none { background: var(--border); } .pub-legend-dot--gold { background: var(--gold); } .pub-legend-dot--blue, .pub-legend-dot--green { background: var(--text-3); } /* ── Transcript cards ────────────────────────────────────────────────────── */ .tr-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 14px; } .tr-card--clickable { cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); } .tr-card--clickable:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); } .tr-card--clickable:hover .tr-filename { color: var(--gold); } .tr-body { flex: 1; min-width: 0; } .tr-filename { font-family: var(--font-serif); font-size: .9rem; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-meta { font-size: .72rem; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .tr-preview { font-size: .78rem; color: var(--text-2); line-height: 1.5; font-style: italic; } .tr-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; } .tr-thumb { position: relative; flex-shrink: 0; display: block; width: 120px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; text-decoration: none; } .tr-thumb__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; pointer-events: none; } .tr-thumb__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 1.6rem; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); opacity: .8; } .tr-thumb:hover .tr-thumb__icon { opacity: 1; } .tr-thumb--missing { background: var(--surface-3); } .tr-thumb--missing .tr-thumb__video { display: none; } .tr-thumb--missing::after { content: "no preview"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .7rem; } /* ── Video search ────────────────────────────────────────────────────────── */ .vid-search { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .vid-search__input { flex: 1; min-width: 200px; } .vid-search__caption { font-size: .8rem; color: var(--text-3); margin: 0 0 16px 0; } /* ── Video bulk actions ──────────────────────────────────────────────────── */ .vid-bulk { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); } .vid-bulk__status { font-size: .85rem; color: var(--text-2); font-style: italic; } /* ── Document cards ──────────────────────────────────────────────────────── */ .doc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; } .doc-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 14px; } .doc-card.ingested, .doc-card.pending, .doc-card.fetched, .doc-card.failed { border-left: 3px solid var(--border-3); } .doc-body { flex: 1; min-width: 0; } .doc-title { font-family: var(--font-serif); font-size: .92rem; color: var(--text); margin-bottom: 4px; } .doc-meta { font-size: .72rem; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .doc-notes { font-size: .78rem; color: var(--text-2); line-height: 1.5; } .doc-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; flex-wrap: wrap; } .doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } } /* ── Tier sections ───────────────────────────────────────────────────────── */ .tier-section { margin-bottom: 28px; } .tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .tier-name { font-family: var(--font-serif); font-size: .95rem; color: var(--text); text-transform: capitalize; } .tier-count { font-size: .72rem; color: var(--text-3); background: var(--surface-3); border-radius: 10px; padding: 1px 8px; } .tier-ingest-all { margin-left: auto; } .tier-results { max-height: 400px; overflow-y: auto; } .tier-summary { font-size: .82rem; color: var(--text-2); font-weight: 600; } /* ── Shared utilities ─────────────────────────────────────────────────────── */ .pub-back-link { font-size: .78rem; color: var(--text-3); display: inline-block; margin-bottom: 8px; } .pub-count { font-size: .78rem; color: var(--text-3); margin-bottom: 16px; } .pub-label__hint { font-weight: normal; color: var(--text-3); } .pub-label--strong { font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: 14px; } .pub-field-note { font-size: .72rem; color: var(--text-3); margin-top: 4px; } .pub-section-label { font-size: .72rem; color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; } .pub-flex-row { display: flex; align-items: flex-start; gap: 16px; } .pub-flex-grow { flex: 1; min-width: 0; } .pub-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .pub-form-row { display: flex; gap: 8px; margin-bottom: 24px; } .pub-form-row .pub-input { max-width: 360px; } .pub-drop-zone { border: 1.5px dashed var(--border-3); border-radius: var(--radius-md); padding: 32px; text-align: center; } /* House style is one neutral palette — danger keeps the ghost look so no Publisher button screams red. Kept as an alias so existing markup that still carries the modifier renders consistently. */ .pub-btn--danger { color: var(--text-3); } .pub-btn--danger:hover { border-color: var(--border); background: var(--surface-3); color: var(--text); } /* Review home grid */ .pub-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .pub-review-grid .pub-card--highlight { border-color: var(--gold-border); background: var(--gold-tint); } /* Published bar — kept as a pale card with neutral text. The published state is communicated by the words "Published" and the live URL, not by colour. */ .pub-published-bar { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pub-published-bar__tick { font-size: .78rem; color: var(--text); font-weight: 600; } .pub-published-bar__url { font-size: .82rem; color: var(--gold); word-break: break-all; } /* Table */ .pub-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .pub-table th { text-align: left; padding: 10px 16px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-3); } .pub-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-2); vertical-align: top; } .pub-table tr:last-child td { border-bottom: none; } .pub-table--rowlink tbody tr { cursor: pointer; transition: background var(--transition); } .pub-table--rowlink tbody tr:hover { background: var(--surface-3); } /* Tabs */ /* House-style tabs — one filter pattern across every Publisher page. Each tab is a button-shaped strip; the active one sits "on" the border-bottom of the parent so it reads as a card tab. */ .pub-tabs { display: flex; gap: .4rem; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .pub-tab { background: none; border: 1px solid transparent; border-bottom: none; padding: .55rem 1rem; font-family: var(--font-serif); font-size: .95rem; color: var(--text-3); cursor: pointer; text-decoration: none; border-radius: 6px 6px 0 0; margin-bottom: -1px; transition: color var(--transition), background var(--transition), border-color var(--transition); } .pub-tab:hover { color: var(--gold); } .pub-tab--active, .pub-tab.active { background: var(--surface-2); border-color: var(--border); color: var(--text); font-weight: 600; } /* ── document_edit.html ───────────────────────────────────────────────────── */ .de-wrap { max-width: 860px; margin: 0 auto; padding: 0 0 80px; } .de-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .de-status { font-size: .78rem; color: var(--text-3); } .de-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } @media(max-width:600px){ .de-meta { grid-template-columns: 1fr; } } .de-section { margin-bottom: 20px; } .de-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; } .de-content { width: 100%; min-height: 480px; font-family: var(--font-serif); font-size: .9rem; line-height: 1.8; color: var(--text); background: var(--surface); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 16px 18px; resize: vertical; outline: none; transition: border-color var(--transition); } .de-content:focus { border-color: var(--gold); } .de-stats { font-size: .72rem; color: var(--text-3); margin-top: 6px; display: flex; gap: 16px; } .de-notes { width: 100%; font-size: .85rem; line-height: 1.6; color: var(--text); background: var(--surface); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 10px 14px; resize: vertical; outline: none; } .de-notes:focus { border-color: var(--gold); } /* ── faq_edit.html ────────────────────────────────────────────────────────── */ /* * One-at-a-time FAQ review. * * The page is laid out so every field fits in the viewport at once on a laptop * screen. The left column carries the short-form fields (question, category, * short answer, schema answer, meta, OG). The right column carries the full * SEO article in a bounded box with its own internal scroll, so the page as a * whole does not scroll. On narrow screens the two columns stack and the * article box keeps an internal scroll to avoid runaway height. */ .fe-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } .fe-wrap--compact { max-width: 1400px; padding: 0 0 24px; } /* FAQ / News edit pages now live inside the standard .pub-section card, so the page card provides the white sheet and the toolbar + form sit inside it as flat children. fe-card / ne-card zero out the section's padding so the inner toolbar + content provide their own, and the stack drops its outer padding since the card already pads. */ .pub-section.fe-card { padding: 0; } .pub-section.fe-card .fe-toolbar { position: static; margin: 0; padding: 14px 24px; background: transparent; border-top: none; border-bottom: 1px solid var(--border-2); } .pub-section.fe-card .fe-stack { padding: 24px 28px 28px; max-width: none; } .pub-section.ne-card { padding: 0; } .pub-section.ne-card .ne-wrap { padding: 0; max-width: none; } .pub-section.ne-card .ne-toolbar { position: static; margin: 0; padding: 14px 24px; background: transparent; border-top: none; border-bottom: 1px solid var(--border-2); } .pub-section.ne-card > .ne-wrap > *:not(.ne-toolbar) { padding-left: 28px; padding-right: 28px; } .pub-section.ne-card .fe-source-panel { margin-top: 16px; } .fe-toolbar { position: sticky; top: 50px; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 -24px 0; } .fe-wrap--compact .fe-toolbar { margin: 0; padding: 10px 24px; } .fe-status { font-size: .78rem; color: var(--text-3); margin-left: auto; } .fe-queue-bar { display: flex; align-items: center; gap: 14px; padding: 8px 24px; background: var(--gold-tint); border-bottom: 1px solid var(--gold-border); font-size: .78rem; color: var(--text-2); } .fe-queue-bar__count { font-weight: 700; color: var(--text); white-space: nowrap; } .fe-queue-bar__progress { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; max-width: 420px; } .fe-queue-bar__progress-fill { height: 100%; background: var(--gold); transition: width .3s ease; } .fe-queue-bar__next { font-size: .72rem; color: var(--text-3); white-space: nowrap; } /* Single-column stacked layout. Every field occupies the full width of the content column and the page scrolls naturally. The full SEO article grows with its content rather than trapping readers in a narrow inner scroller. */ .fe-stack { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 0; max-width: 900px; margin: 0 auto; } .fe-field { margin-bottom: 24px; } .fe-field--tight { margin-bottom: 0; } .fe-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; } /* News edit page: spacing between the queue panel, main article card, article image card, and share card section. The .pub-section already pads its inner content; this rule gives the stacked top-level blocks a consistent breathing gap that matches the brand's editorial feel instead of letting them sit flush against each other. */ .ne-edit-section > .fe-source-panel, .ne-edit-section > .pub-edit-stack, .ne-edit-section > .pub-card, .ne-edit-section > .sc-section, .ne-edit-section > details.sc-section { margin-top: 24px; } .ne-edit-section > .pub-page__header + * { margin-top: 0; } .fe-answer--tight { min-height: 78px; resize: vertical; } .fe-schema--tight { min-height: 62px; resize: vertical; } .fe-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Full SEO article. Grows with content, no internal scroll. */ .fe-article { font-family: var(--font-sans); font-size: .95rem; line-height: 1.85; color: var(--text); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 16px 18px; outline: none; transition: border-color var(--transition); background: var(--surface); min-height: 280px; } .fe-article:focus { border-color: var(--gold); } .fe-article h1 { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.3; margin: 0 0 14px; font-weight: normal; } .fe-article h3 { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; margin: 20px 0 6px; font-weight: normal; } .fe-article p { font-family: var(--font-sans); margin-bottom: 10px; } .fe-article li, .fe-article span, .fe-article div { font-family: inherit; } .fe-article [style*="font-family"] { font-family: inherit !important; } .fe-article font[face] { font-family: inherit; } .fe-article-empty { font-size: .8rem; color: var(--text-3); padding: 10px 2px 0; line-height: 1.5; } /* Source panel. Opens above the fields when the Source toolbar button is clicked, shows everything we know about where this FAQ originated. Matches the cream pub-card surface so the page reads as one system — the inner pale textareas (.pub-textarea) sit on this darker box, same pattern as queue_item.html. */ .fe-source-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 12px; } .fe-source-panel[hidden] { display: none; } .fe-source-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fe-source-panel__head strong { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .fe-source-panel__body { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; line-height: 1.6; color: var(--text-2); } .fe-source-panel__body p { margin: 0; } .fe-source-panel__body strong { color: var(--text); font-weight: 600; } .fe-source-panel__excerpt { font-size: .9rem; line-height: 1.6; color: var(--text-2); } .fe-source-panel .pub-field { margin-top: 12px; margin-bottom: 0; } .fe-source-row { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border-2); } .fe-source-row:last-child { border-bottom: none; } .fe-source-row__key { flex: 0 0 150px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .fe-source-row__val { flex: 1; color: var(--text); word-break: break-word; } .fe-source-row__val a { color: var(--gold); text-decoration: underline; } .fe-source-row__val--quote { font-style: italic; color: var(--text-2); } @media (max-width: 960px) { .fe-stack { padding: 16px 16px 0; } .fe-wrap--compact .fe-toolbar { padding: 10px 16px; } .fe-queue-bar { padding: 8px 16px; } } @media (max-width: 640px) { .fe-wrap { padding: 24px 16px 80px; } .fe-toolbar { padding: 10px 16px; margin: 0 -16px 24px; } .fe-meta-row { grid-template-columns: 1fr; } .fe-source-row { flex-direction: column; gap: 2px; } .fe-source-row__key { flex: none; } } /* ── news_edit.html ───────────────────────────────────────────────────────── */ .ne-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } .ne-toolbar { position: sticky; top: 50px; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 -24px 32px; } .ne-status { font-size: .78rem; color: var(--text-3); margin-left: auto; } .ne-field { margin-bottom: 24px; } .ne-field label { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 8px; } .ne-headline { font-family: var(--font-serif); font-size: 1.5rem; font-weight: normal; color: var(--text); border: none; border-bottom: 2px solid var(--border-3); background: transparent; width: 100%; padding: 4px 0 8px; outline: none; transition: border-color var(--transition); line-height: 1.3; } .ne-headline:focus { border-bottom-color: var(--gold); } .ne-summary { font-size: .95rem; line-height: 1.65; } .ne-body { min-height: 400px; font-family: var(--font-sans); font-size: .95rem; line-height: 1.85; color: var(--text); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 16px; outline: none; transition: border-color var(--transition); } .ne-body:focus { border-color: var(--gold); } .ne-body h1 { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.3; margin: 0 0 16px; font-weight: normal; } .ne-body h3 { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; margin: 24px 0 8px; font-weight: normal; } .ne-body p { font-family: var(--font-sans); margin-bottom: 12px; } .ne-body li, .ne-body span, .ne-body div { font-family: inherit; } .ne-body [style*="font-family"] { font-family: inherit !important; } .ne-body font[face] { font-family: inherit; } .ne-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .ne-row { grid-template-columns: 1fr; } .ne-toolbar { padding: 10px 16px; margin: 0 -16px 24px; } .ne-wrap { padding: 24px 16px 80px; } } .ne-source { background: var(--surface-3); border-radius: var(--radius-md); padding: 16px; margin-bottom: 24px; } .ne-source-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 12px; } .ne-hint { font-size: .82rem; color: var(--text-3); margin: 0 0 16px; line-height: 1.5; } .cap-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-top: 32px; } .cap-panel h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: normal; margin-bottom: 16px; } .cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .cap-card { background: var(--surface-3); border-radius: var(--radius-md); padding: 12px; } .cap-card__label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 6px; } .cap-card__text { font-size: .82rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; word-break: break-word; } .cap-card__copy { margin-top: 8px; } /* ── policy_review_edit.html ──────────────────────────────────────────────── */ .pr-wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px 80px; } .pr-toolbar { position: sticky; top: 50px; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 -24px 32px; } .pr-status { font-size: .78rem; color: var(--text-3); margin-left: auto; } .pr-field { margin-bottom: 24px; } .pr-field label { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 8px; } .pr-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: normal; color: var(--text); border: none; border-bottom: 2px solid var(--border-3); background: transparent; width: 100%; padding: 4px 0 8px; outline: none; transition: border-color var(--transition); line-height: 1.3; } .pr-name:focus { border-bottom-color: var(--gold); } .pr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .pr-row { grid-template-columns: 1fr; } .pr-toolbar { padding: 10px 16px; margin: 0 -16px 24px; } .pr-wrap { padding: 24px 16px 80px; } } .pr-rating-banner { border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); } .pr-rating-banner--green, .pr-rating-banner--amber, .pr-rating-banner--red { background: var(--surface); border: 1px solid var(--border); } .pr-rating-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--gold); } .pr-rating-dot--green, .pr-rating-dot--amber, .pr-rating-dot--red { background: var(--gold); } .pr-rating-label { font-family: var(--font-serif); font-size: 1.05rem; flex: 1; } .pr-sections-head { font-family: var(--font-serif); font-size: 1rem; font-weight: normal; color: var(--text); margin-bottom: 16px; } .pr-section-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; transition: border-color var(--transition); } .pr-section-card:focus-within { border-color: var(--gold); } .pr-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .pr-section-num { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); min-width: 24px; } .pr-section-title { flex: 1; font-family: var(--font-serif); font-size: .95rem; border: none; border-bottom: 1px solid var(--border-3); background: transparent; color: var(--text); padding: 2px 0 4px; outline: none; transition: border-color var(--transition); width: 100%; } .pr-section-title:focus { border-bottom-color: var(--gold); } .pr-rating-select { font-size: .78rem; border: 1px solid var(--border-3); border-radius: var(--radius-sm); padding: 4px 8px; background: var(--surface-2); color: var(--text); cursor: pointer; } .pr-rating-select--green, .pr-rating-select--amber, .pr-rating-select--red { border-color: var(--border-3); color: var(--text); background: var(--surface-2); } .pr-section-commentary { font-size: .875rem; line-height: 1.65; color: var(--text-2); border: 1px solid var(--border-3); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-2); width: 100%; resize: vertical; outline: none; transition: border-color var(--transition); margin-bottom: 10px; } .pr-section-commentary:focus { border-color: var(--gold); } .pr-section-recommendation { font-size: .875rem; line-height: 1.65; color: var(--text-2); border: 1px solid var(--border-3); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-2); width: 100%; resize: vertical; outline: none; transition: border-color var(--transition); } .pr-section-recommendation:focus { border-color: var(--gold); } .pr-section-recommendation-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; display: block; } .pr-add-section { border: 1px dashed var(--border-3); border-radius: var(--radius-lg); padding: 14px; text-align: center; cursor: pointer; color: var(--text-3); font-size: .82rem; transition: border-color var(--transition), color var(--transition); margin-bottom: 32px; } .pr-add-section:hover { border-color: var(--gold); color: var(--gold); } .pr-body { min-height: 320px; font-family: var(--font-sans); font-size: .95rem; line-height: 1.85; color: var(--text); border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 16px; outline: none; transition: border-color var(--transition); } .pr-body:focus { border-color: var(--gold); } .pr-body h3 { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; margin: 24px 0 8px; font-weight: normal; } .pr-body p { margin-bottom: 12px; } /* ── review search bar ─────────────────────────────────────────────────── */ .rs-bar { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; } /* Full-width search input: no Search button, Enter submits the form. */ .rs-bar__input { width: 100%; } .rs-bar__clear { font-size: .78rem; color: var(--text-3); text-decoration: none; align-self: flex-end; } .rs-bar__clear:hover { color: var(--gold); text-decoration: underline; } .rs-bar__hint { font-size: .75rem; color: var(--text-3); margin: 6px 0 0; } .rs-filters { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 16px; } .rs-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rs-filter-label { font-size: .75rem; color: var(--text-3); min-width: 70px; text-transform: uppercase; letter-spacing: .04em; } .rs-chip { text-decoration: none; cursor: pointer; } .rs-chip:hover { opacity: .8; } .qi-card--archived { opacity: .55; border-style: dashed; } .rs-results-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 12px; } .rs-results-head h3 { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text); margin: 0; font-weight: normal; } .rs-results-count { font-size: .82rem; color: var(--text-3); } .rs-empty { text-align: center; padding: 40px 16px; color: var(--text-3); font-size: .88rem; } /* ── review_conversation_detail.html ─────────────────────────────────────── */ .msg-wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; } .msg-bubble { margin-bottom: 16px; } .msg-bubble--user { text-align: right; } .msg-bubble--assistant { text-align: left; } .msg-text { display: inline-block; max-width: 80%; padding: 12px 16px; border-radius: var(--radius-lg); font-size: .88rem; line-height: 1.6; text-align: left; } .msg-text--user { background: var(--gold-tint); border: 1px solid var(--gold-border); color: var(--text); } .msg-text--assistant { background: var(--surface-3); border: 1px solid var(--border); color: var(--text); } .msg-meta { font-size: .68rem; color: var(--text-3); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-bubble--user .msg-meta { justify-content: flex-end; } .faq-btn { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 3px 12px; font-size: .75rem; color: var(--text-3); cursor: pointer; transition: all var(--transition); } .faq-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); } .grade-btn { border: none; border-radius: 20px; padding: 5px 14px; font-size: .78rem; font-family: var(--font-serif); cursor: pointer; transition: all .18s; font-weight: normal; } .grade-btn.g-excellent, .grade-btn.g-good, .grade-btn.g-needs_improvement { background: var(--surface-3); color: var(--text-2); } .grade-btn.active { box-shadow: 0 0 0 2px currentColor; font-weight: 600; } .grade-btn:hover { opacity: .8; } .grade-saved { font-size: .7rem; color: var(--gold); opacity: 0; transition: opacity .3s; } .grade-saved.show { opacity: 1; } .faq-panel-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; align-items: center; justify-content: center; } .faq-panel-overlay.open { display: flex; } .faq-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; width: min(520px, 92vw); box-shadow: var(--shadow-lg); } .faq-panel h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: normal; color: var(--text); margin-bottom: 16px; } .faq-panel-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; } .faq-panel-status { font-size: .78rem; color: var(--text-3); } @media (max-width: 600px) { .msg-wrap { padding: 24px 16px 60px; } } /* ── review_prompts.html ──────────────────────────────────────────────────── */ .pr-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } .pr-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; } .pr-header { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; transition: background var(--transition); } .pr-header:hover { background: var(--surface-3); } .pr-header.open { border-bottom: 1px solid var(--border-2); } .pr-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .pr-chevron { font-size: .7rem; color: var(--text-3); flex-shrink: 0; transition: transform .2s; } .pr-chevron.open { transform: rotate(180deg); } .pr-key { font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--gold); letter-spacing: .04em; white-space: nowrap; } .pr-desc { font-size: .78rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-meta { font-size: .72rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .pr-body { display: none; padding: 16px 20px; } .pr-body.open { display: block; } .pr-textarea { font-family: monospace; font-size: .78rem; line-height: 1.6; color: var(--text-2); min-height: 200px; resize: vertical; } .pr-actions { padding: 10px 20px; border-top: 1px solid var(--border-2); display: flex; align-items: center; gap: 8px; } .pr-status { font-size: .72rem; color: var(--text-3); } @media (max-width: 640px) { .pr-wrap { padding: 20px 16px 60px; } .pr-desc { display: none; } } /* ── share.html ───────────────────────────────────────────────────────────── */ .qs-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 28px; } .qs-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .qi-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); } .qi-card:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); } .qi-inner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; } .qi-thumb { width: 72px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--surface-3); } .qi-thumb-placeholder { width: 72px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 1.2rem; } .qi-body { flex: 1; min-width: 0; } .qi-card > .qi-body { padding: 12px 16px 4px; } .qi-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .qi-title { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 2px; } .qi-desc { font-size: .75rem; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .qi-actions { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--border-2); flex-wrap: wrap; } /* Description-only card on /create. Two regions: - .qi-card__link: clickable body covering everything except the trailing actions cluster. Title clamps to one line, date sits on a second line beneath it, so every card has the same height regardless of title length. - .qi-card__actions: trailing button cluster (currently just Delete, styled as a standard ghost button to match the rest of the publisher's small buttons). Card uses flex so the body fills available width and the actions stay on the right edge. min-height keeps the row visually substantial without varying when titles wrap. */ .qi-card { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 18px; } .qi-card__link { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: inherit; text-decoration: none; } .qi-card__link:hover { color: inherit; } .qi-card__link .qi-title { display: block; -webkit-line-clamp: 1; line-clamp: 1; font-size: 1rem; } .qi-card__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .qi-meta-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-3); } /* Per-item processing tiles on /queue/. Compact grid: each tile is a single label, no description, sized like a chunky button. Auto-fit wraps as many across as the container holds. Disabled tiles are dimmed and non-interactive. */ .qi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 16px; } .qi-tile { display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none; text-align: center; cursor: pointer; font: inherit; font-family: var(--font-serif); font-size: .92rem; line-height: 1.3; min-height: 44px; transition: box-shadow var(--transition), border-color var(--transition); } .qi-tile:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); color: var(--text); } .qi-tile--disabled { opacity: .45; cursor: not-allowed; } .qi-tile--disabled:hover { box-shadow: none; border-color: var(--border); } /* Share-as-page per-channel rows. Each row pairs a small share-card thumbnail in the channel's preferred shape (left) with the editable caption + actions (right). Sizes are fixed so the eye scans the same column regardless of platform. */ /* Share channels row: the list of platform checkboxes inside the share pub-card. Spacing pushes each checkbox apart so the eye tracks them as separate options, and the box is overridden to a neutral pale square with a grey tick (no gold accent), matching the rest of the house monochrome. */ /* Source context block under the Your thought textarea on the share page. Carries the scraped link description, the document filename + extract, or the upload filename through from the queue card so Helen does not lose what she was looking at. Read-only and visually quieter than the textarea above so the editable field still leads. */ .sh-source { margin-top: 8px; padding: 8px 0 0 12px; border-left: 2px solid var(--border-2); font-size: .85rem; color: var(--text-3); } .sh-source__title { font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .sh-source__body { line-height: 1.55; white-space: pre-wrap; } .sh-channels { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; } .sh-channel { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-2); cursor: pointer; user-select: none; } .sh-channel input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--border-3); border-radius: 3px; background: var(--surface-2); cursor: pointer; position: relative; flex-shrink: 0; transition: border-color var(--transition); margin: 0; } .sh-channel input[type="checkbox"]:hover { border-color: var(--text-3); } .sh-channel input[type="checkbox"]:checked { border-color: var(--text-3); background: var(--surface-2); } .sh-channel input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--text-2); border-width: 0 2px 2px 0; transform: rotate(45deg); } .sh-platform { padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; } .sh-platform__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .sh-platform__row { display: flex; gap: 14px; align-items: flex-start; } .sh-platform__caption { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .sh-platform__card { flex: 0 0 auto; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-sm); } .sh-platform__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .sh-platform__card--landscape { width: 200px; aspect-ratio: 1.91 / 1; } .sh-platform__card--square { width: 140px; aspect-ratio: 1 / 1; } .sh-platform__card--portrait { width: 90px; aspect-ratio: 9 / 16; } .sh-platform__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @media (max-width: 640px) { .sh-platform__row { flex-direction: column; } .sh-platform__card--landscape, .sh-platform__card--square, .sh-platform__card--portrait { width: 100%; max-width: 320px; } } /* Site-content search bar on /create. Sits above the intake card; lets Helen find an existing FAQ, news article, or video truth and import it back into the queue. Results render in a flat list, each with a kind badge, the title, an excerpt, and an Add to queue action. */ .cs-box { margin-bottom: 18px; } .cs-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .cs-result { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow var(--transition), border-color var(--transition); } .cs-result:hover { box-shadow: var(--shadow-sm); border-color: var(--gold); } .cs-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cs-result__title { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.4; } .cs-result__excerpt { font-size: .8rem; color: var(--text-3); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cs-result__link { font-size: .75rem; color: var(--gold); text-decoration: none; align-self: flex-start; } .cs-result__link:hover { text-decoration: underline; } .cs-result__actions { flex: 0 0 auto; display: flex; align-items: center; } /* ── 404 page ────────────────────────────────────────────────────────────── */ .pub-404 { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; padding: 32px; } .pub-404__photo { flex: 0 0 320px; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; } .pub-404__body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; } .pub-404__title { margin-bottom: 0; } .pub-404__lede { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text-2); line-height: 1.4; margin: 0; } .pub-404__sub { font-size: .92rem; color: var(--text-3); line-height: 1.6; margin: 0; } .pub-404__actions { margin-top: 12px; } @media (max-width: 640px) { .pub-404 { padding: 20px; gap: 20px; } .pub-404__photo { flex-basis: 100%; } } /* Your own commentary sits above the OG preview inside the same card so it is never hidden. Subtle gold-tint background and left border mark it as your words as opposed to the scraped article preview below. */ .qi-note { background: var(--gold-tint, rgba(192,128,0,.06)); border-left: 3px solid var(--gold); padding: 8px 12px; margin: 4px 0 8px; color: var(--text); font-size: .86rem; line-height: 1.5; white-space: pre-wrap; border-radius: var(--radius-sm); } /* Inline editor that drops down below the actions row when Expand & edit is clicked. Uses the same field styles as elsewhere in the publisher so it matches without surprise. */ .qi-edit { padding: 14px 16px 16px; border-top: 1px solid var(--border-2); background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; } .qi-edit[hidden] { display: none; } .qi-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .qi-edit-status { font-size: .78rem; color: var(--text-3); } /* Link preview inside Expand & edit. The OG image sits on the left as a wide thumbnail so Helen can see at a glance what she is about to share, with editable title and description fields alongside that map to meta.title and meta.description on save. On narrow screens the thumbnail wraps above the fields. */ .qi-edit-preview { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .qi-edit-preview__thumb { width: 220px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); flex-shrink: 0; display: block; } .qi-edit-image { max-width: 100%; max-height: 480px; border-radius: var(--radius-sm); background: var(--surface-3); display: block; } .qi-edit-preview__placeholder { width: 220px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--surface-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .78rem; } .qi-edit-preview__fields { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; } /* Input paired with a side action button (e.g. an Open link button next to a URL field). The input flexes to fill remaining space while the button stays fixed-width. Wraps to a new line on narrow viewports. */ .pub-input-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .pub-input-row > .pub-input { flex: 1; min-width: 200px; } /* Inline share-card panel inside the queue item expand area. Lets Helen produce a branded image card or a quote card from a queue item without leaving the page. The panel is text-led when no image is attached (quote mode) and image-led when one is (image mode); the mode is decided server-side on first open and reflected in the heading copy. */ .qi-sc { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .qi-sc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .qi-sc__title { font-family: var(--font-serif); font-size: .95rem; color: var(--text); } .qi-sc__hint { font-size: .85rem; color: var(--text-2); margin: 0; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--gold); } .qi-sc__mode-btn--active { background: var(--gold); border-color: var(--gold); color: var(--surface); } .qi-sc__mode-btn--active:hover { background: var(--gold); color: var(--surface); } .qi-sc__previews { display: flex; gap: 12px; flex-wrap: wrap; } .qi-sc__slot { display: flex; flex-direction: column; gap: 6px; } .qi-sc__slot-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .qi-sc__frame { background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .78rem; } .qi-sc__frame img { width: 100%; height: 100%; object-fit: contain; display: block; } .qi-sc__frame--landscape { width: 320px; aspect-ratio: 1200 / 630; } .qi-sc__frame--portrait { width: 180px; aspect-ratio: 1080 / 1920; } .qi-sc__frame--square { width: 240px; aspect-ratio: 1 / 1; } .qi-sc__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .qi-sc__controls[hidden] { display: none; } .qi-sc__filename { font-size: .8rem; color: var(--text-3); } .qi-sc__status { font-size: .78rem; color: var(--text-3); } .qi-sc__hero-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px; background: var(--surface-2); border-radius: var(--radius-sm); } .qi-sc__hero-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .sp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 200; } .sp-overlay.open { opacity: 1; pointer-events: all; } /* Centered modal pattern. Used by the supervision capture modal that appears on every draft page. Smaller than the side-sheet, with header / body / footer rows that reuse the publisher button styles. */ .pub-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 250; } .pub-modal-overlay.open { opacity: 1; pointer-events: all; } .pub-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); width: min(560px, 92vw); max-height: 88vh; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 251; } .pub-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .pub-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-2); } .pub-modal__title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text); } .pub-modal__body { padding: 16px 20px; overflow-y: auto; } .pub-modal__foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-2); } .sp-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.32,.72,0,1); z-index: 201; } .sp-sheet.open { transform: translateX(0); } @media (max-width: 540px) { .sp-sheet { width: 100%; border-left: none; } } .sp-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .sp-title { font-family: var(--font-serif); font-size: 1rem; font-weight: normal; color: var(--text); } .sp-close { background: none; border: none; font-size: 1.1rem; color: var(--text-3); cursor: pointer; padding: .3rem; } .sp-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .sp-loading { text-align: center; padding: 32px; color: var(--text-3); font-size: .88rem; } .sp-platform { margin-bottom: 16px; } .sp-plat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; } .sp-textarea { font-size: .82rem; line-height: 1.55; min-height: 72px; resize: vertical; } .sp-plat-actions { display: flex; gap: 6px; margin-top: 6px; } .sp-substack-image { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px; background: var(--surface-2); border-radius: var(--radius-sm); } .sp-substack-image img { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: var(--radius-sm); cursor: grab; } .sp-substack-image img:active { cursor: grabbing; } .sp-footer { padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .sp-note { font-size: .72rem; color: var(--text-3); line-height: 1.5; } /* ── video_review.html ────────────────────────────────────────────────────── */ .vr-wrap { max-width: 1320px; margin: 0 auto; padding: 32px 24px 80px; } .vr-toolbar { position: sticky; top: 50px; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 -24px 32px; } .vr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 32px; } @media (max-width: 900px) { .vr-cols { grid-template-columns: 1fr; } .vr-toolbar { padding: 10px 16px; margin: 0 -16px 24px; } .vr-wrap { padding: 24px 16px 80px; } } /* Source video preview in the left column. The video fills the column width and keeps a 16:9 aspect, with a small meta strip underneath for duration, size, and the filename label. */ .vr-source { display: flex; flex-direction: column; gap: 10px; } .vr-source__frame { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-md); overflow: hidden; position: relative; } .vr-source__video { width: 100%; height: 100%; display: block; background: #000; border: 0; } .vr-source__missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: .85rem; text-align: center; padding: 16px; background: var(--surface-3); } .vr-source__meta { font-size: .78rem; color: var(--text-3); display: flex; gap: 12px; flex-wrap: wrap; } .vr-source__caption { font-size: .72rem; color: var(--text-4); font-style: italic; } .vr-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .vr-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .vr-panel-title { font-family: var(--font-serif); font-size: .9rem; color: var(--text); flex: 1; } /* Editable transcript textarea. Width matches its column (so it matches the video preview on the left). Wraps long lines so punctuation-free ASR runs do not push a horizontal scroll. */ .vr-transcript-area { width: 100%; box-sizing: border-box; min-height: 480px; resize: vertical; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: .85rem; line-height: 1.55; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; border: none; background: var(--bg); color: var(--text-2); } .vr-transcript-area:focus { outline: none; } .vr-transcript { padding: 16px 18px; max-height: 540px; overflow-y: auto; font-size: .8rem; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; font-family: monospace; } .vr-transcript .ts { color: var(--text-3); font-size: .72rem; } .vr-transcript .helen { color: var(--text); } .vr-clips-head { font-family: var(--font-serif); font-size: 1rem; font-weight: normal; color: var(--text); margin-bottom: 16px; } .vr-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .vr-time-grid .pub-input { width: 100%; box-sizing: border-box; } .vr-clip-video { margin: 10px 0; } .vr-clip-video video { width: 100%; border-radius: 6px; background: var(--surface-3); display: block; } .vr-title-bar .pub-input { flex: 1; font-family: var(--font-serif); font-size: 1rem; min-width: 0; } /* Inline PDF preview iframe used inside queue cards. Sits flush with the form field column, matching the input-row chrome. */ .pub-pdf-preview { width: 100%; height: 320px; border: 1px solid var(--border-3); border-radius: var(--radius-sm); background: var(--surface-2); } /* Video review small bits — caption strip and transcript footer. */ .vr-source__footer { padding: 12px 16px 14px; } .vr-transcript-actions { padding: 10px 14px 14px; } .clip-truth { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); } .clip-truth__status { flex-basis: 100%; } /* Clips grid below the video preview and transcript. Two up on wide screens, one up on narrow, mirroring the shape of the source columns above so the page reads in consistent rhythm top to bottom. */ .vr-clips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .vr-clips-grid { grid-template-columns: 1fr; } } .clip-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 12px; transition: border-color var(--transition); } .clip-card--rejected { opacity: .5; } .clip-card--archived { opacity: .55; border-style: dashed; } .clip-card--approved, .clip-card--error, .clip-card--published { border-color: var(--gold-border); } .clip-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .clip-title { flex: 1; font-family: var(--font-serif); font-size: .95rem; color: var(--text); border: none; border-bottom: 1px solid transparent; background: transparent; padding: 2px 0 3px; outline: none; transition: border-color var(--transition); line-height: 1.3; } .clip-title:focus { border-bottom-color: var(--gold); } .clip-title:not(:focus) { cursor: default; } .clip-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .clip-time { font-size: .78rem; color: var(--text-3); font-family: monospace; } .clip-desc { font-size: .82rem; color: var(--text-2); line-height: 1.55; margin-bottom: 12px; } .clip-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .clip-url-bar { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: .75rem; color: var(--text-2); word-break: break-all; margin-bottom: 8px; } .vr-empty { padding: 32px 18px; text-align: center; color: var(--text-3); font-size: .85rem; } .vr-route-strip { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vr-route-label { font-size: .8rem; color: var(--text-3); flex: 1; } /* ── kb_ingest.html ───────────────────────────────────────────────────────── */ .ki-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } @media(max-width:640px){ .ki-wrap { padding: 24px 16px 80px; } } .ki-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 28px; } .ki-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; } .ki-stat__tier { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 4px; } .ki-stat__count { font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1; } .ki-stat__label { font-size: .68rem; color: var(--text-4); margin-top: 2px; } .ki-stat--total { border-color: var(--gold); } .ki-stat--total .ki-stat__count { color: var(--gold); } .ki-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 28px; } .ki-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media(max-width:640px){ .ki-row { grid-template-columns: 1fr; } } .tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; } .tier-card { border: 1.5px solid var(--border-3); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; transition: border-color var(--transition), background var(--transition); } .tier-card:hover, .tier-card.selected { border-color: var(--gold); background: var(--gold-tint); } .tier-card input[type=radio] { display: none; } .tier-name { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 3px; } .tier-desc { font-size: .72rem; color: var(--text-3); line-height: 1.4; } .source-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--border-3); margin-bottom: 16px; } .source-tab { background: none; border: none; padding: .5rem 1.1rem .5rem 0; font-family: var(--font-serif); font-size: .88rem; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: color var(--transition), border-color var(--transition); } .source-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .source-panel { display: none; } .source-panel.active { display: block; } .ki-status { font-size: .82rem; color: var(--text-3); margin-top: 10px; min-height: 20px; } .ki-result { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-top: 12px; display: none; } .ki-error { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-top: 12px; display: none; } .batch-drop { border: 2px dashed var(--border-3); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: var(--bg); } .batch-drop:hover, .batch-drop.drag-over { border-color: var(--gold); background: var(--gold-tint); } .batch-drop p { margin: 0; color: var(--text-3); font-size: .88rem; } .batch-drop strong { color: var(--gold); } .batch-drop input { display: none; } .batch-queue { margin-top: 16px; display: none; } .batch-queue.has-items { display: block; } .bq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .bq-header h3 { font-size: .88rem; font-weight: 600; color: var(--text); margin: 0; } .bq-item { border: 1px solid var(--border-2); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 8px; background: var(--bg); transition: border-color .2s; } .bq-item.done, .bq-item.error, .bq-item.ingesting { border-color: var(--gold-border); background: var(--surface-2); } .bq-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bq-name { font-size: .82rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bq-size { font-size: .72rem; color: var(--text-4); white-space: nowrap; flex-shrink: 0; } .bq-remove { background: none; border: none; cursor: pointer; color: var(--text-4); font-size: .9rem; padding: 0; flex-shrink: 0; line-height: 1; } .bq-remove:hover { color: var(--text); } .bq-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .bq-tier-sel { font-size: .78rem; padding: .25rem .5rem; border: 1px solid var(--border-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; } .bq-tier-sel:focus { outline: none; border-color: var(--gold); } .bq-title-inp { flex: 1; min-width: 120px; font-size: .78rem; padding: .25rem .5rem; border: 1px solid var(--border-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); } .bq-title-inp:focus { outline: none; border-color: var(--gold); } .bq-transcript { display: flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--text-3); cursor: pointer; white-space: nowrap; } .bq-transcript input { width: 12px; height: 12px; } .bq-status { font-size: .75rem; margin-top: 6px; color: var(--text-3); min-height: 16px; } .bq-item.done .bq-status, .bq-item.error .bq-status { color: var(--text-2); } .batch-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .batch-progress { font-size: .82rem; color: var(--text-3); } .log-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-2); font-size: .82rem; } .log-row:last-child { border-bottom: none; } .log-tier { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; background: var(--surface-3); border-radius: 4px; padding: .1rem .4rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .log-title { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-chunks { color: var(--text-3); white-space: nowrap; flex-shrink: 0; } .log-date { font-size: .72rem; color: var(--text-4); white-space: nowrap; flex-shrink: 0; } /* ── Additional shared utilities ──────────────────────────────────────────── */ .pub-section-head { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; font-weight: normal; color: var(--text); margin-bottom: 16px; } .pub-section-divider { margin-top: 12px; border-top: 1px solid var(--border-2); padding-top: 10px; } .pub-card--flush { padding: 0; overflow: hidden; } .pub-card-link { display: block; text-decoration: none; margin-bottom: 8px; } .pub-card-link:hover { text-decoration: none; } .pub-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; flex-wrap: wrap; } .pub-tier-count-meta { opacity: .6; margin-left: 4px; } .pub-note--warning { font-size: .78rem; color: var(--text-2); margin-top: 10px; } .pub-note--error { font-size: .78rem; color: var(--text-2); margin-top: 10px; } .pub-input--otp { letter-spacing: .3em; font-size: 1.3rem; text-align: center; } .pub-hint { font-size: .82rem; color: var(--text-3); line-height: 1.5; } .pub-footer-hint { margin-top: 16px; font-size: .78rem; color: var(--text-3); } .pub-wrap--flash { margin-top: 16px; } /* Chip/filter row variants */ .pub-chip-row--mb { margin-bottom: 20px; } .pub-chip-row--mb-sm { margin-bottom: 12px; } .pub-chip-row--mb-lg { margin-bottom: 24px; } /* Inline flex layout helpers */ .pub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pub-row--between { justify-content: space-between; } .pub-row--end { justify-content: flex-end; } .pub-row--mb { margin-bottom: 14px; } .pub-row--mb-sm { margin-bottom: 8px; } .pub-row--mb-lg { margin-bottom: 20px; } .pub-row--gap-sm { gap: 4px; } .pub-row--gap-lg { gap: 16px; } .pub-row--top { align-items: flex-start; } .pub-push-end { margin-left: auto; } /* Vertical stack of children with even spacing — for forms inside cards and any list of equally-spaced rows. */ .pub-stack { display: flex; flex-direction: column; gap: 12px; } .pub-stack--sm { gap: 6px; } .pub-stack--lg { gap: 20px; } /* Edit-page field stack — a vertical run of pale per-field cards that matches the standard editor layout (news, faq, insight, clip, authority page). Each field is its own pub-card; this wrapper just spaces them evenly. The action bar (_edit_actions.html) sits as the final child. */ .pub-edit-stack { display: flex; flex-direction: column; gap: 16px; } .pub-edit-stack > .pub-card { margin-bottom: 0; } .pub-edit-stack > .pub-card > .pub-card-label { display: block; margin-bottom: 8px; } .pub-edit-stack .pub-edit-actions { padding: 12px 16px; } .pub-edit-stack .pub-btn-row--actions { gap: 8px; } /* Page wrap width variants are defined in the Layout section above — keep them there to avoid duplicate selectors. */ /* Card spacing modifiers — padding and margin variants for the standard pub-card so templates can drop inline style="margin-bottom:..." overrides. */ .pub-card--mb { margin-bottom: 16px; } .pub-card--mb-sm { margin-bottom: 8px; } .pub-card--mb-lg { margin-bottom: 24px; } .pub-card--p-sm { padding: 12px 14px; } .pub-card--centre { padding: 16px; text-align: center; } /* Card-internal heading and body, used for the section blocks inside refinement-session and supervision pages. Keeps the type rhythm consistent with the page-level pub-page__title without repeating inline font-size declarations. */ .pub-card__heading { margin: 0 0 6px 0; font-size: 1rem; font-family: var(--font-serif); font-weight: normal; color: var(--text); } .pub-card__sub { font-size: .8rem; color: var(--text-3); margin: 0 0 8px 0; } .pub-card__body { white-space: pre-wrap; line-height: 1.5; font-size: .9rem; color: var(--text-2); margin: 0; } /* Standard table styling. Wrap the table in a
so the card surface frames the table and the wrap allows horizontal scrolling on narrow viewports. */ .pub-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .pub-table thead tr { text-align: left; border-bottom: 1px solid var(--border); background: var(--surface-3); } .pub-table th { padding: 8px 10px; font-weight: 600; } .pub-table td { padding: 8px 10px; vertical-align: top; } .pub-table tbody tr { border-bottom: 1px solid var(--border-2); } .pub-table tbody tr:last-child { border-bottom: none; } .pub-table__num { text-align: right; } .pub-table__nowrap { white-space: nowrap; } .pub-table-wrap { overflow-x: auto; } /* Pre-formatted code/diff block. Used for prompt diffs, prompt text, voice-doc proposals, and other content that needs monospace display on a pale surface. */ .pub-pre { background: var(--surface-3); padding: 10px 12px; border-radius: 6px; font-size: .8rem; overflow-x: auto; line-height: 1.45; margin: 8px 0 0 0; white-space: pre-wrap; } .pub-pre--diff { white-space: pre; } /* Pre-wrap text helpers for chat transcripts and message bodies. */ .pub-text-pre { white-space: pre-wrap; line-height: 1.45; } .pub-text-meta { font-size: .78rem; color: var(--text-3); } .pub-text-meta--sm { font-size: .72rem; } .pub-text-muted { color: var(--text-3); font-style: italic; } /* Quoted source text inside a supervision note or chat message. */ .pub-quote-block { font-size: .78rem; color: var(--text-2); white-space: pre-wrap; border-left: 2px solid var(--border-3); padding-left: 10px; margin-top: 6px; } .pub-quote-summary { font-size: .72rem; color: var(--text-3); cursor: pointer; } /* Field label inside a card (form-shaped panels). Bigger and heavier than pub-label, since these labels lead a long-form question. */ .pub-card-label { font-weight: 600; font-size: .9rem; color: var(--text); } .pub-card-label__hint { display: block; font-weight: normal; font-size: .78rem; color: var(--text-3); margin: 4px 0 6px 0; } /* ── Conversation turn (sammy + persona pages) ──────────────────────────── * * One card per turn / message, with internal divider rows for the speaker * blocks, action bar and inline panels. Every internal block uses the * same horizontal padding so the divider lines run end-to-end. */ .pub-turn { padding: 0; overflow: hidden; margin-bottom: 12px; } .pub-turn__head { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: .8rem; } .pub-turn__head-meta { color: var(--text-3); } .pub-turn__speaker { padding: 12px 14px; } .pub-turn__speaker + .pub-turn__speaker { border-top: 1px solid var(--border); } .pub-turn__speaker-label { font-size: .8rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; } .pub-turn__divider { border-top: 1px solid var(--border); padding: 8px 14px; } .pub-turn__chunks { padding: 8px 14px; font-size: .82rem; } .pub-turn__chunk { padding: 6px 0; border-bottom: 1px dashed var(--border); } .pub-turn__chunk:last-child { border-bottom: none; } .pub-turn__notes { border-top: 1px solid var(--border); padding: 8px 14px; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 6px; } .pub-turn__action-bar { border-top: 1px solid var(--border); padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pub-turn__panel { border-top: 1px solid var(--border); padding: 12px 14px; } .pub-turn__panel[hidden] { display: none; } .pub-turn__rating { padding: 0 14px 8px 14px; font-size: .76rem; color: var(--text-3); } /* ── Review home cards ────────────────────────────────────────────────────── */ .pub-review-card__icon { font-size: 1.5rem; margin-bottom: 10px; } .pub-review-card__title { font-family: var(--font-serif); font-size: .95rem; font-weight: normal; color: var(--text); margin-bottom: 4px; } .pub-review-card__desc { font-size: .78rem; color: var(--text-3); line-height: 1.5; } .pub-review-card__badge { position: absolute; top: 10px; right: 10px; margin-top: 0; } .pub-card--highlight { border-color: var(--gold-border); background: var(--gold-tint); } /* ── List card components (FAQs, news, policy reviews) ───────────────────── */ .pub-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pub-card-body { flex: 1; min-width: 0; } .pub-card-ellipsis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pub-card-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .pub-card-actions { display: flex; gap: 6px; flex-shrink: 0; } .pub-card-question { font-family: var(--font-serif); font-size: .92rem; color: var(--text); margin: 0; } .pub-card-headline { font-family: var(--font-serif); font-size: .95rem; color: var(--text); margin-bottom: 4px; } .pub-card-summary { font-size: .78rem; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .pub-date { font-size: .68rem; color: var(--text-3); } .pub-date--sm { font-size: .72rem; color: var(--text-3); } /* ── Section heading rows ─────────────────────────────────────────────────── */ .pub-section-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pub-section-head--sm { font-family: var(--font-serif); font-size: .88rem; font-weight: normal; color: var(--text-2); margin: 0; text-transform: uppercase; letter-spacing: .06em; } .pub-section-head--lg { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.3; font-weight: normal; color: var(--text); margin: 0; } /* ── Info/warning bars ────────────────────────────────────────────────────── */ .pub-amber-bar { background: var(--gold-tint); border: 1px solid var(--gold-border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 24px; font-size: .85rem; color: var(--gold); } .pub-info-bar--gold { background: var(--gold-tint); border: 1px solid var(--gold-border); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pub-info-bar--red { background: var(--red-tint); border: 1px solid var(--red); color: var(--red); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pub-info-bar__text { font-size: .78rem; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Label with checkbox ──────────────────────────────────────────────────── */ .pub-label-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .82rem; color: var(--text-2); } .pub-label-row input[type=checkbox] { width: 14px; height: 14px; } /* ── Document edit ────────────────────────────────────────────────────────── */ .de-field-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text); } .de-field-url-row { display: flex; gap: 6px; align-items: center; } .de-field-url-row .pub-input { flex: 1; } .de-created-at { font-size: .82rem; color: var(--text-3); padding-top: 8px; } .de-label__hint { font-weight: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--text-3); } /* ── Video review ─────────────────────────────────────────────────────────── */ .vr-title-bar { font-size: .82rem; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vr-duration { font-size: .72rem; color: var(--text-3); } .vr-centre-card { text-align: center; padding: 24px; color: var(--text-3); font-size: .85rem; } .vr-amber-text { font-size: .78rem; color: var(--text-2); } .vr-green-text { font-size: .78rem; color: var(--text-2); } .vr-green-link { color: var(--gold); } .vr-helen-label { font-size: .72rem; color: var(--text-3); } /* ── FAQ dedup page ───────────────────────────────────────────────────────── */ .pub-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .pub-stat-row .pub-stat { padding: 14px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 120px; font-size: inherit; color: inherit; } .pub-stat__num { font-family: var(--font-serif); font-size: 1.8rem; color: var(--gold); font-weight: 400; line-height: 1; } .pub-stat__lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 4px; } .pub-tab-panel { display: none; margin-top: 10px; } .pub-tab-panel.active { display: block; } .pub-progress { width: 100%; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-top: 8px; } .pub-progress__bar { height: 100%; background: var(--gold); transition: width .4s ease; } .pub-stage-status { margin-top: 12px; min-height: 0; } .pub-cluster-card, .pub-gap-card { background: var(--bg); } .pub-cluster-card details { margin-top: 6px; } .pub-cluster-card pre { background: var(--surface-3); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; overflow-x: auto; max-height: 220px; } .pub-card + .pub-card { margin-top: 14px; } /* ── Home hero cards (four big cards on the root home page) ──────────────── */ .pub-home-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 24px; } .pub-home-hero-card { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; min-height: 200px; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .pub-home-hero-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-border); transform: translateY(-2px); text-decoration: none; } .pub-home-hero-card__icon { font-size: 2rem; line-height: 1; } .pub-home-hero-card__title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; color: var(--text); margin: 0; } .pub-home-hero-card__desc { font-size: .9rem; color: var(--text-2); line-height: 1.5; margin: 0; } /* ── Lucide icons ─────────────────────────────────────────────────────────── */ /* Icons inherit currentColor so they follow the enclosing element's colour. Set the size via the size prop on the macro, not via CSS, so each call site controls its own dimensions. */ /* Pub icon geometry. Stroke and fill rules live here rather than inside icons.svg because mobile Safari does not reliably apply an external SVG's internal