/* ============================================================
   JEEP GRAND CHEROKEE ZJ · UK
   Shared stylesheet — 1996-98 Official Automotive Microsite
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #d4d0c8;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: #1a1a1a;
  min-height: 100vh;
}

/* --- Page Shell (the "window" feel) --- */
.shell {
  max-width: 820px;
  margin: 0 auto;
  background: #f0ede8;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  min-height: 100vh;
}

/* --- Masthead --- */
#nav, .masthead {
  /* nav stays 52px, masthead grows to fit image */
}
.masthead {
  background: #1a3a1a;
  padding: 0;
  display: flex;
  align-items: stretch;
  border-bottom: 3px solid #8b7336;
}
.masthead-logo {
  padding: 14px 20px 12px;
  border-right: 2px solid #8b7336;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}
.logo-jeep {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.22em;
  color: #d4b84a;
  text-transform: uppercase;
  line-height: 1;
}
.logo-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.masthead-title {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.masthead-title h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}
.masthead-title p {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.masthead-img {
  margin-left: auto;
  overflow: hidden;
  width: 220px;
  flex-shrink: 0;
}
.masthead-img img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: brightness(0.8) saturate(0.75);
}

/* --- Navigation --- */
.sitenav {
  background: #e8e4dc;
  border-bottom: 2px solid #808080;
  padding: 0 0 0 12px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  box-shadow: inset 0 -1px 0 #fff;
  flex-wrap: wrap;
}
.sitenav a {
  display: inline-block;
  padding: 5px 12px 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  margin-bottom: -2px;
  position: relative;
  white-space: nowrap;
}
.sitenav a:hover {
  background: #e8e4dc;
  color: #1a3a1a;
}
.sitenav a.active {
  background: #f0ede8;
  border-bottom-color: #f0ede8;
  color: #1a3a1a;
  z-index: 1;
}

/* --- Page content padding --- */
.content {
  padding: 22px 26px 30px;
}

/* --- Section heads --- */
.section-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.section-rule h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a3a1a;
  white-space: nowrap;
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #8b7336, transparent);
}

/* --- HR dividers --- */
hr.gold {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #8b7336 40%, transparent);
  margin: 20px 0;
}
hr.thin {
  border: none;
  border-top: 1px solid #c0bdb5;
  margin: 16px 0;
}

/* --- Body copy --- */
p.body {
  line-height: 1.75;
  color: #2a2a2a;
  margin-bottom: 10px;
  font-size: 13px;
}
p.body + p.body { margin-top: 0; }

/* --- Bevelled panel (the core 90s motif) --- */
.panel {
  background: #e8e4dc;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.panel-inset {
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.panel-dark {
  background: #1a3a1a;
  border: 2px solid;
  border-color: #2d5a2d #0a1a0a #0a1a0a #2d5a2d;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: #fff;
}
.panel-dark p { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.75; }
.panel-dark h3 { color: #d4b84a; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }

/* --- Bevel button --- */
.btn {
  display: inline-block;
  padding: 5px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  color: #1a1a1a;
  cursor: pointer;
}
.btn:hover { background: #e0dcd4; }
.btn:active { border-color: #808080 #fff #fff #808080; }
.btn-green {
  background: #2d5a2d;
  color: #fff;
  border-color: #4a8a4a #0a2a0a #0a2a0a #4a8a4a;
}
.btn-green:hover { background: #3a6a3a; }

/* --- Two-column grid --- */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* --- Period image frame --- */
.imgframe {
  border: 3px solid;
  border-color: #808080 #fff #fff #808080;
  display: block;
  overflow: hidden;
  margin-bottom: 8px;
}
.imgframe img {
  width: 100%;
  display: block;
  filter: saturate(0.8) brightness(0.95);
}
.imgcap {
  font-size: 10px;
  color: #555;
  font-style: italic;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 8px;
}

/* --- Data table (period-accurate) --- */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 14px;
}
table.data th {
  background: #1a3a1a;
  color: #d4b84a;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 8px;
  text-align: left;
  border: 1px solid #0a2a0a;
}
table.data td {
  padding: 5px 8px;
  border: 1px solid #c0bdb5;
  color: #2a2a2a;
  vertical-align: top;
  line-height: 1.55;
}
table.data td:first-child {
  font-weight: bold;
  color: #1a3a1a;
  background: #e8e4dc;
  white-space: nowrap;
}
table.data tr:nth-child(even) td { background: #f4f1ec; }
table.data tr:nth-child(even) td:first-child { background: #dedad2; }

/* --- Inline spec list --- */
.spec-list { list-style: none; font-size: 12px; }
.spec-list li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #c0bdb5;
  line-height: 1.5;
}
.spec-list li::before { content: '►'; color: #8b7336; font-size: 8px; flex-shrink: 0; margin-top: 3px; }

/* --- Stat boxes (the "ticker" style) --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  margin-bottom: 16px;
}
.stat-box {
  padding: 10px 12px;
  border-right: 1px solid #808080;
  background: #e8e4dc;
  text-align: center;
}
.stat-box:last-child { border-right: none; }
.stat-num {
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: bold;
  color: #1a3a1a;
  display: block;
  line-height: 1;
}
.stat-label {
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  display: block;
  margin-top: 3px;
}

/* --- Fault cards --- */
.fault {
  border-left: 4px solid #808080;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #f4f1ec;
  border-top: 1px solid #c0bdb5;
  border-right: 1px solid #c0bdb5;
  border-bottom: 1px solid #c0bdb5;
}
.fault.crit { border-left-color: #8b1a1a; }
.fault.mod  { border-left-color: #8b6a1a; }
.fault.info { border-left-color: #1a3a8b; }
.fault h4 {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.fault.crit h4 { color: #8b1a1a; }
.fault.mod h4  { color: #8b6a1a; }
.fault.info h4 { color: #1a3a8b; }
.fault p { font-size: 12px; color: #333; line-height: 1.65; margin-bottom: 4px; }
.fault .fix { font-size: 11px; color: #555; font-style: italic; }
.fault .fix strong { font-style: normal; color: #1a3a1a; }

/* --- Notice / callout --- */
.notice {
  background: #fff8dc;
  border: 1px solid #d4b84a;
  border-left: 4px solid #d4b84a;
  padding: 9px 12px;
  font-size: 12px;
  color: #333;
  line-height: 1.65;
  margin: 12px 0;
}
.notice strong { color: #6b4a10; }
.notice.warn {
  background: #fdf0f0;
  border-color: #8b1a1a;
  border-left-color: #8b1a1a;
}
.notice.warn strong { color: #8b1a1a; }
.notice.ok {
  background: #f0f8f0;
  border-color: #2d6a2d;
  border-left-color: #2d6a2d;
}
.notice.ok strong { color: #1a4a1a; }

/* --- Bar chart --- */
.barchart { margin: 10px 0; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bar-lbl { font-size: 11px; color: #333; min-width: 130px; flex-shrink: 0; font-family: Arial, sans-serif; }
.bar-track { flex: 1; height: 14px; background: #d4d0c8; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.bar-fill { height: 100%; background: #1a3a1a; }
.bar-val { font-family: 'Courier New', monospace; font-size: 11px; color: #1a3a1a; min-width: 40px; text-align: right; flex-shrink: 0; font-weight: bold; }

/* --- Tab switcher --- */
.tabbar { display: flex; gap: 2px; margin-bottom: -1px; position: relative; z-index: 1; }
.tabbar button {
  padding: 4px 12px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #c0bdb5;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  cursor: pointer;
  color: #444;
}
.tabbar button.on {
  background: #f0ede8;
  border-bottom-color: #f0ede8;
  color: #1a3a1a;
}
.tabpane { display: none; border: 1px solid #808080; padding: 14px; background: #f0ede8; }
.tabpane.on { display: block; }

/* --- Manual row --- */
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #f4f1ec;
  border: 1px solid #c0bdb5;
  margin-bottom: 3px;
  font-size: 12px;
}
.doc-row:hover { background: #e8e4dc; }
.doc-icon { font-size: 16px; flex-shrink: 0; }
.doc-name { font-weight: bold; color: #1a3a1a; font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 0.02em; }
.doc-desc { color: #555; font-size: 11px; }
.doc-link {
  margin-left: auto;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: #d4d0c8;
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  text-decoration: none;
  color: #1a1a1a;
}

/* --- Checklist --- */
.checklist { list-style: none; font-size: 12px; }
.checklist li {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted #c0bdb5;
  line-height: 1.6;
}
.checklist li::before { content: '✓'; color: #2d6a2d; font-weight: bold; flex-shrink: 0; }
.checklist li.warn::before { content: '!'; color: #8b1a1a; }

/* --- Footer / status bar --- */
.statusbar {
  background: #d4d0c8;
  border-top: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 4px 12px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.statusbar span {
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #555;
  letter-spacing: 0.04em;
}
.statusbar span + span { border-left: 1px solid #808080; padding-left: 16px; }

/* --- Responsive --- */
@media (max-width: 680px) {
  .cols2, .cols3 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .masthead-img { display: none; }
  .content { padding: 14px; }
}