/* ==========================================================================
   Cyber City · the repair page (page-repair.php, assets/js/repair.js)
   The drawing at the head (art.css), how a repair goes as one line of four stations, every job by name in a numbered
   index, the request on the dark panel, the questions, the store. Rayan's mix of 3 Oct 2026 (the head, the line and
   the index of direction C, the store card with its map).
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-rp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-rp > * { grid-column: 1 / -1; min-width: 0; }
.ecc-rp__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-rp__h { margin: 0; text-wrap: balance; }

/* ---- the head ---- */
.ecc-rp__head { display: grid; align-content: end; min-height: calc(var(--ecc-s-9) * 5); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-rp__title { max-width: 11em; margin: 0; text-wrap: balance; }
.ecc-rp__lead { max-width: 28em; margin: 0; }
.ecc-rp__led { display: inline-flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: var(--ecc-s-2) var(--ecc-s-4); min-height: var(--ecc-s-8); margin: 0; padding: var(--ecc-s-3) var(--ecc-s-4); }
.ecc-rp__cap { color: var(--ecc-on-panel-2); }
.ecc-rp__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); }
.ecc-rp__head .ecc-art__img { object-fit: contain; object-position: 92% 50%; }

/* ---- how it goes: one line, four stations ---- */
.ecc-rp__stations { --_n: calc(var(--ecc-s-8) + var(--ecc-s-2)); position: relative; display: grid; margin: var(--ecc-s-4) 0 0; padding: 0; list-style: none; }
.ecc-rp__station { position: relative; display: grid; grid-template-columns: var(--_n) var(--ecc-s-5) minmax(0, 1fr); gap: 0 var(--ecc-s-3); padding-bottom: var(--ecc-s-7); }
.ecc-rp__station:last-child { padding-bottom: 0; }
.ecc-rp__sn { font-size: var(--ecc-t-display); color: var(--ecc-ink); }
.ecc-rp__via { justify-self: center; margin-top: var(--ecc-s-3); }
.ecc-rp__station::before { content: ""; position: absolute; left: calc(var(--_n) + var(--ecc-s-3) + var(--ecc-s-5) / 2); top: var(--ecc-s-5); bottom: calc(var(--ecc-s-3) * -1); width: 2px; margin-left: -1px; background: var(--ecc-line-strong); }
.ecc-rp__station:last-child::before { display: none; }
.ecc-rp__sbody { display: grid; gap: var(--ecc-s-3); align-content: start; max-width: 34em; }
.ecc-rp__sbody > * { margin: 0; }

/* ---- what we work on: a numbered index ---- */
.ecc-rp__indexhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ecc-s-4); margin-bottom: var(--ecc-s-4); }
.ecc-rp__total { display: flex; align-items: baseline; gap: var(--ecc-s-2); margin: 0; }
.ecc-rp__total .ecc-dot { font-size: var(--ecc-t-h1); }
.ecc-rp__index { display: grid; gap: var(--ecc-s-6) var(--ecc-s-7); }
.ecc-rp__gh { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0 0 var(--ecc-s-2); }
.ecc-rp__jobs { margin: 0; padding: 0; list-style: none; }
.ecc-rp__jobs li { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); padding: var(--ecc-s-2) 0; border-top: 1px solid var(--ecc-line); font-weight: var(--ecc-fw-medium); line-height: 1.3; }
.ecc-rp__jn { flex: none; min-width: 2.2em; font-size: var(--ecc-t-h3); color: var(--ecc-ink-2); }
.ecc-rp__parts { margin: var(--ecc-s-5) 0 0; }

/* ---- the request ---- */
.ecc-rp__req { display: grid; gap: var(--ecc-s-6); scroll-margin-top: var(--ecc-s-8); }
.ecc-rp__reqsay { display: grid; gap: var(--ecc-s-4); align-content: start; }
.ecc-rp__reqsay > * { margin: 0; }
.ecc-rp__sooner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2) var(--ecc-s-4); margin: 0; font-weight: var(--ecc-fw-medium); }
.ecc-rp__sooner .ecc-btn { gap: var(--ecc-s-2); }
.ecc-rp__form { display: grid; gap: var(--ecc-s-4); }
.ecc-rp__form[hidden], .ecc-rp__done[hidden] { display: none; }
.ecc-rp__daylist { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-rp__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ecc-rp__fine { display: grid; gap: var(--ecc-s-1); }
.ecc-rp__fine p { margin: 0; }
.ecc-rp__done { display: grid; gap: var(--ecc-s-3); justify-items: start; padding: var(--ecc-s-4) 0; }
.ecc-rp__done p { margin: 0; }
.ecc-rp__done:focus { outline: none; }
.ecc-rp__req .ecc-alert { margin-bottom: var(--ecc-s-4); }

/* ---- the repair questions ---- */
.ecc-rp__qlist { margin-top: var(--ecc-s-3); }
.ecc-rp__qh { margin: 0; font-size: var(--ecc-t-body-lg); font-weight: var(--ecc-fw-strong); line-height: 1.3; text-wrap: balance; }
.ecc-rp__q .ecc-acc__body { max-width: 36em; }
.ecc-rp__q .ecc-acc__body .ecc-link { white-space: nowrap; }
.ecc-rp__all { margin: var(--ecc-s-4) 0 0; }

@media (min-width: 761px) {
  .ecc-rp__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1181px) {
  .ecc-rp__line { padding-left: var(--ecc-s-8); padding-right: var(--ecc-s-8); }
  .ecc-rp__req { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ecc-s-8); padding: var(--ecc-s-7) var(--ecc-s-8); }
  .ecc-rp__qlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecc-s-7); align-items: start; }
}
@media (max-width: 760px) {
  .ecc-rp__head { min-height: 0; padding-top: var(--ecc-s-5); }
  .ecc-rp__acts .ecc-btn { flex: 1 1 100%; }
  .ecc-rp__stations { --_n: var(--ecc-s-7); }
  .ecc-rp__sn { font-size: var(--ecc-t-h1); }
}
@media print { .ecc-rp__acts, .ecc-rp__form, .ecc-rp__sooner { display: none !important; } }