/* ============================================================
   Liberty Service Manual — shared design system
   2012 Jeep Liberty 4WD V6-3.7L  ·  mobile-first, light + dark
   Ported from Liberty-Service-Redesign-Mockup.html into a real
   multi-page static site. No external dependencies (offline-safe).
   ============================================================ */
:root{
  --bg:#eef0f4; --surface:#ffffff; --surface-2:#f6f7f9; --ink:#0e1726; --ink-2:#5b6678;
  --line:#e5e8ef; --accent:#e8741e; --accent-ink:#ffffff; --accent-soft:#fdeadd;
  --warn-bg:#fdecec; --warn-ink:#b42318; --warn-line:#f3b9b4;
  --caut-bg:#fff4e6; --caut-ink:#b54708; --caut-line:#f6cf99;
  --note-bg:#eef4ff; --note-ink:#1d4ed8; --note-line:#bcd0fb;
  --ok:#0f9d58;
  --shadow:0 1px 2px rgba(16,23,38,.06),0 8px 24px rgba(16,23,38,.08);
  --radius:16px; --radius-sm:12px; --tap:48px; --maxw:760px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0b0f17; --surface:#151b26; --surface-2:#1c2330; --ink:#eef2f8; --ink-2:#9aa6b8;
  --line:#27303f; --accent:#ff8a3d; --accent-ink:#1a1206; --accent-soft:#2a1c0e;
  --warn-bg:#3a1714; --warn-ink:#ff9b91; --warn-line:#5e2620;
  --caut-bg:#3a2510; --caut-ink:#ffc07a; --caut-line:#5e3f17;
  --note-bg:#13233f; --note-ink:#9cc0ff; --note-line:#244067;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.5;
  min-height:100vh;padding-bottom:84px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- App bar ---- */
.appbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px}
.appbar-inner{display:flex;align-items:center;gap:12px;width:100%;max-width:var(--maxw);margin:0 auto}
.appbar .grow{flex:1;min-width:0}
.appbar h1{font-size:17px;margin:0;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .sub{font-size:12px;color:var(--ink-2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:40px;height:40px;flex:0 0 40px;border:none;background:var(--surface-2);border-radius:12px;
  color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  text-decoration:none}
.iconbtn:active{transform:scale(.94)}
.brandbtn{background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:15px}

/* ---- Page column ---- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:16px 16px 24px}

/* ---- Breadcrumbs ---- */
.crumbs{position:sticky;top:60px;z-index:30;display:flex;gap:6px;overflow-x:auto;padding:10px 16px;
  background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.crumbs::-webkit-scrollbar{height:0}
.crumbs-inner{display:flex;gap:6px;width:100%;max-width:var(--maxw);margin:0 auto}
.crumb{flex:0 0 auto;font-size:12px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.crumb.here{color:var(--accent);border-color:var(--accent);font-weight:600}

/* ---- Search box ---- */
.searchbox{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:0 14px;height:50px;box-shadow:var(--shadow)}
.searchbox input{border:none;background:transparent;flex:1;font-size:16px;color:var(--ink);outline:none;
  font-family:var(--font)}
.searchbox .mag{font-size:18px;color:var(--ink-2)}

/* ---- Section labels ---- */
.label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  margin:22px 4px 10px}
.label:first-child{margin-top:6px}

/* ---- Tiles ---- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:560px){.tiles{grid-template-columns:1fr 1fr 1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  min-height:104px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .08s}
.tile:active{transform:scale(.97)}
.tile .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:var(--accent-soft)}
[data-theme="dark"] .tile .ic{background:var(--surface-2)}
.tile .t{font-weight:700;font-size:15px;margin-top:8px}
.tile .c{font-size:12px;color:var(--ink-2)}

/* ---- List rows ---- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:var(--tap);
  border-bottom:1px solid var(--line);cursor:pointer;background:var(--surface);color:inherit}
.row:last-child{border-bottom:none}
.row:active{background:var(--surface-2)}
.row.disabled{cursor:default;opacity:.62}
.row.disabled:active{background:var(--surface)}
.row .ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:19px}
.row .grow{flex:1;min-width:0}
.row .rt{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rs{font-size:12.5px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rs.snip{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
.row:has(.snip){align-items:flex-start}
.row .chev{color:var(--ink-2);font-size:18px;flex:0 0 auto}
.badge{flex:0 0 auto;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-2);
  padding:3px 8px;border-radius:999px}
.badge.soon{background:var(--accent-soft);color:var(--accent)}

/* ---- Tabs (segmented) ---- */
.tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);padding:4px;
  border-radius:12px;position:sticky;top:72px;z-index:20}
.tab{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--ink-2);padding:9px 6px;
  border-radius:9px;cursor:pointer;white-space:nowrap;border:none;background:none;font-family:var(--font)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pane{display:none;padding-top:14px}
.pane.active{display:block}

/* ---- Cards / generic ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:15px}
.p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.muted{color:var(--ink-2)}
.metarow{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.pill{font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  padding:5px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.pill.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent;cursor:pointer}
.pill.ok{color:var(--ok)}

/* ---- Key/value ---- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:600;text-align:right}

/* ---- Callouts ---- */
.callout{border-radius:12px;padding:12px 14px;margin:14px 0;font-size:14px;line-height:1.5;border:1px solid}
.callout .ch{font-weight:800;letter-spacing:.04em;font-size:12px;display:flex;align-items:center;gap:7px;
  margin-bottom:5px}
.callout.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.callout.caut{background:var(--caut-bg);color:var(--caut-ink);border-color:var(--caut-line)}
.callout.note{background:var(--note-bg);color:var(--note-ink);border-color:var(--note-line)}
.callout a{color:inherit;font-weight:700;text-decoration:underline}

/* ---- Steps ---- */
ol.steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:s}
ol.steps>li{counter-increment:s;display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.5}
ol.steps>li:last-child{border-bottom:none}
ol.steps>li::before{content:counter(s);flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-top:1px}
.xref{color:var(--accent);font-weight:600;border-bottom:1px dashed var(--accent);cursor:pointer}
.xref-dead{color:var(--ink-2);font-weight:600}

/* ---- Figures ---- */
figure{margin:14px 0}
figure img{width:100%;border-radius:12px;border:1px solid var(--line);display:block;background:var(--surface-2)}
figcaption{font-size:12px;color:var(--ink-2);margin-top:6px;text-align:center}

/* ---- Diagram hotspots ---- */
.diagram{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.diagram img{width:100%;display:block}
.diagram.noimg{min-height:220px;display:flex;align-items:center;justify-content:center}
.diagram.noimg::after{content:"Diagram image unavailable in this archive";color:var(--ink-2);font-size:13px;padding:20px}
.hot{position:absolute;background:rgba(232,116,30,.18);border:2px solid var(--accent);border-radius:8px;
  cursor:pointer;text-decoration:none}
.hotlist .row .ic{background:var(--accent-soft);color:var(--accent)}

/* ---- Bottom nav ---- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);
  border-top:1px solid var(--line);display:flex;padding:8px 6px 12px}
.bottomnav-inner{display:flex;width:100%;max-width:var(--maxw);margin:0 auto}
.nav{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:3px;color:var(--ink-2);font-size:11px;font-weight:600;font-family:var(--font);padding:4px;text-decoration:none}
.nav .ni{font-size:20px;line-height:1}
.nav.active{color:var(--accent)}

/* ---- Misc ---- */
.empty{text-align:center;color:var(--ink-2);font-size:14px;padding:40px 16px}
.divider{height:1px;background:var(--line);margin:16px 0}
a.textlink{color:var(--accent);font-weight:600}
mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
.note-banner{background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:10px 14px;
  font-size:12.5px;font-weight:600;margin:6px 0 2px}
/* ---- Accordions + inline component cards (condensed view) ---- */
.card h4{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
details.proc{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);margin:10px 0;overflow:hidden}
details.proc>summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:10px}
details.proc>summary::-webkit-details-marker{display:none}
details.proc>summary::before{content:"▸";color:var(--accent);font-size:13px}
details.proc[open]>summary::before{content:"▾"}
details.proc>summary .meta{margin-left:auto;font-size:12px;color:var(--ink-2);font-weight:500}
details.proc .pbody{padding:0 16px 14px}
details.proc .pbody>.steps{margin-top:0}
.comp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.comp-card>h3{margin:0;font-size:16px}
.comp-card .card{box-shadow:none}
.comp-card details.proc{box-shadow:none}
.laborrow{padding:8px 0;border-top:1px solid var(--line)}
.laborrow:first-of-type{border-top:none;padding-top:0}
.fsmpre{white-space:pre-wrap;overflow-x:auto;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px;line-height:1.45;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:6px 0}
.fsmtab{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0;display:block;overflow-x:auto}
.fsmtab td{border:1px solid var(--line);padding:5px 9px;vertical-align:top;text-align:left}
.dtctab td:first-child a,.dtctab td:first-child b{font-weight:700}
.pbody figure{margin:8px 8px 8px 0;display:inline-block;max-width:100%;text-align:center}
.pbody figure img{max-width:340px;width:auto;max-height:360px;border:1px solid var(--line);border-radius:8px;background:#fff;display:block}
.fsmsub{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:3px}
.pclist{margin:6px 0;padding-left:20px}
.pclist li{margin:3px 0;font-size:14px}
.dstep{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.dstep:first-of-type{border-top:none;padding-top:2px}
.dnum{flex:0 0 24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.dbody{flex:1;min-width:0}
.dtitle{font-weight:600;font-size:14px;margin-bottom:4px}
.branch{margin:5px 0;padding:6px 10px;border-radius:8px;font-size:13.5px;border:1px solid var(--line)}
.branch.y{border-color:var(--ok);background:rgba(15,157,88,.08)}
.branch.nb{background:var(--surface-2)}
.branch b{margin-right:5px;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
figure img,.diagram img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;background:#fff;border-radius:6px;cursor:zoom-in;box-shadow:0 10px 50px rgba(0,0,0,.55)}
.lightbox img.zoom{max-width:none;max-height:none;cursor:zoom-out}
.lb-close{position:fixed;top:14px;right:16px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;z-index:201}
.lb-close:active{transform:scale(.94)}
.laborrow .lh{display:flex;justify-content:space-between;align-items:center}
:target{scroll-margin-top:120px}
#toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;
  transition:.2s;z-index:80;pointer-events:none;max-width:80%;text-align:center}
/* system wiring diagrams gallery */
.wd{margin:16px 0;border-top:1px solid var(--line);padding-top:14px}
.wd:first-of-type{border-top:none;padding-top:0}
.wd h4{margin:0 0 8px;font-size:15px}
.wd figure{margin:0}
.wd figure img{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:zoom-in}
/* code -> wiring-diagram link on DTC / diagnostics topics */
.wlink{margin:0 0 10px}
.wlink a{display:inline-block;background:var(--accent-soft);color:var(--accent);
  padding:7px 11px;border-radius:9px;font-weight:600;font-size:13px;border-bottom:none;text-decoration:none}
.dtctab thead th{text-align:left;font-size:12px;color:var(--ink-2);font-weight:700;
  border-bottom:2px solid var(--line);padding:6px 8px}
/* Brazil compatibility confidence badges */
.pill.cf-ok{background:rgba(31,122,52,.14);color:#1f7a34;border-color:transparent}
.pill.cf-likely{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill.cf-warn{background:rgba(154,106,0,.16);color:#9a6a00;border-color:transparent}
.pill.cf-bad{background:rgba(179,38,30,.14);color:#b3261e;border-color:transparent}