/* ═══════════════════════════════════════════════════════════════════════════ Yellow Help Web — tokens lifted from the design bundle. Light is the default; [data-theme="dark"] on flips everything. ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --accent: #FFCD00; --accent-bold: #E0B400; --accent-soft: #FFF3B8; --accent-soft-fg: #7A5C00; --on-accent: #161513; --btn-ink-bg: #161513; --btn-ink-fg: #FFCD00; --btn-ink-tag: #FFE066; --btn-ink-sub: #E8E4D8; --surface: #FFFFFF; --surface-2: #FAFAF7; --rail-bg: #EFECE3; --rail-border: #E3DFD3; --rail-icon: #7A766C; --avatar-ring: #FFFFFF; --scroll-hover: rgba(22,21,19,0.06); --line: #ECEAE2; --line-soft: #F2F1EC; --text-ink: #161513; --text-body: #3D3B36; --text-muted: #5F5C55; --text-muted-2: #8C8A82; --text-muted-3: #A19E97; --text-faint: #B8B5AD; --text-faint-2: #D6D4CC; --link: #B58A00; --warm-bg: #FFFBEA; --warm-card-bg: #FFFFFF; --warm-line: #FFE066; --warm-text: #7A5C00; --hero-highlight: linear-gradient(180deg, transparent 60%, var(--accent) 60%); --hero-highlight-radius: 0; --hero-highlight-pad-x: 4px; --chip-blue-bg: #EEF2FF; --chip-blue-fg: #3D52BF; --chip-purple-bg: #F3EBFF; --chip-purple-fg: #6E2EB6; --danger: #C8331C; --danger-soft: #FBE7E2; --shadow: 0 1px 0 rgba(0,0,0,0.02), 0 30px 60px -30px rgba(22,21,19,0.18); --page-bg: #F4F2EC; } [data-theme="dark"] { --accent: #FFCD00; --accent-bold: #FFE066; --accent-soft: #2F2710; --accent-soft-fg: #FFE066; --on-accent: #161513; --btn-ink-bg: #161513; --btn-ink-fg: #FFCD00; --btn-ink-tag: #FFE066; --btn-ink-sub: #B8B5AD; --surface: #1B1916; --surface-2: #141310; --rail-bg: #0F0E0C; --rail-border: #26231F; --rail-icon: #7C7972; --avatar-ring: #0F0E0C; --scroll-hover: rgba(255,205,0,0.10); --line: #2A2724; --line-soft: #23211E; --text-ink: #F4F1E8; --text-body: #DCD8CC; --text-muted: #A19E97; --text-muted-2: #8C8A82; --text-muted-3: #7C7972; --text-faint: #5C5950; --text-faint-2: #3D3B36; --link: #FFD43B; --warm-bg: #1F1A0B; --warm-card-bg: #19150A; --warm-line: #5C4900; --warm-text: #FFE066; --hero-highlight: var(--accent); --hero-highlight-radius: 8px; --hero-highlight-pad-x: 14px; --chip-blue-bg: #1B2540; --chip-blue-fg: #9DB1FF; --chip-purple-bg: #2A1F40; --chip-purple-fg: #CCA7FF; --danger: #FFA694; --danger-soft: #3A1814; --shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 30px 60px -30px rgba(0,0,0,0.85); --page-bg: #0A0908; } /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--page-bg); } body { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--text-ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, kbd { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; } /* ── Shell layout ────────────────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; background: var(--surface); } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .sidebar { width: 280px; background: var(--surface-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 16px 16px; border-bottom: 1px solid var(--line); text-decoration: none; } .sidebar-brand:hover { text-decoration: none; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: #161513; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -10px rgba(22,21,19,0.35); flex-shrink: 0; } .brand-mark svg { width: 20px; height: 20px; } .brand-text { display: flex; flex-direction: column; min-width: 0; } .brand-name { font-size: 14px; font-weight: 700; color: var(--text-ink); letter-spacing: -0.005em; } .brand-tag { font-size: 9.5px; color: var(--text-muted-3); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-top: 1px; } .sidebar-nav { padding: 18px 8px; overflow-y: auto; flex: 1; } /* Embedded mode (inside yellow-client iframe): no brand header, so give the nav a bit more breathing room at the top. */ .sidebar-embedded .sidebar-nav { padding-top: 24px; } .nav-section { margin-bottom: 22px; } .nav-section-header { display: flex; align-items: center; gap: 6px; padding: 0 12px; margin-bottom: 8px; } .nav-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted-3); } .nav-section-count { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-faint); padding: 1px 6px; background: var(--line-soft); border-radius: 999px; } .nav-list { list-style: none; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); text-decoration: none; position: relative; transition: background .12s, color .12s; } .nav-link:hover { background: var(--scroll-hover); color: var(--text-ink); text-decoration: none; } .nav-link.active { background: var(--accent-soft); color: var(--text-ink); font-weight: 600; } .nav-link.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--accent-bold); border-radius: 0 3px 3px 0; } .nav-link-icon { font-size: 14px; line-height: 1; } .nav-empty { padding: 1rem 12px; font-size: 12px; color: var(--text-muted-3); } /* ── Sidebar footer (theme + lang) ───────────────────────────────────────── */ .sidebar-footer { border-top: 1px solid var(--line); padding: 12px 12px 14px; display: flex; align-items: center; gap: 8px; } .theme-toggle, .lang-pill { background: transparent; border: 1px solid var(--line); color: var(--text-muted); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; letter-spacing: 0.04em; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; } .theme-toggle:hover, .lang-pill:hover { background: var(--scroll-hover); color: var(--text-ink); text-decoration: none; } .lang-pill.active { background: var(--btn-ink-bg); color: var(--btn-ink-fg); border-color: var(--btn-ink-bg); } .lang-pill.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .lang-group { display: inline-flex; gap: 2px; margin-left: auto; } .lang-group .lang-pill { padding: 6px 9px; border-radius: 7px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; } /* ── Main / article ──────────────────────────────────────────────────────── */ .app-main { flex: 1; background: var(--surface); min-width: 0; } .article-wrap { max-width: 920px; margin: 0 auto; padding: 40px 56px 80px; position: relative; } /* When the page has a TOC, widen the wrap and use a two-column grid so the TOC sits in its own column to the right of the article. */ .article-wrap.has-toc { max-width: 1260px; display: grid; grid-template-columns: minmax(0, 800px) 220px; column-gap: 60px; align-items: start; } .article-wrap .article-content { min-width: 0; } /* ── On-this-page TOC ───────────────────────────────────────────────────── */ .page-toc { position: sticky; top: 24px; align-self: start; padding-top: 48px; font-size: 13px; line-height: 1.5; max-height: calc(100vh - 48px); overflow-y: auto; } .page-toc-title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; color: var(--text-muted-2); font-weight: 700; margin-bottom: 12px; } .page-toc-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); } .page-toc-list li { margin: 0; } .page-toc-list a { display: block; padding: 5px 12px; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4; transition: color 0.1s ease, border-color 0.1s ease; } .page-toc-list a:hover { color: var(--text-ink); } .page-toc-list a.active { color: var(--text-ink); border-left-color: var(--accent, #FFCD00); font-weight: 500; } .page-toc-list .toc-level-3 a { padding-left: 24px; font-size: 12.5px; } .page-toc::-webkit-scrollbar { width: 4px; } .page-toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } @media (max-width: 1180px) { .article-wrap.has-toc { display: block; max-width: 920px; } .page-toc { display: none; } } /* Meta row above hero */ .article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 11.5px; color: var(--text-muted-2); } .eyebrow { padding: 3px 9px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-soft-fg); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; } .meta-dot { color: var(--text-faint-2); } .meta-mono { font-family: "JetBrains Mono", monospace; } /* Hero */ .hero-title { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; color: var(--text-ink); margin: 0; } .hero-highlight { background: var(--hero-highlight); padding: 0 var(--hero-highlight-pad-x); border-radius: var(--hero-highlight-radius); color: var(--on-accent); } .hero-lead { font-size: 19px; line-height: 1.55; color: var(--text-body); max-width: 620px; margin: 20px 0 0; text-wrap: pretty; } /* ── Markdown body ───────────────────────────────────────────────────────── */ .article-body { margin-top: 8px; } .article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: var(--text-ink); letter-spacing: -0.012em; } .article-body h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 32px; font-weight: 600; margin: 48px 0 12px; } .article-body h2 { font-size: 24px; font-weight: 600; margin: 44px 0 12px; } .article-body h3 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; } .article-body p { font-size: 16px; line-height: 1.65; color: var(--text-body); margin: 12px 0 0; text-wrap: pretty; } .article-body p + p { margin-top: 16px; } .article-body ul, .article-body ol { margin: 12px 0 0; padding-left: 22px; } .article-body li { font-size: 15.5px; line-height: 1.65; color: var(--text-body); margin-bottom: 6px; } .article-body li > strong { color: var(--text-ink); } .article-body code { font-size: 0.88em; padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text-body); } .article-body pre { margin: 16px 0 0; padding: 16px; border-radius: 10px; background: #161513; color: #E8E4D8; overflow-x: auto; font-size: 13px; line-height: 1.6; border: 1px solid #26231F; } .article-body pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; } .article-body blockquote { margin: 20px 0 0; padding: 16px 20px; border-radius: 10px; background: var(--warm-bg); border: 1px solid var(--warm-line); color: var(--text-body); } .article-body blockquote p { margin: 0; color: var(--warm-text); } .article-body blockquote p + p { margin-top: 8px; } .article-body a { color: var(--link); text-decoration: underline; text-decoration-color: var(--text-faint-2); text-underline-offset: 3px; } .article-body a:hover { text-decoration-color: var(--link); } .article-body hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } .article-body img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); } /* Tables — Inter for names, mono for values */ .article-body table { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 13.5px; } .article-body thead th { text-align: left; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted-3); } .article-body tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--text-body); line-height: 1.55; } .article-body tbody tr:last-child td { border-bottom: none; } .article-body tbody td:nth-child(n+2) { font-family: "JetBrains Mono", monospace; font-size: 12.5px; } .article-body tbody td:first-child { color: var(--text-ink); font-weight: 500; } /* ── Schema page ─────────────────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted-2); margin-bottom: 16px; } .breadcrumb a { color: var(--link); font-weight: 500; } .breadcrumb .crumb-sep { color: var(--text-faint-2); } .breadcrumb .crumb-current { color: var(--text-ink); font-weight: 500; } .schema-hero { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; } .schema-mark { width: 68px; height: 68px; border-radius: 16px; background: var(--accent); flex-shrink: 0; display: grid; place-items: center; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 32px; font-weight: 700; color: var(--on-accent); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); } .schema-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -0.025em; margin: 0; line-height: 1.05; color: var(--text-ink); } .schema-sub { font-size: 14px; color: var(--text-muted); margin: 6px 0 0; max-width: 540px; } .model-list { display: flex; flex-direction: column; gap: 8px; } .model-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 14px 18px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--text-ink); text-decoration: none; } .model-row:hover { border-color: var(--accent-bold); text-decoration: none; } .model-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .model-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .model-meta { text-align: right; font-family: "JetBrains Mono", monospace; } .model-meta-label { font-size: 11px; color: var(--text-muted-3); letter-spacing: 0.06em; text-transform: uppercase; } .model-meta-value { font-size: 14px; color: var(--text-ink); font-weight: 500; } .model-arrow { color: var(--link); display: inline-flex; } /* ── Schemas list (catalogue) ────────────────────────────────────────────── */ .schema-row { display: flex; align-items: stretch; gap: 16px; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text-ink); text-decoration: none; transition: border-color .15s, background .15s; } .schema-row:hover { border-color: var(--accent-bold); background: var(--surface-2); text-decoration: none; } .schema-row-accent { width: 4px; border-radius: 4px; flex-shrink: 0; align-self: stretch; } .schema-row-body { flex: 1; min-width: 0; } .schema-row-name { font-size: 16px; font-weight: 600; color: var(--text-ink); } .schema-row-uid { margin-top: 2px; font-size: 11.5px; color: var(--text-muted-2); font-family: "JetBrains Mono", monospace; } .schema-row-cta { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--link); white-space: nowrap; } /* ── Model detail ────────────────────────────────────────────────────────── */ .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; margin-bottom: 32px; } .stat-cell { padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); } .stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted-3); letter-spacing: 0.14em; text-transform: uppercase; } .stat-value { font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; color: var(--text-ink); } .stat-mono { font-family: "JetBrains Mono", monospace; letter-spacing: 0; } .stat-hint { font-size: 11px; color: var(--text-muted-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .props-table { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .props-head { display: grid; grid-template-columns: 1.2fr 0.7fr 1.6fr; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--text-muted-3); letter-spacing: 0.14em; text-transform: uppercase; } .props-row { display: grid; grid-template-columns: 1.2fr 0.7fr 1.6fr; padding: 14px 16px; align-items: center; border-bottom: 1px solid var(--line-soft); } .props-row:last-child { border-bottom: none; } .props-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-ink); } .props-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .type-chip { display: inline-block; padding: 2px 8px; border-radius: 5px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 500; } .type-chip-scalar { background: var(--chip-blue-bg); color: var(--chip-blue-fg); } .type-chip-reference { background: var(--chip-purple-bg); color: var(--chip-purple-fg); } .type-chip-collection { background: var(--accent-soft); color: var(--accent-soft-fg); } .primary-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-soft-fg); } .virtual-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--chip-purple-bg); color: var(--chip-purple-fg); } /* ── Status / error pages ────────────────────────────────────────────────── */ .state-block { padding-top: 40px; max-width: 580px; } .state-block h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; } .state-block p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; } /* ── Unauthorized standalone page ────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--page-bg); padding: 24px; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 36px; max-width: 460px; width: 100%; } .auth-card .brand-mark { margin-bottom: 18px; } .auth-card h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-ink); margin-bottom: 8px; } .auth-card p { color: var(--text-muted); margin-bottom: 12px; font-size: 14px; line-height: 1.55; } .auth-card code { font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text-body); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .sidebar { display: none; } .article-wrap { padding: 24px 20px 60px; } .hero-title { font-size: 38px; } .hero-lead { font-size: 17px; } } /* ── Scrollbars in sidebar ───────────────────────────────────────────────── */ .sidebar-nav::-webkit-scrollbar { width: 5px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; } /* ── Public form pages ───────────────────────────────────────────────────── */ .form-page { min-height: 100vh; background: var(--page-bg); padding: 40px 24px; display: flex; justify-content: center; } .form-shell { width: 100%; max-width: 1600px; } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 36px; /* Enable container queries so .form-grid below reacts to the card width instead of the viewport — important for iframe embeds. */ container-type: inline-size; container-name: form-card; } .form-header { margin-bottom: 24px; } .form-eyebrow { display: inline-block; padding: 3px 9px; background: var(--accent-soft); color: var(--accent-soft-fg); border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .form-title { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text-ink); margin: 0 0 8px; } .form-description { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; } /* Outer stack of groups: each group is a labelled section. */ .form-groups { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; } .form-group { display: flex; flex-direction: column; gap: 12px; } .form-group-title { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; font-size: 18px; font-weight: 600; color: var(--text-ink); margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); } /* * Responsive 12-col-ish grid that mirrors yellow-client's _flexForWidth(): * fewer columns at narrower form widths so fields with a high flex still * occupy a sensible share of the row. Each field carries `--field-flex` * inline; the span is clamped to the current --cols via min(). * * Uses container queries on .form-card so the grid reacts to the FORM's own * width (important when embedded in a narrow iframe) rather than the viewport. * Modern browsers (Chrome/Safari/Firefox 2024+) evaluate min()/var() inside * the grid-column-end integer position. */ .form-grid { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 14px 16px; align-items: start; } @container form-card (min-width: 720px) { .form-grid { --cols: 2; } } @container form-card (min-width: 900px) { .form-grid { --cols: 3; } } @container form-card (min-width: 1080px) { .form-grid { --cols: 4; } } @container form-card (min-width: 1260px) { .form-grid { --cols: 5; } } @container form-card (min-width: 1440px) { .form-grid { --cols: 6; } } .form-field { display: flex; flex-direction: column; /* Span is clamped between 1 and the current column count. */ grid-column: span min(var(--field-flex, 12), var(--cols)); min-width: 0; } .form-label { font-size: 12.5px; font-weight: 600; color: var(--text-ink); margin-bottom: 6px; } .form-input { font-family: inherit; font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-ink); transition: border-color .12s, box-shadow .12s; } .form-input:focus { outline: none; border-color: var(--accent-bold); box-shadow: 0 0 0 3px var(--accent-soft); } .form-input[readonly] { background: var(--surface-2); color: var(--text-muted); } .form-input-mono { font-family: "JetBrains Mono", monospace; font-size: 13px; } .form-checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-ink); cursor: pointer; } .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } /* * Pseudo-input wrapper for the lone checkbox of a Boolean field. Matches the * vertical metrics of .form-input (padding + border) so booleans share the * same baseline as text inputs in the same grid row. No horizontal padding so * the checkbox stays flush-left with the label and help text above/below. */ .form-checkbox-input { display: flex; align-items: center; padding: 10px 0; border: 1px solid transparent; /* same total height as .form-input */ min-height: calc(14.5px + 20px + 2px); /* font-size + padding + borders */ box-sizing: border-box; } .form-checkbox-input input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-bold); cursor: pointer; margin: 0; } .form-checkbox-input input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.6; } /* File & signature fields ------------------------------------------------- */ .is-hidden { display: none !important; } .form-btn-secondary { font-family: inherit; font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-ink); cursor: pointer; transition: border-color .12s, background .12s; } .form-btn-secondary:hover { border-color: var(--accent-bold); } .form-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; } .form-file-row { display: flex; align-items: center; gap: 10px; /* Single line, never wrap: the filename truncates (ellipsis) so the download link and action button stay inline. No vertical padding — min-height + border-box make the bordered box exactly as tall as .form-input (font + its 10px*2 padding + 2px borders), the same trick as .form-checkbox-input. */ padding: 0 12px; min-height: calc(14.5px + 20px + 2px); box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .form-file-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form-file-download { flex: 0 0 auto; font-size: 13px; color: var(--accent-bold); text-decoration: none; } .form-file-download:hover { text-decoration: underline; } /* Compact, integrated action button inside the file row — sits within the input-height box without inflating it. */ .form-file-row .form-btn-secondary { flex: 0 0 auto; padding: 4px 10px; font-size: 13px; } .form-signature-pad { display: block; width: 100%; height: 180px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; } .form-signature-preview { display: block; max-width: 100%; height: auto; max-height: 180px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 8px; } .form-signature-actions { display: flex; gap: 10px; margin-top: 8px; } .form-help { font-size: 12.5px; color: var(--text-muted-2); margin: 6px 0 0; line-height: 1.45; } /* Language badge shown next to a LocalizedString field, marking which rendition (the active view language) the input edits. */ .form-actions { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .form-submit { padding: 11px 22px; background: var(--btn-ink-bg); color: var(--btn-ink-fg); border: none; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity .12s; } .form-submit:hover { opacity: 0.92; } .form-submit:active { opacity: 0.85; } /* Error card */ .form-error-card { border-color: var(--danger); } .form-error-card h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 24px; color: var(--danger); margin: 0 0 8px; } .form-error-detail { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-muted); white-space: pre-wrap; overflow-x: auto; } /* Success card */ .form-done-card { text-align: center; } .form-done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 32px; font-weight: 700; display: grid; place-items: center; margin: 0 auto 16px; } .form-done-uid { margin: 16px 0; font-size: 12.5px; color: var(--text-muted-2); } .form-done-uid code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; } .form-secondary-link { display: inline-block; margin-top: 12px; color: var(--link); font-size: 14px; font-weight: 500; text-decoration: none; } .form-secondary-link:hover { text-decoration: underline; } @media (max-width: 640px) { .form-card { padding: 24px; border-radius: 10px; } .form-title { font-size: 26px; } }