/* AutoNews Grand Touring Edition · premium visual refinement
   Built as a final layer so the site's routes and business templates stay intact. */
:root {
  --lux-graphite: #101714;
  --lux-forest: #17271f;
  --lux-forest-2: #21372c;
  --lux-ivory: #f8f5ec;
  --lux-champagne: #e2bd51;
  --lux-brass: #9c7b23;
  --lux-chrome: #c9d1cd;
  --lux-shadow: 0 22px 60px rgb(20 35 28 / 12%);
  --lux-shadow-soft: 0 10px 32px rgb(20 35 28 / 8%);
  --lux-border: color-mix(in srgb, var(--ink) 11%, transparent);
  --lux-glass: color-mix(in srgb, var(--card) 88%, transparent);
}
html:not([data-theme="dark"]) {
  --paper: #f1f3f0;
  --paper-2: #e8ece8;
  --card: #fcfdfb;
  --ink: #17201d;
  --ink2: #3f4b46;
  --ink3: #65716c;
  --line: #dce2de;
  --gold: #e6bd45;
  --gold-text: #78601b;
  --gold-wash: #f6edcf;
}
html[data-theme="dark"] {
  --paper: #101613;
  --paper-2: #19221e;
  --card: #18211d;
  --ink: #f2f2eb;
  --ink2: #d2d9d4;
  --ink3: #a8b3ac;
  --line: #334039;
  --gold: #e1b94a;
  --gold-text: #e5c970;
  --gold-wash: #332e1d;
  --lux-glass: rgb(24 33 29 / 88%);
  --lux-shadow: 0 24px 70px rgb(0 0 0 / 36%);
  --lux-shadow-soft: 0 12px 34px rgb(0 0 0 / 24%);
}

body.editorial-ui {
  background:
    radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 25rem),
    var(--paper);
}

/* Deep, tailored sidebar: the equivalent of a leather-and-metal cockpit rail. */
body.editorial-ui .sidebar {
  isolation: isolate;
  overflow: hidden;
  border-right: 1px solid rgb(255 255 255 / 8%);
  background:
    linear-gradient(180deg, rgb(11 20 16 / 97%), rgb(17 31 24 / 98%)) !important;
  box-shadow: 18px 0 50px rgb(11 21 17 / 9%);
}
body.editorial-ui .sidebar::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 52%, rgb(13 23 19 / 92%) 90%),
    url("../images/luxury-road-ambient-v1.4ab4c1a47df0.webp") 68% 40% / auto 76% no-repeat;
  opacity: .14;
  filter: saturate(.72) contrast(1.08);
  pointer-events: none;
}
body.editorial-ui .sidebar::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 2%, var(--lux-champagne) 24% 68%, transparent 96%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 42%, transparent);
}
body.editorial-ui .logo-area {
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}
body.editorial-ui .logo-text { color: var(--lux-ivory); }
body.editorial-ui .logo-text small { color: rgb(242 244 238 / 52%); }
body.editorial-ui :is(.nav-item,.cjl-showcase-nav a) {
  border: 1px solid transparent;
  color: rgb(236 240 234 / 73%);
}
body.editorial-ui :is(.nav-item,.cjl-showcase-nav a):hover {
  border-color: rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 6%);
  color: #fffdf5;
}
body.editorial-ui :is(.nav-item,.cjl-showcase-nav a).active {
  border-color: rgb(229 192 82 / 28%);
  background: linear-gradient(110deg, rgb(229 192 82 / 22%), rgb(229 192 82 / 8%));
  color: #fff8de;
  box-shadow: inset 3px 0 var(--lux-champagne), 0 9px 22px rgb(0 0 0 / 12%);
}
body.editorial-ui :is(.nav-item,.cjl-showcase-nav a).active i { color: var(--lux-champagne); }
body.editorial-ui .cjl-showcase-nav__label,
body.editorial-ui .mobile-menu-label { color: rgb(239 242 235 / 43%); }
body.editorial-ui .cjl-showcase-nav__divider,
body.editorial-ui .designer-info { border-color: rgb(255 255 255 / 10%); }
body.editorial-ui .cjl-showcase-sidebar-note,
body.editorial-ui .designer-info {
  border-color: rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 5%);
  color: rgb(242 244 238 / 72%);
}
body.editorial-ui .cjl-showcase-sidebar-note b,
body.editorial-ui .designer-title { color: #f6f2e7; }
body.editorial-ui .cjl-showcase-profile { color: #f4f2ea; }
body.editorial-ui .cjl-showcase-profile small { color: rgb(241 242 237 / 52%); }

/* A restrained cinematic environment behind the upper page. */
body.editorial-ui .main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 82%, transparent) 0 500px, var(--paper) 820px),
    var(--paper);
}

/* Structural hooks only. Route-specific imagery, masks and responsive values
   live in page-visuals.css so this component layer stays reusable. */
body.editorial-ui .an-page-watermark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
body.editorial-ui .main::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  pointer-events: none;
}

/* Glass header with a fine chrome edge. */
body.editorial-ui .header {
  z-index: 50;
  min-height: 78px;
  border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--card) 82%, transparent) !important;
  box-shadow: 0 8px 32px rgb(18 31 25 / 6%);
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
}
body.editorial-ui .header::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 44%, transparent), transparent);
}
body.editorial-ui .header-search {
  border-color: color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 65%), 0 7px 20px rgb(22 37 30 / 5%);
}
html[data-theme="dark"] body.editorial-ui .header-search { box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 8px 24px rgb(0 0 0 / 18%); }
body.editorial-ui .theme-toggle,
body.editorial-ui :is(.elder-toggle-btn,.lens-toggle-btn,.header-ask,.cjl-showcase-my) {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 48%);
}

body.editorial-ui .content { position: relative; z-index: 1; }

/* Premium masthead panels. */
body.page-home .cjl-home-intro,
body.editorial-ui:not(.page-home) :is(.cjl-page-head,.page-head,.patent-head) {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 72%, transparent));
  box-shadow: inset 0 1px rgb(255 255 255 / 72%), var(--lux-shadow-soft);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
body.page-home .cjl-home-intro { padding: 24px 28px; }
body.editorial-ui:not(.page-home) :is(.cjl-page-head,.page-head,.patent-head) { padding: 28px 30px; overflow: hidden; }
body.editorial-ui:not(.page-home) :is(.cjl-page-head,.page-head,.patent-head)::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -88px;
  bottom: -144px;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 26px color-mix(in srgb, var(--gold) 3%, transparent), 0 0 0 52px color-mix(in srgb, var(--gold) 2%, transparent);
  pointer-events: none;
}
.an-head-meter {
  border-color: color-mix(in srgb, var(--gold-text) 25%, var(--line));
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 65%), 0 6px 18px rgb(21 35 28 / 7%);
}
.an-head-meter i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent), 0 0 11px color-mix(in srgb, var(--green) 38%, transparent); }

/* Hero and inspection station feel like coach-built dashboard modules. */
body.page-home .cjl-home-priority { gap: 22px; }
body.page-home .cjl-home-focus {
  border: 1px solid rgb(223 188 78 / 36%);
  border-radius: 22px;
  box-shadow: 0 25px 68px rgb(14 27 20 / 22%), inset 0 0 0 1px rgb(255 255 255 / 8%);
}
body.page-home .cjl-home-focus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 17%), transparent 22%),
    radial-gradient(circle at var(--lux-x, 70%) var(--lux-y, 35%), rgb(235 198 83 / 12%), transparent 24%);
  mix-blend-mode: screen;
}
body.page-home .cjl-home-focus__overlay { background: linear-gradient(180deg, transparent 8%, rgb(4 14 10 / 20%) 38%, rgb(6 20 14 / 96%) 100%); }
body.page-home .cjl-home-focus__kicker > * { box-shadow: 0 8px 22px rgb(0 0 0 / 16%); }
body.page-home .cjl-home-check {
  border-color: color-mix(in srgb, var(--gold-text) 24%, var(--line));
  border-radius: 22px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--gold-wash) 25%, var(--card)));
  box-shadow: inset 0 1px rgb(255 255 255 / 72%), var(--lux-shadow);
}
body.page-home .cjl-home-check__icon { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 9%, transparent); }

/* Consistent high-end materials across cards. */
body.editorial-ui :is(.cjl-shortcuts__grid > a,.cjl-news-card,.patent-card,.content-card,.cjl-directory,.cjl-editorial-aside > section,.cjl-showcase-forward) {
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 95%, transparent), color-mix(in srgb, var(--card) 88%, var(--paper-2)));
  box-shadow: inset 0 1px rgb(255 255 255 / 72%), 0 8px 28px rgb(20 35 28 / 5%);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
html[data-theme="dark"] body.editorial-ui :is(.cjl-shortcuts__grid > a,.cjl-news-card,.patent-card,.content-card,.cjl-directory,.cjl-editorial-aside > section,.cjl-showcase-forward) {
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 12px 34px rgb(0 0 0 / 22%);
}

/* Reading and data panels stay denser than decorative cards so text always wins. */
body.editorial-ui:not(.page-home) .article-nyt {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 70%), 0 18px 48px rgb(20 35 28 / 7%);
  backdrop-filter: blur(20px) saturate(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.04);
}
body.editorial-ui.page-car-compare {
  --cc-paper: color-mix(in srgb, var(--paper) 97%, transparent);
  --cc-panel: color-mix(in srgb, var(--card) 94%, transparent);
}
body.editorial-ui.page-car-compare :is(.cjl-compare__hero,.cjl-compare__selector,.cjl-compare__summary,.cjl-compare__table-wrap,.cjl-data-card,.cjl-compare__empty) {
  box-shadow: inset 0 1px rgb(255 255 255 / 62%), 0 14px 38px rgb(20 35 28 / 6%);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
body.editorial-ui .measure-page { --measure-paper: color-mix(in srgb, var(--card) 94%, transparent); }
body.editorial-ui :is(.measure-hero,.measure-picker,.measure-readout,.measure-source-note) {
  box-shadow: inset 0 1px rgb(255 255 255 / 62%), 0 14px 38px rgb(20 35 28 / 6%);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
body.editorial-ui .measure-source-note { background: color-mix(in srgb, var(--paper-2) 92%, transparent); }
body.page-home .cjl-shortcuts__grid a { border-radius: 14px; }
body.page-home .cjl-shortcuts__grid i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gold-wash);
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-text) 11%, transparent);
}
body.page-home .cjl-editorial-card {
  margin: 0 -14px;
  padding: 20px 14px;
  border-radius: 14px;
  transition: background-color 220ms ease, transform 260ms var(--an-ease-drive), box-shadow 260ms ease;
}
body.page-home .cjl-editorial-card:hover { background: color-mix(in srgb, var(--card) 82%, transparent); }
body.page-home .cjl-editorial-card__cover { border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 12px 24px rgb(12 26 18 / 12%); }
body.editorial-ui .cjl-news-card,
body.editorial-ui .patent-card { border-radius: 17px; }

/* Forms and filters now resemble machined switchgear. */
body.editorial-ui :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: inset 0 1px 2px rgb(14 28 20 / 4%), 0 1px rgb(255 255 255 / 72%);
}
body.editorial-ui :is(input,textarea,select):focus {
  border-color: color-mix(in srgb, var(--gold-text) 72%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 17%, transparent), 0 10px 24px rgb(19 33 26 / 7%);
}
body.editorial-ui :is(.filter-item,.cjl-tabs a,.cjl-filter-panel a) {
  border-radius: 10px;
  box-shadow: inset 0 1px rgb(255 255 255 / 60%);
}
body.editorial-ui :is(.filter-item,.cjl-tabs a,.cjl-filter-panel a).active {
  background: linear-gradient(135deg, #efcc62, #d8a92f);
  color: #1e261f;
  box-shadow: inset 0 1px rgb(255 255 255 / 48%), 0 8px 19px rgb(171 128 21 / 18%);
}
body.editorial-ui :is(.btn-primary,.cjl-btn-primary,button[type="submit"],.lane-go) {
  border-color: #d0a22e;
  background: linear-gradient(135deg, #f2cf63 0%, #e4b83d 56%, #d7a52b 100%);
  color: #19221d;
  box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 11px 24px rgb(166 126 25 / 18%);
}
body.editorial-ui :is(.btn-primary,.cjl-btn-primary,button[type="submit"],.lane-go):hover {
  background: linear-gradient(135deg, #f5d675, #e6b83b);
  box-shadow: inset 0 1px rgb(255 255 255 / 64%), 0 14px 28px rgb(166 126 25 / 25%);
}

/* Spotlight follows the pointer without moving layout. */
.an-lux-surface { isolation: isolate; }
.an-lux-card-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--lux-x, 50%) var(--lux-y, 50%), color-mix(in srgb, var(--gold) 14%, transparent), transparent 68%);
  transition: opacity 260ms ease;
}
.an-lux-surface:hover > .an-lux-card-glow { opacity: 1; }

/* A small machined wheel identifies controls and spins on hover/press. */
.an-mini-wheel {
  position: absolute;
  z-index: 3;
  right: 9px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg, currentColor 0 8deg, transparent 8deg 58deg, currentColor 58deg 68deg, transparent 68deg 118deg, currentColor 118deg 128deg, transparent 128deg 178deg, currentColor 178deg 188deg, transparent 188deg 238deg, currentColor 238deg 248deg, transparent 248deg 298deg, currentColor 298deg 308deg, transparent 308deg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card) 70%, transparent);
  transform: translateX(-5px) scale(.8);
  transition: opacity 160ms ease, transform 220ms var(--an-ease-drive);
}
.an-wheel-option { padding-right: 31px !important; }
.an-wheel-option:hover .an-mini-wheel,
.an-wheel-option:focus-visible .an-mini-wheel { opacity: .66; transform: translateX(0) scale(1) rotate(80deg); }
.an-wheel-option.is-pressed .an-mini-wheel { opacity: 1; animation: an-mini-wheel-spin 380ms cubic-bezier(.2,.8,.2,1); }
@keyframes an-mini-wheel-spin { to { rotate: 1.2turn; } }

/* Generic navigation gets a headlight streak and a short acceleration line. */
.an-speed-option {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.an-speed-option::before {
  content: "";
  position: absolute;
  left: 14px;
  right: calc(100% - 14px);
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0;
  transition: right 260ms var(--an-ease-drive), opacity 160ms ease;
}
.an-speed-option:hover::before,
.an-speed-option:focus-visible::before { right: 42%; opacity: .72; }
.an-click-streak {
  position: absolute;
  z-index: 4;
  inset: -35% auto -35% -38%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 25%, rgb(255 244 190 / 78%) 48%, transparent 72%);
  transform: skewX(-16deg);
  animation: an-headlight-click 480ms var(--an-ease-drive) forwards;
}
@keyframes an-headlight-click { to { left: 112%; } }
.an-click-streak--nav {
  inset: 12% auto 12% -5px;
  width: 4px;
  background: linear-gradient(180deg, transparent, #dff4ff 35% 65%, transparent);
  box-shadow: 0 0 14px rgb(121 190 226 / 52%);
  transform: none;
  animation: an-nav-click 430ms var(--an-ease-drive) forwards;
}
.an-click-streak--editorial {
  inset: 50% auto auto 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(210 235 248 / 90%) 28% 56%, transparent);
  box-shadow: 0 -7px 0 rgb(164 202 222 / 18%), 0 7px 0 rgb(164 202 222 / 12%);
  transform: scaleX(.08);
  transform-origin: left;
  animation: an-editorial-click 460ms var(--an-ease-drive) forwards;
}
.an-click-streak--tool {
  background: linear-gradient(105deg, transparent 0 25%, rgb(214 239 250 / 82%) 48%, transparent 72%);
}
@keyframes an-nav-click {
  0% { opacity: 0; transform: translateY(38%) scaleY(.35); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-38%) scaleY(1); }
}
@keyframes an-editorial-click {
  0% { opacity: 0; transform: scaleX(.08); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}

/* Filter chips behave like compact drive-setting toggles. */
.an-filter-choice {
  position: relative;
  transition: transform 160ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 220ms ease;
}
.an-filter-choice:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold-text) 42%, var(--line)); }
.an-filter-choice.active::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1d281f;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 22%);
}

/* Article links use editorial motion: draw the route, then advance the arrow. */
.an-inline-route {
  position: relative;
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(var(--gold),var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color 180ms ease, background-size 260ms var(--an-ease-drive);
}
.an-inline-route:hover { color: var(--gold-text); background-size: 100% 1px; }

/* Reader judgement: a centered, restrained drive-mode selector. */
body.editorial-ui .reader-judge {
  margin-top: 42px;
  padding-top: 28px;
  border-top-color: color-mix(in srgb, var(--ink) 11%, transparent);
}
body.editorial-ui .reader-judge h3 { margin-bottom: 8px; font-size: clamp(20px,2vw,26px); }
body.editorial-ui .reader-judge > p { margin-bottom: 18px; line-height: 1.75; }
body.editorial-ui .reader-judge-actions {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-2) 76%, transparent);
  box-shadow: inset 0 1px 3px rgb(16 27 21 / 5%), 0 1px rgb(255 255 255 / 62%);
}
body.editorial-ui .reader-judge-actions .rj-btn {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  min-width: 106px;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--ink2) !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
body.editorial-ui .reader-judge-actions .rj-btn:hover {
  border-color: color-mix(in srgb, var(--gold-text) 22%, transparent) !important;
  background: color-mix(in srgb, var(--card) 74%, transparent) !important;
  color: var(--ink) !important;
}
body.editorial-ui .reader-judge-actions .rj-btn[aria-pressed="true"] {
  border-color: #d5a82e !important;
  background: linear-gradient(135deg,#f0cc60,#dda92d) !important;
  color: #17201c !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 6px 16px rgb(157 118 19 / 18%) !important;
}
body.editorial-ui .reader-judge-actions .rj-btn.is-selecting { animation: an-drive-choice 420ms var(--an-ease-drive); }
body.editorial-ui .reader-judge-actions .rj-btn::after,
body.editorial-ui .reader-judge-actions .rj-btn .an-ripple { display: none !important; }
@keyframes an-drive-choice {
  38% { transform: scale(.965); background: color-mix(in srgb, var(--gold) 32%, transparent); }
}
.an-choice-indicator {
  position: absolute;
  left: var(--choice-x, 5px);
  bottom: 1px;
  width: var(--choice-w, 0);
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  background: var(--gold-text);
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent);
  transition: left 260ms var(--an-ease-drive), width 260ms var(--an-ease-drive), opacity 140ms ease;
  pointer-events: none;
}
.an-choice-indicator.is-on { opacity: 1; }
body.editorial-ui .rj-compare {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,transparent),color-mix(in srgb,var(--paper-2) 74%,transparent));
  box-shadow: inset 0 1px rgb(255 255 255 / 58%);
}
body.editorial-ui .rj-compare[hidden] { display: none !important; }

/* Query/filter navigation is a short mode change, not a full road transition. */
body.an-soft-leaving .content { animation: an-soft-mode-out 220ms ease forwards; }
@keyframes an-soft-mode-out {
  to { opacity: .45; transform: translateY(3px); filter: saturate(.75); }
}

/* Concrete vehicle choices receive the rolling wheel; general navigation uses
   the lighter feedback variants above. */
.an-wheel-click {
  position: fixed;
  z-index: 10060;
  left: var(--wheel-x);
  top: var(--wheel-y);
  width: 30px;
  height: 30px;
  margin: -15px;
  pointer-events: none;
  color: var(--lux-champagne);
}
.an-wheel-click__trail {
  position: absolute;
  z-index: -1;
  right: 16px;
  top: 13px;
  width: 88px;
  height: 4px;
  transform-origin: right;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 16%, transparent) 34%, var(--gold));
  filter: blur(.2px);
  animation: an-wheel-trail 620ms ease-out forwards;
}
.an-wheel-click__rim {
  display: block;
  width: 30px;
  height: 30px;
  border: 4px solid #202824;
  border-radius: 50%;
  background:
    radial-gradient(circle, #202824 0 12%, #dbe0dc 13% 22%, transparent 23%),
    repeating-conic-gradient(from 0deg, #77827c 0 8deg, #dbe0dc 8deg 17deg, #77827c 17deg 26deg);
  box-shadow: inset 0 0 0 3px #aeb8b2, 0 4px 12px rgb(0 0 0 / 26%), 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent);
  animation: an-wheel-roll 620ms cubic-bezier(.15,.72,.22,1) forwards;
}
.an-wheel-click.is-reverse .an-wheel-click__trail { left: 16px; right: auto; transform-origin: left; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 16%, transparent) 66%, transparent); }
.an-wheel-click.is-reverse .an-wheel-click__rim { animation-name: an-wheel-roll-reverse; }
@keyframes an-wheel-roll {
  0% { opacity: 0; transform: translateX(-8px) translateY(3px) rotate(0deg) scale(.75); }
  14% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--wheel-run, 126px)) translateY(-3px) rotate(760deg) scale(1); }
}
@keyframes an-wheel-roll-reverse {
  0% { opacity: 0; transform: translateX(8px) translateY(3px) rotate(0deg) scale(.75); }
  14% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--wheel-run, -126px)) translateY(-3px) rotate(-760deg) scale(1); }
}
@keyframes an-wheel-trail {
  0% { opacity: 0; transform: scaleX(.15); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: scaleX(1.45); filter: blur(3px); }
}

/* Gear-selection confirmation for dropdowns and filter controls. */
.an-shift-toast {
  position: fixed;
  z-index: 10050;
  right: 26px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgb(229 193 82 / 35%);
  border-radius: 999px;
  background: rgb(13 23 18 / 92%);
  color: #f6f3e9;
  box-shadow: 0 16px 42px rgb(0 0 0 / 28%);
  backdrop-filter: blur(14px);
  pointer-events: none;
  animation: an-shift-in 1.45s var(--an-ease-drive) both;
}
.an-shift-toast span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: #17201c;
  font: 800 12px/1 var(--sans);
}
.an-shift-toast b { font: 650 11px/1 var(--sans); letter-spacing: 1.2px; }
@keyframes an-shift-in {
  0% { opacity: 0; transform: translateY(12px) scale(.94); }
  14%,72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(7px) scale(.97); }
}

/* Full-viewport grand-touring route transition. */
.an-route-transition {
  height: 100vh;
  transform: none;
  background: transparent;
}
.an-route-transition::before {
  inset: 0;
  background:
    radial-gradient(circle at 72% 72%, rgb(226 188 76 / 17%), transparent 26%),
    linear-gradient(125deg, rgb(8 15 12 / 80%), rgb(12 24 18 / 97%));
  opacity: 0;
  clip-path: circle(0 at 100% 100%);
}
body.an-route-leaving .an-route-transition::before { animation: an-lux-curtain-in 600ms cubic-bezier(.25,.75,.24,1) forwards; }
@keyframes an-lux-curtain-in {
  0% { opacity: 0; clip-path: circle(0 at 100% 100%); }
  18% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(145% at 100% 100%); }
}
.an-route-road {
  left: 0;
  right: 0;
  bottom: 9vh;
  height: 50px;
  border-top-color: rgb(255 255 255 / 14%);
}
.an-route-road::before { top: 30px; height: 3px; opacity: .86; }
.an-route-car { bottom: 4px; scale: 1.26; transform-origin: left bottom; }
.an-route-label { display: none; }
.an-route-cockpit {
  position: absolute;
  z-index: 3;
  left: clamp(28px, 7vw, 110px);
  bottom: calc(9vh + 92px);
  color: #f5f3eb;
  opacity: 0;
  transform: translateY(14px);
}
.an-route-cockpit small { display: block; margin-bottom: 12px; color: rgb(238 239 232 / 52%); font: 700 10px/1 var(--sans); letter-spacing: 3.2px; }
.an-route-cockpit strong { display: block; max-width: 620px; font: 700 clamp(25px,4vw,54px)/1.14 var(--sans); letter-spacing: -1.4px; }
.an-route-cockpit span { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--lux-champagne); font: 650 11px/1 var(--sans); letter-spacing: 1.5px; }
.an-route-cockpit span::before { content: ""; width: 46px; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 18px, transparent 18px 23px); }
body.an-route-leaving .an-route-cockpit { animation: an-cockpit-in 460ms 100ms var(--an-ease-drive) forwards; }
@keyframes an-cockpit-in { to { opacity: 1; transform: translateY(0); } }
body.an-route-leaving .an-route-car { animation-duration: 590ms; }
body.an-route-leaving .an-route-road::before { animation-duration: 240ms; }
.an-route-progress.is-loading::before { animation-duration: 590ms; }

/* The new page receives the same curtain in reverse, so the cut feels intentional. */
html.an-route-arrival body.editorial-ui .main { opacity: 0; transform: translateY(10px) scale(.995); }
body.an-route-arriving .an-route-transition { opacity: 1; visibility: visible; transform: none; transition: none; }
body.an-route-arriving .an-route-transition::before {
  opacity: 1;
  clip-path: circle(145% at 100% 100%);
  animation: an-lux-curtain-out 520ms 60ms cubic-bezier(.45,0,.28,1) forwards;
}
@keyframes an-lux-curtain-out {
  to { opacity: 0; clip-path: circle(0 at 100% 100%); }
}
html.an-route-arrival body.editorial-ui.an-page-live .main {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 430ms 150ms ease, transform 620ms 110ms var(--an-ease-brake);
}

/* Destination-aware transitions: vehicle routes keep the road sequence,
   while editorial, verification and public-information routes use their own
   visual language. */
.an-route-transition[data-motion="editorial"] .an-route-road,
.an-route-transition[data-motion="scan"] .an-route-road,
.an-route-transition[data-motion="signal"] .an-route-road,
.an-route-transition[data-motion="glide"] .an-route-road { display: none; }
.an-route-transition[data-motion]::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.an-route-transition[data-motion="editorial"]::before {
  background:
    linear-gradient(90deg, rgb(7 20 30 / 98%), rgb(20 46 62 / 96%)),
    #081722;
}
body.an-route-leaving .an-route-transition[data-motion="editorial"]::before {
  animation: an-editorial-curtain-in 560ms cubic-bezier(.2,.72,.22,1) forwards;
}
body.an-route-leaving .an-route-transition[data-motion="editorial"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 11vw, rgb(195 225 239 / 13%) 11vw calc(11vw + 1px));
  animation: an-editorial-grid-in 520ms 40ms ease-out forwards;
}
.an-route-transition[data-motion="scan"]::before {
  background:
    radial-gradient(circle at 24% 22%, rgb(117 181 213 / 20%), transparent 25%),
    linear-gradient(180deg, rgb(6 19 28 / 97%), rgb(11 34 48 / 98%));
}
body.an-route-leaving .an-route-transition[data-motion="scan"]::before {
  animation: an-scan-curtain-in 560ms cubic-bezier(.2,.72,.22,1) forwards;
}
body.an-route-leaving .an-route-transition[data-motion="scan"]::after {
  background: linear-gradient(180deg, transparent 0 45%, rgb(188 230 249 / 8%) 47%, rgb(205 239 253 / 75%) 50%, rgb(188 230 249 / 8%) 53%, transparent 55%);
  animation: an-scan-beam 570ms ease-out forwards;
}
.an-route-transition[data-motion="signal"]::before {
  background:
    repeating-linear-gradient(135deg, rgb(10 29 41 / 98%) 0 52px, rgb(13 37 51 / 98%) 52px 54px),
    #0a1d29;
}
body.an-route-leaving .an-route-transition[data-motion="signal"]::before {
  animation: an-signal-curtain-in 560ms cubic-bezier(.22,.74,.24,1) forwards;
}
body.an-route-leaving .an-route-transition[data-motion="signal"]::after {
  background: radial-gradient(circle at 76% 50%, transparent 0 11%, rgb(181 220 239 / 36%) 11.2% 11.5%, transparent 11.7% 18%, rgb(181 220 239 / 18%) 18.2% 18.5%, transparent 18.7%);
  animation: an-signal-pulse 560ms ease-out forwards;
}
.an-route-transition[data-motion="glide"]::before {
  background: linear-gradient(118deg, rgb(7 19 27 / 96%), rgb(21 48 63 / 97%));
}
body.an-route-leaving .an-route-transition[data-motion="glide"]::before {
  animation: an-glide-curtain-in 540ms cubic-bezier(.22,.74,.24,1) forwards;
}
@keyframes an-editorial-curtain-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes an-editorial-grid-in {
  from { opacity: 0; transform: translateX(-28px); }
  35% { opacity: 1; }
  to { opacity: .56; transform: none; }
}
@keyframes an-scan-curtain-in {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes an-scan-beam {
  from { opacity: 0; transform: translateY(-54%); }
  18%,76% { opacity: 1; }
  to { opacity: 0; transform: translateY(54%); }
}
@keyframes an-signal-curtain-in {
  from { opacity: 0; clip-path: inset(50% 0); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes an-signal-pulse {
  from { opacity: 0; transform: scale(.72); }
  36% { opacity: 1; }
  to { opacity: .72; transform: scale(1.16); }
}
@keyframes an-glide-curtain-in {
  from { opacity: 0; clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%); }
  to { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
body.an-route-arriving .an-route-transition[data-motion="editorial"]::before {
  clip-path: inset(0);
  animation: an-editorial-curtain-out 500ms 45ms cubic-bezier(.45,0,.28,1) forwards;
}
body.an-route-arriving .an-route-transition[data-motion="scan"]::before {
  clip-path: inset(0);
  animation: an-scan-curtain-out 500ms 45ms cubic-bezier(.45,0,.28,1) forwards;
}
body.an-route-arriving .an-route-transition[data-motion="signal"]::before {
  clip-path: inset(0);
  animation: an-signal-curtain-out 500ms 45ms cubic-bezier(.45,0,.28,1) forwards;
}
body.an-route-arriving .an-route-transition[data-motion="glide"]::before {
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: an-glide-curtain-out 500ms 45ms cubic-bezier(.45,0,.28,1) forwards;
}
@keyframes an-editorial-curtain-out { to { opacity: 0; clip-path: inset(0 0 0 100%); } }
@keyframes an-scan-curtain-out { to { opacity: 0; clip-path: inset(0 0 100% 0); } }
@keyframes an-signal-curtain-out { to { opacity: 0; clip-path: inset(50% 0); } }
@keyframes an-glide-curtain-out { to { opacity: 0; clip-path: polygon(0 0,0 0,0 100%,0 100%); } }

/* Ambient telemetry is decorative and stays behind content. */
.an-ambient-telemetry {
  position: absolute;
  z-index: -1;
  top: 152px;
  right: clamp(18px, 3vw, 52px);
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--ink3);
  opacity: .34;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 48%, color-mix(in srgb, var(--gold) 14%, transparent) 49% 50%, transparent 51%),
    repeating-conic-gradient(from 214deg, color-mix(in srgb, var(--gold) 32%, transparent) 0 1deg, transparent 1deg 7deg);
  -webkit-mask-image: conic-gradient(from 210deg, #000 0 265deg, transparent 265deg);
  mask-image: conic-gradient(from 210deg, #000 0 265deg, transparent 265deg);
}
.an-ambient-telemetry::before { content: "RPM"; font: 700 9px/1 var(--sans); letter-spacing: 2px; }
.an-ambient-telemetry::after { content: "07"; position: absolute; top: 84px; font: 700 21px/1 var(--sans); color: var(--gold-text); }

/* Footer closes the page like a dark rear deck. */
body.editorial-ui .site-footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 34px max(36px, calc((100% - 1440px) / 2));
  border-top: 1px solid rgb(255 255 255 / 8%);
  background:
    linear-gradient(90deg, rgb(12 21 17 / 98%), rgb(18 31 24 / 95%)),
    url("../images/luxury-road-ambient-v1.4ab4c1a47df0.webp") center 72% / cover no-repeat;
  color: rgb(244 246 241 / 66%);
  box-shadow: inset 0 1px rgb(228 190 76 / 14%);
}
body.editorial-ui .site-footer :is(a,b) { color: #ede8d8; }
body.editorial-ui .footer-evidence a { border-color: rgb(255 255 255 / 12%); background: rgb(255 255 255 / 6%); color: #eae9e1; }
body.editorial-ui .footer-disclaimer { color: rgb(241 242 237 / 55%); }

@media (max-width: 1050px) {
  .an-ambient-telemetry { display: none; }
}
@media (max-width: 900px) {
  body.editorial-ui .sidebar { box-shadow: 18px 0 56px rgb(0 0 0 / 24%); }
  body.editorial-ui .header::after { left: 18px; right: 18px; }
}
@media (max-width: 600px) {
  body.page-home .cjl-home-intro {
    padding: 52px 18px 18px;
    border-radius: 15px;
  }
  body.page-home .cjl-home-intro .an-head-meter { top: 14px; left: 18px; }
  body.editorial-ui:not(.page-home) :is(.cjl-page-head,.page-head,.patent-head) { padding: 52px 18px 22px; border-radius: 15px; }
  body.editorial-ui:not(.page-home) :is(.cjl-page-head,.page-head,.patent-head) .an-head-meter { top: 15px; left: 18px; right: auto; }
  body.page-home .cjl-home-focus,
  body.page-home .cjl-home-check { border-radius: 18px; }
  .an-wheel-click { scale: .88; }
  .an-shift-toast { right: 14px; bottom: 82px; }
  .an-route-cockpit { left: 22px; right: 22px; bottom: 25vh; }
  .an-route-road { bottom: 12vh; }
  .an-route-cockpit strong { font-size: 28px; }
  body.editorial-ui .site-footer { padding-inline: 18px; }
  .an-mini-wheel { display: none; }
  .an-wheel-option { padding-right: inherit !important; }
  body.editorial-ui .reader-judge-actions { display: flex; width: 100%; flex-wrap: wrap; }
  body.editorial-ui .reader-judge-actions .rj-btn { flex: 1 1 96px; min-width: 0; padding-inline: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .an-wheel-click, .an-shift-toast, .an-route-cockpit { display: none !important; }
  html.an-route-arrival body.editorial-ui .main,
  html.an-route-arrival body.editorial-ui.an-page-live .main { opacity: 1; transform: none; transition: none; }
  .an-mini-wheel { transition: none; }
}