/* ==========================================================================
   Composer Forge — Start Here
   The Start Here band and Software Setup card above the track grid
   (grid.js), outside links and track borders on boxed lists
   (content-blocks.js), and the path chooser activity (chooser.js).
   Its own file, like mobile.css, so it doesn't touch the shared stylesheet
   other branches edit. Loaded after styles.css and mobile.css.
   ========================================================================== */

/* ---------- course map: Start Here band + Software Setup card ---------- */

.orientation { padding-top: 24px; }

.orientation__row--start {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.start-band,
.setup-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 32, 44, 0.04);
}

/* Start Here: a dark brand band (as the Level 1 slides), indigo lesson cards. */
.start-band {
  background: #12163a;
  border: 1px solid #12163a;
  border-top: 4px solid #667eea;
  padding: 20px 22px;
}

.start-band__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.start-band__title,
.setup-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 4px;
}

.setup-card__title { font-size: var(--text-lg); }

.start-band__title a { color: #fff; }
.start-band__title a:hover { color: #c3cbf7; }
.setup-card__title a { color: inherit; }
.setup-card__title a:hover { color: #4d51bf; }

.start-band__blurb,
.setup-card__blurb {
  font-size: var(--text-base);
  color: var(--muted);
  margin: 0;
}

.start-band__blurb { color: #c9cdf2; }

.start-band__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.start-band__progress,
.setup-card__progress {
  font-size: var(--text-xs);
  color: var(--faint);
}

.start-band__progress { color: #aab2e8; }

.start-band__toggle {
  padding: 6px 14px;
  background: transparent;
  border-color: #4d51bf;
  color: #fff;
}
.start-band__toggle:hover { border-color: #c3cbf7; color: #fff; }
.start-band__toggle:focus-visible,
.start-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.start-band__body { margin-top: 16px; }

.start-band__go { display: inline-block; }

/* the five lesson cards */
.start-cards {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.start-cards > li { display: flex; }

.start-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  background: linear-gradient(150deg, #4d51bf 0%, #5a63d3 100%);
  color: #fff;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}

.start-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.start-card.is-done { background: linear-gradient(150deg, #2b3170 0%, #343b86 100%); }

.start-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.start-card__num {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #d4d9fa;
}

.start-card.is-done .start-card__num { color: #aab2e8; }

.start-card__icon { color: #fff; line-height: 0; }

.start-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.25;
  margin-top: auto;
}

/* the tick: an empty ring until the lesson is done */
.start-card .check { border-color: rgba(255, 255, 255, 0.6); }
.start-card .check.is-done { background: #fff; border-color: #fff; }
.start-card .check.is-done::after { border-color: #4d51bf; }

/* part-way through: the next lesson is outlined and labelled */
.start-card.is-next { border-color: #fff; }

.start-card__next {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fff;
  color: #12163a;
}

/* collapsed: a slim bar with the title, five small ticks, progress and Show */
.start-band__dots { display: none; gap: 5px; align-items: center; }

.start-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #6b72c9;
}
.start-dot.is-done { background: #8b9cf3; border-color: #8b9cf3; }

.start-band.is-collapsed {
  padding: 12px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.start-band.is-collapsed .start-band__dots { display: inline-flex; }
.start-band.is-collapsed .start-band__body,
.start-band.is-collapsed .start-band__blurb { display: none; }
.start-band.is-collapsed .start-band__head { align-items: center; width: 100%; }
.start-band.is-collapsed .start-band__title { font-size: var(--text-lg); margin: 0; }

/* Software Setup: optional, but with a coloured border too */
.setup-card {
  background: var(--bg);
  border: 2px solid #667eea;
  padding: 16px 18px;
}

.setup-card__label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4d51bf;
  margin: 0 0 4px;
}

.start-band__lessons {
  list-style: none;
  padding: 0;
  margin: 12px 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.start-band__lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  color: var(--body);
  font-size: var(--text-base);
  min-height: 36px;
}

.start-band__lesson:hover { color: var(--accent-hover); }

.start-band__num {
  font-size: var(--text-2xs);
  color: var(--faint);
  min-width: 14px;
}

/* Start Here collapsed: the Software Setup card goes slim beside it. */
.orientation__row--start.is-slim .setup-card { padding: 12px 18px; }
.orientation__row--start.is-slim .setup-card__blurb,
.orientation__row--start.is-slim .setup-card .start-band__lessons { display: none; }
.orientation__row--start.is-slim .setup-card__title { font-size: var(--text-md); }
.orientation__row--start.is-slim .setup-card__progress { margin: 2px 0 0; }

/* The setup card moves under the band below 1100px, so the five cards keep room. */
@media (max-width: 1100px) {
  .orientation__row--start { grid-template-columns: 1fr; }
}

/* Phones: each card becomes a short row, icon, title, tick. */
@media (max-width: 640px) {
  .start-band { padding: 16px; }
  .start-band__head { flex-direction: column; gap: 10px; }
  .start-band.is-collapsed .start-band__head { flex-direction: row; justify-content: space-between; }
  .start-band.is-collapsed { padding: 10px 16px; }
  .start-band.is-collapsed .start-band__progress { display: none; }
  .start-band__toggle { min-height: 44px; }
  .start-band__go { display: block; text-align: center; min-height: 44px; }
  .start-cards { grid-template-columns: 1fr; gap: 8px; }
  .start-card {
    min-height: 56px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon num tick" "icon title tick";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 8px 14px;
  }
  .start-card__top { display: contents; }
  .start-card__num { grid-area: num; align-self: end; }
  .start-card .check { grid-area: tick; }
  .start-card__icon { grid-area: icon; }
  .start-card__title { grid-area: title; margin-top: 0; align-self: start; }
  .start-card__next { top: 50%; left: auto; right: 44px; transform: translateY(-50%); }
}

/* ---------- content blocks: outside links, track borders ---------- */

.cf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 4px 0 12px;
  font-size: var(--text-base);
}

.cf-links__item {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.cf-links__item::after { content: " ↗"; text-decoration: none; }

.cf-box--track { border-left: 4px solid var(--box-track-color, var(--accent)); }

/* ---------- path chooser (chooser.js) ---------- */

.chooser__skip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.chooser__skip { padding: 6px 14px; }

.chooser__skip-note {
  margin: 0;
  font-size: var(--text-base);
  color: var(--correct);
}

.chooser__question {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}

.chooser__legend {
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin: 0 0 8px;
}

.chooser__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-md);
  transition: border-color .12s ease, background .12s ease;
}

.chooser__option:hover { border-color: var(--accent); }
.chooser__option:has(input:checked) { border-color: var(--accent); background: #f3f4ff; }
.chooser__radio { margin: 0; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--accent); }

.chooser__card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 18px 16px;
  margin: 4px 0 12px;
  scroll-margin-top: 80px;
}

.chooser__result { scroll-margin-top: 80px; }

.chooser__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
}

.chooser__for-you {
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 4px;
}

.chooser__starts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.chooser__starts .btn { display: inline-block; }

.chooser__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: var(--text-base);
}

.chooser__change {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--accent-hover);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.chooser__next-hint { color: var(--muted); }

@media (max-width: 640px) {
  .chooser__option { min-height: 44px; }
  .chooser__starts .btn { display: block; width: 100%; text-align: center; min-height: 44px; }
  .chooser__skip { min-height: 44px; }
}