/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Reading typeface. Article *titles and section headings* are set in a serif; the
 * body, data tables, and all application chrome stay in the system sans. That
 * serif-heads / sans-body split is the modern-Wikipedia texture (Wikipedia headings
 * resolve to Georgia for most readers), and the split itself is the type system.
 * Georgia-led system stack: a first-rate screen serif at heading sizes, with zero
 * font download — right for a self-hostable wiki with no external dependencies.
 */
:root {
  --font-reading: Georgia, "Times New Roman", Times, serif;
}

/*
 * A content title — the article (or category, file, missing-page) heading and
 * the home identity masthead. Set in the reading serif so the title belongs to
 * the prose it sits above. Functional/admin page titles deliberately stay sans:
 * serif marks "content", sans marks "the application".
 */
.content-title {
  font-family: var(--font-reading);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-wrap: balance;
}

/*
 * Article typography. Scoped under .wiki-content so the class+element selectors
 * out-specify Tailwind's preflight reset (which otherwise strips heading sizes
 * and list markers). The body reads in the system sans on a measure-capped
 * column; the headings (below) carry the serif — real reading typography either way.
 */
.wiki-content {
  line-height: 1.7;
  color: #1f2933;
  font-size: 1.05rem;
}
.wiki-content > * + * { margin-top: 1rem; }

/*
 * Reading measure. The article container stays wide so the infobox, images and
 * data tables can occupy the full column, but running text is capped to a
 * ~66-character line (the brief's 65–75 measure). Scoped to text-level children;
 * tables, figures and the infobox are intentionally exempt and span full width.
 */
.wiki-content > p,
.wiki-content > ul,
.wiki-content > ol,
.wiki-content > blockquote,
.wiki-content > dl,
.wiki-content > h1,
.wiki-content > h2,
.wiki-content > h3,
.wiki-content > h4,
.wiki-content > h5,
.wiki-content > h6 {
  max-width: 38rem;
}
/* The renderer's heading id anchor (an empty <a class="anchor" id="…">) is the
 * jump target for the table of contents; give it breathing room from the top when
 * a TOC link scrolls to it. */
.wiki-content .anchor { scroll-margin-top: 1.5rem; }

/* Section headings carry the reading serif over the sans body — the Wikipedia
 * texture (serif heads, sans body). The page title (.content-title) is serif too. */
.wiki-content h1, .wiki-content h2, .wiki-content h3,
.wiki-content h4, .wiki-content h5, .wiki-content h6 {
  font-family: var(--font-reading);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2rem;
  scroll-margin-top: 5rem;
}
/* Body h1 is rare (imported articles open at h2) and must sit clearly *below*
 * the 2.25rem serif page title — so it's pulled down to 1.6rem rather than
 * colliding with the title at the old 1.875rem. */
.wiki-content h1 { font-size: 1.6rem; }
.wiki-content h2 { font-size: 1.45rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }
.wiki-content h3 { font-size: 1.2rem; }
.wiki-content h4 { font-size: 1.05rem; }
.wiki-content a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.wiki-content a:hover { text-decoration: none; }
.wiki-content ul { list-style: disc; padding-left: 1.5rem; }
.wiki-content ol { list-style: decimal; padding-left: 1.5rem; }
.wiki-content li + li { margin-top: 0.25rem; }
.wiki-content blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1rem;
  color: #4b5563;
  font-style: italic;
}
.wiki-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
.wiki-content pre {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}
.wiki-content pre code { background: none; padding: 0; }
.wiki-content table { border-collapse: collapse; width: 100%; }
.wiki-content th, .wiki-content td { border: 1px solid #d1d5db; padding: 0.5rem 0.75rem; text-align: left; }
.wiki-content th { background: #f9fafb; font-weight: 600; }
.wiki-content img { max-width: 100%; height: auto; }
/* Wide content tables (common in imports) scroll within their own box instead
 * of forcing the whole page to scroll sideways on narrow screens. Scoped to
 * top-level content tables (direct children) so the infobox card — whose table
 * is nested inside .infobox — keeps its own layout. */
.wiki-content > table { display: block; max-width: 100%; overflow-x: auto; }

/*
 * Article images. A body image renders as a Wikipedia-style thumbnail: floated
 * right, ~300px, in a light frame with a small caption/credit beneath. The
 * infobox image opts out of the float (see the infobox section). Image variants
 * are deferred, so this sizes the *display* only — the original file is still
 * what the browser downloads.
 */
.wiki-content figure.wiki-image {
  float: right;
  clear: right;
  width: 300px;
  max-width: 45%;
  margin: 0.3rem 0 0.9rem 1.25rem;
  padding: 4px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.wiki-content figure.wiki-image .wiki-image__link { display: block; line-height: 0; }
.wiki-content figure.wiki-image img { display: block; width: 100%; height: auto; border-radius: 2px; }
.wiki-content figure.wiki-image figcaption {
  margin-top: 5px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
}
.wiki-content figure.wiki-image .wiki-image__credit { color: #9ca3af; }

/* In-table content images (e.g. one missile photo per row in a list table):
   compact and centered in the cell, no float, with a small credit. Many per
   page, so they stay small and don't push the table around. */
.wiki-content figure.wiki-image--cell {
  float: none;
  clear: none;
  width: auto;
  max-width: 160px;
  margin: 0 auto;
}
.wiki-content figure.wiki-image--cell img { max-width: 100%; }
.wiki-content figure.wiki-image--cell figcaption { margin-top: 3px; text-align: center; }

@media (max-width: 640px) {
  .wiki-content figure.wiki-image {
    float: none;
    clear: none;
    width: auto;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* Wikilinks resolve to internal pages; a [[link]] whose target doesn't exist
 * renders as plain text (no dead links), so no missing-link styling is needed. */

/* The in-page selection → agent dispatch popup (U3) keeps the chosen passage
 * highlighted while the popup is open — even after focus moves into the
 * instruction box, which clears the browser's own selection. Painted via the CSS
 * Custom Highlight API; unsupported browsers fall back to the native selection
 * with no persistence (the captured text is still shown in the popup preview). */
::highlight(selection-dispatch) {
  background-color: #fef08a;
  color: inherit;
}

/* Revision diffs (U7): word-level inline diff. Unchanged text flows normally;
 * changed words are wrapped in <ins>/<del>. white-space: pre-wrap preserves the
 * Markdown source's line breaks. Add/remove is conveyed by the ins/del elements
 * (semantic, exposed to assistive tech), with color as a secondary cue. */
.wiki-diff {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.wiki-diff ins, .wiki-diff .diffins { background: #dcfce7; color: #166534; text-decoration: none; }
.wiki-diff del, .wiki-diff .diffdel { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
/* Marker for unchanged lines hidden by a collapsed diff (review queue): a quiet,
 * centered divider so reviewers see only the changes plus a little context. */
.wiki-diff .diff-gap {
  display: block;
  margin: 0.5rem 0;
  text-align: center;
  color: #9ca3af;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  user-select: none;
}

/* Infobox cards (T2): a dense key/value summary rendered from a ```infobox block
 * against its Template schema. Reuses the established gray palette — no new visual
 * direction. Floats right on wide screens; stacks full-width on narrow ones.
 * Overrides the gridded .wiki-content table look for a calmer row-separated card. */
.wiki-content .infobox {
  float: right;
  clear: right;
  width: 22rem;
  max-width: 100%;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #f9fafb;
  font-size: 0.875rem;
  overflow: hidden;
}
.wiki-content .infobox table { width: 100%; border-collapse: collapse; }
.wiki-content .infobox caption {
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  background: #f3f4f6;
  border-bottom: 1px solid #d1d5db;
}
.wiki-content .infobox th, .wiki-content .infobox td {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.4rem 0.75rem;
  text-align: left;
  vertical-align: top;
  background: transparent;
}
.wiki-content .infobox th[scope="row"] { width: 38%; font-weight: 600; }
.wiki-content .infobox__section th { text-align: center; background: #f3f4f6; }
.wiki-content .infobox__image td, .wiki-content .infobox__above td,
.wiki-content .infobox__subheader td, .wiki-content .infobox__below td { text-align: center; }
/* The infobox image opts out of the body float: centered and capped small,
 * like a Wikipedia insignia/flag. Caption/credit stay small via the shared
 * figure.wiki-image figcaption rule above. */
.wiki-content .infobox figure.wiki-image {
  float: none;
  clear: none;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
}
.wiki-content .infobox figure.wiki-image img { max-width: 200px; max-height: 220px; margin: 0 auto; }
.wiki-content .infobox figure.wiki-image figcaption { margin-top: 3px; text-align: center; }
.wiki-content .infobox tr:last-child th, .wiki-content .infobox tr:last-child td { border-bottom: 0; }
.wiki-content .infobox--error {
  float: none;
  width: auto;
  padding: 0.5rem 0.75rem;
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

@media (max-width: 640px) {
  .wiki-content .infobox { float: none; width: 100%; margin-left: 0; }
}

/* A Template page shows its schema as a full-width (non-floating) card — the
 * field/type list an admin or agent edits as plain Markdown. */
.wiki-content .template-schema { float: none; width: 100%; margin-left: 0; }

/*
 * Edit view: cap the Marksmith editor's height. Its textarea uses
 * `field-sizing: content`, so without a ceiling a long article grows the box
 * unbounded and buries the Save/Cancel buttons far below the fold. Capping it
 * makes long content scroll inside the editor while the form actions stay in
 * view. Write and Preview panes share the cap so toggling tabs doesn't jump.
 */
.marksmith-textarea { max-height: 60vh; overflow-y: auto; }
.marksmith-preview-pane { max-height: 60vh; }

/*
 * Usage tables (LLM cost report). The cells carry vertical padding only, so in a
 * narrow grid column a long model id ("gpt-4.1-mini-2025-04-14") wraps and squeezes
 * the right-aligned numeric columns until the figures touch ("2171,302,55814,821").
 * Guarantee a gap before every column after the first, and give the wrapping label
 * column room on its right, so the numbers always read as distinct values.
 */
.usage-table th + th,
.usage-table td + td { padding-left: 1rem; }
.usage-table td:first-child { padding-right: 0.5rem; }