/* Plugins > Convoy (owner 2026-10-30). Plugin-page shell (rank-pages.css + plugin-pages.css) plus this file.
   Accent: headlight amber on asphalt. Tier colors run green to purple. Art lives in /images/plugins/convoy/;
   every image here is decorative and the layout holds if one is missing. */
.cv {
  --cv-lamp: #ffc24a; --cv-lamp-hi: #ffe2a0; --cv-lamp-dim: rgba(255, 194, 74, 0.12); --cv-lamp-line: rgba(255, 194, 74, 0.4);
  --cv-page: #06080d; --cv-card: #151821; --cv-card-2: #1b1e28; --cv-edge: #2c3040; --cv-warn: #ff8a6a;
  --cv-easy: #6fe39a; --cv-medium: #ffd25a; --cv-hard: #ff9a4a; --cv-expert: #ff5c5c; --cv-nightmare: #b77dff;
  --cv-overlap: clamp(120px, 12vw, 200px);
}
.cv .is-easy { --t: var(--cv-easy); } .cv .is-medium { --t: var(--cv-medium); } .cv .is-hard { --t: var(--cv-hard); }
.cv .is-expert { --t: var(--cv-expert); } .cv .is-nightmare { --t: var(--cv-nightmare); }
/* art that fails to load is hidden by its onerror, so the layout falls back cleanly */
.cv img[hidden] { display: none !important; }

/* ---------- hero: key art, drifting dust and two slow headlight beams ---------- */
.cv-hero { position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 70% 55%, rgba(255, 170, 60, 0.14), transparent 70%), var(--cv-page); }
.cv-hero-art { position: absolute; inset: 0; }
.cv-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; display: block; color: transparent; }
.cv-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 8, 13, 0.95) 0%, rgba(6, 8, 13, 0.85) 28%, rgba(6, 8, 13, 0.3) 56%, rgba(6, 8, 13, 0) 76%), linear-gradient(0deg, var(--cv-page) 0%, rgba(6, 8, 13, 0.9) 14%, rgba(6, 8, 13, 0.5) 30%, rgba(6, 8, 13, 0.15) 46%, rgba(6, 8, 13, 0) 60%); }
.cv-dust { position: absolute; inset: -20% -10%; pointer-events: none; opacity: 0.55; mix-blend-mode: screen;
  background-image: radial-gradient(1.5px 1.5px at 12% 30%, rgba(255, 226, 170, 0.7), transparent), radial-gradient(1px 1px at 38% 70%, rgba(255, 226, 170, 0.6), transparent), radial-gradient(2px 2px at 62% 40%, rgba(255, 210, 150, 0.5), transparent), radial-gradient(1px 1px at 84% 62%, rgba(255, 226, 170, 0.7), transparent), radial-gradient(1.5px 1.5px at 72% 18%, rgba(255, 226, 170, 0.5), transparent);
  background-size: 340px 240px; animation: cv-drift 38s linear infinite; }
@keyframes cv-drift { to { background-position: -680px 120px; } }
.cv-beams { position: absolute; right: 8%; bottom: 22%; width: min(46vw, 640px); height: 220px; pointer-events: none; }
.cv-beams i { position: absolute; bottom: 0; width: 100%; height: 100%; border-radius: 50%; transform-origin: 100% 50%;
  background: radial-gradient(ellipse at 100% 50%, rgba(255, 220, 150, 0.32), rgba(255, 200, 110, 0.08) 45%, transparent 70%);
  filter: blur(6px); mix-blend-mode: screen; animation: cv-beam 7s ease-in-out infinite; }
.cv-beams i:last-child { bottom: -38px; animation-delay: -3.5s; opacity: 0.8; }
@keyframes cv-beam { 0%, 100% { opacity: 0.55; transform: rotate(-2deg) scaleX(0.96); } 50% { opacity: 0.9; transform: rotate(1deg) scaleX(1.02); } }
.cv-hero .container { position: relative; z-index: 2; }
.cv-hero-inner { min-height: clamp(480px, 46vw, 680px); display: flex; align-items: center; padding: 2rem 0 calc(var(--cv-overlap) + 1.25rem); }
.cv-hero-text { max-width: 35rem; }
.cv-hero .rk-title { font-size: clamp(2.8rem, 7vw, 5rem); letter-spacing: 0.03em; text-shadow: 0 0 40px rgba(255, 180, 60, 0.28); }
.cv-hero .rk-tagline { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.cv-hero .rk-tagline em { font-style: normal; color: var(--cv-lamp-hi); }
.cv-lamps { display: inline-flex; gap: 6px; margin-right: 0.55rem; vertical-align: middle; }
.cv-lamps i { width: 10px; height: 10px; border-radius: 50%; background: var(--cv-lamp-hi); box-shadow: 0 0 6px 2px rgba(255, 210, 120, 0.9), 0 0 18px 6px rgba(255, 170, 50, 0.45); }
.cv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.cv-chips span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.85rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--cv-lamp-line); font-size: 0.9rem; font-weight: 600; backdrop-filter: blur(4px); }
.cv-chips svg { width: 16px; height: 16px; color: var(--cv-lamp); }
.cv-body { position: relative; z-index: 3; margin-top: calc(-1 * var(--cv-overlap)); }
.cv-body > .rk-section:first-child .rk-section-head h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
@media (max-width: 760px) {
  .cv-hero-art { position: relative; height: 240px; }
  .cv-hero-art img { object-position: 70% 50%; }
  .cv-hero-art::after { background: linear-gradient(0deg, var(--cv-page) 0%, rgba(6, 8, 13, 0.6) 25%, rgba(6, 8, 13, 0) 60%); }
  .cv-beams { top: 60px; bottom: auto; right: 0; width: 80vw; height: 140px; }
  .cv { --cv-overlap: 1rem; }
  .cv-hero-inner { min-height: 0; padding: 0 0 calc(var(--cv-overlap) + 1rem); margin-top: -0.8rem; }
}

/* ---------- section icons: the art sits over the stroke icon, which shows if the art is missing ---------- */
.cv-ico { position: relative; }
.cv-ico img { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); object-fit: contain; z-index: 1; }

/* ---------- shared pieces ---------- */
.cv-lead { margin: -0.2rem 0 1.1rem; padding: 0.95rem 1.2rem; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 194, 74, 0.13), rgba(255, 194, 74, 0.03) 70%); border: 1px solid rgba(255, 194, 74, 0.28); border-left: 4px solid var(--cv-lamp); font-size: clamp(1.04rem, 2.2vw, 1.2rem); font-weight: 600; line-height: 1.45; color: #f1f3f8; }
.cv-note { margin: 0.9rem 0 0; color: var(--muted, #b7becf); font-size: 0.95rem; }
.cv-in { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.7rem 0 0; }
.cv-in span { padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); border: 1px solid color-mix(in srgb, var(--t) 45%, transparent); }

/* road-stripe divider, art on top when it is there */
.cv-divider { height: 40px; margin: 2.2rem 0 0.4rem; background: url("/images/plugins/convoy/divider.webp") center / auto 100% no-repeat, linear-gradient(90deg, transparent, var(--cv-lamp-line) 20%, var(--cv-lamp-line) 80%, transparent) center / 100% 1px no-repeat; position: relative; }
.cv-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(60%, 420px); height: 4px; transform: translate(-50%, -50%); background: repeating-linear-gradient(90deg, var(--cv-lamp) 0 22px, transparent 22px 40px); opacity: 0.55; border-radius: 2px; }

/* bordered callouts: warnings and tips */
.cv-callout { display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 0.9rem; padding: 0.95rem 1.1rem; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-edge); border-left: 4px solid var(--c, var(--cv-lamp)); }
.cv-callout img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.cv-callout h3 { margin: 0 0 0.25rem; font-size: 1.02rem; color: #fff; }
.cv-callout p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }
.cv-callout.is-warn { --c: var(--cv-warn); background: linear-gradient(90deg, rgba(255, 138, 106, 0.08), var(--cv-card) 60%); }
.cv-callout.is-tip { --c: var(--cv-easy); margin-top: 0; }
.cv-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0.8rem; margin-top: 0.9rem; }

/* ---------- what it is: four steps along a road ---------- */
.cv-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; position: relative; }
.cv-flow::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 194, 74, 0.6) 0 18px, transparent 18px 34px); animation: cv-road 2.4s linear infinite; }
@keyframes cv-road { to { background-position: 34px 0; } }
.cv-flow li { position: relative; padding: 3.4rem 1.1rem 1.15rem; border-radius: 16px; background: linear-gradient(180deg, var(--cv-card-2), #12141b); border: 1px solid var(--cv-edge); }
.cv-step { position: absolute; top: 0.6rem; left: 1rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #0d0f15; border: 2px solid var(--cv-lamp); color: var(--cv-lamp-hi); font-weight: 800; box-shadow: 0 0 14px rgba(255, 194, 74, 0.35); }
.cv-flow h3 { margin: 0 0 0.35rem; font-family: "Cinzel", serif; font-size: 1.2rem; }
.cv-flow p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }
@media (max-width: 900px) { .cv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-flow::before { display: none; } }
@media (max-width: 520px) { .cv-flow { grid-template-columns: minmax(0, 1fr); } }
.cv-chat { margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--cv-edge); border-left: 3px solid var(--cv-lamp); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; color: #e8e3d4; }
.cv-chat p { margin: 0.15rem 0; overflow-wrap: anywhere; }
.cv-chat b { color: var(--cv-lamp-hi); }
.cv-chat .cv-chat-h { margin: 0 0 0.35rem; font-family: "Inter", system-ui, sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-lamp); }

/* ---------- when it rolls: a road timeline ---------- */
.cv-road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; position: relative; padding-top: 1.4rem; }
.cv-road::before { content: ""; position: absolute; left: 0; right: 0; top: 0.35rem; height: 10px; border-radius: 6px; background: linear-gradient(#20232c, #20232c) padding-box, repeating-linear-gradient(90deg, var(--cv-lamp) 0 16px, transparent 16px 30px) center / 100% 2px no-repeat; background-color: #20232c; box-shadow: inset 0 0 0 1px #343949; }
.cv-stop { position: relative; padding: 0.9rem 1rem; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-edge); }
.cv-stop::before { content: ""; position: absolute; top: -1.35rem; left: 1rem; width: 14px; height: 14px; border-radius: 50%; background: var(--cv-lamp); box-shadow: 0 0 10px rgba(255, 194, 74, 0.7); }
.cv-stop.is-end::before { background: var(--cv-warn); box-shadow: 0 0 10px rgba(255, 138, 106, 0.7); }
.cv-pin { display: inline-block; margin-bottom: 0.35rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-lamp-hi); }
.cv-stop.is-end .cv-pin { color: #ffc2b3; }
.cv-stop p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }
@media (max-width: 760px) {
  .cv-road { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 1.6rem; }
  .cv-road::before { left: 0.25rem; right: auto; top: 0; bottom: 0; width: 8px; height: auto; background: #20232c; }
  .cv-stop::before { top: 1.1rem; left: -1.55rem; }
}

/* ---------- difficulty: tier badges and the wipe-day ruler ---------- */
.cv-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.cv-tier { position: relative; padding: 1rem 0.9rem 1.05rem; text-align: center; border-radius: 16px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--t) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--cv-card-2), #12141b); border: 1px solid color-mix(in srgb, var(--t) 40%, var(--cv-edge)); border-top: 3px solid var(--t); }
.cv-tier img { width: 88px; height: 88px; object-fit: contain; display: block; margin: 0 auto 0.4rem; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--t) 35%, transparent)); }
.cv-tier h3 { margin: 0; font-family: "Cinzel", serif; font-size: 1.25rem; color: var(--t); }
.cv-dur { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; color: var(--cv-lamp-hi); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--cv-lamp-line); }
.cv-dur::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.cv-days { margin: 0.2rem 0 0.45rem; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.cv-tier p:last-child { margin: 0; color: var(--muted, #b7becf); font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 1000px) { .cv-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cv-tiers { grid-template-columns: minmax(0, 1fr); }
  .cv-tier { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 0.9rem; text-align: left; align-items: center;
    background: radial-gradient(circle at calc(0.9rem + 32px) 50%, color-mix(in srgb, var(--t) 30%, transparent) 0 26px, transparent 27px), linear-gradient(180deg, var(--cv-card-2), #12141b); }
  .cv-tier img { width: 64px; height: 64px; margin: 0; grid-column: 1; grid-row: 1 / 5; }
  .cv-dur { justify-self: start; margin: 0.15rem 0 0; }
  .cv-tier h3, .cv-tier p { grid-column: 2; }
  .cv-days { margin: 0.1rem 0 0.2rem; }
}
.cv-ruler { margin-top: 1.1rem; padding: 0.9rem 1rem 1rem; border-radius: 14px; background: var(--cv-card); border: 1px solid var(--cv-edge); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 0.4rem; }
.cv-ruler-days { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #b7becf); }
.cv-ruler-days span { padding-left: 0.3rem; border-left: 1px solid #343949; }
.cv-bar { grid-column: var(--a) / var(--b); height: 26px; display: flex; align-items: center; padding: 0 0.6rem; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 55%, transparent), color-mix(in srgb, var(--t) 25%, transparent)); border: 1px solid color-mix(in srgb, var(--t) 70%, transparent); font-size: 0.78rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); min-width: 0; overflow: hidden; white-space: nowrap; }
.cv-bar.is-open { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 55%, transparent), color-mix(in srgb, var(--t) 25%, transparent) 80%, transparent); }
@media (max-width: 520px) { .cv-ruler { padding: 0.7rem 0.6rem 0.8rem; } .cv-bar { padding: 0 0.35rem; font-size: 0.7rem; } .cv-ruler-days { font-size: 0.62rem; } }

/* ---------- escort: vehicle cards and the lineup table ---------- */
.cv-rigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0.9rem; }
.cv-rig, .cv-crate { position: relative; padding: 1.1rem 1.1rem 1rem; border-radius: 16px; background: linear-gradient(180deg, var(--cv-card-2), #12141b); border: 1px solid var(--cv-edge); overflow: hidden; }
.cv-rig::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--cv-lamp), transparent 70%); }
.cv-rig.is-heavy::before { background: linear-gradient(90deg, var(--cv-hard), var(--cv-expert) 50%, transparent); }
.cv-rig h3, .cv-crate h3 { margin: 0 0 0.35rem; font-family: "Cinzel", serif; font-size: 1.15rem; }
.cv-rig p, .cv-crate p { margin: 0; color: var(--muted, #b7becf); line-height: 1.5; }
.cv-lineup { margin-top: 1.2rem; border-radius: 14px; border: 1px solid var(--cv-edge); overflow: hidden; background: var(--cv-card); }
.cv-lineup table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cv-lineup caption { text-align: left; padding: 0.8rem 1rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-lamp); border-bottom: 1px solid var(--cv-edge); }
.cv-lineup th, .cv-lineup td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid #23262f; vertical-align: top; }
.cv-lineup thead th { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #b7becf); background: #12141b; }
.cv-lineup tbody th { color: var(--t); font-family: "Cinzel", serif; font-size: 1.02rem; border-left: 4px solid var(--t); white-space: nowrap; }
.cv-lineup tbody tr:last-child > * { border-bottom: 0; }
.cv-lineup td:not(:last-child) { white-space: nowrap; font-weight: 700; }
@media (max-width: 860px) {
  .cv-lineup thead { display: none; }
  .cv-lineup tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--cv-edge); border-left: 4px solid var(--t); }
  .cv-lineup tbody tr:last-child { border-bottom: 0; }
  .cv-lineup tbody th { grid-column: 1 / -1; border-left: 0; padding-bottom: 0.2rem; }
  .cv-lineup td { border-bottom: 0; padding: 0.35rem 0.8rem; white-space: normal; }
  .cv-lineup td::before { content: attr(data-label); display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #b7becf); }
  .cv-lineup td:last-child { grid-column: 1 / -1; padding-bottom: 0.8rem; font-weight: 400; }
}

/* ---------- loot: crate cards ---------- */
.cv-crates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.9rem; }
.cv-crate { border-top: 3px solid #4a5068; }
.cv-crate::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 74, 0.1), transparent 70%); }
.cv-crate.is-elite { border-top-color: var(--cv-nightmare); }
.cv-crate.is-elite::after { background: radial-gradient(circle, rgba(183, 125, 255, 0.14), transparent 70%); }
.cv-crate.is-heavy { border-top-color: var(--cv-hard); }
.cv-crate.is-guard { border-top-color: var(--cv-easy); }

/* ---------- questions ---------- */
.cv-faq { display: grid; gap: 0.6rem; }
.cv-faq details { border-radius: 12px; background: var(--cv-card); border: 1px solid var(--cv-edge); }
.cv-faq details[open] { border-color: var(--cv-lamp-line); }
.cv-faq summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.cv-faq summary::-webkit-details-marker { display: none; }
.cv-faq summary::after { content: "+"; color: var(--cv-lamp); font-weight: 800; }
.cv-faq details[open] summary::after { content: "-"; }
.cv-faq summary:focus-visible { outline: 2px solid var(--cv-lamp); outline-offset: 2px; border-radius: 12px; }
.cv-faq p { margin: 0; padding: 0 1rem 0.95rem; color: var(--muted, #b7becf); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .cv-dust, .cv-beams i, .cv-flow::before { animation: none; }
}