/* ========================================================================== Host An App — Design System (hand-written, zero dependencies, no Tailwind) -------------------------------------------------------------------------- Single source of truth for every page: landing, docs, 404, login, and the server-rendered document shell (internal/render/layout.html) loaded by Markdown and Mermaid deployments. Self-hosted fonts live under /assets/fonts/ so the strict Content-Security-Policy on / routes cannot block them. Two themes live in this file: • DARK (default) — legacy: content deployed before the paper retheme still references these classes until it expires. • PAPER (body.paper) — marketing, service, and rendered pages (landing, docs, login, 404, Markdown + Mermaid deployments). Light "paper" aesthetic. Adding class="paper" to flips the shared design tokens, so most rules restyle automatically. ========================================================================== */ /* ----- Self-hosted fonts (latin subset) ----- */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-300.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-400.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-500.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-600.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-700.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2"); } /* ----- Design tokens (dark theme — default) ----- */ :root { --bg-base: #030405; --bg-surface: #0A0B0E; --bg-surface-hover: #111318; --bg-deep: #050608; --border: #1E2128; --border-active: #323642; --text-bright: #F3F4F6; --text: #E5E7EB; --text-muted: #A8B0BC; --text-muted-2: #8A919E; --accent: #FF4F19; --accent-hover: #FF6B3D; --success: #00E676; --warning: #F5A623; --error: #FF3366; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --font-serif: "Instrument Serif", Georgia, serif; --radius: 0.75rem; --radius-sm: 0.375rem; --header-h: 3.5rem; } /* ----- Reset / base ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-base); color: var(--text-bright); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: radial-gradient(circle at 50% 0%, rgba(255, 79, 25, 0.05) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(0, 230, 118, 0.02) 0%, transparent 50%); background-attachment: fixed; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: rgba(255, 79, 25, 0.3); color: var(--text-bright); } [id] { scroll-margin-top: 5rem; } /* ----- Scrollbar ----- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-active); } /* ----- Screen-reader only ----- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hide-sm { display: inline; } @media (min-width: 640px) { .hide-sm { display: none; } } /* ----- Layout primitives ----- */ .page-main { flex: 1 0 auto; } .container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container { padding-inline: 1.5rem; } } /* ========================================================================== Brand logo (shared by header + footer) ========================================================================== */ .brand-logo { display: inline-flex; align-items: center; gap: 0.75rem; } .brand-logo__mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; transition: transform 0.3s ease; } .brand-logo:hover .brand-logo__mark { transform: scale(1.05); } .brand-logo:hover .brand-logo__mark svg { filter: drop-shadow(0 0 8px rgba(255, 79, 25, 0.5)); } .brand-logo__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-bright); white-space: nowrap; transition: opacity 0.3s ease; } .brand-logo:hover .brand-logo__name { opacity: 1; } .brand-logo__name em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--text-muted); } /* ========================================================================== Site header (dark chrome — deployed pages, login, 404) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: rgba(10, 11, 14, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .site-header__inner { max-width: 72rem; margin-inline: auto; height: var(--header-h); padding-inline: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 640px) { .site-header__inner { padding-inline: 1.5rem; } } .site-header__inner--wide { max-width: 1400px; } .site-header__left { display: flex; align-items: center; gap: 1.5rem; } .site-header__docslink { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding: 0.375rem 0.75rem; border-radius: 0.375rem; transition: color 0.15s ease, background 0.15s ease; } .site-header__docslink:hover { color: var(--text-bright); background: rgba(255, 255, 255, 0.03); } @media (min-width: 640px) { .site-header__docslink { display: inline-flex; margin-left: 1rem; } } /* Header nav (docs variant) */ .site-nav { display: flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: 12px; } .site-nav__item { padding: 0.375rem 0.75rem; border-radius: 0.375rem; color: var(--text-muted); transition: color 0.15s ease, background 0.15s ease; } .site-nav__item:hover { color: var(--text-bright); background: rgba(255, 255, 255, 0.03); } .site-nav__item.is-active { color: var(--accent); background: rgba(255, 79, 25, 0.08); } .site-header__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .site-header__meta .version { display: none; opacity: 0.7; font-size: 10px; } @media (min-width: 640px) { .site-header__meta .version { display: inline; } } /* Health indicator (dark header) */ .health-indicator { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .health-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--text-muted); transition: background 0.5s ease; } .health-dot.is-ok { background: var(--success); } .health-dot.is-ok::before { content: ""; position: absolute; inset: -4px; border-radius: 9999px; background: var(--success); animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } .health-dot.is-error { background: var(--error); } .health-label { font-size: 10px; transition: color 0.5s ease; } .health-label.is-ok { color: rgba(0, 230, 118, 0.7); } .health-label.is-error { color: rgba(255, 51, 102, 0.7); } /* ========================================================================== Site footer (dark chrome) ========================================================================== */ .site-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 1.5rem 1rem; background: var(--bg-base); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } @media (min-width: 640px) { .site-footer { padding-inline: 1.5rem; } } .site-footer--bottom { margin-top: auto; } .site-footer__inner { max-width: 72rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 640px) { .site-footer__inner { flex-direction: row; } } .footer-brand { display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s ease; } .footer-brand:hover { opacity: 0.8; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { transition: color 0.15s ease; } .footer-links a:hover { color: var(--text-bright); } /* ========================================================================== Animations ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } .anim-fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .anim-delay-1 { animation-delay: 0.1s; } .anim-delay-2 { animation-delay: 0.2s; } .anim-delay-3 { animation-delay: 0.3s; } .anim-delay-4 { animation-delay: 0.4s; } /* ========================================================================== Reusable components (docs) ========================================================================== */ .doc-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .doc-card--accent { border-color: rgba(255, 81, 43, 0.35); background: var(--orange-soft); } .doc-card:hover { border-color: var(--border-active); background: var(--bg-surface-hover); transform: translateY(-2px); } .code-block { background: #181817; border: 1px solid #30302e; border-radius: 14px; overflow: hidden; position: relative; } .code-block pre { padding: 1.125rem 1.375rem; margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.8; color: #deddd8; } .code-block .code-header { padding: 0.625rem 1.375rem; border-bottom: 1px solid #30302e; display: flex; align-items: center; justify-content: space-between; background: #1d1d1b; } .code-block .code-header > span { font-family: var(--font-mono); font-size: 0.6875rem; color: #777; } .code-block .code-header > span.badge { color: inherit; } .code-shimmer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 81, 43, 0.5) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s linear infinite; } code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.15em 0.4em; border-radius: 4px; color: var(--text-bright); } pre code { background: none; border: 0; padding: 0; font-size: inherit; border-radius: 0; } .hl-keyword { color: #FF79C6; } .hl-string { color: #F1FA8C; } .hl-comment { color: #6272A4; font-style: italic; } .hl-type { color: #8BE9FD; } .hl-number { color: #BD93F4; } .hl-property { color: #50FA7B; } .hl-literal { color: #BD93F4; } .hl-tag { color: #FF79C6; } .hl-attr { color: #50FA7B; } .hl-value { color: #F1FA8C; } .hl-method { color: #8BE9FD; } .hl-url { color: #FF6B3D; } .badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-weight: 500; } .badge-get { background: rgba(32, 165, 107, 0.12); color: var(--success); border: 1px solid rgba(32, 165, 107, 0.3); } .badge-post { background: rgba(255, 81, 43, 0.12); color: var(--accent); border: 1px solid rgba(255, 81, 43, 0.3); } .badge-required { background: rgba(255, 81, 43, 0.12); color: var(--accent); border: 1px solid rgba(255, 81, 43, 0.3); } .badge-optional { background: rgba(119, 116, 108, 0.12); color: var(--text-muted-2); border: 1px solid rgba(119, 116, 108, 0.3); } .badge-success { background: rgba(32, 165, 107, 0.12); color: var(--success); border: 1px solid rgba(32, 165, 107, 0.3); } .badge-error { background: rgba(212, 61, 31, 0.12); color: var(--error); border: 1px solid rgba(212, 61, 31, 0.3); } .copy-btn { font-family: var(--font-mono); font-size: 0.625rem; background: #282826; border: 1px solid #41413f; color: #fff; padding: 0.375rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; position: absolute; top: 0.55rem; right: 0.625rem; z-index: 2; } .copy-btn:hover { background: #343432; } .copy-btn:active { transform: scale(0.95); } .param-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .param-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .param-table th { text-align: left; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: 0.08em; } .param-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--border); color: var(--text-bright); vertical-align: top; } .param-table tr:last-child td { border-bottom: 0; } .param-table td.muted { color: var(--text-muted); font-size: 0.8125rem; } .param-table td.mono { font-family: var(--font-mono); color: var(--accent); font-size: 0.75rem; } /* ========================================================================== Docs page (paper theme — body.paper) ========================================================================== */ .integ-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .integ-grid { grid-template-columns: repeat(2, 1fr); } } .docs-layout { display: flex; flex: 1; flex-direction: column; min-height: 0; } @media (min-width: 1024px) { .docs-layout { flex-direction: row; } } .docs-sidebar { padding: 1.75rem 0.9rem; border-right: 1px solid var(--line); } @media (min-width: 1024px) { .docs-sidebar { position: fixed; top: 80px; left: 0; bottom: 0; width: 250px; overflow-y: auto; } } .docs-sidebar-inner { display: flex; flex-direction: column; gap: 1.25rem; } .docs-nav-toggle { display: none; } /* Mobile: the sidebar becomes a tappable, collapsible "On this page" menu. No more hidden horizontal scroll — one obvious control that expands the section list vertically. */ @media (max-width: 1023px) { .docs-sidebar { position: sticky; top: 80px; z-index: 40; padding: 0.6rem 1.25rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(244, 242, 236, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .docs-nav-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.25rem; margin: 0; background: none; border: 0; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); cursor: pointer; text-align: left; } .docs-nav-toggle__label { display: inline-flex; align-items: center; gap: 0.5rem; } .docs-nav-toggle__label::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--orange); } .docs-nav-toggle__icon { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; background: var(--orange-soft); color: var(--orange); font-size: 1.125rem; font-weight: 500; line-height: 1; transition: transform 0.18s ease; } .docs-nav-toggle[aria-expanded='true'] .docs-nav-toggle__icon { transform: rotate(45deg); } .docs-sidebar-inner { display: none; flex-direction: column; gap: 0.125rem; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid var(--line); } .docs-sidebar-inner.is-open { display: flex; } .sidebar-group { flex-direction: column; gap: 0.125rem; padding: 0.25rem 0; } .docs-sidebar .section-title { display: block; } .docs-sidebar .nav-link { white-space: normal; flex-shrink: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; } /* Long endpoint paths (e.g. webhook routes) must wrap, not overflow. */ .docs-sidebar .nav-link { overflow-wrap: anywhere; word-break: break-word; } .docs-sidebar .nav-link .badge { flex-shrink: 0; } } /* Small screens: let endpoint cards wrap so long paths fit the viewport. */ @media (max-width: 639px) { .endpoint-head { flex-wrap: wrap; row-gap: 0.25rem; } .endpoint-head .endpoint-path { overflow-wrap: anywhere; word-break: break-word; min-width: 0; flex: 1 1 100%; } .endpoint-head .endpoint-summary { max-width: 100%; text-align: left; margin-left: 0; flex-basis: 100%; } } } .sidebar-group { display: flex; flex-direction: column; gap: 0.125rem; } .section-title { font-size: 0.625rem; font-family: var(--font-mono); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem; padding: 0 0.75rem; } .nav-link { display: block; padding: 0.4rem 0.75rem; font-size: 0.8125rem; color: var(--muted); border-radius: 0.5rem; transition: color 0.15s ease, background 0.15s ease; font-family: var(--font-sans); } .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.65); } .nav-link.active { color: var(--orange); background: var(--orange-soft); font-weight: 600; } .docs-content { flex: 1; min-width: 0; } @media (min-width: 1024px) { .docs-content { margin-left: 250px; } } .docs-content__inner { max-width: 50rem; margin-inline: auto; padding: 2.75rem 1.5rem 5rem; } @media (min-width: 640px) { .docs-content__inner { padding: 3rem 2.5rem 5rem; } } .docs-content section { margin-bottom: 4rem; } .docs-content h1 { margin: 0 0 1.25rem; font-size: clamp(2.125rem, 5vw, 2.875rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.0; color: var(--ink); } .docs-content h1 em, .docs-content h2 em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; } .docs-content h2 { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); } .docs-content h3 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .docs-content h4 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); } .docs-content p { margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); line-height: 1.65; } .docs-content p strong { color: var(--ink); font-weight: 600; } .docs-content code { font-size: 0.8125rem; } .docs-content .lead { font-size: 1rem; max-width: 38rem; margin-bottom: 2rem; color: var(--muted); } .docs-content .code-block { margin-bottom: 1.5rem; } .docs-content .doc-card { margin-bottom: 0; } .docs-content ol { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.7; display: flex; flex-direction: column; gap: 0.5rem; } .docs-content ol li::marker { color: var(--orange); font-family: var(--font-mono); font-size: 0.75rem; } .docs-content .reserved-slugs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .docs-content .table-card { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); border-radius: 1rem; overflow-x: auto; margin: 0 -1.5rem 1.5rem; } @media (max-width: 639px) { .docs-content .table-card { margin-inline: -1rem; } } @media (min-width: 640px) { .docs-content .table-card { margin-inline: 0; } } .docs-content .table-card .param-table th, .docs-content .table-card .param-table td { padding-inline: 1rem; } .docs-content .stack { display: flex; flex-direction: column; gap: 0.75rem; } .docs-content .row { display: flex; align-items: center; gap: 0.75rem; } .docs-content .setup-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .docs-content .setup-title img { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; } .docs-content .setup-block { margin-bottom: 1.5rem; } /* ——— MCP setup tabs (docs) ——— */ .docs-mcp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .docs-mcp-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--muted); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; } .docs-mcp-tab:hover { border-color: var(--border-active); color: var(--ink); transform: translateY(-1px); } .docs-mcp-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; } .docs-mcp-tab img, .docs-mcp-tab svg, .docs-mcp-tab span.docs-mcp-icon { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; flex-shrink: 0; display: inline-grid; place-items: center; } .docs-mcp-tab svg { display: block; } /* white-logo pills need dark square so white SVG is always legible (inactive tab is light) */ .docs-mcp-icon-bg { width: 1.25rem; height: 1.25rem; border-radius: 0.3rem; background: #171715; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.06); } .docs-mcp-icon-bg svg, .docs-mcp-icon-bg img { width: 14px; height: 14px; object-fit: contain; display: block; } .docs-mcp-tab.active img { filter: none; } .docs-mcp-panel { display: none; animation: fadeUp .35s cubic-bezier(.16,1,.3,1); } .docs-mcp-panel.active { display: block; } .docs-mcp-panel .code-block { margin-bottom: 0; } /* ========================================================================== Deployed document styles (Markdown & Mermaid — dark) ========================================================================== */ /* Document body */ body.deploy-page { background-color: var(--bg-base); color: var(--text-bright); background-image: radial-gradient(circle at 50% 0%, rgba(255,79,25,0.05) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(0,230,118,0.02) 0%, transparent 50%); background-attachment: fixed; } /* --- Markdown content --- */ .md-content { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem 4rem; width: 100%; } @media (max-width: 768px) { .md-content { padding: 2rem 1rem 3rem; max-width: 100%; } } .md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6 { font-weight: 600; line-height: 1.25; color: var(--text-bright); } .md-content h1 { font-size: 1.6rem; margin-top: 0.5rem; margin-bottom: 1.5rem; } @media (max-width: 768px) { .md-content h1 { font-size: 1.35rem; } } .md-content h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } @media (max-width: 768px) { .md-content h2 { font-size: 1.1rem; } } .md-content h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.5rem; } .md-content h4 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .md-content h5 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-2); } .md-content h6 { font-size: 0.75rem; color: var(--text-muted-2); } .md-content p { margin-bottom: 1rem; color: var(--text); line-height: 1.7; } .md-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .md-content a:hover { color: var(--accent-hover); } .md-content strong { font-weight: 600; color: var(--text-bright); } .md-content em { font-style: italic; color: var(--text); } .md-content del { text-decoration: line-through; color: var(--text-muted); } .md-content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.15em 0.4em; border-radius: 4px; color: var(--text-bright); } .md-content pre { position: relative; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1.25rem; font-size: 0.85rem; line-height: 1.6; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .md-content pre { padding: 0.75rem 0.85rem; font-size: 0.78rem; } } .md-content pre code { background: none; padding: 0; border: none; border-radius: 0; font-size: inherit; color: inherit; line-height: inherit; } .md-content blockquote { margin: 1.5rem 0; padding: 0.75rem 1rem; border-left: 2px solid var(--border-active); color: var(--text-muted); background: rgba(255,255,255,0.015); border-radius: 0 4px 4px 0; } .md-content blockquote p { margin-bottom: 0.25rem; } .md-content blockquote p:last-child { margin-bottom: 0; } .md-content ul, .md-content ol { margin: 0.5rem 0 1rem 1.5rem; color: var(--text); } .md-content li { margin-bottom: 0.3rem; } .md-content li p { margin-bottom: 0.25rem; } .md-content hr { border: none; height: 1px; background: var(--border); margin: 2.5rem 0; } .md-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 1rem 0; } .md-content .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); } @media (max-width: 768px) { .md-content .table-wrapper { border-radius: 4px; } } .md-content table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 400px; } .md-content th, .md-content td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .md-content thead tr:last-child th { border-bottom: 1px solid var(--border-active); } .md-content th { font-weight: 600; color: var(--text-bright); background: var(--bg-deep); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .md-content tbody tr:last-child td { border-bottom: none; } .md-content td { color: var(--text); } .doc-header { margin-bottom: 1.5rem; } .doc-header h1 { margin-top: 0; color: var(--text-bright); font-size: 1.8rem; } /* Mermaid diagram tabs (shared by Markdown inline and standalone Mermaid pages) */ .md-content .mermaid-block, .mermaid-content .mermaid-block { border: 1px solid var(--border); border-radius: 6px; margin: 1.5rem 0; } .mermaid-content .mermaid-block { margin: 0 0 1.5rem; } .md-content .mermaid-tabs, .mermaid-content .mermaid-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-deep); } .md-content .mermaid-tab, .mermaid-content .mermaid-tab { padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-2); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-mono); transition: color 0.15s; outline: none; } .md-content .mermaid-tab:hover, .mermaid-content .mermaid-tab:hover { color: var(--text-bright); } .md-content .mermaid-tab.active, .mermaid-content .mermaid-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .md-content .mermaid-panel, .mermaid-content .mermaid-panel { background: var(--bg-surface); padding: 1.5rem; display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-content .mermaid-panel[data-panel="visual"], .mermaid-content .mermaid-panel[data-panel="visual"] { position: relative; overflow: hidden; display: block; padding: 0; background: #FFFFFF; height: 60vh; min-height: 280px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transition: position 0s, inset 0s; } .md-content .mermaid-panel[data-panel="visual"].panning, .mermaid-content .mermaid-panel[data-panel="visual"].panning { cursor: grabbing; } .md-content .mermaid-panel[data-panel="visual"] pre.mermaid, .mermaid-content .mermaid-panel[data-panel="visual"] pre.mermaid { margin: 0; padding: 0; background: none; border: none; display: block; } .md-content .mermaid-panel[data-panel="visual"] svg, .mermaid-content .mermaid-panel[data-panel="visual"] svg { display: block; position: absolute; top: 0; left: 0; max-width: none !important; transform-origin: 0 0; } .md-content .mermaid-panel pre.mermaid, .mermaid-content .mermaid-panel pre.mermaid { margin: 0; background: none; border: none; padding: 0; font-family: inherit; color: inherit; border-radius: 0; } .md-content .mermaid-panel pre.mermaid svg, .mermaid-content .mermaid-panel pre.mermaid svg { max-width: 100%; height: auto; } .md-content .mermaid-raw, .mermaid-content .mermaid-raw { position: relative; margin: 0; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; color: var(--text); white-space: pre; width: 100%; } .md-content .mermaid-raw code, .mermaid-content .mermaid-raw code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } @media (max-width: 768px) { .md-content .mermaid-block, .mermaid-content .mermaid-block { border-radius: 4px; } .md-content .mermaid-panel, .mermaid-content .mermaid-panel { padding: 1rem 0.5rem; } .md-content .mermaid-raw, .mermaid-content .mermaid-raw { padding: 0.75rem 0.85rem; font-size: 0.78rem; } .md-content .mermaid-tab, .mermaid-content .mermaid-tab { padding: 0.4rem 0.75rem; font-size: 0.625rem; } } /* --- Mermaid standalone page (container only — block rules shared above) --- */ .mermaid-content { max-width: 100%; margin: 0 auto; padding: 2rem 1rem 3rem; width: 100%; } @media (min-width: 768px) { .mermaid-content { max-width: 960px; padding: 3rem 1.5rem 4rem; } } .mermaid-content h1 { font-weight: 600; font-size: 1.6rem; line-height: 1.3; margin-bottom: 1.25rem; color: var(--text-bright); } @media (max-width: 768px) { .mermaid-content h1 { font-size: 1.3rem; } } /* Legacy standalone diagram styles (kept for previously deployed content) */ .diagram-container { position: relative; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1.25rem; overflow: hidden; display: block; height: 65vh; min-height: 300px; background: #FFFFFF; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } .diagram-container.panning { cursor: grabbing; } .diagram-container pre.mermaid { margin: 0; padding: 0; background: none; border: none; display: block; } .diagram-container svg { display: block; position: absolute; top: 0; left: 0; max-width: none !important; transform-origin: 0 0; } .diagram-zoom { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 5; display: flex; flex-direction: column; gap: 0.3rem; opacity: 0.85; transition: opacity 0.15s; } .diagram-container:hover .diagram-zoom { opacity: 1; } .diagram-zoom button { width: 34px; height: 34px; padding: 0; border: 1px solid #D1D5DB; background: #FFFFFF; color: #1F2937; border-radius: 6px; cursor: pointer; font-size: 1.15rem; line-height: 1; font-weight: 500; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .diagram-zoom button:hover { background: #F3F4F6; } .diagram-zoom button:active { background: #E5E7EB; } .diagram-hint { position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 5; font-size: 0.7rem; color: #6B7280; pointer-events: none; font-family: var(--font-mono); } /* Fullscreen diagram panel */ .mermaid-panel[data-panel="visual"].is-fullscreen, .diagram-container.is-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999; width: 100vw !important; height: 100dvh !important; border-radius: 0; margin: 0; background: #FFFFFF; } /* Let the mermaid block container overflow so the fixed panel breaks out */ .mermaid-block:has(.is-fullscreen) { overflow: visible; } .source-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-2); margin-bottom: 0.5rem; font-weight: 500; font-family: var(--font-mono); } .source-block { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.85rem; line-height: 1.6; font-family: var(--font-mono); color: var(--text); white-space: pre; } @media (max-width: 768px) { .source-block { padding: 0.75rem 0.85rem; font-size: 0.78rem; } } /* ========================================================================== PAPER THEME — landing + docs (body.paper) -------------------------------------------------------------------------- A tiny publishing machine for the internet. Light paper background, ink text, orange accents, serif italic flourishes. ========================================================================== */ body.paper { /* paper palette */ --paper: #f4f2ec; --paper-bright: #fbfaf7; --ink: #171715; --muted: #77746c; --line: rgba(23, 23, 21, .13); --orange: #ff512b; --orange-soft: rgba(255, 81, 43, .11); --green: #20a56b; --blue: #3f61ff; --sans: Inter, system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; --mono: "DM Mono", ui-monospace, monospace; /* flip the shared dark-theme tokens so shared rules restyle themselves */ --bg-base: #f4f2ec; --bg-surface: rgba(255, 255, 255, .55); --bg-surface-hover: #fbfaf7; --bg-deep: #181817; --border: rgba(23, 23, 21, .13); --border-active: rgba(23, 23, 21, .38); --text-bright: #171715; --text: #2a2a27; --text-muted: #77746c; --text-muted-2: #9b9890; --accent: #ff512b; --accent-hover: #e84420; --success: #20a56b; --warning: #b97a1f; --error: #d43d1f; --font-sans: var(--sans); --font-mono: var(--mono); --font-serif: var(--serif); --header-h: 80px; background: var(--paper); background-image: none; color: var(--ink); font-family: var(--sans); overflow-x: hidden; } body.paper button, body.paper input, body.paper textarea { font: inherit; } body.paper ::selection { background: var(--orange); color: white; } body.paper ::-webkit-scrollbar { width: 10px; } body.paper ::-webkit-scrollbar-thumb { background: rgba(23, 23, 21, .18); border-radius: 6px; border: 3px solid var(--paper); } body.paper ::-webkit-scrollbar-thumb:hover { background: rgba(23, 23, 21, .3); } /* subtle paper grain */ body.paper::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* inline code chips on paper (dark panels reset this below) */ body.paper code { background: #ece9e2; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); } body.paper .code-block code, body.paper .config-panel code, body.paper .md-content pre code, body.paper .mermaid-raw code, body.paper .source-block code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } /* dark panels keep their own dark tokens regardless of theme */ .config-panel, .machine, .code-block { --text-bright: #deddd8; --text: #deddd8; --text-muted: #9b9890; --text-muted-2: #777; --border: #30302e; --border-active: #41413f; --bg-surface: #232321; --bg-base: #181817; } /* ========================================================= PAPER HEADER (shared by landing + docs) ========================================================= */ .header { width: min(1220px, calc(100% - 40px)); height: 80px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 100; } .header--sticky { position: sticky; top: 0; /* Full-bleed bar: the background must span the whole viewport so wide content (e.g. CSV tables up to 1400px) never sticks out beside it. The inner content stays aligned with the 1220px centered column via symmetric padding. */ width: 100%; margin: 0; padding-inline: max(20px, calc((100% - 1220px) / 2)); background: rgba(244, 242, 236, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: 18px; font-weight: 750; letter-spacing: -.045em; } .brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 10px; transform: rotate(-5deg); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .brand:hover .brand-mark { transform: rotate(5deg) scale(1.08); } .header-right { display: flex; align-items: center; gap: 18px; } .system-status { font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 7px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .5); animation: statusPulse 2.5s infinite; } .status-dot.is-error { background: var(--error); animation: none; } @keyframes statusPulse { 70% { box-shadow: 0 0 0 8px rgba(32, 165, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 165, 107, 0); } } .header-link { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; } .header-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* ========================================================= PAPER HERO ========================================================= */ .hero { width: min(1220px, calc(100% - 40px)); min-height: 780px; margin: auto; padding: 100px 0 90px; position: relative; } .hero-copy { position: relative; z-index: 10; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10px; letter-spacing: .02em; animation: enter .8s both; } .spark { color: var(--orange); font-size: 14px; } .hero h1 { max-width: 1000px; margin: 28px 0 0; font-size: clamp(66px, 9vw, 128px); font-weight: 700; line-height: .88; letter-spacing: -.085em; animation: enter .9s .08s both; } .hero h1 .quiet { color: #9b9890; } .hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; } .hero h1 .orange { color: var(--orange); position: relative; } .hero-subtitle { max-width: 560px; margin: 35px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; animation: enter .9s .16s both; } .hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 12px; animation: enter .9s .24s both; } /* live ledger — real numbers from /api/v1/stats */ .hero-ledger { margin-top: 38px; display: flex; align-items: stretch; gap: 26px; animation: enter .9s .32s both; } .ledger-item { position: relative; display: flex; flex-direction: column; gap: 5px; } .ledger-num { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ledger-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .ledger-sep { width: 1px; background: var(--line); } .ledger-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .5); animation: statusPulse 2.5s infinite; } @keyframes enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* buttons */ .button { border: 0; cursor: pointer; padding: 15px 20px; border-radius: 13px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; } .button-primary { background: var(--ink); color: white; box-shadow: 0 12px 30px rgba(0, 0, 0, .13); } .button-secondary { background: rgba(255, 255, 255, .65); border: 1px solid var(--line); color: var(--ink); } .button:hover { transform: translateY(-3px); } /* ========================================================= HERO MACHINE / FLOATING INTERNET ========================================================= */ .hero-world { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .orbit { position: absolute; border: 1px dashed rgba(23, 23, 21, .12); border-radius: 50%; } .orbit-a { width: 620px; height: 620px; right: -120px; top: 40px; } .orbit-b { width: 410px; height: 410px; right: -10px; top: 145px; } .publish-core { position: absolute; right: 190px; top: 250px; width: 125px; height: 125px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: white; box-shadow: 0 0 0 16px rgba(255, 81, 43, .05), 0 0 0 32px rgba(255, 81, 43, .035); } .publish-core::before { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); animation: coreRotate 7s linear infinite; } .publish-core::after { content: "↗"; position: absolute; font-size: 25px; } @keyframes coreRotate { to { transform: rotate(360deg); } } .floating-object { position: absolute; padding: 14px 15px; background: rgba(255, 255, 255, .76); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(23, 23, 21, .1); border-radius: 14px; box-shadow: 0 20px 55px rgba(0, 0, 0, .07); pointer-events: auto; transition: transform .3s; } .floating-object:hover { transform: scale(1.04); } .floating-object small { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--muted); } .object-prompt { top: 90px; right: 10px; width: 210px; animation: drift 8s ease-in-out infinite; } .object-file { top: 460px; right: 340px; width: 150px; animation: drift 9s -3s ease-in-out infinite; } .object-file span { color: var(--orange); } .object-url { top: 490px; right: 10px; width: 230px; animation: drift 8s -5s ease-in-out infinite; } .object-url strong { display: block; color: var(--green); font-family: var(--mono); font-size: 10px; } .object-url code { font-family: var(--mono); font-size: 10px; color: var(--muted); background: none; border: 0; padding: 0; } @keyframes drift { 50% { transform: translateY(-18px) rotate(1deg); } } /* ========================================================= PUBLISH FLOW ========================================================= */ .flow-section { width: min(1220px, calc(100% - 40px)); margin: 20px auto 150px; } .flow { padding: 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 30px; } .flow-item { padding: 18px 0; } .flow-num { font-family: var(--mono); font-size: 10px; color: var(--orange); } .flow-title { margin-top: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.04em; } .flow-text { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; } .flow-arrow { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; animation: arrowMove 2.5s ease-in-out infinite; } @keyframes arrowMove { 50% { transform: translateX(6px); } } /* ========================================================= PAPER SECTIONS ========================================================= */ .section { width: min(1220px, calc(100% - 40px)); margin: 0 auto 150px; } .section-intro { margin-bottom: 40px; } .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); } .section h2 { margin: 14px 0 0; font-size: clamp(42px, 6vw, 76px); line-height: .95; letter-spacing: -.075em; } .section h2 em { font-family: var(--serif); font-weight: 400; } /* ========================================================= INTEGRATIONS ========================================================= */ .integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 1100px) { .integration-grid { grid-template-columns: repeat(3, 1fr); } } .integration-card { min-height: 235px; padding: 25px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 20px; text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; } .integration-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, .06); } .integration-card.active { border-color: var(--ink); background: var(--paper-bright); } .integration-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #171715; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.10); } .integration-icon img, .integration-icon svg { width: 26px; height: 26px; object-fit: contain; } .integration-icon svg { display: block; } .integration-card h3 { margin: 32px 0 7px; color: var(--ink); font-size: 18px; letter-spacing: -.04em; } .integration-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .integration-active-indicator { position: absolute; top: 20px; right: 20px; width: 8px; height: 8px; border-radius: 50%; background: transparent; } .integration-card.active .integration-active-indicator { background: var(--orange); } .config-panel { margin-top: 15px; min-height: 140px; padding: 25px 25px 62px; background: #181817; color: #deddd8; border-radius: 20px; position: relative; } .config-label { color: #6d6c68; font-family: var(--mono); font-size: 10px; } .config-panel pre { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.8; white-space: pre-wrap; transition: opacity .2s, transform .2s; } /* ---- COPY — command chip inside dark config panel ---- */ .copy-button { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; border: 1px solid #2d2d2b; background: #232321; color: #c8c5be; font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .42s cubic-bezier(.16,1,.3,1), background .22s ease, color .22s ease, border-color .22s ease, box-shadow .42s cubic-bezier(.16,1,.3,1); } .copy-button::before { content: ""; width: 13px; height: 13px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; transition: transform .42s cubic-bezier(.16,1,.3,1); } .copy-button:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-1.5px); box-shadow: 0 8px 22px rgba(255,81,43,.32); } .copy-button:hover::before { transform: translateY(-1px); } .copy-button:active { transform: scale(.97); transition-duration: .12s; } .copy-button.is-copied { background: #f4f2ec; border-color: #f4f2ec; color: #1a1a18; box-shadow: 0 4px 16px rgba(0,0,0,.14); } .copy-button.is-copied::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: copyCheckIn .36s cubic-bezier(.16,1,.3,1); } @keyframes copyCheckIn { 0% { transform: scale(.55) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } } .copy-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ========================================================= PLAYGROUND / THE PUBLISHING MACHINE ========================================================= */ .machine { background: #181817; color: white; border-radius: 26px; overflow: hidden; box-shadow: 0 35px 100px rgba(0, 0, 0, .18); } .machine-header { height: 70px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #30302e; } .machine-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; } .machine-led { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: statusPulse 2s infinite; } .machine-state { font-family: var(--mono); font-size: 10px; color: #777; } .machine-grid { display: grid; grid-template-columns: 1.5fr .75fr; } .editor { min-height: 540px; border-right: 1px solid #30302e; } .editor-top { min-height: 60px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #30302e; } .editor-file { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; } .editor-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 2px; flex-shrink: 0; } .editor-tools { display: flex; align-items: center; gap: 8px; } /* ---- TYPE SWITCHER — underline tabs, not pills ---- */ .editor-types { display: inline-flex; align-items: end; gap: 18px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .type-btn { position: relative; border: 0; cursor: pointer; padding: 10px 2px 12px; margin-bottom: -1px; border-radius: 0; background: transparent; color: #7a7872; font-family: var(--sans); font-size: 12.5px; font-weight: 550; letter-spacing: -.015em; line-height: 1; transition: color .22s ease, transform .22s cubic-bezier(.16,1,.3,1); } .type-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .34s cubic-bezier(.16,1,.3,1); border-radius: 2px 2px 0 0; } .type-btn:hover { color: #b8b5b0; background: transparent; } .type-btn:active { transform: scale(.96); } .type-btn.is-active { background: transparent; color: #f4f2ec; font-weight: 700; box-shadow: none; animation: none; } .type-btn.is-active::after { transform: scaleX(1); } .type-btn.is-active:hover { color: #fff; } /* ---- UPLOAD — dashed ghost that solidifies on hover ---- */ .upload-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; border: 1px dashed #2f2f2d; background: #1e1e1c; color: #9a9893; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 550; letter-spacing: -.01em; line-height: 1; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .42s cubic-bezier(.16,1,.3,1), box-shadow .22s ease; } .upload-button::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .85; transition: transform .42s cubic-bezier(.16,1,.3,1); } .upload-button:hover { color: #f4f2ec; border-style: solid; border-color: #3a3a38; background: #2a2a28; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14); } .upload-button:hover::before { transform: translateY(-1.5px); } .upload-button:active { transform: scale(.97); transition-duration: .12s; } .type-btn:focus-visible, .upload-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .editor textarea { width: 100%; height: 480px; padding: 25px; border: 0; outline: 0; resize: none; background: transparent; color: #deddd8; font-family: var(--mono); font-size: 13px; line-height: 1.75; } .editor textarea::placeholder { color: #555; } .deploy-side { padding: 24px; display: flex; flex-direction: column; } .deploy-card { padding: 24px; background: #232321; border: 1px solid #2d2d2b; border-radius: 17px; transition: background .5s; } .deploy-status-label { font-family: var(--mono); font-size: 10px; color: #777; } .deploy-orb { width: 56px; height: 56px; margin: 20px 0 16px; display: grid; place-items: center; background: #2b2b29; border-radius: 50%; font-size: 21px; transition: background .5s, color .5s, box-shadow .5s, transform .5s; } .deploy-card.live .deploy-orb { color: var(--green); background: rgba(32, 165, 107, .12); box-shadow: 0 0 35px rgba(32, 165, 107, .18); transform: scale(1.08); } .deploy-card h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; } .deploy-url { display: none; margin-top: 16px; padding: 10px; background: #1a1a19; border-radius: 8px; font-family: var(--mono); font-size: 10px; color: var(--green); word-break: break-all; } .deploy-card.live .deploy-url { display: block; } .deploy-url:hover { text-decoration: underline; text-underline-offset: 3px; } .deploy-open { display: none; margin-top: 12px; padding: 11px 14px; background: var(--orange); color: white; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; } .deploy-card.live .deploy-open { display: inline-block; width: 100%; text-align: center; } .deploy-open:hover { transform: translateY(-2px); background: #e84420; } .logs { margin-top: 18px; min-height: 130px; font-family: var(--mono); font-size: 10px; line-height: 1.9; color: #777; overflow: hidden; } .log-success { color: var(--green); } .log-error { color: #ff7a5c; } .publish-button { margin-top: auto; width: 100%; border: 0; border-radius: 13px; padding: 16px; background: var(--orange); color: white; font-weight: 750; font-size: 13px; cursor: pointer; transition: transform .2s, background .2s; } .publish-button:hover { transform: translateY(-3px); background: #e84420; } .publish-button:disabled { cursor: wait; opacity: .8; } /* ========================================================= STATS ========================================================= */ .stats { width: min(1220px, calc(100% - 40px)); margin: 0 auto 100px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat { padding: 26px 32px 30px; } .stat:not(:last-child) { border-right: 1px solid var(--line); } .stat-number { font-family: var(--font-serif); font-size: 34px; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.05; } .stat-label { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; } /* Tablet: 2×2 grid so nothing squishes or wraps awkwardly. */ @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat { padding: 22px 20px; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } /* Narrow phones: keep 2×2 but tighten spacing and scale type down. */ @media (max-width: 480px) { .stats { margin-bottom: 60px; } .stat { padding: 18px 14px; } .stat-number { font-size: 27px; } .stat-label { font-size: 11px; } } /* ========================================================= PAPER FOOTER — clean, two-zone layout Brand (+ tagline) on the left, grouped nav columns on the right. Legal and product links are vertical lists, not an inline dot-separated sentence, so the footer scans instead of shouting. Legacy .footer-left is kept for already-deployed pages (they expire within 7 days) — visually identical to .footer__brand. ========================================================= */ .footer { width: min(1220px, calc(100% - 40px)); margin: auto; padding: 40px 0 44px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--muted); } .footer a { color: var(--muted); text-decoration: none; text-underline-offset: 3px; transition: color .15s ease; } .footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,21,.22); } .footer-heart { color: var(--orange); } /* legacy alias — deployed pages still reference this until expiry */ .footer-left, .footer__brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .footer-made { font-size: 10px; } .footer__title { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); } .footer__tagline { margin-top: 2px; font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 28ch; } /* Running Host An App release tag (vX.Y.Z), stamped into the landing footer at image build time. Doubles as a quick visual cache-freshness check: the tag shown must match the latest entry on /changelog. */ .footer__version { margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0; } .footer__version a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(23,23,21,.18); text-underline-offset: 3px; font-variant-numeric: tabular-nums; } .footer__version a:hover { color: var(--ink); } .footer__publisher { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); } .footer__publisher a { text-decoration: underline; text-decoration-color: rgba(23,23,21,.18); } .footer__inner { display: flex; justify-content: space-between; gap: 48px; align-items: flex-start; } .footer__nav { display: flex; gap: 40px; flex-shrink: 0; } .footer__col { display: flex; flex-direction: column; gap: 0; min-width: 120px; } .footer__col-title { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .footer__links { display: flex; flex-direction: column; gap: 7px; } .footer__links a { font-size: 11px; color: var(--muted); } .footer__links a:hover { color: var(--ink); } /* legacy horizontal legal row — still supported, now unused */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); } .footer__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer__legal a:hover { color: var(--ink); } .footer__legal-dot { opacity: .35; } @media (max-width: 760px) { .footer__inner { flex-direction: column; gap: 28px; } .footer__nav { width: 100%; gap: 28px; } .footer__col { min-width: 0; flex: 1; } } @media (max-width: 600px) { .footer { width: calc(100% - 28px); padding-top: 32px; } } /* ========================================================= DEPLOYED DOCUMENTS ON PAPER (Markdown + Mermaid) Server-rendered deployments share the paper theme. Code panels stay dark (like the docs-page code blocks), tables and quotes go light, headings pick up paper typography. ========================================================= */ /* dark panels keep their own dark tokens regardless of theme */ body.paper .md-content pre, body.paper .md-content .mermaid-tabs, body.paper .mermaid-content .mermaid-tabs, body.paper .mermaid-panel[data-panel="raw"], body.paper .mermaid-raw, body.paper .source-block { color: #deddd8; --text: #deddd8; --text-muted: #9b9890; --text-muted-2: #777; --border: #30302e; --border-active: #41413f; --bg-surface: #232321; --bg-deep: #181817; } /* headings — paper typography (Inter, tight tracking) */ body.paper .doc-header h1 { font-size: clamp(2.125rem, 5vw, 2.875rem); letter-spacing: -.055em; } body.paper .md-content h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; } body.paper .md-content h2 { font-size: 1.45rem; letter-spacing: -.035em; } body.paper .md-content h3 { letter-spacing: -.025em; } body.paper .mermaid-content h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; } /* quotes — orange rule on translucent paper */ body.paper .md-content blockquote { background: rgba(255, 255, 255, .5); border-left-color: var(--orange); } /* code blocks — dark panels with paper-card radius */ body.paper .md-content pre { border-radius: 12px; } /* anchor targets clear the sticky header */ body.paper .md-content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 96px; } /* tables — light cards like the docs param tables */ body.paper .md-content .table-wrapper { background: rgba(255, 255, 255, .55); border-radius: 12px; } body.paper .md-content th { background: rgba(255, 255, 255, .65); } /* mermaid blocks — paper cards around the white canvas */ body.paper .md-content .mermaid-block, body.paper .mermaid-content .mermaid-block { border-radius: 14px; } /* ========================================================= PAPER ERROR PAGE (404) + PASSWORD GATE (login) Paper-theme twins of the marketing pages: same header, footer, buttons and type. The base body rule already stretches the page (flex column, min-height 100vh), so the footer sits at the bottom even on short pages. ========================================================= */ /* anchors borrowing the button look (404 actions) */ a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* --- 404 -------------------------------------------------- */ .error-hero { flex: 1; width: min(1220px, calc(100% - 40px)); margin: auto; padding: 100px 0 130px; } .error-hero h1 { margin: 28px 0 0; font-size: clamp(54px, 8vw, 108px); font-weight: 700; line-height: .9; letter-spacing: -.085em; animation: enter .9s .08s both; } .error-hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; } .error-hero h1 .orange { color: var(--orange); } .error-hero h1 .error-hero__quiet { color: #9b9890; } .error-hero__text { max-width: 560px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; animation: enter .9s .16s both; } /* --- password gate ---------------------------------------- */ .gate { flex: 1; width: min(1220px, calc(100% - 40px)); margin: auto; padding: 70px 0; display: flex; align-items: center; justify-content: center; } .gate-card { width: min(400px, 100%); padding: 34px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 55px rgba(0, 0, 0, .06); animation: enter .8s both; } .gate-card__mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 13px; transform: rotate(-5deg); font-size: 17px; } .gate-card__kicker { margin-top: 24px; } .gate-card__title { margin: 8px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.05em; line-height: 1.05; } .gate-card__hint { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .gate-form { margin-top: 26px; display: flex; flex-direction: column; gap: 9px; } .gate-form__label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gate-form__input { width: 100%; padding: 14px 16px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 13px; color: var(--ink); font-size: 15px; transition: border-color .2s ease; } .gate-form__input:focus { outline: none; border-color: var(--ink); } .gate-form__error { margin: 0; color: var(--error); font-size: 13px; } .gate-form__submit { margin-top: 8px; } /* ========================================================= REVEALS ========================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================= PAPER RESPONSIVE ========================================================= */ @media (max-width: 900px) { .hero { min-height: 650px; } .hero-world { opacity: .35; } .floating-object { display: none; } .publish-core { right: 0; top: 160px; } .orbit { right: -250px; } .flow, .machine-grid { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); margin: auto; } .integration-grid { grid-template-columns: 1fr; } .editor { border-right: 0; border-bottom: 1px solid #30302e; } /* five type tabs now — let the switcher wrap on narrow screens */ .editor-types { gap: 12px; flex-wrap: wrap; } .stats { grid-template-columns: 1fr; } .stat { padding: 28px 0 !important; } .stat:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); } .stat + .stat { padding-left: 0; } } @media (max-width: 600px) { /* The sticky header must stay full-bleed (width: 100% + its own padding-inline) so the bar spans the whole mobile viewport; only non-sticky headers shrink to the column width. */ .header:not(.header--sticky) { width: calc(100% - 28px); } .header-right { gap: 14px; } .system-status { display: none; } .hero, .section, .flow-section, .playground, .stats, .footer, .error-hero, .gate { width: calc(100% - 28px); } .error-hero h1 { font-size: 46px; } .gate { padding: 40px 0; } /* ---- hero ---- */ .hero { padding: 70px 0 64px; min-height: 0; } /* scale with the viewport instead of a fixed 64px that overflows narrow phones (320-430px) */ .hero h1 { font-size: clamp(40px, 12.5vw, 64px); letter-spacing: -.07em; } .hero-subtitle { margin-top: 26px; font-size: 16px; } /* stack CTAs full-width — they do not fit side by side on phones */ .hero-actions { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .button { width: 100%; display: inline-flex; align-items: center; justify-content: center; } .publish-core { width: 96px; height: 96px; right: -10px; top: 220px; } .publish-core::before { width: 28px; height: 28px; } .publish-core::after { font-size: 20px; } /* live ledger — 3 equal columns; labels wrap instead of overflowing */ .hero-ledger { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ledger-sep { display: none; } .ledger-num { font-size: clamp(15px, 4.5vw, 19px); } .ledger-label { font-size: 8px; line-height: 1.45; } /* ---- sections ---- */ .section { margin-bottom: 90px; } .flow-section { margin: 10px auto 90px; } .section-intro { margin-bottom: 28px; } .section h2 { font-size: clamp(30px, 7.5vw, 76px); letter-spacing: -.06em; } .flow { padding: 18px; gap: 14px; } .flow-title { font-size: 17px; } /* ---- integrations ---- */ .integration-card { min-height: 0; padding: 18px 20px; border-radius: 16px; } .integration-icon { width: 34px; height: 34px; border-radius: 9px; } .integration-icon img, .integration-icon svg { width: 22px; height: 22px; } .integration-card h3 { margin-top: 18px; font-size: 16px; } .integration-card p { font-size: 12.5px; } .config-panel { padding: 20px 18px 60px; border-radius: 16px; } /* ---- publishing machine ---- */ .machine { border-radius: 18px; } /* brand + state wrap instead of squishing on very narrow screens */ .machine-header { height: auto; min-height: 70px; padding: 14px 18px; flex-wrap: wrap; row-gap: 8px; } .editor-top { padding: 10px 14px; } .editor-types { gap: 10px; } .type-btn { padding: 8px 2px 10px; font-size: 12px; } .editor textarea { height: 400px; padding: 18px; font-size: 12px; } .deploy-side { padding: 18px; } .deploy-card { padding: 20px; } /* ---- stats ---- */ .stats { margin-bottom: 60px; } } /* ========================================================= DEPLOYED PAGE — share bar + expiry (paper) Shown on every deployment via layout.html (.deploy-meta) or injected into raw HTML. Uses paper tokens, no dark override needed. ========================================================= */ .deploy-meta { width: min(720px, calc(100% - 32px)); margin: 18px auto 0; padding: 14px 0 18px; border-top: 1px solid var(--line); } .deploy-meta__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: rgba(255, 255, 255, .62); border: 1px solid var(--line); border-radius: 13px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .deploy-meta__expiry { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .deploy-meta__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .45); animation: statusPulse 2.5s infinite; } .deploy-meta__countdown { color: var(--ink); font-weight: 600; } .deploy-meta__share { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .deploy-meta__url { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } @media (max-width: 600px) { .deploy-meta__url { max-width: 160px; } } .deploy-meta__copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper-bright); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .deploy-meta__copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); } .deploy-meta__copy:active { transform: scale(.97); } .deploy-meta__copy.is-copied { background: var(--green); border-color: var(--green); color: white; } /* Share button + popover (next to Copy link) */ .deploy-share-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .deploy-share__popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; padding: 8px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 24, 32, .16); font-family: var(--sans); font-size: 13px; color: var(--ink); } .deploy-share__label { display: block; padding: 4px 10px 8px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .deploy-share__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer; transition: background .16s ease; } .deploy-share__item svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; } .deploy-share__item:hover { background: var(--paper); } .deploy-share__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } /* playground copy button next to URL */ .deploy-url-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .deploy-url-row .deploy-url { margin-top: 0; flex: 1; min-width: 0; } .deploy-url-copy { flex-shrink: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a3a38; background: #1e1e1c; color: #deddd8; font-family: var(--mono); font-size: 10px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; } .deploy-url-copy:hover { background: #2a2a28; } .deploy-url-copy:active { transform: scale(.97); } .deploy-url-copy.is-copied { background: var(--green); border-color: var(--green); color: white; } .deploy-expiry { margin-top: 10px; font-family: var(--mono); font-size: 10px; color: #9a9893; display: none; } .deploy-card.live .deploy-expiry { display: block; } .deploy-db-info { margin-top: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--green); background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; word-break: break-all; } /* ========================================================= LEGAL PAGES — Terms, Privacy, Acceptable Use, Report Paper-theme centered article, shares typography with docs but no sidebar. Uses paper tokens so it inverts gracefully. ========================================================= */ .legal { flex: 1; width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; } .legal__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .legal__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .legal h1 { margin: 0; font-size: clamp(32px, 5vw, 46px); font-weight: 750; line-height: .95; letter-spacing: -.06em; color: var(--ink); } .legal h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; } .legal__meta { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .legal__lead { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 44rem; } .legal__notice { margin-top: 18px; padding: 12px 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .legal__notice strong { color: var(--ink); } .legal__toc { margin: 28px 0 0; padding: 16px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; } .legal__toc-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .legal__toc ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; } .legal__toc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.18); } .legal__toc a:hover { text-decoration-color: var(--orange); color: var(--orange); } .legal__toc li::marker { color: var(--muted); font-family: var(--mono); font-size: 11px; } .legal__body { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 32px; } .legal__body h2 { margin: 36px 0 12px; font-size: 20px; font-weight: 750; letter-spacing: -.04em; color: var(--ink); scroll-margin-top: 96px; } .legal__body h2:first-child { margin-top: 0; } .legal__body h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .legal__body p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #3a3936; } .legal__body p strong { color: var(--ink); } .legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.22); } .legal__body a:hover { color: var(--orange); text-decoration-color: var(--orange); } .legal__body ul, .legal__body ol { margin: 0 0 16px 1.25rem; font-size: 14px; line-height: 1.7; color: #3a3936; } .legal__body li { margin-bottom: 6px; } .legal__body li::marker { color: var(--muted); } .legal__body hr { border: 0; height: 1px; background: var(--line); margin: 28px 0; } /* subtle callout used for warnings (e.g. "do not deploy secrets") */ .legal__callout { margin: 16px 0; padding: 14px 16px; background: var(--orange-soft); border: 1px solid rgba(255,81,43,.18); border-radius: 12px; font-size: 13px; line-height: 1.6; color: #3a3936; } .legal__callout strong { color: var(--ink); } /* contact card */ .legal__contact { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink); } .legal__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* interactive report form on the /report page */ .report-form { margin: 24px 0 36px; padding: 22px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); border-radius: 16px; } .report-form__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; letter-spacing: -.01em; } .report-form__fields { display: flex; flex-direction: column; gap: 10px; } .report-form__label { font-size: 12px; font-weight: 600; color: #3a3936; margin-top: 6px; } .report-form__label:first-of-type { margin-top: 0; } .report-form__optional { font-weight: 400; color: var(--muted); } .report-form__input { width: 100%; padding: 11px 13px; font-size: 13px; font-family: inherit; color: var(--ink); background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 10px; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .report-form__input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 79, 25, .14); } .report-form__textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .report-form__hint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 4px 0 2px; } .report-form__hint a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; } .report-form__submit { align-self: flex-start; margin-top: 8px; padding: 12px 20px; } .report-form__submit:disabled { opacity: .6; cursor: default; transform: none; } .report-form__result { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; } .report-form__result.is-ok { background: rgba(46, 160, 67, .12); border: 1px solid rgba(46, 160, 67, .3); color: #1d7a33; } .report-form__result.is-error { background: rgba(255, 81, 43, .1); border: 1px solid rgba(255, 81, 43, .28); color: #b03a1f; } /* footer legal nav — inline, wraps gracefully */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); } .footer__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer__legal a:hover { color: var(--ink); } .footer__legal-dot { opacity: .35; } @media (max-width: 600px) { .legal { width: calc(100% - 28px); padding-top: 32px; } .legal__toc { padding: 14px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== DATA VIEWERS (JSON + CSV deployments) Server-rendered interactive explorers on the paper theme. Tree/table go on light paper cards; raw JSON stays on a dark code panel like Markdown code blocks. All classes are BEM under .jsonv-* / .csvv-*. ========================================================================== */ /* ----- shared viewer primitives ----- */ .jsonv-title, .csvv-title { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; margin: 0 0 1.25rem; } .jsonv { width: min(880px, 100%); margin-inline: auto; } /* CSV tables benefit from extra horizontal room for more columns/data. */ .csvv { width: min(1400px, calc(100% - 2rem)); margin-inline: auto; } .jsonv-toolbar, .csvv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .jsonv-search, .csvv-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; } .jsonv-search input[type="search"], .csvv-search input[type="search"], .csvv-filter-input, .csvv-range-input { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; outline: none; transition: border-color .15s ease; min-width: 0; } .jsonv-search input[type="search"] { flex: 1 1 160px; } .csvv-filter-input { width: 100%; } .jsonv-search input:focus-visible, .csvv-search input:focus-visible, .csvv-filter-input:focus-visible, .csvv-range-input:focus-visible { border-color: var(--orange); } .jsonv-search-count, .csvv-count { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; } .jsonv-actions, .csvv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .jsonv-btn, .csvv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper-bright); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .jsonv-btn:hover:not(:disabled), .csvv-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); } .jsonv-btn:active:not(:disabled), .csvv-btn:active:not(:disabled) { transform: scale(.97); } .jsonv-btn:disabled, .csvv-btn:disabled { opacity: .45; cursor: not-allowed; } .jsonv-btn--primary, .csvv-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .jsonv-btn--primary:hover, .csvv-btn--primary:hover { background: var(--orange); border-color: var(--orange); color: #fff; } .jsonv-btn.active, .csvv-btn.active { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); } .jsonv-depth, .csvv-perpage { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .jsonv-depth select, .csvv-perpage select { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; cursor: pointer; } /* ----- JSON viewer: tree ----- */ .jsonv-panels { position: relative; } .jsonv-tree { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); overflow-x: auto; } .jsonv-node { position: relative; } .jsonv-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); } .jsonv-line { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; } .jsonv-toggle { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 4px; padding: 0; border: none; background: none; color: var(--muted); font-size: 10px; line-height: 16px; text-align: center; cursor: pointer; border-radius: 4px; transition: color .15s ease, background .15s ease; } .jsonv-toggle:hover { color: var(--ink); background: var(--orange-soft); } .jsonv-toggle--leaf { cursor: default; } .jsonv-toggle--leaf:hover { color: var(--muted); background: none; } .jsonv-key { color: var(--ink); font-weight: 500; cursor: copy; border-radius: 4px; transition: background .15s ease; } .jsonv-key:hover { background: var(--orange-soft); } .jsonv-colon { color: var(--muted); } .jsonv-value { cursor: copy; border-radius: 4px; transition: background .15s ease; } .jsonv-value:hover { background: var(--orange-soft); } .jsonv-value--string { color: #187a4f; } .jsonv-value--number { color: var(--blue); } .jsonv-value--boolean { color: #8250df; } .jsonv-value--null { color: var(--muted); font-style: italic; } .jsonv-bracket { color: var(--muted); } .jsonv-preview { color: var(--muted); font-size: 11px; margin: 0 4px; } .jsonv-badge { margin-left: 8px; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: rgba(23, 23, 21, .06); border-radius: 99px; padding: 1px 7px; } .jsonv-row--match { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; background: var(--orange-soft); } /* ----- JSON viewer: raw tab ----- */ .jsonv-rawwrap { display: flex; flex-direction: column; gap: 0.75rem; } .jsonv-rawbar { display: flex; gap: 8px; } .jsonv-raw { margin: 0; background: #181817; border: 1px solid #30302e; border-radius: 14px; padding: 1.125rem 1.375rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; color: #deddd8; } .jsonv-stats { margin-top: 0.75rem; font-family: var(--mono); font-size: 11px; color: var(--muted); } .jsonv-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .jsonv-tab { padding: 7px 12px; border: none; background: var(--paper-bright); color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease; } .jsonv-tab + .jsonv-tab { border-left: 1px solid var(--line); } .jsonv-tab.active { background: var(--ink); color: var(--paper); } /* ----- CSV viewer: table ----- */ .csvv-tablewrap { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: 70vh; } .csvv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .csvv-table th, .csvv-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .csvv-headrow th { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px); border-bottom: 1px solid var(--border-active, rgba(23, 23, 21, .38)); } .csvv-sortbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: .01em; color: var(--ink); cursor: pointer; } .csvv-sortarrow { color: var(--orange); min-width: 12px; } .csvv-type { font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--muted); background: rgba(23, 23, 21, .06); border-radius: 99px; padding: 1px 6px; } .csvv-type--badge { margin-left: 4px; text-transform: uppercase; letter-spacing: .05em; } th.csvv-th--number .csvv-sortbtn, td.csvv-cell--number { text-align: right; } td.csvv-cell--number { font-family: var(--mono); font-size: 12px; } .csvv-filterrow td { position: sticky; top: 41px; z-index: 1; background: rgba(251, 250, 247, .95); padding: 6px 8px; } .csvv-range { display: inline-flex; gap: 4px; } .csvv-range-input { width: 72px; } .csvv-row:nth-child(even) { background: rgba(255, 255, 255, .35); } .csvv-row:hover { background: var(--orange-soft); } .csvv-empty { color: var(--muted); font-style: italic; text-align: center; } .csvv-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 0.75rem; } .csvv-pager-label { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* ----- CSV viewer: summary + charts ----- */ .csvv-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 1rem; } .csvv-statcard { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .csvv-statcard-name { font-family: var(--sans); font-size: 12px; font-weight: 650; color: var(--ink); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csvv-statline { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; line-height: 1.7; } .csvv-statkey { color: var(--muted); } .csvv-statval { color: var(--ink); } .csvv-chart { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 1rem; } .csvv-chart-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .csvv-chart-controls select { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; cursor: pointer; } .csvv-chart-stage { overflow-x: auto; } .csvv-svg { width: 100%; height: auto; min-width: 480px; } .csvv-grid { stroke: var(--line); stroke-width: 1; } .csvv-axis { stroke: rgba(23, 23, 21, .38); stroke-width: 1; } .csvv-tick { fill: var(--muted); font-family: var(--mono); font-size: 10px; } .csvv-line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; } .csvv-point { fill: var(--orange); stroke: #fff; stroke-width: 1.5; transition: r .15s ease; } .csvv-point:hover { fill: var(--ink); } .csvv-bar { fill: var(--orange); opacity: .85; transition: opacity .15s ease; } .csvv-bar:hover { opacity: 1; } .csvv-chart-empty { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; padding: 24px 0; } /* ----- shared toast ----- */ .jsonv-toast, .csvv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; padding: 8px 14px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1200; } .jsonv-toast.is-visible, .csvv-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ----- responsive ----- */ @media (max-width: 640px) { .jsonv, .csvv { width: 100%; } .jsonv-tree { padding: 0.75rem 0.85rem; font-size: 12px; } .jsonv-children { margin-left: 8px; padding-left: 8px; } .csvv-table th, .csvv-table td { padding: 6px 10px; } .csvv-filterrow td { top: 37px; } } /* ========================================================================== DOCS PAGE (hostan.app/docs) — animated paper theme Editorial, text-first docs with layered motion: scroll progress, ambient blobs, marquee, staggered reveals, counters, accordion and a live "publishing machine" terminal. All BEM under .doc-*. ========================================================================== */ /* Scroll progress bar */ .doc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* Ambient background blobs */ .doc-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .doc-bg__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; } .doc-bg__blob--a { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle at 30% 30%, rgba(255, 81, 43, .28), transparent 70%); animation: docDrift 22s ease-in-out infinite alternate; } .doc-bg__blob--b { width: 420px; height: 420px; top: 30%; left: -160px; background: radial-gradient(circle at 30% 30%, rgba(23, 23, 21, .09), transparent 70%); animation: docDrift 28s ease-in-out infinite alternate-reverse; } .doc-bg__blob--c { width: 340px; height: 340px; bottom: 8%; right: 10%; background: radial-gradient(circle at 30% 30%, rgba(255, 81, 43, .12), transparent 70%); animation: docDrift 32s ease-in-out infinite alternate; } @keyframes docDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-30px, 40px, 0) scale(1.12); } } /* Hero */ .doc-hero { position: relative; padding-top: 1rem; } .doc-kicker { display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; } .doc-title { margin-bottom: 1.25rem !important; } .doc-title__grad { background: linear-gradient(90deg, var(--orange), #d43d1f, var(--orange)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: docGradShift 9s ease-in-out infinite; } @keyframes docGradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Hero actions */ .doc-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 2rem; } .doc-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.25rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; } .doc-cta__arrow { display: inline-block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); } .doc-cta:hover { transform: translateY(-2px); } .doc-cta:hover .doc-cta__arrow { transform: translate(2px, -2px); } .doc-cta--primary { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(23, 23, 21, .18); } .doc-cta--primary:hover { box-shadow: 0 16px 38px rgba(255, 81, 43, .28); } .doc-cta--ghost { background: rgba(255, 255, 255, .6); border: 1px solid var(--line); color: var(--ink); } /* The publishing machine (terminal) */ .doc-terminal { max-width: 34rem; background: #1d1d1b; border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 23, 21, .22); font-family: var(--mono); margin: 1.5rem 0 0.5rem; transition: box-shadow .4s ease; } .doc-terminal.is-live { box-shadow: 0 24px 70px rgba(255, 81, 43, .28); } .doc-terminal__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .doc-terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: #4a4a47; } .doc-terminal__dot:nth-child(1) { background: #ff512b; } .doc-terminal__dot:nth-child(2) { background: #4a4a46; } .doc-terminal__dot:nth-child(3) { background: #5c5c57; } .doc-terminal__label { margin-left: auto; font-size: 0.68rem; color: #9a9893; letter-spacing: 0.08em; text-transform: uppercase; } .doc-terminal__body { padding: 1rem 1.1rem; min-height: 4.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .doc-terminal__row { display: block; font-size: 0.85rem; color: #deddd8; white-space: pre-wrap; word-break: break-word; } .doc-terminal__prompt { color: var(--orange); } .doc-terminal__row.is-typing .doc-terminal__text::after { content: "▌"; color: var(--orange); animation: docCursor .9s step-end infinite; } @keyframes docCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .doc-terminal__url { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 1rem; font-size: 0.85rem; } .doc-terminal__check { color: var(--orange); font-weight: 700; animation: docCheckPop .5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes docCheckPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .doc-terminal__url a { color: var(--orange); text-decoration: none; border-bottom: 1px dotted rgba(255, 81, 43, .5); word-break: break-all; } .doc-terminal__url a:hover { text-decoration: underline; } /* Content-type marquee */ .doc-marquee { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 2.5rem 0 3.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .doc-marquee__track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: docMarquee 26s linear infinite; } .doc-marquee__item { font-family: var(--serif); font-size: 1.5rem; color: var(--muted); white-space: nowrap; } .doc-marquee__dot { color: var(--orange); font-size: 0.9rem; } @keyframes docMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Section lead */ .doc-section-lead { max-width: 40rem; color: var(--muted); } /* Publishing cards grid */ .doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .doc-cardx { background: var(--paper-bright); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .35s ease, opacity .7s cubic-bezier(.2, .8, .2, 1); } .doc-cardx:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(23, 23, 21, .10); border-color: rgba(23, 23, 21, .22); } .doc-cardx__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--orange-soft); color: var(--ink); margin-bottom: 0.9rem; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .3s ease; } .doc-cardx__icon svg { width: 20px; height: 20px; } .doc-cardx:hover .doc-cardx__icon { transform: scale(1.12) rotate(-4deg); color: var(--orange); } .doc-cardx h4 { margin-bottom: 0.4rem; } .doc-cardx p { font-size: 0.8rem; margin: 0; } /* Steps */ .doc-steps { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; position: relative; } .doc-steps::before { content: ""; position: absolute; left: 23px; top: 18px; bottom: 18px; width: 2px; background: var(--orange); opacity: .28; } .doc-step { position: relative; display: flex; gap: 1.1rem; padding: 0.4rem 0 1.4rem; } .doc-step__num { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--paper-bright); border: 1px solid var(--line); font-family: var(--serif); font-size: 1.3rem; color: var(--orange); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, color .3s ease; } .doc-step:hover .doc-step__num { transform: scale(1.12); background: var(--ink); color: #fff; border-color: var(--ink); } .doc-step__body h4 { margin-bottom: 0.3rem; } .doc-step__body p { font-size: 0.85rem; margin: 0; } /* Callouts */ .doc-callout { display: flex; gap: 1rem; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; margin-top: 1.25rem; transition: border-color .3s ease, box-shadow .3s ease; } .doc-callout:hover { border-color: rgba(23, 23, 21, .2); box-shadow: 0 14px 34px rgba(23, 23, 21, .07); } .doc-callout--accent { border-left: 3px solid var(--orange); } .doc-callout__badge { flex-shrink: 0; align-self: flex-start; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); background: var(--orange-soft); padding: 0.3rem 0.6rem; border-radius: 999px; } .doc-callout__body p { font-size: 0.875rem; } .doc-callout__foot { font-size: 0.8rem; } /* Counters */ .doc-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.75rem 0 1.25rem; } .doc-counter { background: var(--paper-bright); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem 1.25rem; text-align: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, opacity .7s cubic-bezier(.2, .8, .2, 1); } .doc-counter:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23, 23, 21, .09); } .doc-counter__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .doc-counter__num:not([data-count="0"]):before { content: ""; display: block; width: 28px; height: 3px; margin: 0 auto 0.6rem; border-radius: 2px; background: var(--orange); } .doc-counter__label { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); } /* API reference split */ .doc-api { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: center; margin-top: 1.25rem; } .doc-api__text { display: flex; flex-direction: column; gap: 1.25rem; } /* Grid tracks are minmax(auto, 1fr): without min-width 0 the no-wrap

 in the
   code column forces the grid (and the page, and the sticky header) wider than
   phone viewports. Let the pre scroll inside its card instead. */
.doc-api__text, .doc-api__code { min-width: 0; }
.doc-api__code .code-block pre { max-width: 100%; }
@media (max-width: 760px) { .doc-api { grid-template-columns: minmax(0, 1fr); } }

/* FAQ accordion */
.doc-faq {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
.doc-faq__item {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.doc-faq__item:hover { border-color: rgba(23, 23, 21, .22); }
.doc-faq__item.is-open { border-color: rgba(255, 81, 43, .4); box-shadow: 0 12px 30px rgba(255, 81, 43, .08); }
.doc-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}
.doc-faq__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--orange);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.doc-faq__item.is-open .doc-faq__icon { transform: rotate(45deg); }
.doc-faq__panel {
    padding: 0 1.1rem 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}
.doc-faq__panel:not([hidden]) {
    animation: docPanelIn .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes docPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.doc-faq__panel p { margin: 0; }

/* Docs-scoped accents: orange health pulse and warm code properties.
   (body.docs is only set on /docs, so the landing and API docs keep the
   shared green semantics.) */
body.docs .status-dot {
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(255, 81, 43, .5);
    animation: docStatusPulse 2.5s infinite;
}
body.docs .status-dot.is-error {
    background: var(--error);
    animation: none;
}
@keyframes docStatusPulse {
    70%  { box-shadow: 0 0 0 8px rgba(255, 81, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 81, 43, 0); }
}
.doc-api .hl-property { color: #ff6b3d; }

/* Small print + flush helpers (replace inline styles in the markup) */
.docs-content .doc-note {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 1rem;
}
.docs-content .doc-flush { margin-bottom: 0; }
.docs-content a.doc-link { color: var(--accent); }
.docs-content a.doc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Stagger reveals within grids/steps/counters. Delays only apply while the
   element has not yet revealed (via :not(.visible)) so they do not linger and
   delay later hover transitions. */
.doc-cards .reveal:not(.visible):nth-child(1), .doc-steps .reveal:not(.visible):nth-child(1) { transition-delay: 0.05s; }
.doc-cards .reveal:not(.visible):nth-child(2), .doc-steps .reveal:not(.visible):nth-child(2) { transition-delay: 0.10s; }
.doc-cards .reveal:not(.visible):nth-child(3), .doc-steps .reveal:not(.visible):nth-child(3) { transition-delay: 0.15s; }
.doc-cards .reveal:not(.visible):nth-child(4), .doc-steps .reveal:not(.visible):nth-child(4) { transition-delay: 0.20s; }
.doc-cards .reveal:not(.visible):nth-child(5) { transition-delay: 0.25s; }
.doc-counters .reveal:not(.visible):nth-child(1) { transition-delay: 0.05s; }
.doc-counters .reveal:not(.visible):nth-child(2) { transition-delay: 0.10s; }
.doc-counters .reveal:not(.visible):nth-child(3) { transition-delay: 0.15s; }

/* Mobile refinements */
@media (max-width: 640px) {
    body.docs .docs-content__inner { padding: 2rem 1.1rem 4rem; }
    body.docs .header-right { gap: 10px; }
    body.docs #statusMeta { display: none; }
    .doc-hero__actions { flex-direction: column; align-items: stretch; }
    .doc-cta { justify-content: center; }
    .doc-marquee { margin: 2rem 0 2.5rem; padding: 0.85rem 0; }
    .doc-marquee__item { font-size: 1.15rem; }
    .doc-callout { flex-direction: column; gap: 0.75rem; }
    .doc-step { gap: 0.9rem; }
    .doc-step__num { width: 40px; height: 40px; font-size: 1.1rem; }
    .doc-steps::before { left: 19px; }
    .doc-counter { padding: 1.25rem 1rem; }
    .doc-cardx { padding: 1.1rem; }
    .doc-api { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-marquee__track { animation: none; }
    .doc-title__grad, .doc-bg__blob { animation: none; }
    .doc-terminal__row.is-typing .doc-terminal__text::after { animation: none; }
    .doc-faq__panel:not([hidden]) { animation: none; }
    body.docs .status-dot { animation: none; }
}

/* ==========================================================================
   Admin operations dashboard (body.admin)
   --------------------------------------------------------------------------
   Operator-only surface served by the Go binary under /admin/. Reuses the
   paper theme tokens above; no second stylesheet, no framework.
   ========================================================================== */

body.admin {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
}

/* ----- top bar ----- */

.admin-bar {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0 max(20px, calc((100% - 1280px) / 2));
    height: 3.5rem;

    background: rgba(244, 242, 236, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.admin-bar__left { display: flex; align-items: center; gap: .75rem; }
.admin-bar__tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 999px;
    padding: 2px 8px;
}
.admin-bar__version { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.admin-bar__right { display: flex; align-items: center; gap: .5rem; }

.admin-live {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.admin-live:hover { border-color: var(--border-active); }
.admin-live.is-paused { opacity: .7; }
.admin-live__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: admin-pulse 2s ease infinite;
}
.admin-live.is-paused .admin-live__dot {
    background: var(--muted);
    animation: none;
}
@keyframes admin-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
.admin-live__label { font-family: var(--mono); font-size: 10px; color: var(--ink); white-space: nowrap; }
.admin-live__last { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }

.admin-tabs { display: flex; gap: .25rem; }
.admin-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .45rem .85rem;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.admin-tab:hover { background: rgba(23, 23, 21, .06); }
.admin-tab.is-active { background: var(--ink); color: var(--paper-bright); }
.admin-tab__badge {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .45em;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
}

/* ----- layout ----- */

.admin-main {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 1.75rem 0 4rem;
}
.admin-section { display: none; }
.admin-section.is-active { display: block; }

.admin-heading {
    margin: 0 0 1.25rem;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.02;
}
.admin-heading em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}
.admin-kicker {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
}
.admin-subheading {
    margin: 2rem 0 .9rem;
    font-size: 15px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

/* ----- status cards ----- */

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
}
.admin-card {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.admin-card--warn, .admin-card--warning { border-color: var(--warning); }
.admin-card--error, .admin-card--bad, .admin-card--stale { border-color: var(--error); }

.admin-card__value { font-size: 26px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.admin-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.admin-card__hint { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ----- attention list ----- */

.admin-attention {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.admin-attention__item {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .65rem .9rem;
    border-radius: 12px;
    background: var(--paper-bright);
    border: 1px solid var(--line);
}
.admin-attention__item strong { font-weight: 650; }
.admin-attention__item small { display: block; color: var(--muted); margin-top: 2px; }
.admin-attention__glyph {
    font-weight: 800;
    font-family: var(--mono);
    align-self: center;
}
.admin-attention__item.is-ok .admin-attention__glyph { color: var(--success); }
.admin-attention__item.is-warn { border-color: var(--warning); }
.admin-attention__item.is-warn .admin-attention__glyph { color: var(--warning); }
.admin-attention__item.is-bad { border-color: var(--error); }
.admin-attention__item.is-bad .admin-attention__glyph { color: var(--error); }

/* ----- filters ----- */

.admin-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}
.admin-filters__count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }

.admin-input {
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: .42rem .7rem;
}
.admin-input:focus { outline: none; border-color: var(--ink); }
.admin-input--search { min-width: 220px; }
.admin-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

/* ----- tables ----- */

.admin-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-bright);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
    text-align: left;
    font-size: 10.5px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.admin-table td {
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: rgba(23, 23, 21, .04); }
.admin-table td.num, .admin-table th.num { text-align: right; font-family: var(--mono); }
.admin-table .mono, .mono { font-family: var(--mono); font-size: 12px; }
.cell-flagged { color: var(--error); font-weight: 600; }
.row-actions { display: flex; gap: .35rem; }

.admin-table--audit td { white-space: normal; }
.muted { color: var(--muted); }

.pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    border-radius: 999px;
    padding: 1px 8px;
    border: 1px solid currentColor;
}
.pill--ok { color: var(--success); }
.pill--warn { color: var(--warning); }
.pill--bad { color: var(--error); }
.pill--muted { color: var(--muted); }

/* ----- deployment type badges ----- */

.type {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    border-radius: 6px;
    padding: 1px 7px;
    background: rgba(23, 23, 21, .05);
    border: 1px solid var(--line);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.type--database { color: var(--blue); border-color: rgba(63, 97, 255, .35); background: rgba(63, 97, 255, .06); }
.type--app { color: var(--orange); border-color: rgba(255, 81, 43, .35); background: rgba(255, 81, 43, .06); }
.type--html { color: var(--green); border-color: rgba(32, 165, 107, .35); background: rgba(32, 165, 107, .06); }
.type--mermaid { color: var(--ink); }

/* ----- batch selection ----- */

.admin-batch {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 81, 43, .05);
}
.admin-batch[hidden] { display: none; }
.admin-batch__count {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}
.admin-batch__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.admin-batch__sep {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 .25rem;
}
.admin-batch__preview {
    margin: .6rem 0 0;
    padding: .5rem .75rem;
    max-height: 140px;
    overflow-y: auto;
    list-style: none;
    background: rgba(23, 23, 21, .035);
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

.col-check { width: 34px; }
.admin-table input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--orange);
    cursor: pointer;
}
.admin-table tbody tr[data-slug].is-selected { background: rgba(255, 81, 43, .08); }
.admin-table tbody tr[data-slug].is-selected:hover { background: rgba(255, 81, 43, .13); }

/* ----- expiry highlighting in the deployments table ----- */

.admin-table tbody tr[data-slug] { cursor: pointer; }
.admin-table tbody tr.row-exp-soon { background: rgba(185, 122, 31, .06); }
.admin-table tbody tr.row-exp-soon:hover { background: rgba(185, 122, 31, .11); }
.admin-table tbody tr.row-exp-expired { background: rgba(212, 61, 31, .05); }
.admin-table tbody tr.row-exp-expired:hover { background: rgba(212, 61, 31, .10); }
.admin-table tbody tr.row-exp-expired td { color: var(--muted); }

.flag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 6px;
    padding: 0 5px;
    margin-right: 3px;
}

/* ----- buttons (admin-local, paper themed) ----- */

.abtn {
    appearance: none;
    font: inherit;
    font-size: 13px;
    border-radius: 9px;
    padding: .45rem .9rem;
    cursor: pointer;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.abtn:hover:not(:disabled) { transform: translateY(-1px); }
.abtn:disabled { opacity: .4; cursor: not-allowed; }
.abtn--sm { font-size: 11.5px; padding: .3rem .6rem; }
.abtn--primary { background: var(--ink); color: var(--paper-bright); }
.abtn--primary:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.abtn--danger { border-color: var(--error); color: var(--error); }
.abtn--danger:hover:not(:disabled) { background: var(--error); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.admin-pager { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }

/* ----- reports / moderation cards ----- */

.admin-chips { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.admin-chip {
    appearance: none;
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: .32rem .85rem;
    cursor: pointer;
}
.admin-chip.is-active { background: var(--ink); color: var(--paper-bright); border-color: var(--ink); }

.admin-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .9rem; }
.admin-report {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 12px;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.admin-report.is-open { border-left-color: var(--error); }
.admin-report.is-dismissed { border-left-color: var(--muted); opacity: .85; }
.admin-report.is-removed { border-left-color: var(--success); opacity: .85; }
.admin-report__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.admin-report__head time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: auto; }
.admin-report__slug a { color: inherit; }
.admin-report__desc {
    margin: 0;
    padding: .5rem .75rem;
    background: rgba(23, 23, 21, .045);
    border-left: 3px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-report__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.admin-queue-count { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ----- system panels, gauges + tiles ----- */

.admin-system {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
    margin-top: 1.25rem;
}
.admin-panel {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.admin-panel__title {
    margin: 0 0 .35rem;
    font-size: 11px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}

.admin-health { display: flex; flex-direction: column; gap: .5rem; }
.admin-health__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
}
.admin-health__item strong { font-weight: 650; }
.admin-health__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--line);
}
.admin-health__dot.is-ok { background: var(--green); }
.admin-health__dot.is-bad { background: var(--error); }
.admin-health__detail {
    margin: .35rem 0 0;
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--muted);
}

.gauge { display: flex; flex-direction: column; gap: .55rem; }
.gauge__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
}
.gauge__row > span:first-child { font-weight: 600; }
.gauge__val { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gauge__val i { font-style: normal; opacity: .6; }
.gauge__track {
    height: 9px;
    border-radius: 999px;
    background: rgba(23, 23, 21, .08);
    overflow: hidden;
}
.gauge__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--green);
    transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.gauge__fill--warn { background: var(--warning); }
.gauge__fill--bad { background: var(--error); }
.gauge__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
}
.gauge__foot .pill { margin-right: auto; }

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .5rem;
}
.admin-tile {
    background: rgba(23, 23, 21, .035);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.admin-tile--warn { border-color: var(--warning); }
.admin-tile--bad { border-color: var(--error); }
.admin-tile__value {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.admin-tile__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

/* ----- raw system dump (collapsed by default) ----- */

.admin-raw {
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-bright);
}
.admin-raw summary {
    cursor: pointer;
    padding: .7rem 1rem;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    user-select: none;
    list-style: none;
}
.admin-raw summary::-webkit-details-marker { display: none; }
.admin-raw summary::after {
    content: '▾';
    float: right;
    color: var(--muted);
    transition: transform .2s ease;
}
.admin-raw[open] summary::after { transform: rotate(180deg); }
.admin-raw summary:hover { color: var(--ink); }

.admin-sysdump {
    margin: 0;
    border-top: 1px solid var(--line);
    background: #101010;
    color: #d6ffd6;
    border-radius: 0 0 14px 14px;
    padding: 1rem 1.2rem;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.55;
    overflow-x: auto;
}


/* ----- modal ----- */

.admin-modal { position: fixed; inset: 0; z-index: 100; }
.admin-modal[hidden] { display: none; }
.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 23, 21, .45);
}
.admin-modal__card {
    position: relative;
    margin: 9vh auto 0;
    width: min(620px, calc(100% - 40px));
    max-height: 78vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
    padding: 1.4rem 1.6rem 1.2rem;
}
.admin-modal__title { margin: 0 0 .75rem; font-size: 17px; letter-spacing: -.02em; }
.admin-modal__body p { margin: .4rem 0; font-size: 13.5px; }
.admin-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.admin-modal h4 { margin: 1rem 0 .4rem; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.kv { display: grid; grid-template-columns: 92px 1fr; gap: .3rem .8rem; margin: 0; }
.kv dt { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px; }
.kv dd { margin: 0; font-size: 13px; word-break: break-all; }
.mini-list { margin: 0; padding-left: 1.1rem; font-size: 12.5px; }
.mini-list li { margin-bottom: .45rem; }

/* ----- toast ----- */

.admin-toast {
    position: fixed;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    z-index: 120;
    background: var(--ink);
    color: var(--paper-bright);
    border-radius: 10px;
    padding: .55rem 1rem;
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
/* ----- login ----- */

body.is-locked { overflow: hidden; }

.admin-login {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--paper);
}
/* The display:grid above overrides the hidden attribute's UA display:none —
   without this, a logged-in session keeps an invisible fullscreen overlay
   that intercepts every click on the dashboard. */
.admin-login[hidden] { display: none; }
.admin-login__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    width: min(360px, calc(100% - 40px));
    padding: 2.2rem 2.4rem 1.8rem;
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(23, 23, 21, .10);
    text-align: center;
}
.admin-login__card h1 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.admin-login__sub {
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.admin-login__card .admin-input { width: 100%; text-align: center; font-size: 14px; }
.admin-login__error {
    margin: 0;
    font-size: 12.5px;
    color: var(--error);
}

.admin-toast[hidden] { display: none; }
.admin-toast.is-error { background: var(--error); color: #fff; }

.admin-empty { color: var(--muted); font-size: 13px; padding: .5rem .8rem; }

/* ==========================================================================
   Admin responsive
   --------------------------------------------------------------------------
   The operator dashboard degrades from a wide triage console to a stacked,
   thumb-friendly layout on narrow viewports. Breakpoints: <=980px compresses
   the bar, <=760px wraps the bar and turns the wide tables into cards,
   <=560px tightens spacing and makes the modal a full-screen sheet.
   ========================================================================== */

@media (max-width: 980px) {
    .admin-main { width: min(1280px, calc(100% - 24px)); }
    .admin-bar__version, .admin-live__last { display: none; }
    .admin-tabs { overflow-x: auto; } /* tabs scroll if they don't fit */
}

@media (max-width: 760px) {
    /* top bar wraps: brand/live stay on line 1, tabs take line 2 */
    .admin-bar {
        height: auto;
        flex-wrap: wrap;
        gap: .15rem .75rem;
        padding-top: .45rem;
        padding-bottom: .45rem;
    }
    .admin-bar__left { gap: .5rem; }
    .admin-tabs {
        order: 3;
        width: 100%;
        padding-bottom: .2rem;
        scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab { white-space: nowrap; }
    .admin-bar__right { margin-left: auto; }
    .admin-live__label { display: none; } /* dot-only live control */

    .admin-main { padding-top: 1.25rem; }

    /* filters stack full width */
    .admin-filters { align-items: stretch; }
    .admin-filters .admin-input, .admin-filters .abtn,
    .admin-filters .admin-input--search { flex: 1 1 100%; width: 100%; min-width: 0; }
    .admin-check { justify-content: center; padding: .2rem 0; }
    .admin-filters__count { margin-left: 0; }

    /* status cards single column */
    .admin-cards { grid-template-columns: 1fr; }

    /* wide tables become stacked cards with data-label cells */
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
    .admin-table thead { display: none; }
    .admin-tablewrap { border-radius: 14px; overflow: hidden; }
    .admin-table tbody tr {
        border-bottom: 1px solid var(--line);
        padding: .55rem .6rem;
        cursor: pointer;
    }
    .admin-table tbody tr:last-child { border-bottom: none; }
    .admin-table tbody tr[data-slug].is-selected,
    .admin-table tbody tr.row-exp-soon,
    .admin-table tbody tr.row-exp-expired { background: transparent; }
    .admin-table tbody tr[data-slug].is-selected { box-shadow: inset 3px 0 0 var(--orange); }
    .admin-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .38rem .1rem;
        border-bottom: 1px dashed var(--line);
        white-space: normal;
        text-align: right;
    }
    .admin-table td:last-child { border-bottom: none; }
    .admin-table td::before {
        content: attr(data-label);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        flex-shrink: 0;
    }
    .admin-table td.num { text-align: right; font-family: inherit; }
    .admin-table td.mono { text-align: right; font-size: 12px; }
    .admin-table .row-actions { justify-content: flex-end; }
    .admin-table .row-actions::before { display: none; }
    .admin-table .col-check { justify-content: flex-end; padding-top: .1rem; }
    .admin-table .col-check::before { display: none; }

    /* batch bar: actions span full width */
    .admin-batch { align-items: stretch; }
    .admin-batch__actions { margin-left: 0; width: 100%; }
    .admin-batch__actions .abtn { flex: 1 1 auto; }
    .admin-batch__count { padding: .15rem 0; }

    /* reports single column + tighter chips */
    .admin-reports { grid-template-columns: 1fr; }
    .admin-chips { overflow-x: auto; scrollbar-width: none; }
    .admin-chips::-webkit-scrollbar { display: none; }
    .admin-chip { white-space: nowrap; }

    /* system panels single column */
    .admin-system { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .admin-heading { font-size: clamp(24px, 7vw, 30px); }
    .admin-main { padding-bottom: 3rem; }
    .admin-bar__tag { display: none; } /* keep brand + live + lock clean */
    .admin-live__label { display: none; }
    .admin-bar__left .brand-mark { display: inline-flex; }

    /* modal becomes a full-screen sheet */
    .admin-modal__card {
        margin: 0;
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        padding: 1.2rem 1.1rem 1.4rem;
    }
    .admin-modal__actions { flex-direction: column-reverse; align-items: stretch; }
    .admin-modal__actions .abtn { width: 100%; }

    /* report action rows stack full width */
    .admin-report__actions { flex-direction: column; align-items: stretch; }
    .admin-report__actions .abtn { width: 100%; }

    /* row action buttons full width */
    .row-actions .abtn { flex: 1 1 auto; }

    /* detail key/value grid stacks */
    .kv { grid-template-columns: 1fr; }
    .kv dt { padding-top: .4rem; }

    /* login card fills comfortably */
    .admin-login__card { width: calc(100% - 32px); padding: 1.8rem 1.4rem 1.5rem; }

    .admin-toast { left: 12px; right: 12px; transform: none; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-live { animation: none; }
    .abtn:hover:not(:disabled) { transform: none; }
}