/* Standalone content only. The frame, headings, cards and buttons live in site.css/home-layout.css.
   Result actions: standalone rolls use the homepage toolbar above their heading.
   Speech grid/polarity tags: specialized standalone result shapes, absent from the homepage.
   Editorial/related links/tables/FAQ: long standalone explanations and route lists, absent from its form. */
.result-actions { justify-content: flex-end; }
.result-actions[hidden] { display: none; }
/* No phantom second phone row: standalone toolbars contain only Export. */
.result-actions::after { content: none; }
/* Editorial titles may hyphenate; result headings have the full paper width. */
.generator-layout .section-label { width: fit-content; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* Direct result headings use the homepage section-head gap. */
.generator-result-sheet .section-label { margin-bottom: 1.25rem; overflow-wrap: normal; hyphens: none; }
.generator-form-sheet h1.section-label:has(> span) { display: block; border-bottom-color: transparent; }
.generator-form-sheet h1.section-label > span { border-bottom: 1px solid #dcdcdc; padding-bottom: 7px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.generator-result-sheet #output > .result-actions + .section { padding-top: 0; }
.generator-result-sheet #output > .section:last-child { padding-bottom: 0; }
.generator-result-sheet .section-head:has(+ .info-rows) { margin-bottom: 0; }
.generator-result-sheet .info-row:last-child { border-bottom: 1px solid var(--border); }
/* Between stacked sections the section's own border is the one separator. */
.generator-result-sheet #output > .section:not(:last-child) .info-row:last-child { border-bottom: none; }
/* A hidden result has no dimensions. Reveal it only after the shared theme measures its tear. */
.app-paper:has(> .generator-result-sheet:not([style*="clip-path"])) { visibility: hidden; }
/* Numbered batch results have no category. Keep their marker in the homepage label column. */
/* Dotted batch results (fears, quirks) carry no label either: the label column
   shows one homepage bullet in the theme accent. The cell reuses the hero-list
   item size (18px under the fantasy theme) so its 1.1em marker renders the same
   19.8px as the homepage bullet at desktop and phone widths. The row keeps its
   baseline alignment with the value text. The marker is decorative, so Export
   and copy skip it and the phone grid keeps it beside its row. */
.generator-result-sheet .info-key.info-dot { padding-top: 0; font-size: 18px; }
.generator-result-sheet .info-key.info-dot::before { content: '\2022'; color: var(--accent); font-size: 1.1em; }
/* Shared column tracks align every separator and fit the longest label in a group.
   Flex groups wrap as whole tables when two groups no longer fit their words. */
.generator-result-sheet .spectrums > div,
.generator-result-sheet .info-rows { display: grid; grid-template-columns: max-content minmax(min-content, 1fr); column-gap: 1rem; }
.generator-result-sheet .spectrum-group-name { grid-column: 1 / -1; }
.generator-result-sheet .spectrum-row,
.generator-result-sheet .info-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
/* A row without a label (the section heading already names it) uses the full width. */
.generator-result-sheet .info-row.plain > .info-val { grid-column: 1 / -1; }
.generator-layout .generator-result-sheet .spectrums .spectrum-trait,
.generator-layout .generator-result-sheet .spectrums .spectrum-value,
.generator-result-sheet .info-key,
.generator-result-sheet .info-val { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.generator-result-sheet .spectrum-trait { min-width: 0; }
/* The torn sheet clips its contents: reserve room for the shared popover while it is open. */
.generator-sheet:has(.export-menu.open) { min-height: 300px; }

.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.quirk-tag { display: inline-block; padding: 4px 10px; border-radius: 3px; font-size: 15px; font-weight: 600; }
.quirk-tag.positive { background: rgba(58,112,48,0.12); color: var(--green); }
.quirk-tag.negative { background: rgba(168,48,48,0.12); color: var(--red); }
/* ── Cross-links ── */
.cross-links { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.cross-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── CTA box ── */
.cta-box { margin-top: 1.5rem; }
/* Prose headings use the homepage About heading, rather than generated archetype typography. */
.seo-section .hero-name, .cta-title.hero-name { font-family: var(--ff-ui); font-size: 1rem; font-weight: 600; color: var(--text-3); }

/* ── Comparison table ── */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 0.5rem; }
.comparison-table th, .comparison-table td { padding: 0.7rem 0.85rem; text-align: left; border: 1px solid var(--border); vertical-align: top; }
.comparison-table thead th { background: var(--surface); color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }
.comparison-table tbody th { background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.comparison-table td { background: #fff; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.comparison-table td strong { color: var(--text); font-weight: 600; }

/* ── Key takeaways ── */
.key-takeaways { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.takeaways-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.takeaways-list li { font-size: 16px; line-height: 1.65; color: var(--text-2); padding-left: 1.4rem; position: relative; }
.takeaways-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: 15px; }
.takeaways-list li strong { color: var(--text); font-weight: 600; }

/* ── FAQ ── */
.faq-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { cursor: pointer; padding: 0.85rem 0; font-size: 17px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: baseline; gap: 0.5rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; color: var(--accent); font-weight: 700; font-size: 18px; flex-shrink: 0; transition: transform 0.15s; }
.faq-item[open] summary::before { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-answer { padding: 0 0 0.85rem; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.faq-answer a { color: var(--accent); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }

/* ── Comparison intro ── */
.comparison-intro { margin-top: 0.5rem; margin-bottom: 1.5rem; }


/* The homepage already displays a profile; standalone output starts empty. */
.generator-result-sheet:has(> #output:empty) { display: none; }
.app-paper:has(> .generator-result-sheet > #output:empty) { display: none; }
/* Editorial paragraphs need a reading rhythm inside the shared hero-card. */
.seo-section + .seo-section { margin-top: 1.5rem; }
.seo-section p + p { margin-top: 1rem; }
@media(max-width:600px) {
  .generator-result-sheet .spectrums > div,
  .generator-result-sheet .info-rows { grid-template-columns: minmax(0, 1fr); }
  .generator-result-sheet .spectrum-row,
  .generator-result-sheet .info-row { row-gap: 4px; }
  /* Dotted and numbered rows keep their bullet or number beside the text instead of stacking above it. */
  .generator-result-sheet .info-row:has(> .info-key.info-dot),
  .generator-result-sheet .info-row:has(> .info-key.info-num) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0; }
  .voice-grid, .cross-links-grid { grid-template-columns: 1fr; }
  .comparison-table tbody th { white-space: normal; }
  .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table th, .comparison-table td { padding: 0.6rem 0.65rem; }
}

@media(max-width:700px) {
  /* The homepage rail/account stay fixed. Reserve their horizontal lanes even
     while a standalone Generate button passes the top of the viewport. */
  .generator-form-sheet #generateBtn { width: calc(100% - 56px); margin-inline: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .generator-layout .export-trigger::after { transition: none; }
}

/* The primary CTA is a link to another page, so it needs link flow/decoration with the shared gen-btn skin. */
.cta-btn { display: block; text-decoration: none; text-align: center; line-height: normal; }

/* Related routes are anchors with the homepage quick-name button skin; wrap long translated labels. */
.cross-link, .cross-link-current { display: block; text-decoration: none; white-space: normal; }
.cross-link-current { border-color: var(--accent); }