/* ================================================================ */
/* OpenAlternative — DESIGN.md Design System                         */
/* LaunchRanked-style: warm off-white canvas, text-first, 1px warm   */
/* borders, near-black primary CTAs, minimal colour.                 */
/*                                                                   */
/* Loaded LAST (after assets/css/style.min.css) so these rules win.  */
/* Do NOT edit style.min.css — it is the compiled Tailwind build.    */
/* ================================================================ */

/* ------------------------------------------------------------------ */
/* 1. Design Tokens                                                   */
/* ------------------------------------------------------------------ */
:root {
    /* Fonts (loaded via Google Fonts in css-optimization.php) */
    --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Surfaces */
    --color-surface-0: #ffffff;
    --color-surface-50: #fafaf7;
    --color-surface-100: #f1efe9;
    --color-surface-200: #e7e5df;
    --color-surface-300: #d6d3cb;

    /* Ink / text */
    --color-ink-900: #111111;
    --color-ink-800: #262523;
    --color-ink-700: #3e3d38;
    --color-ink-600: #55534e;
    --color-ink-500: #6b6b66;
    --color-ink-400: #a8a49b;

    /* Brand — primary is near-black in this design */
    --color-brand: #111111;
    --color-brand-dark: #262523;
    --color-brand-light: #d6d3cb;
    --color-brand-bg: #f1efe9;

    /* Semantic */
    --color-info: #111111;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows — soft, low-amplitude */
    --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.05);
    --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.06), 0 1px 2px -1px rgba(17, 17, 17, 0.05);
    --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.06), 0 2px 4px -2px rgba(17, 17, 17, 0.05);
    --shadow-lg: 0 10px 18px -4px rgba(17, 17, 17, 0.08), 0 4px 6px -6px rgba(17, 17, 17, 0.05);
    --shadow-xl: 0 20px 30px -8px rgba(17, 17, 17, 0.10), 0 8px 12px -8px rgba(17, 17, 17, 0.06);
}

/* ------------------------------------------------------------------ */
/* 2. Global base overrides                                           */
/* ------------------------------------------------------------------ */

/* Warm canvas + near-black text on the body element (uses slate utilities) */
body {
    background-color: var(--color-surface-50);
    color: var(--color-ink-700);
}

/* Global default border colour — warm grey instead of slate-200 */
*, ::before, ::after {
    border-color: var(--color-surface-200);
}

/* Selection + focus match the near-black primary */
::selection {
    background-color: #e9e7e0;
    color: #111111;
}

body,
input,
button,
select,
textarea {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-ink-900);
}

/* ------------------------------------------------------------------ */
/* 3. Tailwind palette remap — slate, blue, indigo, purple → warm       */
/*    neutral + near-black primary. Loaded last so it overrides the    */
/*    compiled Tailwind build.                                         */
/* ------------------------------------------------------------------ */

/* --- slate scale → warm grey --- */
.bg-slate-50             { background-color: #fafaf7; }
.bg-slate-50\/50         { background-color: rgba(250, 250, 247, 0.5); }
.bg-slate-100            { background-color: #f1efe9; }
.bg-slate-200            { background-color: #e7e5df; }
.bg-slate-300            { background-color: #d6d3cb; }
.bg-slate-400            { background-color: #a8a49b; }
.bg-slate-500            { background-color: #6b6b66; }
.bg-slate-600            { background-color: #55534e; }
.bg-slate-700            { background-color: #3e3d38; }
.bg-slate-800            { background-color: #262523; }
.bg-slate-900            { background-color: #111111; }
.bg-slate-950            { background-color: #0a0a08; }

.text-slate-50           { color: #fafaf7; }
.text-slate-100          { color: #f1efe9; }
.text-slate-200          { color: #e7e5df; }
.text-slate-300          { color: #d6d3cb; }
.text-slate-400          { color: #a8a49b; }
.text-slate-500          { color: #6b6b66; }
.text-slate-600          { color: #55534e; }
.text-slate-700          { color: #3e3d38; }
.text-slate-800          { color: #262523; }
.text-slate-900          { color: #111111; }

.border-slate-50         { border-color: #fafaf7; }
.border-slate-100        { border-color: #f1efe9; }
.border-slate-200        { border-color: #e7e5df; }
.border-slate-300        { border-color: #d6d3cb; }
.border-slate-400        { border-color: #a8a49b; }
.border-slate-500        { border-color: #6b6b66; }
.border-slate-600        { border-color: #55534e; }
.border-slate-700        { border-color: #3e3d38; }
.border-slate-800        { border-color: #262523; }
.border-slate-900        { border-color: #111111; }

.ring-slate-900          { --tw-ring-color: #111111; }
.shadow-slate-900\/20    { --tw-shadow-color: rgba(17, 17, 17, 0.20); }

/* --- neutral scale → warm grey (mirrors slate remap) --- */
.bg-neutral-50           { background-color: #fafaf7; }
.bg-neutral-100          { background-color: #f1efe9; }
.bg-neutral-200          { background-color: #e7e5df; }
.bg-neutral-300          { background-color: #d6d3cb; }
.bg-neutral-400          { background-color: #a8a49b; }
.bg-neutral-500          { background-color: #6b6b66; }
.bg-neutral-600          { background-color: #55534e; }
.bg-neutral-700          { background-color: #3e3d38; }
.bg-neutral-800          { background-color: #262523; }
.bg-neutral-900          { background-color: #111111; }

.text-neutral-50         { color: #fafaf7; }
.text-neutral-100        { color: #f1efe9; }
.text-neutral-200        { color: #e7e5df; }
.text-neutral-300        { color: #d6d3cb; }
.text-neutral-400        { color: #a8a49b; }
.text-neutral-500        { color: #6b6b66; }
.text-neutral-600        { color: #55534e; }
.text-neutral-700        { color: #3e3d38; }
.text-neutral-800        { color: #262523; }
.text-neutral-900        { color: #111111; }

.border-neutral-100      { border-color: #f1efe9; }
.border-neutral-200      { border-color: #e7e5df; }
.border-neutral-300      { border-color: #d6d3cb; }
.border-neutral-400      { border-color: #a8a49b; }
.border-neutral-500      { border-color: #6b6b66; }
.border-neutral-600      { border-color: #55534e; }
.border-neutral-700      { border-color: #3e3d38; }
.border-neutral-800      { border-color: #262523; }
.border-neutral-900      { border-color: #111111; }

.hover\:bg-neutral-50:hover     { background-color: #f6f4ef; }
.hover\:bg-neutral-100:hover    { background-color: #ece9e2; }
.hover\:bg-neutral-200:hover    { background-color: #e2dfd7; }
.hover\:bg-neutral-800:hover    { background-color: #383733; }
.hover\:bg-neutral-900:hover    { background-color: #262523; }

.hover\:text-neutral-500:hover  { color: #55534e; }
.hover\:text-neutral-700:hover  { color: #262523; }
.hover\:text-neutral-900:hover  { color: #111111; }

.hover\:border-neutral-200:hover { border-color: #e7e5df; }
.hover\:border-neutral-300:hover { border-color: #d6d3cb; }
.hover\:border-neutral-400:hover { border-color: #a8a49b; }

/* --- blue scale → near-black primary / warm neutral --- */
.bg-blue-50              { background-color: #f4f1ea; }
.bg-blue-100             { background-color: #ece9e1; }
.bg-blue-200             { background-color: #ddd8cc; }
.bg-blue-300             { background-color: #c6c1b2; }
.bg-blue-400             { background-color: #a29c8e; }
.bg-blue-500             { background-color: #111111; }
.bg-blue-600             { background-color: #262523; }
.bg-blue-700             { background-color: #37342e; }
.bg-blue-800             { background-color: #4a463e; }

.text-blue-50            { color: #f4f1ea; }
.text-blue-100           { color: #ece9e1; }
.text-blue-200           { color: #ddd8cc; }
.text-blue-300           { color: #c6c1b2; }
.text-blue-400           { color: #a29c8e; }
.text-blue-500           { color: #111111; }
.text-blue-600           { color: #262523; }
.text-blue-700           { color: #37342e; }
.text-blue-800           { color: #4a463e; }

.border-blue-50          { border-color: #f4f1ea; }
.border-blue-100         { border-color: #ece9e1; }
.border-blue-200         { border-color: #ddd8cc; }
.border-blue-300         { border-color: #c6c1b2; }
.border-blue-400         { border-color: #a29c8e; }
.border-blue-500         { border-color: #111111; }
.border-blue-600         { border-color: #262523; }
.border-blue-700         { border-color: #37342e; }

.shadow-blue-500\/10     { --tw-shadow-color: rgba(17, 17, 17, 0.08); }
.shadow-blue-500\/30     { --tw-shadow-color: rgba(17, 17, 17, 0.25); }

/* --- indigo scale → warm neutral --- */
.bg-indigo-50            { background-color: #f4f1ea; }
.bg-indigo-100           { background-color: #ece9e1; }
.bg-indigo-500           { background-color: #111111; }
.bg-indigo-600           { background-color: #262523; }
.bg-indigo-700           { background-color: #37342e; }
.text-indigo-500         { color: #111111; }
.text-indigo-600         { color: #262523; }
.text-indigo-700         { color: #37342e; }
.border-indigo-100       { border-color: #ece9e1; }
.border-indigo-100\/50   { border-color: rgba(236, 233, 225, 0.5); }

/* --- purple scale → warm neutral --- */
.bg-purple-50            { background-color: #f4f1ea; }
.bg-purple-100           { background-color: #ece9e1; }
.bg-purple-500           { background-color: #111111; }
.bg-purple-600           { background-color: #262523; }
.bg-purple-700           { background-color: #37342e; }
.text-purple-500         { color: #111111; }
.text-purple-600         { color: #262523; }
.text-purple-700         { color: #37342e; }
.border-purple-100       { border-color: #ece9e1; }
.border-purple-200       { border-color: #ddd8cc; }

/* --- rose → danger tint (used sparingly) --- */
.rose-400                { color: #fb7185; }

/* --- success (green) — design-defined, keep meaningful --- */
.bg-green-50             { background-color: #effaf3; }
.bg-green-100            { background-color: #dcf3e7; }
.bg-green-200            { background-color: #b9e6d0; }
.bg-green-500            { background-color: #22c55e; }
.bg-green-600            { background-color: #16a34a; }
.bg-green-700            { background-color: #15803d; }
.text-green-50           { color: #effaf3; }
.text-green-100          { color: #f0fdf4; }
.text-green-500          { color: #22c55e; }
.text-green-600          { color: #16a34a; }
.text-green-700          { color: #15803d; }
.border-green-100        { border-color: #dcf3e7; }
.border-green-200        { border-color: #b9e6d0; }

/* --- warning (amber) — keep for stars / accents --- */
.bg-amber-100            { background-color: #fef3c7; }
.bg-amber-200            { background-color: #fde68a; }
.bg-amber-500            { background-color: #f59e0b; }
.bg-amber-600            { background-color: #d97706; }
.text-amber-400          { color: #fbbf24; }
.text-amber-500          { color: #f59e0b; }
.text-amber-600          { color: #d97706; }
.border-amber-200        { border-color: #fde68a; }
.border-amber-300        { border-color: #fcd34d; }

/* --- danger (red) — design #dc2626 --- */
.bg-red-50               { background-color: #fef2f2; }
.bg-red-100              { background-color: #fee2e2; }
.text-red-500            { color: #ef4444; }
.text-red-600            { color: #dc2626; }
.text-red-700            { color: #b91c1c; }
.border-red-100          { border-color: #fee2e2; }
.border-red-200          { border-color: #fecaca; }

/* --- hover / focus variants used across the theme --- */
.hover\:bg-slate-50:hover            { background-color: #f6f4ef; }
.hover\:bg-slate-100:hover           { background-color: #ece9e2; }
.hover\:bg-slate-200:hover           { background-color: #e2dfd7; }
.hover\:bg-slate-700:hover           { background-color: #4b4a44; }
.hover\:bg-slate-800:hover           { background-color: #383733; }
.hover\:bg-slate-900:hover           { background-color: #262523; }
.hover\:bg-blue-50:hover             { background-color: #f1eee6; }
.hover\:bg-blue-100:hover            { background-color: #e9e5dc; }
.hover\:bg-blue-500:hover            { background-color: #262523; }
.hover\:bg-blue-600:hover            { background-color: #3a3832; }
.hover\:bg-indigo-50:hover           { background-color: #f1eee6; }
.hover\:bg-indigo-100:hover          { background-color: #e9e5dc; }
.hover\:text-blue-500:hover          { color: #111111; }
.hover\:text-blue-600:hover          { color: #262523; }
.hover\:text-blue-700:hover          { color: #37342e; }
.hover\:text-slate-500:hover         { color: #55534e; }
.hover\:text-slate-700:hover         { color: #262523; }
.hover\:text-slate-900:hover         { color: #111111; }
.hover\:border-slate-200:hover       { border-color: #e7e5df; }
.hover\:border-slate-300:hover       { border-color: #d6d3cb; }
.hover\:border-blue-200:hover        { border-color: #c6c1b2; }
.hover\:border-blue-300:hover        { border-color: #a29c8e; }
.hover\:border-blue-500:hover        { border-color: #111111; }
.hover\:shadow-lg:hover              { --tw-shadow: 0 8px 16px -4px rgba(17, 17, 17, 0.08), 0 4px 6px -8px rgba(17, 17, 17, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.hover\:shadow-xl:hover              { --tw-shadow: 0 18px 28px -10px rgba(17, 17, 17, 0.10), 0 8px 10px -10px rgba(17, 17, 17, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

/* group-hover text/border — cards warm up to near-black instead of blue */
.group:hover .group-hover\:text-blue-600        { color: #262523; }
.group:hover .group-hover\:text-blue-700        { color: #37342e; }
.group:hover .group-hover\:border-blue-200      { border-color: #ddd8cc; }
.group:hover .group-hover\:border-blue-300      { border-color: #c6c1b2; }

/* group-hover backgrounds — warm neutral instead of cool slate */
.group:hover .group-hover\:bg-slate-50          { background-color: #fafaf7; }
.group:hover .group-hover\:bg-slate-100         { background-color: #f1efe9; }
.group:hover .group-hover\:bg-slate-200         { background-color: #e7e5df; }
.group:hover .group-hover\:bg-slate-300         { background-color: #d6d3cb; }
.group:hover .group-hover\:bg-blue-50           { background-color: #f4f1ea; }
.group:hover .group-hover\:bg-blue-100          { background-color: #ece9e1; }

/* focus ring on hero search — soft near-black instead of blue */
.focus\:ring-blue-500\/10:focus      { --tw-ring-color: rgba(17, 17, 17, 0.08); }
.focus\:border-blue-500:focus        { border-color: #111111; }
.group:focus-within .group-focus-within\:text-blue-500 { color: #55534e; }

/* ------------------------------------------------------------------ */
/* 4. Component tweaks — header, footer, hero, search, CTA            */
/* ------------------------------------------------------------------ */

/* Container — cap at 1200px on large screens instead of 1280px */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }
@media (min-width: 1536px) { .container { max-width: 1200px; } }

/* Header */
.site-header {
    background-color: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--color-surface-200);
}
.site-header .site-branding a {
    color: var(--color-ink-900);
}
.site-header .site-branding a:hover {
    color: var(--color-ink-700);
}
.mega-menu-trigger,
#mega-menu a {
    color: var(--color-ink-600);
}
.mega-menu-trigger:hover,
#mega-menu a:hover {
    color: var(--color-ink-900);
}

/* Search field — near-black focus state */
.search-field {
    border-radius: 9999px;
}
.search-field:focus {
    border-color: var(--color-ink-900);
    box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06);
    outline: none;
}
.search-field::placeholder {
    color: var(--color-ink-400);
}

/* Footer (dark band — matches Bottom CTA, warm ink palette) */
.site-footer {
    background: var(--color-ink-900);
    border-top: 1px solid var(--color-ink-800);
}
.site-footer a:hover {
    color: var(--color-surface-100);
}

/* Buttons — consistent control height (44px+) */
a[class*="rounded-full"].py-2\.5,
button[class*="rounded-full"].py-2\.5,
a.inline-flex.items-center.justify-center.h-12 {
    min-height: 44px;
}

/* Soft card shadow baseline (matches DESIGN.md 0 1px 2px shadow) */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
}

/* Archive / section headings */
.archive-hero h1,
.archive-title,
.page-header .page-title {
    color: var(--color-ink-900);
}

/* Pagination — current page near-black */
.pagination .page-numbers.current {
    background-color: var(--color-ink-900);
    border-color: var(--color-ink-900);
}
.pagination .page-numbers {
    border-color: var(--color-surface-200);
    color: var(--color-ink-700);
    box-shadow: var(--shadow-xs);
}
.pagination .page-numbers:hover {
    background-color: var(--color-surface-50);
    border-color: var(--color-surface-300);
    color: var(--color-ink-900);
}

/* Prose default ink (warm, not slate-blue) */
.prose {
    color: var(--color-ink-700);
}
.prose strong {
    color: var(--color-ink-900);
}

/* Mega menu panels (rendered from cached template) */
[class*="mega-menu-panel"] {
    border-color: var(--color-surface-200);
}

/* ------------------------------------------------------------------ */
/* 5. Submit page (page-submit.php)                                   */
/* ------------------------------------------------------------------ */

/* Form focus — warm ring instead of cool blue */
.focus\:ring-blue-100:focus,
.focus\:ring-blue-200:focus,
.focus\:ring-blue-300:focus    { --tw-ring-color: rgba(17, 17, 17, 0.10); }
.focus\:border-blue-500:focus  { border-color: #111111; }

/* Submit CTA — flat near-black, no gradient */
#step-form #submit-btn {
    background-color: #111111;
    background-image: none;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
#step-form #submit-btn:hover {
    background-color: #262523;
}

/* Radio/checkbox accent — near-black primary */
#step-form input[type="radio"],
#step-form input[type="checkbox"] {
    accent-color: #111111;
}

/* Bulk screenshot file chooser (file: prefixed = ::file-selector-button) */
.file\:bg-blue-50::file-selector-button               { background-color: #f4f1ea; }
.file\:bg-blue-100::file-selector-button              { background-color: #ece9e1; }
.file\:text-blue-700::file-selector-button            { color: #262523; }
.hover\:file\:bg-blue-100:hover::file-selector-button { background-color: #ece9e1; }

/* Controls / stepper utilities not present in the compiled Tailwind build */
.h-px                { height: 1px; }
.border-slate-300    { border-color: #d6d3cb; }
.bg-green-600        { background-color: #16a34a; }
.min-w-8             { min-width: 2rem; }

/* Rich-text editor (Quill Snow — theme-matched) */
.oa-editor-area { min-height: 168px; cursor: text; line-height: 1.7; }
.oa-editor-area:focus { outline: none; }

/* Toolbar + container shells */
.ql-toolbar.ql-snow {
    padding: 8px 10px;
    border: 1px solid var(--color-surface-200);
    border-radius: 12px 12px 0 0;
    background: #fafaf7;
}
.ql-container.ql-snow {
    border: 1px solid var(--color-surface-200);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    font-family: var(--font-sans, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 0.925rem;
}
.ql-container.ql-snow .ql-editor { min-height: 168px; color: #171717; line-height: 1.7; }

/* Quill editor content spacing — headings, paragraphs, lists */
.ql-editor p { margin: 0 0 0.75em; line-height: 1.7; }
.ql-editor p:last-child { margin-bottom: 0; }
.ql-editor h1 { font-size: 1.875rem; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.25; }
.ql-editor h2 { font-size: 1.5rem; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.3; }
.ql-editor h3 { font-size: 1.25rem; font-weight: 600; margin: 1em 0 0.5em; line-height: 1.35; }
.ql-editor h4 { font-size: 1.125rem; font-weight: 600; margin: 0.85em 0 0.4em; line-height: 1.4; }
.ql-editor ul, .ql-editor ol { margin: 0.5em 0 1em; padding-left: 1.5em; }
.ql-editor ul { list-style-type: disc; }
.ql-editor ol { list-style-type: decimal; }
.ql-editor li { margin: 0.3em 0; line-height: 1.7; }
.ql-editor li p { margin: 0; }
.ql-editor blockquote { border-left: 4px solid #e7e5df; padding: 0.5em 0 0.5em 1em; margin: 0.85em 0; color: #52525b; font-style: italic; }
.ql-editor pre.ql-syntax { background: #f5f5f0; border-radius: 8px; padding: 0.85em 1em; margin: 0.85em 0; font-size: 0.85em; line-height: 1.6; overflow-x: auto; }
.ql-editor code { background: #f5f5f0; border-radius: 4px; padding: 0.15em 0.35em; font-size: 0.875em; }
.ql-editor a { color: #2563eb; text-decoration: underline; }
.ql-editor a:hover { color: #1d4ed8; }

/* Scroll inside editor */
.ql-editor { max-height: 500px; overflow-y: auto; }
.ql-editor::-webkit-scrollbar { width: 6px; }
.ql-editor::-webkit-scrollbar-track { background: transparent; }
.ql-editor::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
.ql-editor::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

.oa-editor .ql-container.ql-snow:focus-within {
    border-color: #171717;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.10);
    border-radius: 0 0 12px 12px;
}

/* Placeholder */
.ql-editor.ql-blank::before {
    left: 16px;
    right: 16px;
    color: #a1a1a1;
    font-style: normal;
    font-family: inherit;
}

/* Toolbar buttons + pickers — warm ink on warm hover */
.ql-snow .ql-stroke { stroke: #3e3d38; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #3e3d38; }
.ql-snow.ql-toolbar .ql-picker-label { color: #3e3d38; }
.ql-snow .ql-picker-options {
    border: 1px solid var(--color-surface-200);
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 6px 8px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options { color: #3e3d38; }
.ql-snow .ql-picker-item, .ql-snow .ql-picker-label { color: #3e3d38; }
.ql-snow .ql-picker .ql-picker-item:hover,
.ql-snow .ql-picker .ql-picker-item.ql-selected {
    color: #111;
    background: #ece9e2;
    border-radius: 6px;
}
.ql-snow.ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
    color: #111;
    background: #ece9e2;
    border-radius: 6px;
}
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: #111; }

/* Checklist items */
.ql-editor li.ql-check[data-checked="true"] { color: #111; }
.ql-editor li.ql-check > .ql-ui::before { color: #6b6b66; }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active {
    color: #111;
    background: #ece9e2;
    border-radius: 6px;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: #111; }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: #111; }

/* Link tooltip */
.ql-snow .ql-tooltip {
    border-color: var(--color-surface-200);
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
.ql-snow .ql-tooltip input[type="text"] {
    border: 1px solid var(--color-surface-200);
    border-radius: 8px;
    color: #171717;
}
.ql-snow .ql-tooltip a.ql-action { color: #111; }
.ql-snow .ql-tooltip a.ql-remove::before { color: #55534e; }

/* Stepper progress line — guaranteed layout regardless of Tailwind build */
.oa-stepper-line {
    width: 56px;
    height: 1px;
    margin-top: 20px;
    margin-left: 12px;
    margin-right: 12px;
    background-color: var(--color-surface-200);
}
@media (min-width: 640px) {
    .oa-stepper-line {
        width: 96px;
    }
}
.oa-stepper-line.is-complete {
    background-color: #16a34a;
}

/* Plan/type cards — 1px warm border, soft shadow, no 2px outlines */
.plan-card {
    border-width: 1px;
    border-color: var(--color-surface-200);
}

/* ================================================================ */
/* end DESIGN.md design system                                       */
/* ================================================================ */
/* Missing responsive text-size utilities (not in compiled Tailwind) */
@media (min-width: 640px) {
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .sm\:text-\[13px\] { font-size: 13px; }
}

@media (min-width: 640px) {
    .sm\:w-14 { width: 3.5rem; }
    .sm\:h-14 { height: 3.5rem; }
}

/* Missing utilities — homepage listing toolbar */
.p-3\.5 { padding: 0.875rem; }
.p-0\.5 { padding: 0.125rem; }
.gap-2\.5 { gap: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.select-none { user-select: none; }
@media (min-width: 640px) { .sm\:justify-end { justify-content: flex-end; } }

/* Missing utilities — compact hero section */
.pb-8 { padding-bottom: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.max-w-lg { max-width: 32rem; }
.pr-3 { padding-right: 0.75rem; }
.pl-11 { padding-left: 2.75rem; }
.h-3\.5 { height: 0.875rem; }
.gap-1\.5 { gap: 0.375rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.text-\[11px\] { font-size: 11px; }
.right-1\.5 { right: 0.375rem; }
.top-1\.5 { top: 0.375rem; }
.w-1\.5 { width: 0.375rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
@media (min-width: 768px) {
    .md\:pt-16 { padding-top: 4rem; }
    .md\:pb-12 { padding-bottom: 3rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 640px) {
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* Missing utilities — single works layout */
.shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.w-80 { width: 20rem; }
.w-full { width: 100%; }
@media (min-width: 1024px) {
    .lg\:w-80 { width: 20rem; }
    .lg\:sticky { position: sticky; }
    .lg\:top-24 { top: 6rem; }
}

/* ------------------------------------------------------------------ */
/* Trending list top-5 slot zone: remove dividers between the shaded   */
/* slot rows so the green gradient reads as one continuous block.      */
/* 1st row keeps its block-start edge; the border under slot #5 stays. */
/* ------------------------------------------------------------------ */
.oa-listings[data-view="list"] .oa-l-row.oa-slot-row + .oa-l-row.oa-slot-row {
    border-top: 0;
}

/* ------------------------------------------------------------------ */
/* Adaptive text on shaded slot rows.                                  */
/* PHP sets --oa-desc / --oa-meta per row so darker slot backgrounds   */
/* get darker text and vice-versa. Higher specificity than Tailwind    */
/* text-slate-* utilities, so these win regardless of source order.    */
/* ------------------------------------------------------------------ */
.oa-l-row.oa-slot-row .oa-l-desc {
    color: var(--oa-desc, #64748b);
}
.oa-l-row.oa-slot-row .oa-l-meta {
    color: var(--oa-meta, #64748b);
}
.oa-l-row.oa-slot-row .oa-l-meta .font-semibold,
.oa-l-row.oa-slot-row .oa-l-meta .font-medium {
    color: var(--oa-meta, #64748b);
}
.oa-l-row.oa-slot-row .oa-l-meta svg.text-slate-300 {
    color: var(--oa-meta, #64748b);
}