/*
 * "Code editor" theme — loaded LAST on every page (layouts/main.php, layouts/auth.php).
 * variables.css carries the palette; this file only overrides the rules that had
 * light colours written in the clear (#fff, indigo shadows, gradients).
 */

body {
    background: var(--bg);
    color: var(--gray-800);
}

/* Keep script-controlled states hidden even when components use flex or grid. */
[hidden] { display: none !important; }

::selection { background: rgba(63, 185, 80, 0.35); color: var(--gray-900); }

h1, h2, h3, h4,
.site-logo, .site-nav a, .btn, .badge, .hero-badge,
.section-title, .pricing-name, .pricing-price, .stat-value, .stat-label,
.question-section-title, .question-label, .form-label, .draft-label,
.step-number, .prompt-stat-value, .export-info strong, .footer-col h4 {
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

h1, h2, h3 { color: var(--gray-900); }
code, pre, kbd { font-family: var(--font-mono); }
:not(pre) > code {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
}

/* Header ---------------------------------------------------------------- */
.site-header {
    background: rgba(13, 17, 23, 0.88);
    border-bottom: 1px solid var(--gray-200);
}
.site-logo { color: var(--gray-900); font-weight: 800; }
.site-logo::before { content: "›"; color: var(--primary); margin-right: 0.35em; }
.site-logo span { color: var(--primary); }
.site-nav a { color: var(--gray-600); font-size: 0.85rem; }
.site-nav a:hover { color: var(--gray-900); }
.nav-mobile-toggle { color: var(--gray-800); }
@media (max-width: 768px) {
    .site-nav { background: var(--bg); border-top: 1px solid var(--gray-200); }
}

/* Buttons ---------------------------------------------------------------- */
.btn { border-radius: var(--radius-md); }
.btn-primary,
.btn-primary:hover,
.site-nav a.btn-header-cta,
.site-nav a.btn-header-cta:hover,
.btn-header-cta,
.btn-header-cta:hover {
    color: var(--on-primary);
}
.btn-primary:hover, .btn-header-cta:hover { background: var(--primary-hover); }
.btn-header-cta {
    border-radius: var(--radius-md);
    box-shadow: none;
}
.btn-header-cta:hover { box-shadow: none; transform: none; }
.btn-secondary,
.btn-secondary:hover {
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
}
.btn-outline { color: var(--gray-800); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--primary); color: var(--gray-900); background: var(--primary-50); }
.btn-ghost { color: var(--gray-600); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.spinner { border-color: rgba(13, 17, 23, 0.25); border-top-color: var(--on-primary); }

/* Surfaces --------------------------------------------------------------- */
.card,
.draft-box,
.auth-card,
.export-card,
.seo-link-card,
.pricing-card {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    box-shadow: none;
}
.card:hover, .card-clickable:hover { border-color: var(--gray-300); box-shadow: none; }
.form-input, .form-select, .form-textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    background: var(--bg);
    color: var(--gray-900);
    border-color: var(--gray-300);
}
.form-input::placeholder, .form-textarea::placeholder, textarea::placeholder, input::placeholder { color: var(--gray-400); }
.form-input:focus, .form-select:focus, .form-textarea:focus, textarea:focus, input:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
}
select option { background: var(--surface); color: var(--gray-900); }

/* Hero ------------------------------------------------------------------- */
.hero {
    background:
        linear-gradient(rgba(13, 17, 23, 0.92), rgba(13, 17, 23, 1)),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(240, 246, 252, 0.035) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(240, 246, 252, 0.035) 31px 32px);
}
.hero h1 .gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary);
}
.hero-badge {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(63, 185, 80, 0.35);
    font-size: 0.78rem;
}
.hero-subtitle, .section-subtitle { color: var(--gray-500); }
.hero-proof-item { color: var(--gray-500); }

.seo-hero { background: var(--bg); border-bottom: 1px solid var(--gray-200); }
.section-alt, .how-it-works { background: var(--surface) !important; }
section[style*="gray-50"] { background: var(--surface) !important; }

/* Call-to-action band (was an indigo → violet gradient) */
.cta-section {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-top: 2px solid var(--primary);
    color: var(--gray-800);
}
.cta-section h2 { color: var(--gray-900); }
.cta-section p { color: var(--gray-500); }
.cta-section .btn { background: var(--primary); color: var(--on-primary); }

/* Code / spec output ----------------------------------------------------- */
.home-code, .result-cli, .api-key-usage, .prompt-preview, .prompt-output, pre.example-spec {
    background: var(--surface-sunken);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
}
.prompt-toolbar { background: var(--surface); border-bottom: 1px solid var(--gray-200); }

/* Pricing ---------------------------------------------------------------- */
.pricing-card.featured { border: 1px solid var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pricing-popular { background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); }
.pricing-price { color: var(--gray-900); }
.pricing-price span, .pricing-desc { color: var(--gray-500); }
.pricing-features li { color: var(--gray-700); }

/* Notices ---------------------------------------------------------------- */
.result-notice { background: var(--primary-50); border-color: rgba(63, 185, 80, 0.45); color: var(--gray-800); }
.draft-assumptions { background: var(--warning-light); border-color: rgba(210, 153, 34, 0.5); color: var(--gray-800); }
.draft-assumptions-warn { background: var(--error-light); border-color: rgba(248, 81, 73, 0.5); }
.api-key-new { background: var(--primary-50); border-color: var(--primary); }
.upgrade-banner { background: var(--surface) !important; border-color: var(--gray-200) !important; }
.flash, .alert { color: var(--gray-900); }

/* Audit tool (light tints written in the clear) */
.audit-line.cut { background: var(--error-light); }
.audit-input, .audit-output, .audit-result, .audit-panel { background: var(--surface); color: var(--gray-800); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--surface-sunken); border-top: 1px solid var(--gray-200); }
.site-footer a { color: var(--gray-500); }
.site-footer a:hover { color: var(--gray-900); }

/* Remaining light backgrounds written in the clear */
.questionnaire-submit { background: rgba(13, 17, 23, 0.94); border-top-color: var(--gray-200); }
.audit-line.offload { background: var(--warning-light); }
.alert-error, .flash-error { border-color: rgba(248, 81, 73, 0.5); }
.dashboard-hero, .welcome-banner { background: var(--surface) !important; }
.progress-bar { background: var(--gray-200); }

/* Home hero: copy + editor window showing the real output ------------------ */
.hero-editor { padding: 4.5rem 0 4rem; text-align: left; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: start; }
.hero-copy h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.1; margin: 0.6rem 0 1rem; text-align: left; }
.hero-copy .hero-subtitle { margin: 0 0 1.25rem; max-width: none; text-align: left; font-size: 1.05rem; }
.hero-prompt { font-family: var(--font-mono); color: var(--primary); font-size: 0.9rem; }
.caret { display: inline-block; margin-left: 2px; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
.hero-copy .draft-box { margin: 0; max-width: none; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; list-style: none; padding: 0; margin: 1rem 0 0; justify-content: flex-start; }
.hero-proof li { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-500); }
.hero-proof li::before { content: "✓ "; color: var(--primary); }

.editor { background: var(--surface-sunken); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); min-width: 0; }
.editor-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--surface); border-bottom: 1px solid var(--gray-200); }
.editor-dots { display: inline-flex; gap: 6px; }
.editor-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--gray-300); display: block; }
.editor-dots i:first-child { background: #f85149; } .editor-dots i:nth-child(2) { background: #d29922; } .editor-dots i:last-child { background: #3fb950; }
.editor-path { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-500); }
.editor-tabs { display: flex; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--gray-200); }
.editor-tab { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-500); background: none; border: 0; border-right: 1px solid var(--gray-200); padding: 0.55rem 0.95rem; cursor: pointer; white-space: nowrap; border-top: 2px solid transparent; }
.editor-tab:hover { color: var(--gray-900); }
.editor-tab.is-active { color: var(--gray-900); background: var(--surface-sunken); border-top-color: var(--primary); }
.editor-tab-badge { font-size: 0.65rem; background: var(--primary); color: var(--on-primary); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.editor-body { margin: 0; padding: 1rem 1.1rem; height: 470px; overflow: auto; font-size: 0.78rem; line-height: 1.6; color: var(--gray-700); white-space: pre-wrap; word-break: break-word; background: none; border: 0; }
.editor-body code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
@media (max-width: 1000px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .editor-body { height: 340px; }
}

/* Deep spec card (result page) --------------------------------------------- */
.deep-card { background: var(--surface); border: 1px solid var(--gray-200); border-left: 3px solid var(--primary); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; margin: 0 0 1.5rem; }
.deep-card.is-done { border-left-color: var(--primary); }
.deep-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.deep-head h2 { font-size: 1.2rem; margin: 0; }
.deep-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--primary); border: 1px solid rgba(63, 185, 80, 0.45); border-radius: 4px; padding: 1px 7px; }
.deep-lead { color: var(--gray-600); margin: 0 0 1rem; max-width: 70ch; }
.deep-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.deep-table { background: var(--surface-sunken); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 0.6rem 0.7rem; }
.deep-table-name { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-900); margin-bottom: 0.45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deep-row { display: flex; justify-content: space-between; gap: 6px; margin: 5px 0; }
.deep-row span { height: 7px; border-radius: 3px; background: var(--gray-200); filter: blur(0.4px); }
.deep-row span:last-child { background: rgba(63, 185, 80, 0.28); }
.deep-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; list-style: none; padding: 0; margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--gray-600); }
.deep-stats strong { font-family: var(--font-mono); color: var(--gray-900); }
.deep-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.deep-note { font-size: 0.85rem; color: var(--gray-500); margin: 0; }
.deep-note a { color: var(--primary); }
.deep-progress-bar { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.deep-progress-bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width 1s linear; }
.deep-error { color: var(--error); font-size: 0.9rem; margin-top: 0.75rem; }
.deep-error a { color: var(--primary); }
@media (max-width: 760px) { .deep-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pricing: free vs deep, side by side ----------------------------------------- */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.compare-pane { background: var(--surface-sunken); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.compare-pane.is-deep { border-color: rgba(63, 185, 80, 0.55); }
.compare-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.9rem; background: var(--surface); border-bottom: 1px solid var(--gray-200); font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-700); }
.compare-head em { font-style: normal; font-size: 0.72rem; color: var(--gray-500); }
.compare-pane.is-deep .compare-head em { color: var(--primary); }
.compare pre { margin: 0; padding: 0.9rem 1rem; font-size: 0.74rem; line-height: 1.55; color: var(--gray-700); white-space: pre-wrap; word-break: break-word; height: 380px; overflow: auto; }
.compare-caption { margin: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--gray-200); font-size: 0.85rem; color: var(--gray-500); }
@media (max-width: 860px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.pricing-features li.is-off { color: var(--gray-400); text-decoration: line-through; }
.pricing-features li.is-off::before { opacity: 0.35; }
.pricing-reassure-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; list-style: none; padding: 0; margin: 1.5rem 0 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-500); }
.pricing-reassure-list li::before { content: "✓ "; color: var(--primary); }
.prompt-output-deep { margin-top: 1.5rem; border-color: rgba(63, 185, 80, 0.55); }
.prompt-file-name { color: var(--gray-500); font-size: var(--text-sm); margin-left: var(--space-3); font-family: var(--font-mono); }