/* Components (ui-design.md §6). The first part is carried over from the Traveller_TNE archive; the second part holds this archive's own components. */

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
header.site-header { border-bottom: 1px solid var(--color-border-decorative); }
.header-inner { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
a.site-name { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); font-weight: 700; text-decoration: none; color: var(--color-text); }
.site-name-text span { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.brand-mark { color: var(--color-accent); flex-shrink: 0; }
.nav-disclosure summary { display: inline-block; cursor: pointer; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-ui); border-radius: 4px; list-style: none; }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-links { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.navlink { color: var(--color-accent); text-decoration: none !important; font-size: var(--text-sm); }
[aria-current="page"].navlink { color: var(--color-text); font-weight: 700; text-decoration: underline !important; }
.nav-mobile { display: block; } .nav-desktop-wrap { display: none; }
/* On narrow screens, an open menu takes the full row, so the theme button wraps below the list instead of floating beside it. */
@media (max-width: 639.98px) { .header-actions { flex-wrap: wrap; } .nav-mobile:has(details[open]) { flex-basis: 100%; } }
.nav-desktop { gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .nav-mobile { display: none; } .nav-desktop-wrap { display: block; } .nav-desktop { display: flex; } }
.theme-toggle { font-size: var(--text-sm); border: 1px solid var(--color-border-ui); background: var(--color-bg); color: var(--color-text); border-radius: 4px; padding: var(--space-2) var(--space-3); cursor: pointer; }
.breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb .sep { margin: 0 var(--space-2); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-decorative); }
.index-list li:first-child { padding-top: 0; }
.index-list .count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.index-list .sub { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); font-weight: 400; }
.index-list a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.search-form input { flex: 1; min-width: 0; font-size: var(--text-base); padding: var(--space-3); border: 1px solid var(--color-border-ui); border-radius: 4px; background: var(--color-bg); color: var(--color-text); }
.btn { font-size: var(--text-base); padding: var(--space-3) var(--space-5); border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-on); border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn.btn-secondary { background: var(--color-bg); color: var(--color-accent); }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-decorative); }
.post-list li:first-child { padding-top: 0; }
a.post-title { font-weight: 600; color: var(--color-text); text-decoration: none; }
.post-meta { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.byline { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.byline strong, .byline a.author { color: var(--color-text); font-weight: 600; }
.context-strip { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-4); font-size: var(--text-sm); margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.context-strip ul { margin: 0; padding-left: var(--space-5); }
.thread-post { border: 1px solid var(--color-border-decorative); border-left: 3px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-4); margin-bottom: var(--space-4); }
.thread-post.is-current { border-left-color: var(--color-accent); }
.thread-post h2 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.thread-post.is-reply { margin-left: var(--space-5); }
.results-status { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.result-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-decorative); }
.result-item:first-child { padding-top: 0; }
.result-snippet { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
mark { background: color-mix(in srgb, var(--color-accent) 25%, transparent); color: inherit; padding: 0 0.1em; }
footer.site-footer { border-top: 1px solid var(--color-border-decorative); margin-top: var(--space-8); }
/* The footer has the license on the left and the takedown link at the right; on a narrow screen they stack. */
.footer-inner { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.footer-license { margin: 0; flex: 1 1 22rem; max-width: 46ch; }
.footer-license a { color: var(--color-text-muted); white-space: nowrap; }
a.footer-takedown { color: var(--color-text-muted); text-decoration: none !important; font-weight: 600; white-space: nowrap; margin-left: auto; }
.disclaimer-block { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-5) 0; }

/* ---- This archive's components (ui-design.md §6.2-§6.15) ---- */
/* Fixed-width text: a focusable, labeled region that scrolls on its own (FR-5, FR-50). */
.text-region { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: 4px; overflow-x: auto; margin: 0 0 var(--space-5); }
.text-region pre { margin: 0; padding: var(--space-4); font-family: var(--font-mono); font-size: var(--text-mono); line-height: 1.45; white-space: pre; tab-size: 8; color: var(--color-text); }
.text-region:focus-visible { outline-offset: 0; }
.scroll-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: calc(-1 * var(--space-4)) 0 var(--space-5); }
/* Redaction markers (DR-11). */
.redacted { color: var(--color-text-muted); font-style: italic; }
/* URLs in archived text (FR-41 to FR-43). */
a.ext::after { content: "\2197"; content: "\2197" / ""; font-style: normal; margin-left: 0.15em; text-decoration: none; display: inline-block; }
code.unverified { font-family: inherit; color: var(--color-text); }
/* Attachment line for a decoded uuencoded file (FR-54). */
.attachment { font-family: var(--font-mono); }
/* Message metadata and AMN navigation. */
.meta-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.amn-nav { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); border-top: 1px solid var(--color-border-decorative); padding-top: var(--space-4); }
/* Notices: placeholder pages, archived-page banner (FR-38, FR-34). */
.notice { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-left: 3px solid var(--color-border-ui); border-radius: 4px; padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.notice p { margin: 0 0 var(--space-2); } .notice p:last-child { margin-bottom: 0; }
.status-tag { display: inline-block; font-size: var(--text-sm); border: 1px solid var(--color-border-ui); border-radius: 4px; padding: 0 var(--space-2); color: var(--color-text); }
/* Stats row on the home page (FR-24). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.stats li { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-3) var(--space-4); }
.stats .n { display: block; font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stats .l { font-size: var(--text-sm); color: var(--color-text-muted); }
/* Year and month browse (FR-20). */
.year-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.year-row a, .year-row span { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-ui); border-radius: 4px; font-size: var(--text-sm); text-decoration: none !important; font-variant-numeric: tabular-nums; }
.year-row [aria-current="page"] { background: var(--color-accent); color: var(--color-accent-on); border-color: var(--color-accent); font-weight: 600; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.month-grid li { border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-3) var(--space-4); }
.month-grid a { font-weight: 600; text-decoration: none !important; }
.month-grid .count { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.letter-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
/* Deck-plan panel: plans are black on white, so the panel stays white in both themes (FR-37). */
.plan-panel { background: var(--color-plan-paper); border: 1px solid var(--color-border-ui); border-radius: 4px; padding: var(--space-3); margin: 0 0 var(--space-3); }
.plan-panel img { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
/* Downloads (FR-32). */
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list > li { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-decorative); }
.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.dl-head a { font-weight: 600; }
.dl-facts { font-size: var(--text-sm); color: var(--color-text-muted); }
.dl-desc { margin: var(--space-1) 0 0; }
.dl-list details { margin-top: var(--space-2); font-size: var(--text-sm); }
.dl-list summary { cursor: pointer; color: var(--color-accent); }
.dl-list details ul { columns: 2 12rem; margin: var(--space-2) 0 0; padding-left: var(--space-5); font-family: var(--font-mono); }
.downloads-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
/* Search filters (FR-19). */
.filters { border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); }
.filters legend { font-size: var(--text-sm); font-weight: 600; padding: 0 var(--space-1); }
.filters label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); margin: var(--space-1) var(--space-4) var(--space-1) 0; }
.result-section { font-size: var(--text-sm); color: var(--color-text-muted); display: block; }
/* Archived HTML page frame (FR-34). */
.archived-page { border: 1px solid var(--color-border-decorative); border-radius: 4px; padding: var(--space-4) var(--space-5); }
.archived-page h2:first-child { margin-top: 0; }
.archived-page table { border-collapse: collapse; font-size: var(--text-sm); }
.archived-page th, .archived-page td { border: 1px solid var(--color-border-decorative); padding: var(--space-1) var(--space-3); text-align: left; }
.history { border-collapse: collapse; font-size: var(--text-sm); margin: 0 0 var(--space-5); width: 100%; }
.history th, .history td { border-bottom: 1px solid var(--color-border-decorative); padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; vertical-align: top; }
/* The error below the message-number field (ui-design.md §6.10). */
.amn-error { margin: calc(-1 * var(--space-3)) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text); }
/* Figures for deck plans and pictures, and word-processed text (FR-37, FR-40). */
.plan-figure { margin: 0 0 var(--space-5); }
.prose-document p { margin: 0 0 var(--space-3); }
/* Long words and paths wrap instead of widening the page at 320 pixels (FR-50). */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--space-1); }
.index-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.meta-line, .meta-line code, .dl-head a, .post-title { overflow-wrap: anywhere; }
.history th, .history td { overflow-wrap: anywhere; }
/* An archived web page can hold wide tables and preformatted text, so it scrolls
   inside its frame, as a focusable region, like the text regions. */
.archived-page { overflow-x: auto; }
.archived-page pre { font-family: var(--font-mono); font-size: var(--text-mono); tab-size: 8; }
/* Letter links are at least 24 pixels square (WCAG 2.2, SC 2.5.8). */
.letter-row a { display: inline-block; min-width: 1.75rem; min-height: 1.75rem; line-height: 1.75rem; text-align: center; }
/* Search options and the progress of an exact search (FR-56, FR-57). */
.search-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin: calc(-1 * var(--space-3)) 0 var(--space-4); font-size: var(--text-sm); }
.search-options label { display: inline-flex; align-items: center; gap: var(--space-1); }
.search-hint { margin: 0; color: var(--color-text-muted); }
.search-progress { font-size: var(--text-sm); color: var(--color-text-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }
.search-progress:empty { display: none; }
.search-hint code { white-space: nowrap; }