/*
 * 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.
 */

/*
 * 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). This is the reading surface, so it gets real typography.
 */
.wiki-content {
  line-height: 1.7;
  color: #1f2933;
  font-size: 1.05rem;
}
.wiki-content > * + * { margin-top: 1rem; }
.wiki-content h1, .wiki-content h2, .wiki-content h3,
.wiki-content h4, .wiki-content h5, .wiki-content h6 {
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2rem;
  scroll-margin-top: 5rem;
}
.wiki-content h1 { font-size: 1.875rem; }
.wiki-content h2 { font-size: 1.5rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }
.wiki-content h3 { font-size: 1.25rem; }
.wiki-content h4 { font-size: 1.1rem; }
.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 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; }

@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. */

/* 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; }