/* Styles for the generated content pages (templates, guides, comparisons, tools) and the
   verification page. app.css only contains the Tailwind classes the original pages use, so
   anything new is styled here. Light is the default; html.dark switches to the dark palette. */

:root {
  --c-text: #18181b;
  --c-muted: #52525b;
  --c-faint: #71717a;
  --c-line: #e4e4e7;
  --c-panel: #ffffff;
  --c-soft: #f4f4f5;
  --c-accent: #6366f1;
  --c-accent-text: #4f46e5;
  --c-ok: #047857;
  --c-ok-bg: rgba(16, 185, 129, 0.1);
  --c-bad: #be123c;
  --c-bad-bg: rgba(244, 63, 94, 0.1);
  --c-warn: #b45309;
  --c-warn-bg: rgba(245, 158, 11, 0.12);
}
html.dark {
  --c-text: #f4f4f5;
  --c-muted: #a1a1aa;
  --c-faint: #71717a;
  --c-line: rgba(255, 255, 255, 0.08);
  --c-panel: rgba(24, 24, 27, 0.6);
  --c-soft: rgba(255, 255, 255, 0.04);
  --c-accent-text: #818cf8;
  --c-ok: #34d399;
  --c-bad: #fb7185;
  --c-warn: #fbbf24;
}

/* Page frame */
.page { max-width: 64rem; margin: 0 auto; padding: 3rem 1rem; width: 100%; flex: 1; box-sizing: border-box; }
.page-narrow { max-width: 46rem; }
@media (min-width: 640px) { .page { padding: 3rem 1.5rem; } }
.crumbs { font-size: 0.75rem; color: var(--c-faint); margin-bottom: 1rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-text); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-text); margin: 0; }
.page-title { font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 0.5rem 0 0; }
@media (min-width: 640px) { .page-title { font-size: 2.25rem; } }
.lede { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--c-muted); max-width: 46rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.cta-note { font-size: 0.75rem; color: var(--c-faint); }

/* Buttons */
.btn-cta, .btn-plain {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit;
}
.btn-cta { background: var(--c-accent); color: #fff; }
.btn-cta:hover { background: #818cf8; }
.btn-plain { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn-plain:hover { background: var(--c-soft); }

/* Long-form text */
.content { margin-top: 2.5rem; max-width: 46rem; color: var(--c-text); font-size: 0.9375rem; line-height: 1.75; }
.content h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin: 2.25rem 0 0.75rem; }
.content h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.content p { margin: 0 0 1rem; }
.content ul, .content ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.content li { margin: 0.35rem 0; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.content code { font-family: 'JetBrains Mono', monospace; font-size: 0.8125em; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 0.375rem; padding: 0.05rem 0.35rem; }
.content strong { font-weight: 600; }
.content table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.875rem; display: block; overflow-x: auto; }
.content th, .content td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--c-line); }
.content thead th { font-weight: 600; background: var(--c-soft); }
.content tbody td:first-child { font-weight: 500; color: var(--c-muted); }
.callout { border-left: 3px solid var(--c-accent); background: var(--c-soft); padding: 0.75rem 1rem; border-radius: 0 0.5rem 0.5rem 0; margin: 0 0 1.25rem; font-size: 0.875rem; }
.muted { color: var(--c-faint); font-size: 0.8125rem; }

/* Two-column feature blocks and panels */
.split { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }
.split h2, .panel h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; }
.checks { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.checks li { position: relative; padding-left: 1.5rem; margin: 0.6rem 0; color: var(--c-text); }
.checks li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 700; }
.steps { padding-left: 1.25rem; margin: 0; font-size: 0.875rem; list-style: decimal; }
.steps li { margin: 0.6rem 0; }
.panel { margin-top: 3rem; border: 1px solid var(--c-line); background: var(--c-panel); border-radius: 1rem; padding: 1.5rem; }
.panel p { color: var(--c-muted); font-size: 0.875rem; margin: 0.5rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 0.375rem; padding: 0.15rem 0.45rem; }
.sample { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; border: 1px dashed var(--c-line); border-radius: 0.75rem; padding: 1rem 1.25rem; text-align: center; }
.sample .s-title { font-weight: 700; letter-spacing: 0.08em; font-size: 0.8125rem; }
.sample .s-name { font-size: 1.25rem; font-style: italic; margin: 0.25rem 0; font-family: 'Playfair Display', serif; }
.faq { margin-top: 3rem; max-width: 46rem; }
.faq h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; }
.faq details { border-bottom: 1px solid var(--c-line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--c-muted); }

/* Hub card grids */
.cards { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card-link { display: block; border: 1px solid var(--c-line); background: var(--c-panel); border-radius: 1rem; padding: 1.25rem; text-decoration: none; color: var(--c-text); transition: border-color 0.15s; }
.card-link:hover { border-color: var(--c-accent); }
.card-link h3 { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.card-link p { font-size: 0.8125rem; color: var(--c-muted); margin: 0.35rem 0 0; line-height: 1.6; }
.section-title { font-size: 1.125rem; font-weight: 600; margin: 3rem 0 0; }

/* Email sign-up box */
.signup { margin-top: 3rem; border: 1px solid var(--c-line); background: var(--c-soft); border-radius: 1rem; padding: 1.25rem; max-width: 46rem; }
.signup p { margin: 0; font-size: 0.875rem; }
.signup .signup-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.signup input { flex: 1 1 14rem; min-width: 0; }
.signup small { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--c-faint); }

/* Form controls on content pages */
.tool-form input, .tool-form select, .tool-form textarea, .signup input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 0.35rem; padding: 0.55rem 0.7rem;
  font: inherit; font-size: 0.875rem; color: var(--c-text); background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: 0.5rem;
}
.tool-form textarea { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; }
.tool-form input:focus, .tool-form select:focus, .tool-form textarea:focus, .signup input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* Tools */
.tool { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .tool { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; } }
.tool-form { display: grid; gap: 1rem; border: 1px solid var(--c-line); background: var(--c-panel); border-radius: 1rem; padding: 1.25rem; font-size: 0.8125rem; font-weight: 500; }
.tool-form-wide { grid-column: 1 / -1; }
.tool-output, .tool-results { min-width: 0; }
.tool-output { border: 1px solid var(--c-line); background: var(--c-panel); border-radius: 1rem; padding: 1.25rem; font-size: 0.875rem; }
[data-tool="checker"] .tool-output { grid-column: 1 / -1; }
[data-tool="checker"] .tool-output:empty { display: none; }
.tool-output ul { padding-left: 1.1rem; margin: 0.75rem 0 0; list-style: disc; }
.tool-output li { margin: 0.35rem 0; }
.tool-big { font-size: 2rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.tool-big span { font-size: 0.9375rem; font-weight: 500; color: var(--c-muted); letter-spacing: 0; }
.tool-results { display: grid; gap: 1rem; }
.tool-result { border: 1px solid var(--c-line); background: var(--c-panel); border-radius: 1rem; padding: 1.25rem; font-size: 0.875rem; line-height: 1.6; }
.tool-result p { margin: 0.25rem 0; }
.tool-result-title { font-weight: 700; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--c-accent-text); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
ul.tool-issues { list-style: none; padding: 0; }
.tool-issues li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.65rem; border-radius: 0.5rem; margin: 0.4rem 0; }
.tool-issues li span { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.tool-issues .is-error { background: var(--c-bad-bg); }
.tool-issues .is-error span { color: #fff; background: var(--c-bad); }
.tool-issues .is-warn { background: var(--c-warn-bg); }
.tool-issues .is-warn span { color: #fff; background: var(--c-warn); }
.tool-issues .is-tip { background: var(--c-soft); }
.tool-issues .is-tip span { color: #fff; background: var(--c-faint); }

/* Verification page */
.verify-status { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; margin-top: 0.75rem; }
.verify-status.ok { background: var(--c-ok-bg); color: var(--c-ok); }
.verify-status.bad { background: var(--c-bad-bg); color: var(--c-bad); }
.verify-list { margin: 1.5rem 0 0; }
.verify-list div { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--c-line); }
@media (min-width: 640px) { .verify-list div { grid-template-columns: 10rem 1fr; gap: 1.5rem; } }
.verify-list dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-faint); }
.verify-list dd { margin: 0; font-size: 0.9375rem; }
.btn-linkedin { display: inline-flex; align-items: center; gap: 0.5rem; background: #0a66c2; color: #fff; border-radius: 0.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; margin-top: 1.5rem; }
.btn-linkedin:hover { background: #004182; }
.verify-foot { border-top: 1px solid var(--c-line); }
.verify-foot > div { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; font-size: 0.875rem; color: var(--c-muted); }