/* Shared browse-hub stylesheet: faults, specs and MOT reliability hubs (root, make and model pages),
   their engine tables and the MOT year table. The generated markup keeps Tailwind layout utilities
   only, and colour, border, radius, shadow and type live here as design tokens (tokens.css).
   Faults and specs hubs are generated by frontend/scripts/publish-articles.py; MOT hubs by
   MotData article_gen (templates base_index, series_index, marque_index, model_index). */

body { background: var(--color-page); }

/* Shell: same width, gutters and vertical rhythm as the article leaf shell (article-base.css). */
.mw-hub-main {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mw-shell-width, 1240px);
  margin-inline: auto;
  padding: 24px 16px 48px;
}
@media (min-width: 768px) { .mw-hub-main { padding: 32px 24px 64px; } }
@media (min-width: 1024px) { .mw-hub-main { padding-left: 32px; padding-right: 32px; } }

.mw-hub-main a:focus-visible {
  outline: var(--focus-ring, 2px solid var(--color-action));
  outline-offset: var(--focus-ring-offset, 2px);
}

/* Breadcrumb */
.mw-breadcrumb {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-muted);
}
.mw-breadcrumb a { text-underline-offset: 2px; }
.mw-breadcrumb a:hover { color: var(--color-ink); text-decoration: underline; }
.mw-crumb-sep { color: var(--color-faint); }
.mw-crumb-current { color: var(--color-ink); font-weight: 500; }

/* Headings and intro copy */
.mw-hub-h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--text-display--font-weight);
}
.mw-hub-h2 {
  color: var(--color-ink);
  font-size: var(--text-card-h);
  line-height: var(--text-card-h--line-height);
  letter-spacing: var(--text-card-h--letter-spacing);
  font-weight: var(--text-card-h--font-weight);
}
.mw-hub-lede {
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}
.mw-hub-section-note,
.mw-hub-related {
  color: var(--color-muted);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}
.mw-hub-related a { color: var(--color-ink); font-weight: 500; text-decoration: underline; }
.mw-hub-related strong { color: var(--color-ink); font-weight: 500; }
.mw-hub-note {
  color: var(--color-mid);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}

/* Tiles (make and model), sibling pills, stat chips */
.mw-hub-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.mw-hub-tile:hover {
  border-color: var(--color-btn-border-hover);
  box-shadow: var(--shadow-card-hover);
}
.mw-hub-tile-name {
  color: var(--color-ink);
  font-size: var(--text-card-title);
  line-height: var(--text-card-title--line-height);
  font-weight: 600;
}
.mw-hub-tile-meta {
  color: var(--color-mid);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
}
.mw-hub-monogram {
  background: var(--color-chip);
  border-radius: var(--radius-row);
  color: var(--color-muted);
  font-size: var(--text-compact);
  font-weight: 600;
}
.mw-hub-pill,
.mw-hub-chip {
  background: var(--color-chip);
  border-radius: 9999px;
  color: var(--color-muted);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}
.mw-hub-pill:hover { background: var(--color-rail); color: var(--color-ink); }

/* Footer */
.mw-hub-footer {
  border-top: 1px solid var(--color-divider);
  color: var(--color-mid);
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}
.mw-hub-link { text-decoration: underline; }
.mw-hub-link:hover { color: var(--color-ink); }

/* Engine table "Variant:" row and the MOT year table's detail row */
.article-table[data-section="engine-table"] tbody tr.mw-variant-row,
.article-table[data-section="engine-table"] tbody tr.mw-variant-row td,
.article-table[data-section="year-table"] tbody tr.mw-variant-row,
.article-table[data-section="year-table"] tbody tr.mw-variant-row td {
  background: var(--color-row);
  color: var(--color-muted);
  font-size: var(--text-compact);
}

/* Engine table and MOT year table: row headings */
.article-table[data-section="engine-table"] tbody th,
.article-table[data-section="year-table"] tbody th { color: var(--color-ink); font-weight: 700; text-align: left; }
.article-table[data-section="engine-table"] tbody th a:hover,
.article-table[data-section="year-table"] tbody th a:hover { color: var(--color-action); }
@media (max-width: 639px) {
  .article-table[data-section="engine-table"] th,
  .article-table[data-section="engine-table"] td { white-space: nowrap; }
}

/* Small screens (under 768px). One block, nothing here reaches 768px and up.
   1. Breadcrumb: drop Home and Articles (the header logo is Home) so the trail
      stops orphaning its last crumb.
   2. Engine table: five columns needed 577px inside a 341px scroller, so Engine
      code and Power sat off-screen with no cue. Each row is now two lines:
      engine + years, then fuel, code and power. Separators trail the previous
      item so a wrapped line never starts with a dot. */
@media (max-width: 767px) {
  .mw-breadcrumb li:nth-child(-n+2) { display: none; }
}
@media (max-width: 639px) {
  .article-table[data-section="engine-table"],
  .article-table[data-section="engine-table"] tbody { display: block; width: 100%; }
  .article-table[data-section="engine-table"] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .article-table[data-section="engine-table"] tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 12px 16px;
  }
  .article-table[data-section="engine-table"] tbody tr > * { padding: 0; }
  .article-table[data-section="engine-table"] tbody th { flex: 0 0 calc(100% - 96px); }
  .article-table[data-section="engine-table"] tbody td:not([colspan]):nth-of-type(1) {
    flex: 0 0 96px;
    text-align: right;
  }
  .article-table[data-section="engine-table"] tbody td:not([colspan]):nth-of-type(n+2) {
    margin-top: 2px;
    font-size: var(--text-compact, 13.5px);
    color: var(--color-muted, #5A636E);
  }
  .article-table[data-section="engine-table"] tbody td:not([colspan]):nth-of-type(n+2):not(:last-child)::after {
    content: "\00b7";
    margin: 0 8px;
  }
  .article-table[data-section="engine-table"] tbody td[colspan] { flex: 1 1 100%; padding: 0; }
}