/* Services: page-local styles (page builder A). Shared tokens only. */

/* ---------- What each one includes: split-panel picker (playbook 0h) ---------- */
.pick { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.pick-list { grid-column: 1 / 6; display: grid; gap: 6px; align-content: start; }
@media (min-width: 801px) { .pick-list { position: sticky; top: calc(var(--header-h) + 32px); } }
.pick-tab {
  display: flex; align-items: center; gap: 0.32em;
  width: 100%; min-height: 56px; padding: 6px 0; margin: 0;
  background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.25rem, 1rem + 2.8vw, 4.5rem); line-height: 0.92; letter-spacing: -0.005em;
  color: var(--ink-soft);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transform-origin: 0 50%;
  transition: color var(--dur-ui) ease, scale var(--dur-press) var(--ease-out);
}
.pick-tab::before { content: ""; flex: none; width: 0.4em; height: 0.13em; background: currentColor; opacity: 0.3; transform-origin: 0 50%; transition: background-color var(--dur-ui) ease, opacity var(--dur-ui) ease, scale var(--dur-ui) var(--ease-out); scale: 0.6 1; }
.pick-tab[aria-selected="true"] { color: var(--ink); }
.pick-tab[aria-selected="true"]::before { background: var(--accent); opacity: 1; scale: 1 1; }
.pick-tab:active { scale: 0.98; }
.pick-tab:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pick-tab:hover { color: var(--ink); } }
.pick-panels { grid-column: 6 / -1; display: grid; }
.pick-panel { display: grid; gap: 24px; align-content: start; }
.pick-panel:focus-visible { outline-offset: 6px; }
.pick-body { display: grid; gap: 16px; justify-items: start; }
.pick-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); line-height: 0.92; }
.pick-inc { font-weight: 600; }
/* with script: panels share one cell and crossfade (250ms, both at once); without: all shown */
html.js .pick-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease-smooth-out), visibility 0s linear 250ms; }
html.js .pick-panel.is-on { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease-smooth-out), visibility 0s; }
html:not(.js) .pick-list { display: none; }
html:not(.js) .pick-panels { grid-column: 1 / -1; gap: 64px; }
@media (max-width: 800px) {
  .pick-list, .pick-panels { grid-column: 1 / -1; }
  .pick-list { gap: 2px; }
  .pick-tab { font-size: clamp(1.875rem, 9vw, 2.75rem); min-height: 48px; }
}

/* ---------- How they fit together: courses (website at the bottom) ---------- */
.courses { display: grid; gap: 8px; }
.course { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 16px; align-items: center; padding: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 36px); background: var(--paper); }
.c-name { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 1rem + 4vw, 5.5rem); line-height: 0.9; letter-spacing: -0.005em; }
.c-side { grid-column: 7 / -1; display: grid; gap: 10px; justify-items: start; }
.c-tag { font-weight: 700; }
.c-web { background: var(--ink); color: var(--paper); }
.c-web .link:active { color: var(--on-night-soft); }
.c-web .fill { background: var(--fill-bg-night); color: var(--fill-ink-night); border-bottom-color: var(--accent); }
.c-web :focus-visible { outline-color: var(--accent); }
@media (min-width: 801px) {
  .c-up { width: 88%; }
  .c-plus { width: 64%; }
  .c-plus .c-name { grid-column: 1 / 6; }
  .c-plus .c-side { grid-column: 6 / -1; }
}
@media (max-width: 800px) {
  .c-name, .c-side { grid-column: 1 / -1; }
  .c-name { font-size: clamp(2.25rem, 11vw, 3.5rem); }
}
/* laid bottom-up as the stack scrolls in (the class is added by script, so no script = visible) */
html.motion .courses.is-wait .course { opacity: 0; translate: 0 -24px; }
html.motion .courses.is-laid .course { opacity: 1; translate: 0 0; transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out); }
html.motion .courses.is-laid .c-up { transition-delay: 120ms; }
html.motion .courses.is-laid .c-plus { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .pick-tab, .pick-tab::before, html.js .pick-panel, html.js .pick-panel.is-on { transition-duration: 0.01ms !important; }
  html.motion .courses.is-wait .course { translate: none; }
}