/* The Dealer Center showcase: real screens from demo.barnwrightsoftware.com/dealer,
   shown on the homepage and the Dealer Center page. The demo itself refuses to be
   framed by other sites, so these are screenshots, and every slide links to it.

   Without JavaScript the screens sit in a row you can swipe or scroll, and the
   tabs are plain links to each one. dcx.js adds the tabs' active state, the
   dealer/owner switch on Today, and a gentle auto-advance while the section is
   on screen (never with reduced motion, and never again once someone touches it). */

.dcx { padding-block: clamp(72px, 9vw, 128px); background: radial-gradient(1200px 520px at 70% 0%, rgba(214,165,72,.10), transparent 70%), #0f100e; border-top: 1px solid var(--hair); overflow: hidden; }

.dcx-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.dcx-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--gold); }
.dcx-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(95,190,133,.18); }
.dcx-head h2 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.05em; font-weight: 650; text-wrap: balance; }
.dcx-head p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; color: var(--text-2); }

/* ---- tabs ---- */
.dcx-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.dcx-tab { position: relative; display: block; padding: 14px 16px 16px; border: 1px solid var(--hair); border-radius: 12px; background: #151713; color: var(--text-2); text-decoration: none; overflow: hidden; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.dcx-tab:hover { border-color: var(--hair-strong); color: var(--text); }
.dcx-tab strong { display: block; font-size: 15.5px; letter-spacing: -.02em; color: var(--text); }
.dcx-tab span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.dcx-tab[aria-current="true"] { border-color: var(--gold); background: #211d13; }
.dcx-tab[aria-current="true"] strong { color: var(--gold-lt); }
.dcx-tab i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); }
.dcx.is-playing .dcx-tab[aria-current="true"] i { animation: dcxFill var(--dcx-dur, 7s) linear forwards; }
@keyframes dcxFill { to { width: 100%; } }

/* ---- the screens ---- */
.dcx-stage { position: relative; }
.dcx-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.dcx-track::-webkit-scrollbar { display: none; }
.dcx-slide { scroll-snap-align: start; scroll-snap-stop: always; margin: 0; min-width: 0; }
.dcx-window { border-radius: 16px; overflow: hidden; border: 1px solid #4a4f40; background: #f4f2ec; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 80px -30px rgba(230,182,95,.22); }
.dcx-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px 14px; background: #1a1c17; border-bottom: 1px solid #2c2f26; }
.dcx-dots { display: inline-flex; gap: 6px; }
.dcx-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3d33; }
.dcx-url { justify-self: center; max-width: 100%; padding: 4px 14px; border-radius: 7px; background: #10110e; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcx-who { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.dcx-shot { position: relative; aspect-ratio: 16 / 10; }
.dcx-shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: top left; transition: opacity .35s ease; }
.dcx-shot img[hidden] { display: block; opacity: 0; pointer-events: none; }

.dcx-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: start; margin-top: 22px; }
.dcx-cap h3 { margin: 0 0 8px; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.035em; line-height: 1.2; color: var(--text); }
.dcx-cap p { margin: 0; max-width: 68ch; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }

/* dealer / owner switch on the Today screen */
.dcx-role { display: inline-flex; padding: 4px; border: 1px solid var(--hair); border-radius: 999px; background: #151713; }
.dcx-role[hidden] { display: none; }
.dcx-role button { appearance: none; border: 0; border-radius: 999px; padding: 8px 14px; background: transparent; color: var(--text-3); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.dcx-role button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.dcx-role button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- under the screens ---- */
.dcx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(30px, 3.5vw, 44px); padding-top: 26px; border-top: 1px solid var(--hair); }
.dcx-roles { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.dcx-roles svg { flex-shrink: 0; color: var(--gold); }
.dcx-roles strong { color: var(--text); }
.dcx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dcx-actions .btn svg { width: 15px; height: 15px; }
.dcx-small { width: 100%; margin: 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 1000px) {
  .dcx-head { grid-template-columns: 1fr; align-items: start; }
  .dcx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); scroll-padding-inline: var(--gutter, 20px); }
  .dcx-tabs::-webkit-scrollbar { display: none; }
  .dcx-tabs li { flex: 0 0 auto; }
  .dcx-tab { padding: 11px 16px 13px; }
  .dcx-tab span { display: none; }
}
@media (max-width: 700px) {
  .dcx-bar { grid-template-columns: auto 1fr; }
  .dcx-who { display: none; }
  .dcx-cap { grid-template-columns: 1fr; }
  .dcx-actions { width: 100%; flex-direction: column; }
  .dcx-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dcx-shot img { transition: none; }
}

/* On a phone, each screen is the Dealer Center's own phone layout in a phone-shaped frame. */
@media (max-width: 700px) {
  .dcx-window { max-width: 340px; margin-inline: auto; border-radius: 30px; border-width: 6px; border-color: #26291f; }
  .dcx-bar { display: none; }
  .dcx-shot { aspect-ratio: 780 / 1440; }
  .dcx-cap { max-width: 340px; margin-inline: auto; }
  .dcx-role { justify-self: start; }
}