/* Signal app layout. Colour, type and components all come from
   brand/tokens.css + brand/components.css — nothing here defines a hex value. */

.signal-header{ padding:40px 0 28px }
.signal-header h1{ margin:6px 0 10px }
.signal-header .sub{ font-size:var(--fs-19); max-width:640px }
.back{ display:inline-block; margin-bottom:18px; color:var(--muted); text-decoration:none; font-size:var(--fs-13) }
.back:hover{ color:var(--accent) }
.muted{ color:var(--muted) }

/* ---- Track grid (home) ---- */
.track-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); padding-bottom:80px }
.track-card{ display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--text) }
.track-card h2{ margin:0; font-size:var(--fs-24) }
.track-card.featured{ border-color:var(--accent) }
.track-card .btn{ align-self:flex-start; margin-top:8px; pointer-events:none }

/* ---- Track actions / filter ---- */
.track-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 18px }
.level-filter{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  font-family:var(--font); font-size:var(--fs-13); font-weight:650;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer;
}
.chip.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.linklike{ background:none; border:none; padding:0; color:var(--accent-soft); text-decoration:underline; cursor:pointer; font:inherit }

/* ---- First-visit business-type onboarding ---- */
.onboarding-card{ margin-bottom:16px; border-color:var(--accent) }
.onboarding-card h3{ margin:0 0 6px }
.onboarding-card .chip-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }

/* ---- Lesson 7.1 playbook personalisation ---- */
.lesson-body table tr.row-mine{ background:color-mix(in srgb, var(--accent) 12%, transparent) }
.lesson-body table tr.row-mine td{ color:var(--text) }

/* ---- Module list ---- */
.module-list{ display:flex; flex-direction:column; gap:16px; padding-bottom:80px }
.module-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px }
.module-card-head h3{ margin:2px 0 6px }
.ring{ flex:0 0 auto }
.empty-filter{ margin-top:12px }

.lesson-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:2px }
.lesson-row{
  display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--text);
}
.lesson-row:hover{ background:var(--navy-700) }
.lesson-row .check{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:12px; color:var(--ok);
}
.lesson-row .check.checked{ border-color:var(--ok); background:color-mix(in srgb, var(--ok) 15%, transparent) }
.lesson-row-title{ flex:1 1 auto; font-size:var(--fs-15) }
.lesson-row.done .lesson-row-title{ color:var(--muted) }
.lesson-row .time{ font-size:var(--fs-13); flex:0 0 auto }

/* ---- Lesson page ---- */
.lesson-meta{ display:flex; align-items:center; gap:10px; margin:14px 0 6px }
.lesson-content{ padding-bottom:40px }
.lesson-content .objective{
  border-left:3px solid var(--accent); padding:2px 0 2px 18px; margin:0 0 28px;
  color:var(--accent-soft); font-size:var(--fs-19);
}
.lesson-content h4{ margin-top:32px }
.callout-label{ display:block; font-size:var(--fs-12); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:10px }
.check-block details{ margin-top:12px }
.check-block summary{ cursor:pointer; color:var(--accent-soft); font-weight:650; font-size:var(--fs-15) }
.check-block details p{ margin-top:10px }
.check-options{ margin:10px 0 }

.lesson-footer{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:24px 24px 80px; border-top:1px solid var(--line-soft) }
.lesson-nav{ display:flex; gap:10px; flex-wrap:wrap }

/* ---- Mobile ---- */
@media (max-width:480px){
  .signal-header{ padding:28px 0 20px }
  .track-actions{ flex-direction:column; align-items:stretch }
  .track-actions .btn{ width:100% }
  .module-card-head{ flex-direction:column }
  .lesson-row{ flex-wrap:wrap }
  .lesson-footer{ flex-direction:column; align-items:stretch }
  .lesson-nav{ justify-content:space-between }
}