/* ==========================================================
   Automatic Transmission — shared site styles
   Edit tokens in :root to re-theme every page at once.
   ========================================================== */

   :root{
    /* ---- color tokens ---- */
    --ink:        #1E2B2E;  /* primary text / darkest surface */
    --asphalt:    #235760;  /* teal-blue */
    --asphalt-2:  #2E6B76;  /* dark panel / card background,  */
    --paper:      #FBF8F2;  /* light section background */
    --paper-2:    #F2EEE2;  /* light tint background (alternating sections) */
    --line:       #E4DFCF;  /* hairline border on light backgrounds */
    --line-dark:  #4A8791;  /* hairline border on dark backgrounds */
    --teal:       #2EC4B6;  /* accent: first-party / safe / primary interactive */
    --teal-dim:   #1F9A8F;
    --amber:      #F6A93B;  /* accent: third-party / attention / active nav */
    --amber-dim:  #D98A22;
    --red:        #F0614A;  /* accent: PII / severity flags*/
    --grey:       #93A0A3;
    --ink-soft:   #56666A;  /* secondary text on light backgrounds */
  
    color-scheme: light;
  }
  
  /* ---- type tokens ----
     Display/body copy: Newsreader (serif)
     Labels/data/nav/mono numbers: IBM Plex Mono
     Both imported via Google Fonts in each page's <head>. */
  
  *{ box-sizing:border-box; }
  html{ scroll-padding-top:76px; }
  html {
    scroll-behavior: smooth;
}
  body{
    margin:0; background:var(--paper); color:var(--asphalt);
    font-family:'Newsreader', Georgia, serif; -webkit-font-smoothing:antialiased;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
  a{ color:inherit; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
  .narrow{ max-width:680px; }
  
  /* ---------- nav ---------- */
  nav.top{
    position:sticky; top:0; z-index:50; background:var(--asphalt); backdrop-filter: blur(6px);
    border-bottom:1px solid var(--line-dark); padding:14px 0;
  }
  nav.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  nav.top .brand{ color:var(--paper); font-family:'IBM Plex Mono'; font-size:14px; font-weight:600; letter-spacing:0.01em; text-decoration:none; }
  nav.top .brand span{ color:var(--amber); }
  nav.top .links{ display:flex; gap:6px; flex-wrap:wrap; }
  nav.top .links a{
    color:#C7CDCF; text-decoration:none; font-family:'IBM Plex Mono'; font-size:12.5px;
    border:1px solid transparent; border-radius:20px; padding:7px 14px; display:inline-block;
  }
  nav.top .links a:hover{ color:var(--paper); }
  nav.top .links a.active{ background:var(--amber); color:var(--asphalt); font-weight:600; }
  
  /* ---------- hero (overview page only) ---------- */
  header.hero{ background:var(--ink); color:var(--paper); padding:76px 0 54px; }
  header.hero .kicker{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--amber); margin:0 0 18px; }
  header.hero h1{ font-size:clamp(2.3rem, 5vw, 3.6rem); line-height:1.05; margin:0 0 22px; font-weight:500; }
  header.hero .dek{ font-size:1.2rem; line-height:1.55; color:#D8DBD9; margin:0 0 30px; }
  header.hero .byline{ font-family:'IBM Plex Mono'; font-size:12.5px; color:#9AA3A2; }
  header.hero .byline a{ color:var(--teal); text-decoration:none; }
  .hero-divider{ border-top:1px solid var(--line-dark); margin:36px 0 0; }
  
  .readouts{
    margin-top:44px; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    
  }
  .readout .num{ font-family:'IBM Plex Mono'; font-size:2rem; color:var(--paper); font-weight:600; }
  .readout .lbl{ font-family:'IBM Plex Mono'; font-size:11.5px; color:#8F9694; margin-top:4px; line-height:1.4; }
  .readout.flag .num{ color:var(--red); }

  .connected-car-intro{ margin:36px 0 10px; }
  .connected-car-def{
    font-size:1.05rem; line-height:1.6; color:#D8DBD9; margin:0 0 22px;
    background:var(--asphalt); border:1px solid var(--line-dark);
    border-radius:14px; padding:18px 22px; display:inline-block;
  }
  .connected-car-def b{ color:var(--paper); }
.connected-car-def b{ color:var(--paper); }

.car-chat{ display:flex; gap:20px; align-items:flex-start; }
.car-chat-photo{ width:220px; flex-shrink:0; margin:0; }
.car-chat-photo img{ width:100%; display:block; border-radius:8px; border:1px solid var(--line-dark); }
.car-chat-photo .photo-fallback{
  display:none; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:1/1; border:1px dashed var(--line-dark); border-radius:8px;
  background:var(--asphalt-2); color:#C7CDCF; font-family:'IBM Plex Mono'; font-size:10.5px; padding:10px;
}
.car-chat-photo .photo-fallback code{ color:var(--paper); }

.car-chat-bubbles{ flex:1; display:flex; flex-direction:column; gap:10px; }
.car-bubble{
  padding:10px 16px; border-radius:14px; border-bottom-left-radius:3px;
  font-size:0.95rem; line-height:1.4; 
}
.car-bubble--teal{ background:rgba(63,169,160,0.16); color:#BEEDE7; border:1px solid var(--teal-dim); }
.car-bubble--amber{ background:rgba(232,163,61,0.16); color:#F6DDB0; border:1px solid var(--amber-dim); }
.car-bubble--red{ background:rgba(240,97,74,0.16); color:#F6C9C2; border:1px solid var(--red); }

@media (max-width:600px){ .car-chat{ flex-direction:column; } .car-chat-photo{ width:140px; } }

.paper-summary{
  margin:36px 0 10px; padding-left:20px; border-left:2px solid var(--teal);
}
.paper-summary-label{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber); margin:0 0 10px;
}
.paper-summary-text{
  font-size:1.15rem; line-height:1.65; color:#E4E6E3; margin:0; max-width:90ch;
}

/* ---------- nav directory  menu */

.paper-directory {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paper-directory h4{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber); margin:0 0 10px; }

.paper-directory p{
  font-family:'Newsreader', Georgia, serif; -webkit-font-smoothing:antialiased;
  font-size:1.15rem; line-height:1.65; color:#E4E6E3; margin:0; max-width:90ch;
}

.directory-item {
  display: grid;
  grid-template-columns: 55px 1fr 30px;
  align-items: center;
  gap: 20px;

  padding: 20px 24px;

  background: var(--paper);
  border: 1px solid  var(--paper);
  border-radius: 10px;

  color: var(--ink);
  font-family:'Newsreader', Georgia, serif; -webkit-font-smoothing:antialiased;
  text-decoration: none;

  transition:
      background 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
}

.directory-number {
  font-family:'IBM Plex Mono';
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-dim);
}

.directory-content h3 {
  font-family:'IBM Plex Mono';
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 600;
}

.directory-content p {
  font-family:'IBM Plex Mono';
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.directory-arrow {
  font-size: 22px;
  color: var(--ink-soft);

  transition:
      transform 0.2s ease,
      color 0.2s ease;
}

.directory-item:hover {
  background: var(--paper-2);
  border-color: var(--paper-2);
  transform: translateX(4px);
}

.directory-item:hover .directory-arrow {
  color: #222;
  transform: translateX(4px);
}


  
  /* ---------- page header (every other page) ---------- */
  header.page-head{ background:var(--ink); color:var(--paper); padding:56px 0 50px; }
  header.page-head .kicker{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--amber); margin:0 0 14px; }
  header.page-head h1{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:500; margin:0 0 14px; }
  header.page-head p{ color:#C7CDCF; max-width:60ch; font-size:1.05rem; }

  .about-callout{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
    padding:30px 0; margin:36px 0 10px;
  }
  .about-block h4{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber); margin:0 0 10px; }
  .about-block p{ font-size:0.92rem; line-height:1.55; margin:0; color:#D8DBD9; }
  .about-block a{ color:var(--teal); text-decoration:underline; }
  @media (max-width:820px){ .about-callout{ grid-template-columns:1fr; } }
  
  /* ---------- generic sections ---------- */
  section{ padding:64px 0; }
  section.light{ background:var(--paper); }
  section.tint{ background:var(--paper-2); }
  section.dark{ background:var(--asphalt); color:var(--paper); }
  section.dark h2, section.dark h3{ color:var(--paper); }
  h2.section-title{ font-size:1.85rem; font-weight:500; margin:0 0 8px; max-width:26ch; }
  p.section-sub{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--ink-soft); margin:0 0 32px; }
  section.dark p.section-sub{ color:#A9AFAD; }
  p{ line-height:1.65; }
  
  .q-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
  .q-list li{ font-size:1.15rem; }
  .q-list .n{ font-family:'IBM Plex Mono'; color:var(--amber); font-size:0.9rem; margin-right:10px; }
  .n{ font-family:'IBM Plex Mono'; color:var(--amber); font-size:0.9rem; margin-right:10px; }


  
  .findings{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
  .findings li{ padding:22px 0; border-top:1px solid var(--line); font-size:1.15rem; }
  #fancy-li{color: var(--amber-dim); font-size: 1.30rem;}
  #q-list-lis{ font-size:1.15rem; border-top:0px;}
  .findings li:first-child{ border-top:none; }
  .findings b{ font-weight:600; }
  
  .harms{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
  .harms div{ background:var(--paper-2); color:var(--ink); padding:20px; font-family:'IBM Plex Mono'; font-size:13px; line-height:1.5; }
  
  .note{
    font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft); background:var(--paper-2);
    border:1px solid var(--line); border-radius:4px; padding:12px 16px; margin-top:18px;
  }
  section.dark .note{ background:var(--asphalt-2); border-color:var(--line-dark); color:#9AA3A2; }
  
  /* ---------- Paper page ---------- */
  .paper-toolbar{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
    margin-bottom:22px;
  }
  .cite-block{
    font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--ink-soft); background:var(--paper-2);
    border:1px solid var(--line); border-radius:4px; padding:16px; line-height:1.7;
  }
  .btn{
    display:inline-block; font-family:'IBM Plex Mono'; font-size:12.5px; text-decoration:none;
    border-radius:20px; padding:9px 18px; border:1px solid var(--line-dark); cursor:pointer;
  }
  .btn.primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); font-weight:600; }
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn.placeholder{ opacity:0.55; border-style:dashed; }
  .btn.placeholder::after{ content:" (add link)"; font-size:10.5px; }
  .pdf-frame{ width:100%; height:82vh; border:1px solid var(--line-dark); border-radius:4px; background:#3A4245; }
  
  /* ---------- Press page ---------- */
  .press-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin:24px 0 40px; }
  .press-contact .card{ border:1px solid var(--line); border-radius:4px; padding:18px; }
  .press-contact .card h4{ margin:0 0 8px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--teal-dim); }
  table.coverage{ width:100%; border-collapse:collapse; font-family:'IBM Plex Mono'; font-size:13px; }
  table.coverage th{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-dark); color:#C7CDCF; font-size:11.5px; }
  table.coverage td{ padding:12px; border-bottom:1px solid var(--line); }
  table.coverage tr.placeholder-row td{ color:var(--ink-soft); font-style:italic; }
  
  /* ---------- Authors page ---------- */
  .authors-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px;}
  .author-card{ background:var(--paper); padding:22px; }
  .author-card .name{ font-weight:600; font-size:1.05rem; }
  .author-card .role{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--teal-dim); margin:4px 0 10px; }
  .author-card .aff{ font-size:0.92rem; color:var(--ink-soft); margin-bottom:10px; }
  .author-card a.email{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
  .author-main {
    margin: -22px;
    padding: 22px;
    text-decoration: none;
  }

  .author-card {
    display: block;
    padding: 22px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
  }
  
  .author-card:hover {
    background-color: var(--paper-hover);
  }
  

  /* ---------- footer ---------- */
  footer{ background:var(--ink); color:#8F9694; padding:40px 0; font-family:'IBM Plex Mono'; font-size:12px; line-height:1.8; }
  footer a{ color:var(--teal); text-decoration:none; }


  /* ================= interactive figure panels ================= */
.panel-intro{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--ink-soft); margin:28px 0 -6px; }
.panel{ background:var(--asphalt-2); border:1px solid var(--line-dark); border-radius:4px; padding:26px; margin-top:14px; }
.controls{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.toggle{
  font-family:'IBM Plex Mono'; font-size:12px; color:#C7CDCF; background:transparent;
  border:1px solid var(--line-dark); border-radius:20px; padding:7px 14px; cursor:pointer;
  transition:all .15s ease;
}
.toggle:hover{ border-color:var(--teal); color:var(--paper); }
.toggle.active{ background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:600; }

.t6-wrap{ overflow-x:auto; }
table.t6{ border-collapse:collapse; width:100%; min-width:640px; font-family:'IBM Plex Mono'; font-size:12.5px; }
table.t6 th{ text-align:left; font-weight:600; color:#C7CDCF; padding:10px 12px; border-bottom:1px solid var(--line-dark); font-size:11.5px; }
table.t6 td{ padding:10px 12px; border-bottom:1px solid var(--line-dark); vertical-align:top; color:#DADDDB; }
table.t6 .app-cell{ color:var(--paper); font-weight:600; white-space:nowrap; }
.cell-chip{
  display:inline-block; border-radius:3px; padding:3px 8px; margin:2px 4px 2px 0;
  background:var(--asphalt); border:1px solid var(--line-dark); color:#C7CDCF; cursor:pointer;
  font-size:11.5px; transition:transform .1s ease;
}
.cell-chip:hover{ transform:translateY(-1px); }
.panel{
  background:var(--asphalt-2); border:1px solid var(--line-dark); border-radius:4px;
  padding:26px; margin:14px auto 0; max-width:800px; /* narrower than the 680px findings column */
}
.cell-chip.chip-severe{ border-color:var(--red); color:#F6C9C2; }
.cell-chip.chip-notable{ border-color:var(--amber); color:#F6DDB0; }
.cell-empty{ color:#9AAFB2; }
tr.dim{ opacity:0.32; }
.t6-inspector{
  margin-top:18px; padding:16px; border:1px dashed var(--line-dark); border-radius:4px;
  font-family:'IBM Plex Mono'; font-size:12.5px; color:#C7CDCF; min-height:52px; background:var(--asphalt);
}
.t6-inspector b{ color:var(--paper); }
.t6-inspector .xnote{ color:#F6C9C2; }

/* ================= Figure 6 ================= */
.fig6-scroll{ overflow-x:auto; }
.fig6-bar{ fill:var(--teal); }
.fig6-scroll{ overflow-x:auto; }
.fig6-bar{ fill:var(--teal); }
.fig6-axis-label{
  fill:#C7CDCF; font-family:'IBM Plex Mono'; font-size:14px;
}
.fig6-legend{ display:flex; gap:20px; margin-top:16px; font-family:'IBM Plex Mono'; font-size:16px; color:var(--paper-2); }
.fig6-legend .sw{ display:inline-flex; align-items:center; gap:10px; }

.fig6-arrow{ stroke:var(--amber); stroke-width:3; fill:none; }
.fig6-add-label{ fill:var(--amber); font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; }

/* ================= Manufacturer disclosures diagram ================= */
.panel-titlebar{
  font-family:'IBM Plex Mono'; font-weight:600; font-size:14px; text-align:center;
  background:var(--ink); color:var(--paper); padding:14px; border-radius:4px 4px 0 0;
  margin:-26px -26px 22px; /* pulls flush to the .panel edges */
}
.disc-edge{ stroke:var(--amber); stroke-width:2.5; }
.disc-node{ cursor:default; }
.disc-node.clickable{ cursor:pointer; }
.disc-node.clickable:hover rect{ stroke:var(--amber); stroke-width:2; }
.disc-label{ fill:var(--paper); font-family:'IBM Plex Mono'; font-size:14px; }
.disc-count{ fill:var(--amber); font-family:'IBM Plex Mono'; font-size:16px; font-weight:600; }
#disclosure-inspector{
  margin-top:18px; padding:16px; border:1px dashed var(--line-dark); border-radius:4px;
  font-family:'IBM Plex Mono'; font-size:12.5px; color:#C7CDCF; min-height:52px; background:var(--asphalt);
  line-height:1.6;
}
#disclosure-inspector b{ color:var(--paper); }


/* ================= Dataset section ================= */
.dataset-cost{
  display:flex; align-items:center; gap:16px; margin:18px 0 26px;
  border:1px solid var(--line); border-radius:6px; padding:16px 22px; background:var(--paper-2);
}
.dataset-cost-num{
  font-family:'IBM Plex Mono'; font-size:2.2rem; font-weight:600; color:var(--teal-dim);
  white-space:nowrap;
}
.dataset-cost-label{
  font-family:'IBM Plex Mono'; font-size:13.5px; color:var(--ink-soft); flex:1;
}

.dataset-wrap{ overflow-x:auto; }
table.dataset-table{ border-collapse:collapse; width:100%; min-width:760px; font-family:'IBM Plex Mono'; font-size:14.5px; }
table.dataset-table th{ text-align:left; padding:10px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); }
table.dataset-table td{ padding:10px; border-bottom:1px solid var(--line); }
table.dataset-table td.center{ text-align:center; font-size:18px; }
table.dataset-table .yes{ color:var(--teal-dim); font-weight:700; }
table.dataset-table .no{ color:var(--grey); }
table.dataset-table .unsure{ color:var(--amber-dim); font-weight:700; }
table.dataset-table td.mfr-cell{ vertical-align:middle; font-weight:600; border-right:1px solid var(--line); }

/* ================= Methodology section ================= */
.method-top{ display:flex; justify-content:center; }
.method-tests{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:900px; margin:0 auto 20px;
}
.method-test-box{ border:2px solid var(--teal); border-radius:8px; padding:18px; }
.method-test-box h4{ margin:0 0 10px; font-size:1rem; text-align:center; }
.method-test-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:0.92rem; }
.method-test-name{ font-weight:600; text-decoration:underline; }

.method-tent-box{ max-width:900px; margin:0 auto 28px; }
.method-tent-inner{ display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:center; }
.method-photo-tent img{ width:100%; display:block; border-radius:6px; border:1px solid var(--line); }
.method-photo-setup img{ width:40%; display:block; border-radius:6px; border:1px solid var(--line); }

.method-tent-row{ display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:center; margin:24px 0; }
.method-photo{ margin:0; }
.method-photo img{ width:100%; display:block; border-radius:6px; border:1px solid var(--line); }
.method-photo .photo-fallback{
  display:none; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:4/3; border:1px dashed var(--line-dark); border-radius:6px;
  background:var(--asphalt-2); color:#C7CDCF; font-family:'IBM Plex Mono'; font-size:12px; padding:20px;
}
.method-photo .photo-fallback code{ color:var(--paper); }
.method-caption{ text-align:center; font-weight:600; margin-top:10px; }

.method-photo-facility{ margin:0; }
.method-photo-facility img{
  width:100%; height:100%; object-fit:cover;
  border-radius:6px; border:1px solid var(--line);
}

.method-facility-row{
  display:grid; grid-template-columns:320px 1fr; gap:10px;
  max-width:900px; margin:0 auto 10px; align-items:stretch;
}
.method-photo-caption{
  grid-column: 1;
  font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft);
  margin:10px 0 10px;
}
.method-tests--stacked{
  display:flex; flex-direction:column; gap:16px; max-width:none;
}
.method-tests--stacked .method-test-box{ flex:1; display:flex; flex-direction:column; justify-content:center; }

@media (max-width: 720px){
  .method-top, .method-tests, .method-tent-inner, .method-facility-row{ grid-template-columns:1fr; }
}