/* AutoNews conversation-led refinement · 2026-10-23
   Final visual layer built from the team's review: calmer hierarchy, one clear
   state at a time, cool automotive colour, compact information architecture. */

:root {
  --gold: #82aec7;
  --gold-dark: #2e6685;
  --gold-bright: #b8d8e8;
  --gold-text: #225b79;
  --gold-light: #eaf3f8;
  --gold-wash: #edf5f9;
  --yellow: #82aec7;
  --yellow-dark: #2e6685;
  --yellow-text: #225b79;
  --on-gold: #f7fbfd;
  --portal-accent: #78a9c2;
  --lux-champagne: #8fbbd2;
  --lux-brass: #376f8e;
}

html:not([data-theme="dark"]) {
  --paper: #f3f6f8;
  --paper-2: #eaf0f3;
  --card: #fbfdfe;
  --ink: #142737;
  --ink2: #415969;
  --ink3: #6d818e;
  --line: #d8e3e9;
}

body.editorial-ui {
  background: #f3f6f8;
  color: var(--ink);
}

body.editorial-ui .header,
body.editorial-ui .content,
body.editorial-ui .site-footer,
body.editorial-ui .sidebar {
  transition: width 280ms cubic-bezier(.22,.82,.32,1), padding 280ms cubic-bezier(.22,.82,.32,1);
}

/* One restrained sidebar treatment on every route. */
@media (min-width: 901px) {
  body.editorial-ui .sidebar {
    position: sticky;
    flex: 0 0 218px;
    width: 218px;
    padding: 25px 16px 18px;
    overflow: visible;
    border-right: 1px solid #d7e2e8;
    background: rgb(247 250 252 / 97%) !important;
    box-shadow: 12px 0 34px rgb(31 70 91 / 5%);
  }
  body.editorial-ui .sidebar::before {
    opacity: .04;
    filter: grayscale(1) saturate(.3);
  }
  body.editorial-ui .sidebar::after {
    height: 2px;
    background: linear-gradient(90deg, #dcecf4, #6f9fb8 48%, transparent);
    box-shadow: none;
  }
  body.editorial-ui .main { flex: 1 1 0; min-width: 0; }
  body.editorial-ui .logo-area { border-bottom: 0; }
  body.editorial-ui .logo-text { color: #17384d; }
  body.editorial-ui .logo-text small { color: #718895; }
  body.editorial-ui :is(.nav-item,.cjl-showcase-nav a) {
    border: 1px solid transparent;
    color: #526a79;
  }
  body.editorial-ui :is(.nav-item,.cjl-showcase-nav a):hover {
    border-color: #dce8ee;
    background: #eef5f8;
    color: #1f4f69;
  }
  body.editorial-ui :is(.nav-item,.cjl-showcase-nav a).active {
    border-color: #d8e7ee;
    background: linear-gradient(90deg,#e0eef5,#f2f7f9);
    color: #183f58;
    box-shadow: inset 3px 0 #6f9fb8;
  }
  body.editorial-ui :is(.nav-item,.cjl-showcase-nav a).active i { color: #376f8e; }
  body.editorial-ui :is(.nav-item,.cjl-showcase-nav a).active::after { display: none; }

  .an-sidebar-toggle {
    position: absolute;
    z-index: 4;
    top: 78px;
    right: -14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d2e0e7;
    border-radius: 50%;
    background: #fbfdfe;
    color: #4f7083;
    box-shadow: 0 6px 18px rgb(31 70 91 / 12%);
    cursor: pointer;
    transition: transform 220ms ease, border-color 180ms ease, color 180ms ease;
  }
  .an-sidebar-toggle:hover { border-color: #83adc3; color: #235b78; transform: translateX(1px); }
  .an-sidebar-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  body.sidebar-collapsed .sidebar { flex-basis: 76px; width: 76px; padding-inline: 11px; }
  body.sidebar-collapsed .an-sidebar-toggle i { transform: rotate(180deg); }
  body.sidebar-collapsed .logo-area { justify-content: center; padding-inline: 0; }
  body.sidebar-collapsed .logo-text,
  body.sidebar-collapsed .cjl-showcase-nav__label,
  body.sidebar-collapsed .cjl-showcase-nav__divider,
  body.sidebar-collapsed .nav-divider,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .designer-info > div:not(.avatar),
  body.sidebar-collapsed .designer-go { display: none !important; }
  body.sidebar-collapsed :is(.nav-item,.cjl-showcase-nav a) {
    justify-content: center;
    min-height: 46px;
    padding-inline: 0;
    font-size: 0;
  }
  body.sidebar-collapsed :is(.nav-item,.cjl-showcase-nav a) i { margin: 0; font-size: 17px; }
  body.sidebar-collapsed .nav-dropdown .dropdown-menu { display: none !important; }
  body.sidebar-collapsed .designer-info { justify-content: center; padding: 14px 0 0; }
  body.sidebar-collapsed .designer-info .avatar { margin: 0; }
}

@media (max-width: 900px) { .an-sidebar-toggle { display: none; } }

.designer-info {
  position: relative;
  align-items: center;
  text-decoration: none;
}
.designer-info .designer-go { margin-left: auto; color: #78909d; font-size: 11px; }
.designer-info:hover .designer-go { transform: translateX(2px); }

/* Header: quiet utility rail. */
body.editorial-ui .header { border-bottom-color: #d8e3e9; }
body.page-home .header-right :is(#notify-bell,.user-profile,.auth-links) { display: none !important; }
body.editorial-ui .header-search:focus-within {
  border-color: #6f9fb8;
  box-shadow: 0 0 0 3px rgb(111 159 184 / 14%);
}
body.editorial-ui .btn-primary,
body.editorial-ui :is(.lane-go,.cjl-btn--primary) {
  border-color: #2e6685;
  background: #2e6685;
  color: #fff;
}
body.editorial-ui .btn-primary:hover,
body.editorial-ui :is(.lane-go,.cjl-btn--primary):hover { background: #255873; color: #fff; }

/* No black/yellow status dots. Current state is expressed by the surface itself. */
.an-filter-choice.active::after { display: none !important; }
body.editorial-ui .filter-item.active {
  border-color: #7da9c0 !important;
  background: #e7f1f6 !important;
  color: #1d5573 !important;
  box-shadow: inset 0 0 0 1px rgb(63 116 145 / 8%);
}

/* Dropdown copy is vertically centred and never collides with the next row. */
body.editorial-ui .dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-block: 8px;
  line-height: 1.35;
}
body.editorial-ui .nav-dropdown.open { z-index: 15; }
.an-instrument-head::after { display: none !important; }
body.editorial-ui :is(.section-title,.cjl-section-title,.cjl-editorial-head h2)::before {
  width: 3px;
  height: 18px;
  margin: 0 9px -3px 0;
  background: #6f9fb8;
}

/* Homepage editorial modules: keep the section hierarchy quiet.  The old
   three-pixel black rule read like a detached underline, and the green/gold
   morning card belonged to the retired palette. */
body.page-home .cjl-editorial-head {
  border-top: 0 !important;
  padding-top: 0 !important;
}
body.page-home .cjl-editorial-brief {
  background: linear-gradient(145deg,#18384a 0%,#254f65 100%) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%),0 16px 38px rgb(29 70 92 / 13%);
}
body.page-home .cjl-editorial-brief > span { color: #b9d9e8; }
body.page-home .cjl-editorial-brief p { color: #d6e5ec; }
body.page-home .cjl-editorial-brief small { color: #bed2dc; }
body.page-home .cjl-editorial-brief a { color: #e3f2f8; }
body.page-home .cjl-editorial-brief .an-wave i { background: #79abc3; }

/* Car library: brand first, then models on demand. */
.car-library-shell { width: min(1120px, 100%); margin: 0 0 0 clamp(0px, 2vw, 28px); }
.car-library-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
  padding: 26px 28px;
  border: 1px solid rgb(77 126 151 / 16%);
  border-radius: 18px;
  background: linear-gradient(105deg,rgb(247 251 253 / 96%),rgb(232 242 247 / 82%));
  box-shadow: 0 18px 54px rgb(35 77 99 / 7%);
}
.car-library-head .eyebrow { color: #557b90; font-size: 10px; font-weight: 750; letter-spacing: .24em; }
.car-library-head h1 { margin: 9px 0 6px; font: 650 clamp(32px,4vw,52px)/1.1 var(--serif); letter-spacing: -.035em; }
.car-library-head p { margin: 0; color: var(--ink3); line-height: 1.7; }
.car-library-count { color: #2e6685; font: 650 34px/1 var(--sans); }
.car-library-count small { display: block; margin-top: 7px; color: var(--ink3); font-size: 11px; font-weight: 500; }
.car-filter-panel { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgb(251 253 254 / 88%); }
.car-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.car-filter-row + .car-filter-row { margin-top: 8px; }
.car-filter-label { width: 42px; color: var(--ink3); font-size: 12px; }
.car-filter-result { margin: 10px 0 0 49px; color: var(--ink3); font-size: 12px; line-height: 1.65; }
.car-library-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.car-tool-entry { display: flex; align-items: center; gap: 13px; min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgb(251 253 254 / 92%); color: inherit; text-decoration: none; }
.car-tool-entry i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e5f0f5; color: #2e6685; }
.car-tool-entry b { display: block; color: #183f58; }
.car-tool-entry small { display: block; margin-top: 3px; color: var(--ink3); }
.car-brand-list { display: grid; gap: 10px; }
.car-brand-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgb(251 253 254 / 94%); box-shadow: 0 8px 26px rgb(35 77 99 / 4%); }
.car-brand-card > summary { display: grid; grid-template-columns: 48px minmax(0,1fr) auto auto; align-items: center; gap: 14px; min-height: 74px; padding: 10px 16px; cursor: pointer; list-style: none; }
.car-brand-card > summary::-webkit-details-marker { display: none; }
.car-brand-monogram { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #cfe0e8; border-radius: 12px; background: linear-gradient(145deg,#eef6f9,#dbeaf1); color: #285f7b; font: 750 14px/1 var(--sans); letter-spacing: .04em; }
.car-brand-title b { display: block; color: #173b51; font-size: 16px; }
.car-brand-title small { display: block; margin-top: 4px; color: var(--ink3); font-size: 11px; }
.car-brand-stats { color: #69808d; font-size: 12px; white-space: nowrap; }
.car-brand-chevron { color: #5e8194; transition: transform 220ms ease; }
.car-brand-card[open] .car-brand-chevron { transform: rotate(180deg); }
.car-brand-body { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 18px; padding: 0 16px 18px 78px; border-top: 1px solid #e2eaee; }
.car-brand-visual { position: relative; min-height: 142px; margin-top: 16px; overflow: hidden; border-radius: 12px; background: #dce8ee; }
.car-brand-visual img { width: 100%; height: 100%; min-height: 142px; object-fit: cover; filter: saturate(.72) contrast(.94); }
.car-brand-visual span { position: absolute; right: 8px; bottom: 7px; padding: 3px 7px; border-radius: 999px; background: rgb(12 35 49 / 72%); color: #edf6fa; font-size: 9px; letter-spacing: .08em; }
.car-model-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-content: start; padding-top: 16px; }
.car-model-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid #dce6eb; border-radius: 10px; background: #f7fafb; color: #24495d; text-decoration: none; transition: transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.car-model-link:hover { transform: translateY(-1px); border-color: #85aec2; background: #edf5f8; }
.car-model-link small { color: #76909e; white-space: nowrap; }

/* Events become compact expandable rows instead of a deck of independent cards. */
.ev-compact-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.ev-row { background: rgb(251 253 254 / 96%); }
.ev-row > summary { position: relative; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 82px; padding: 14px 18px 14px 0; cursor: pointer; list-style: none; }
.ev-row > summary::-webkit-details-marker { display: none; }
.ev-row-rail { align-self: stretch; border-radius: 0 8px 8px 0; background: #739db4; }
.ev-row-copy h3 { margin: 0 0 7px; color: #183648; font-size: 16px; line-height: 1.45; }
.ev-row-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #718692; font-size: 12px; }
.ev-row-toggle { display: inline-flex; align-items: center; gap: 8px; color: #386c87; font-size: 12px; white-space: nowrap; }
.ev-row-toggle i { transition: transform 200ms ease; }
.ev-row[open] .ev-row-toggle i { transform: rotate(180deg); }
.ev-row-detail { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 18px 18px 23px; }
.ev-row-sources { display: flex; flex-wrap: wrap; gap: 7px; }
.ev-row-sources span { padding: 5px 9px; border: 1px solid #d8e5eb; border-radius: 999px; background: #f4f8fa; color: #587484; font-size: 11px; }
.ev-row-go { flex: 0 0 auto; color: #225b79; font-size: 13px; font-weight: 700; text-decoration: none; }

/* News detail stays optically left of centre and all major blocks share a width. */
body.editorial-ui .article-nyt {
  width: min(940px, calc(100% - 24px));
  max-width: 940px;
  margin-left: clamp(0px, 3vw, 46px);
  margin-right: auto;
  padding-inline: clamp(22px, 4vw, 52px);
}
body.editorial-ui .article-nyt > :is(.quality-panel,.article-lede,.nutrition-label,.lineage-box,.reader-judge,.lens-summary,.lens-quotes,.article-hero-img,.versus-entry,.sizecard) { width: 100%; box-sizing: border-box; }
body.editorial-ui .article-nyt h1 { max-width: 18em; letter-spacing: -.035em; }
body.editorial-ui .reader-judge { text-align: left; }
body.editorial-ui .reader-judge-actions { display: inline-flex; width: auto; }
body.editorial-ui .reader-judge-actions .rj-btn[aria-pressed="true"] {
  border-color: #7ca9c0 !important;
  background: linear-gradient(135deg,#dcecf4,#c7dfe9) !important;
  color: #173f56 !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 74%),0 7px 18px rgb(42 91 116 / 12%) !important;
}
.an-choice-indicator { background: #3e7896; box-shadow: 0 0 10px rgb(62 120 150 / 32%); }

/* Route and control accents follow the blue-grey system. */
.an-route-progress::before { background: linear-gradient(90deg,#245d7b,#76abc5 62%,#d8edf6); box-shadow: 0 0 16px rgb(80 142 173 / 42%); }
.an-route-road::before { background: repeating-linear-gradient(90deg,transparent 0 24px,#86b1c6 24px 74px,transparent 74px 102px); }
.an-route-car__body { background: #6e9fb9; }
.an-route-car__body::before { background: linear-gradient(110deg,#6e9fb9 0 19%,#304c5c 20% 78%,#6e9fb9 79%); }

/* Event universe follows the same cool dashboard palette as the rest of the site. */
body.editorial-ui[data-page-visual="events"] .uni-wrap {
  background: linear-gradient(180deg,#102733 0%,#081821 100%);
  border-color: #294758;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
body.editorial-ui[data-page-visual="events"] .uni-lead { color: #a9bec9; }
body.editorial-ui[data-page-visual="events"] .uni-lead b { color: #edf7fb; }
body.editorial-ui[data-page-visual="events"] .uni-lead b.uni-hi { color: #9ad8f1; }
body.editorial-ui[data-page-visual="events"] :is(.uni-lead .uni-sub,.uni-ctl-cap,.uni-ctl-sub,.uni-hint,.uni-note) { color: #7f9aa8; }
body.editorial-ui[data-page-visual="events"] :is(.uni-lbtn,.uni-reset,.uni-zoom button) {
  border-color: #365768;
  background: rgb(255 255 255 / 3%);
  color: #bfd0d8;
}
body.editorial-ui[data-page-visual="events"] :is(.uni-lbtn,.uni-reset,.uni-zoom button):hover {
  border-color: #75b5d2;
  color: #f2fbff;
}
body.editorial-ui[data-page-visual="events"] .uni-lbtn.is-on {
  border-color: #74afca;
  background: rgb(92 164 196 / 16%);
  color: #a9dff3;
}
body.editorial-ui[data-page-visual="events"] .uni-tip {
  background: rgb(7 23 34 / 96%);
  border-color: #365768;
  color: #e7f3f8;
}
body.editorial-ui[data-page-visual="events"] .uni-tip b { color: #f4fbfe; }
body.editorial-ui[data-page-visual="events"] .uni-tip span { color: #a4bbc7; }
body.editorial-ui[data-page-visual="events"] .uni-legend { color: #9cb3bf; }
body.editorial-ui[data-page-visual="events"] .uni-legend b { color: #e7f3f8; }
body.editorial-ui[data-page-visual="events"] .uni-legend .ul-3 { background: #8ed5f2; box-shadow: 0 0 9px rgb(107 195 232 / 66%); }
body.editorial-ui[data-page-visual="events"] .uni-legend .ul-2 { background: #498ba8; }
body.editorial-ui[data-page-visual="events"] .uni-legend .ul-1 { background: #607785; }
body.editorial-ui[data-page-visual="events"] .uni-note { border-top-color: #244352; }
body.editorial-ui[data-page-visual="events"] .uni-note b { color: #bfd0d8; }

@media (max-width: 820px) {
  .car-library-shell { width: 100%; margin: 0; }
  .car-library-head { grid-template-columns: 1fr; padding: 22px 20px; }
  .car-library-count { font-size: 26px; }
  .car-library-tools { grid-template-columns: 1fr; }
  .car-brand-body { grid-template-columns: 1fr; padding-left: 16px; }
  .car-brand-visual { display: none; }
  .car-model-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ev-row > summary { grid-template-columns: 6px minmax(0,1fr); }
  .ev-row-toggle { display: none; }
  .ev-row-detail { align-items: flex-start; flex-direction: column; padding-left: 21px; }
  body.editorial-ui .article-nyt { width: 100%; margin-inline: 0; padding-inline: 18px; }
}

@media (max-width: 520px) {
  .car-brand-card > summary { grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; }
  .car-brand-stats { display: none; }
  .car-model-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .an-sidebar-toggle,.car-model-link,.car-brand-chevron,.ev-row-toggle i { transition: none !important; }
}