:root { /* Opt into themed native form-control chrome (scrollbars, the open lives outside the form and is associated via the HTML5 form="validate-form" attribute so it still posts. */ .panel-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.55rem 0.85rem; margin-bottom: 0.6rem; overflow-x: auto; /* if the row is ever narrower than its content, fall back to horizontal scroll rather than wrap */ } .panel-toolbar::-webkit-scrollbar { display: none; } .panel-toolbar { scrollbar-width: none; } .panel-toolbar-field { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.55rem 0.1rem 0.7rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; transition: border-color 120ms ease, box-shadow 120ms ease; } .panel-toolbar-field:hover { border-color: var(--border); } .panel-toolbar-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15); } .panel-toolbar-icon { color: var(--muted); flex: none; } .panel-toolbar-field select { border: 0; background: transparent; padding: 0.4rem 0.15rem; padding-right: 1.25rem; font-size: 0.85rem; font-weight: 500; color: var(--text); min-width: 0; width: auto; cursor: pointer; /* Inline chevron (muted, 10px) */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; background-size: 10px; appearance: none; -webkit-appearance: none; } .panel-toolbar-field select:focus { outline: none; } [data-theme="dark"] .panel-toolbar-field select { background-image: url("data:image/svg+xml;utf8,"); } @media (max-width: 640px) { .panel-toolbar-field { width: 100%; justify-content: flex-start; } .panel-toolbar-field select { flex: 1; } } .editor-sub kbd { display: inline-block; padding: 0.05rem 0.4rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.75rem; background: var(--code-bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--text); } /* --- Example query chips --- */ .examples { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; border: 0; } .examples-label { font-size: 0.75rem; color: var(--muted); margin-right: 0.25rem; letter-spacing: 0.02em; } .chip { appearance: none; display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: filter 120ms ease; } .chip:hover { filter: brightness(0.97); } .chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); } /* Same soft pastel treatment as the .hero-trust privacy badge — uses semantic tokens so light+dark modes stay consistent. One color per example, hinting at the outcome you'll see when clicked. */ /* Border uses color-mix() to soften the -fg color against the chip's bg, so the outline feels related to the text without being as dark. */ .chip[data-example="valid"] { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok-fg) 28%, var(--ok-bg)); } .chip[data-example="missing_standard"] { background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn-fg) 28%, var(--warn-bg)); } .chip[data-example="unknown_table"] { background: var(--err-bg); color: var(--err-fg); border-color: color-mix(in srgb, var(--err-fg) 28%, var(--err-bg)); } .chip[data-example="multi_statement"] { background: var(--info-bg); color: var(--info-fg); border-color: color-mix(in srgb, var(--info-fg) 28%, var(--info-bg)); } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Refined primary CTA (used on the Validate SQL button) --- */ .btn-validate { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.25rem; background: var(--ok-bg); color: var(--ok-fg); border: 1px solid color-mix(in srgb, var(--ok-fg) 32%, var(--ok-bg)); border-radius: 8px; font-size: 0.95rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, filter 120ms ease; } .btn-validate:hover { background: color-mix(in srgb, var(--ok-fg) 12%, var(--ok-bg)); border-color: color-mix(in srgb, var(--ok-fg) 50%, var(--ok-bg)); } .btn-validate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-validate:disabled { opacity: 0.55; cursor: not-allowed; } /* Treat .btn-validate as the new primary so it overrides the older button[type="submit"] rule when this class is present. */ button[type="submit"].btn-validate { margin-left: auto; } .btn-validate svg { flex: none; } /* Primary-action bar that sits outside/below the editor panel, right-aligned. The submit button uses the HTML5 form="validate-form" attribute so it still submits the form even though it's outside the
element. */ .panel-footer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; /* Symmetric spacing above and below the primary Validate button. .editor-form's own margin-bottom is set to 0 (see above) so neither side of this gap is affected by margin collapsing. */ margin-top: 1.5rem; margin-bottom: 1.5rem; } .panel-footer-actions .htmx-indicator { color: var(--muted); font-size: 0.9rem; } @media (max-width: 640px) { .panel-footer-actions { justify-content: stretch; } .panel-footer-actions .btn-validate { flex: 1; } } /* --- Field group inside the toolbar row --- */ .row .field { display: inline-flex; align-items: center; gap: 0.5rem; } .row .field > label { margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .row .field select { width: auto; min-width: 180px; } /* --- Loading spinner --- */ .htmx-indicator { display: none; align-items: center; gap: 0.5rem; } .htmx-request .htmx-indicator { display: inline-flex; } .spinner { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: fastssv-spin 0.7s linear infinite; flex: none; } @keyframes fastssv-spin { to { transform: rotate(360deg); } } /* --- Empty state for results panel --- */ .results-empty { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.75rem 1rem; color: var(--muted); font-size: 0.9rem; text-align: center; } .results-empty svg { flex: none; color: var(--muted); } /* --- FAQ section --- */ .faq { max-width: none; margin: 2rem 0 0; padding: 0; } .faq h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .faq details { border-bottom: 1px solid var(--border); padding: 0.1rem 0; } .faq details:first-of-type { border-top: 1px solid var(--border); } .faq summary { list-style: none; cursor: pointer; padding: 0.95rem 2rem 0.95rem 0; font-size: 0.95rem; font-weight: 500; color: var(--text); position: relative; transition: color 120ms ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 0.25rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-75%) rotate(45deg); transition: transform 150ms ease, border-color 120ms ease; } .faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); } .faq summary:hover { color: var(--accent); } .faq summary:hover::after { border-color: var(--accent); } .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .faq-body { padding: 0 0 1rem 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .faq-body p { margin: 0 0 0.5rem 0; } .faq-body p:last-child { margin-bottom: 0; } .faq-body code { font-size: 0.82rem; } .faq-body a { color: var(--accent); text-decoration: none; } .faq-body a:hover { text-decoration: underline; } /* Call-to-action link — stands out from body prose so the "Open an issue" link reads as a real action, not ordinary inline link copy. */ .faq-body .faq-cta { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.85rem; background: var(--accent); color: #ffffff; border-radius: 6px; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background 120ms ease; margin-top: 0.25rem; } .faq-body .faq-cta:hover { background: var(--accent-hover); text-decoration: none; } /* Remove large default section margin from the first .panel after the hero so the hero + editor feel visually connected. */ .hero + .panel { margin-top: 0; }