/* ============================================================
   The spine: the same site grouped two ways, switched by the
   reader. Subject is how cricket is talked about. Order is how
   a Saturday actually happens. One set of ideas underneath,
   read from the finder's own data block, so there is no second
   copy of the site's structure to drift.
   ============================================================ */

.spine { margin: 26px 0 4px; }

.spine__switch {
  display: inline-flex; padding: 3px; gap: 3px; margin-bottom: 14px;
  border: 1px solid var(--rule); border-radius: 24px; background: var(--paper-2);
}
.spine__switch button {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.2;
  padding: 9px 15px; min-height: 40px; border-radius: 20px; color: var(--ink-soft);
}
.spine__switch button:hover { color: var(--ink); }
.spine__switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.spine__switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.spine__note {
  margin: 0 0 18px; color: var(--ink-soft); font-size: 0.95rem;
  line-height: 1.55; max-width: var(--measure);
}

.spine__groups { display: grid; gap: 10px; }

.spine__group {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-card);
  border-left: 3px solid var(--sp-accent, var(--rule));
}
/* Each subject carries one of the four, so the list is scannable by colour
   before it is read. The order view has no colour: it is a sequence, and
   colouring a sequence implies a difference between the steps that is not
   there. */
/* The rule down the side is neutral. It used to take each subject's accent,
   which was right when the icons were solid colour and wrong the moment they
   became ink drawings: a saturated 3px bar was then the loudest thing in the
   row, shouting over the mark it was supposed to support. */
.spine__top {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 16px; text-align: left; background: none; border: none;
  color: var(--ink); font-family: var(--font-ui); cursor: pointer;
}
.spine__top:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.spine__caret { flex: 0 0 auto; width: 13px; height: 13px; color: var(--ink-faint); transition: transform .16s ease; }
.spine__top[aria-expanded="true"] .spine__caret { transform: rotate(90deg); }
.spine__name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.25;
}
.spine__name small {
  display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400;
  font-size: 0.87rem; letter-spacing: 0; color: var(--ink-faint); line-height: 1.4;
}
.spine__n {
  flex: 0 0 auto;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.spine__body { padding: 0 16px 16px; }
.spine__sec {
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin: 16px 0 9px;
}
.spine__body > .spine__sec:first-child { margin-top: 0; }

/* the step number, so the order view reads as a sequence and not a menu */
/* The icon replaces the step number wherever a group has one, which is every
   group in both views. The number rule stays for a grouping added later that
   has not been drawn yet. */
.spine__icon { flex: 0 0 42px; width: 42px; height: 42px; display: block; }
.spine__step {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
}
.spine[data-view="subject"] .spine__step { display: none; }

@media (max-width: 480px) {
  .spine__switch { display: flex; width: 100%; }
  .spine__switch button { flex: 1 1 0; padding: 9px 8px; font-size: 0.9rem; }
  .spine__top { padding: 13px 13px; gap: 10px; }
  .spine__body { padding: 0 13px 13px; }
}
@media (prefers-reduced-motion: reduce) { .spine__caret { transition: none; } }