/* Cyber City · Find your ride /find-your-ride/ and its card on the E-Rides pages (Rayan 21 Oct 2026, part of C21).
   Tokens only (tokens.css), the system's modules, chips and the Day stage of the cards; classes start with ecc-fyr
   (used nowhere else) and every rule sits under .ecc-fyr or .ecc-fyr-card. */

.ecc-fyr { display: grid; gap: var(--ecc-gap); }
.ecc-fyr > * { min-width: 0; }

/* ======================================================= 1 · the head, and its six squares */
.ecc-fyr .ecc-fyr__head { display: grid; gap: var(--ecc-s-3); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-fyr .ecc-fyr__head > * { margin: 0; }
.ecc-fyr .ecc-fyr__kicker { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-on-panel-2); }
.ecc-fyr .ecc-fyr__title { max-width: 13em; text-wrap: balance; }
.ecc-fyr .ecc-fyr__lead { max-width: 36em; color: var(--ecc-on-panel-2); }
.ecc-fyr .ecc-fyr__track { display: flex; gap: 6px; margin-top: var(--ecc-s-3); padding: 0; list-style: none; }
.ecc-fyr .ecc-fyr__track li { width: 14px; height: 14px; border-radius: var(--ecc-r-voxel); box-shadow: inset 0 0 0 1.5px rgba(237, 239, 238, .3); transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), box-shadow var(--ecc-d-fast) var(--ecc-ease-out); }
.ecc-fyr .ecc-fyr__track li.is-on { background: var(--ecc-lime); box-shadow: 0 0 10px color-mix(in srgb, var(--ecc-lime) 45%, transparent); }

/* ======================================================= 2 · the questions, and how it picks beside them */
.ecc-fyr .ecc-fyr__main { display: grid; gap: var(--ecc-gap); align-items: start; }
.ecc-fyr .ecc-fyr__main > * { min-width: 0; }
.ecc-fyr .ecc-fyr__how { display: grid; gap: var(--ecc-s-4); justify-items: start; }
.ecc-fyr .ecc-fyr__how > * { margin: 0; }
.ecc-fyr .ecc-fyr__list { display: grid; gap: var(--ecc-s-3); padding: 0; list-style: none; }
.ecc-fyr .ecc-fyr__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--ecc-s-3); align-items: baseline; line-height: 1.5; }
.ecc-fyr .ecc-fyr__list li::before { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); translate: 0 -1px; }
@media (min-width: 1024px) {
  .ecc-fyr .ecc-fyr__main { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .ecc-fyr .ecc-fyr__side { position: sticky; top: var(--ecc-s-6); }
}
.ecc-fyr .ecc-fyr__form { display: grid; gap: var(--ecc-s-6); }
.ecc-fyr .ecc-fyr__formh { margin: 0; }
.ecc-fyr .ecc-fyr__q { display: grid; gap: var(--ecc-s-3); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.ecc-fyr .ecc-fyr__q[hidden] { display: none; }
.ecc-fyr .ecc-fyr__legend { display: grid; gap: var(--ecc-s-2); margin: 0; padding: 0; }
.ecc-fyr .ecc-fyr__count { color: var(--ecc-ink-2); }
.ecc-fyr .ecc-fyr__qt { text-wrap: balance; }
.ecc-fyr .ecc-fyr__qh { margin: 0; }
.ecc-fyr .ecc-fyr__chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ecc-s-2); }
.ecc-fyr .ecc-fyr__chip { position: relative; display: inline-flex; }
.ecc-fyr .ecc-fyr__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ecc-fyr .ecc-fyr__chip span { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ecc-hit); padding: 0 16px; border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); background: var(--ecc-field-bg); color: var(--ecc-ink); font-size: .9375rem; font-weight: var(--ecc-fw-medium); line-height: 1.2; transition: background-color var(--ecc-d-fast) var(--ecc-ease-out), border-color var(--ecc-d-fast) var(--ecc-ease-out), color var(--ecc-d-fast) var(--ecc-ease-out); }
@media (hover: hover) and (pointer: fine) { .ecc-fyr .ecc-fyr__chip:hover span { border-color: var(--ecc-ink); } }
.ecc-fyr .ecc-fyr__chip input:checked + span { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); border-color: var(--ecc-selected-line); }
.ecc-fyr .ecc-fyr__chip input:checked + span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); }
.ecc-fyr .ecc-fyr__chip input:focus-visible + span { outline: var(--ecc-focus-ring); outline-offset: 2px; }
.ecc-fyr .ecc-fyr__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-3); padding-top: var(--ecc-s-4); border-top: 1px solid var(--ecc-line); }
.ecc-fyr .ecc-fyr__nav [hidden] { display: none; }
.ecc-fyr .ecc-fyr__show { margin-left: auto; }
.ecc-fyr .ecc-fyr__say { margin: 0; }
.ecc-fyr .ecc-fyr__say:empty { display: none; }
/* one question at a time (the script): the question stands taller, the answers are big targets */
.ecc-fyr .ecc-fyr__form.is-steps { min-height: 22rem; align-content: start; }
.ecc-fyr .ecc-fyr__form.is-steps .ecc-fyr__qt { font-size: var(--ecc-t-h2); }
.ecc-fyr .ecc-fyr__form.is-steps .ecc-fyr__chip span { min-height: 56px; padding: 0 20px; font-size: 1rem; }
/* with picks: the answers sit as a compact sheet under them */
.ecc-fyr[data-done] .ecc-fyr__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-s-5) var(--ecc-s-6); }
.ecc-fyr[data-done] .ecc-fyr__form > .ecc-fyr__formh, .ecc-fyr[data-done] .ecc-fyr__form > .ecc-fyr__nav, .ecc-fyr[data-done] .ecc-fyr__form > .ecc-fyr__say { grid-column: 1 / -1; }

/* ======================================================= 3 · the picks */
.ecc-fyr .ecc-fyr__result { display: grid; gap: var(--ecc-gap); }
.ecc-fyr .ecc-fyr__result:focus { outline: none; }
.ecc-fyr .ecc-fyr__reshead { display: grid; gap: var(--ecc-s-2); padding: 0 var(--ecc-s-2); }
.ecc-fyr .ecc-fyr__reshead > * { margin: 0; }
.ecc-fyr .ecc-fyr__reshead .ecc-h2 { max-width: 30em; text-wrap: balance; }
.ecc-fyr .ecc-fyr__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-fyr .ecc-fyr__pick { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.ecc-fyr .ecc-fyr__rank { position: absolute; z-index: 2; top: var(--ecc-s-3); left: var(--ecc-s-3); padding: 4px 8px; border-radius: var(--ecc-r-sm); background: var(--ecc-panel); color: var(--ecc-lime); font-size: 22px; }
.ecc-fyr .ecc-fyr__stage { aspect-ratio: 4 / 3; border-radius: var(--ecc-r) var(--ecc-r) 0 0; }
.ecc-fyr .ecc-fyr__pbody { display: grid; gap: var(--ecc-s-3); align-content: start; padding: var(--ecc-s-4) var(--ecc-s-5) var(--ecc-s-5); }
.ecc-fyr .ecc-fyr__pbody > * { margin: 0; min-width: 0; }
.ecc-fyr .ecc-fyr__ptype { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-fyr .ecc-fyr__pname a { color: var(--ecc-ink); text-decoration: none; }
.ecc-fyr .ecc-fyr__pname a:hover { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-underline-offset: 5px; }
.ecc-fyr .ecc-fyr__why { display: grid; gap: var(--ecc-s-2); padding: 0; list-style: none; }
.ecc-fyr .ecc-fyr__why li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--ecc-s-3); align-items: baseline; font-size: var(--ecc-t-small); line-height: 1.5; }
.ecc-fyr .ecc-fyr__why li::before { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); translate: 0 -1px; }
.ecc-fyr .ecc-fyr__but { padding: var(--ecc-s-2) var(--ecc-s-3); border-left: 3px solid var(--ecc-warning-line, var(--ecc-line-strong)); border-radius: 0 var(--ecc-r-sm) var(--ecc-r-sm) 0; background: var(--ecc-surface-2); font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-fyr .ecc-fyr__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2); }
.ecc-fyr .ecc-fyr__buy { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); }
.ecc-fyr .ecc-fyr__next { display: grid; gap: var(--ecc-s-3); }
.ecc-fyr .ecc-fyr__next > * { margin: 0; }
.ecc-fyr .ecc-fyr__nextacts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); }
.ecc-fyr .ecc-fyr__off { display: grid; gap: var(--ecc-s-3); justify-items: start; }

@media (max-width: 1100px) { .ecc-fyr .ecc-fyr__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ecc-fyr .ecc-fyr__head { padding-top: var(--ecc-s-6); }
  .ecc-fyr .ecc-fyr__picks { grid-template-columns: minmax(0, 1fr); }
  .ecc-fyr[data-done] .ecc-fyr__form { grid-template-columns: minmax(0, 1fr); }
  .ecc-fyr .ecc-fyr__form.is-steps .ecc-fyr__chips { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ecc-fyr .ecc-fyr__form.is-steps .ecc-fyr__chip, .ecc-fyr .ecc-fyr__form.is-steps .ecc-fyr__chip span { width: 100%; }
  .ecc-fyr .ecc-fyr__show { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ecc-fyr *, .ecc-fyr-card * { transition: none !important; } }

/* ======================================================= the card on the E-Rides pages */
.ecc-fyr-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ecc-s-5); align-items: center; }
.ecc-fyr-card > * { min-width: 0; }
.ecc-fyr-card .ecc-fyr-card__grid { display: grid; grid-template-columns: repeat(3, 14px); gap: 6px; }
.ecc-fyr-card .ecc-fyr-card__grid i { width: 14px; height: 14px; border-radius: var(--ecc-r-voxel); box-shadow: inset 0 0 0 1.5px rgba(237, 239, 238, .3); }
.ecc-fyr-card .ecc-fyr-card__grid i.is-on { background: var(--ecc-lime); box-shadow: 0 0 10px color-mix(in srgb, var(--ecc-lime) 45%, transparent); }
.ecc-fyr-card .ecc-fyr-card__say { display: grid; gap: var(--ecc-s-1); }
.ecc-fyr-card .ecc-fyr-card__say > * { margin: 0; }
.ecc-fyr-card .ecc-fyr-card__k { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-on-panel-2); }
.ecc-fyr-card .ecc-fyr-card__p { color: var(--ecc-on-panel-2); font-size: var(--ecc-t-small); }
.ecc-fyr-card .ecc-fyr-card__go { white-space: nowrap; }
@media (max-width: 760px) {
  .ecc-fyr-card { grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-3); }
  .ecc-fyr-card .ecc-fyr-card__go { justify-self: start; }
}