/* ============================================================
   Program Guide — scoped design system
   Every rule is nested under .pg so none of this leaks into the
   rest of the app (which is Tailwind-utility driven).
   The app's violet stays the BRAND accent (links, "you are here").
   The block hues encode TRAINING QUALITY, not decoration:
     steel = max strength · brass = power · vermilion = speed
     teal  = deload/taper · graphite = competition
   ============================================================ */

.pg {
  --paper:       #F5F3EE;
  --surface:     #FFFFFF;
  --ink:         #17191D;
  --ink-soft:    #46484D;
  --muted:       #77756E;
  --rule:        #E0DCD4;
  --rule-strong: #C5BFB4;
  --brand:       #7C3AED;
  --brand-wash:  #F1EBFE;

  --b1: #38506E;
  --b2: #9A6A18;
  --b3: #B33F26;
  --b4: #3E7466;
  --b5: #2C2E33;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", monospace;

  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

.pg-wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.75rem 1rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.pg h1, .pg h2, .pg h3, .pg h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
.pg p { margin: 0; }
.pg b, .pg strong { font-weight: 650; color: var(--ink); }
.pg a { color: var(--brand); text-underline-offset: .18em; }
.pg :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.pg-eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- masthead ---------- */
.pg-mast { display: flex; flex-direction: column; gap: .9rem; }
.pg-mast .bar { height: 3px; background: var(--ink); }
.pg-mast h1 {
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.pg-mast h1 em { font-style: normal; display: block; color: var(--brand); }
.pg-lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 34rem; }

/* ---------- you-are-here status bar ---------- */
.pg-now {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-inline: -1rem;
  padding: .6rem 1rem;
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .8rem;
  font-size: .85rem;
  box-shadow: 0 1px 8px rgb(0 0 0 / .12);
}
.pg-now .k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
.pg-now .v { font-weight: 650; font-variant-numeric: tabular-nums; }
.pg-now .sep { opacity: .45; }
.pg-now .bar {
  flex: 1 1 6rem;
  min-width: 5rem;
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / .28);
  overflow: hidden;
}
.pg-now .bar i { display: block; height: 100%; background: #fff; border-radius: 999px; }

/* ---------- toc ---------- */
.pg-toc { display: flex; flex-wrap: wrap; gap: .4rem; }
.pg-toc a {
  font-family: var(--mono);
  font-size: .74rem;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: .28rem .7rem;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-toc a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pg-toc a.is-now { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- arc chart ---------- */
.pg-arc {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.15rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.pg-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-arc .g   { stroke: var(--rule); stroke-width: 1; }
.pg-arc .va  { fill: var(--ink); opacity: .07; }
.pg-arc .v   { fill: none; stroke: var(--ink-soft); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pg-arc .i   { fill: none; stroke: var(--b2); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linejoin: round; stroke-linecap: round; }
.pg-arc .dv  { fill: var(--ink-soft); }
.pg-arc .di  { fill: var(--b2); }
.pg-arc .now { stroke: var(--brand); stroke-width: 2; }
.pg-arc .nowdot { fill: var(--brand); }
.pg-arc .nowlab {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  fill: var(--brand); text-anchor: middle;
}
.pg-arc .x   { font-family: var(--mono); font-size: 13px; fill: var(--muted); text-anchor: middle; }
.pg-arc .x.on { fill: var(--brand); font-weight: 700; }
.pg-arc .x.past { opacity: .55; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--muted); }
.pg-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.pg-legend i { width: 18px; height: 0; border-top: 2.5px solid currentColor; }
.pg-legend .lv { color: var(--ink-soft); }
.pg-legend .li { color: var(--b2); }
.pg-legend .li i { border-top-style: dashed; }
.pg-legend .ln { color: var(--brand); }
.pg-legend .ln i { border-top-width: 2px; }

/* ---------- sections ---------- */
.pg section { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 4rem; }
.pg section > h2 { font-size: 1.3rem; font-weight: 750; letter-spacing: -.012em; }

/* ---------- key/value rules ---------- */
.pg-rules { display: flex; flex-direction: column; gap: .75rem; }
.pg-rule {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  column-gap: .8rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
}
.pg-rule:first-child { border-top: 2px solid var(--ink); }
.pg-rule .k {
  font-family: var(--mono);
  font-size: .71rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b2);
  padding-top: .25rem;
}
.pg-rule .v { color: var(--ink-soft); }

/* ---------- block ---------- */
.pg-block { border-top: 3px solid var(--bh); padding-top: 1rem; gap: 1.3rem; }
.pg-block.is-now { position: relative; }
.pg-block.is-now::before {
  content: "";
  position: absolute;
  inset: -.6rem -.7rem -.6rem -.7rem;
  border: 2px solid var(--brand);
  border-radius: 10px;
  pointer-events: none;
}
.pg-block.is-done { opacity: .62; }
.pg-block.is-future { opacity: .78; }
.pg-bhead { display: flex; flex-direction: column; gap: .45rem; }
.pg-cd {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--bh);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.pg-badge {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pg-badge.now  { background: var(--brand); color: #fff; }
.pg-badge.done { background: var(--rule); color: var(--ink-soft); }
.pg-bhead h2 {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.pg-goal { color: var(--ink-soft); }
.pg-tag {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bh);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: .05rem .4rem;
  margin-right: .45rem;
  white-space: nowrap;
}

/* ---------- session ---------- */
.pg-sess { display: flex; flex-direction: column; }
.pg-shead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
}
.pg-shead h3 {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pg-shead .dur { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.pg-shead .today {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  padding: .12rem .45rem;
  border-radius: 999px;
}
.pg-sess.is-today .pg-shead { border-bottom-color: var(--brand); }

.pg-ex {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: .7rem;
  row-gap: .4rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.pg-ex > * { grid-column: 2; }
.pg-ex-n {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  padding-top: .14rem;
  font-variant-numeric: tabular-nums;
}
.pg-ex-name { font-size: .98rem; font-weight: 650; }
.pg-ex-name .alt { font-weight: 400; color: var(--muted); font-size: .87rem; }
.pg-spec { display: flex; flex-wrap: wrap; gap: .3rem; }
.pg-chip {
  font-family: var(--mono);
  font-size: .77rem;
  font-variant-numeric: tabular-nums;
  padding: .12rem .46rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pg-chip.load { color: var(--bh); border-color: currentColor; font-weight: 600; }
.pg-chip.vol  { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.pg-chip.rest { color: var(--muted); }
.pg-note {
  font-size: .92rem;
  color: var(--ink-soft);
  padding-left: .9rem;
  border-left: 2px solid var(--rule-strong);
}
.pg-note b { color: var(--ink); }

.pg-cond {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.pg-cond .pg-eyebrow { color: var(--bh); }
.pg-cond ul { margin: 0; padding-left: 1.05rem; display: flex; flex-direction: column; gap: .28rem; }

.pg-flag {
  border-left: 3px solid var(--bh);
  background: #FBF6EC;
  padding: .7rem .9rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---------- tables ---------- */
.pg-tw { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.pg table { border-collapse: collapse; width: 100%; min-width: 28rem; font-size: .89rem; }
.pg th, .pg td { text-align: left; padding: .55rem .78rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pg thead th {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  background: var(--paper);
  white-space: nowrap;
}
.pg tbody tr:last-child td { border-bottom: 0; }
.pg tbody tr.is-now td { background: var(--brand-wash); }
.pg td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.pg td.day { font-family: var(--mono); font-weight: 600; white-space: nowrap; }

.pg-formula {
  font-family: var(--mono);
  font-size: .98rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: .8rem 1rem;
  overflow-x: auto;
  white-space: nowrap;
}

.pg-footer {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: .84rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ---------- exercise substitution ---------- */
.pg-swapbtn {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .2rem .6rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pg-swapbtn:hover { border-color: var(--brand); color: var(--brand); }
.pg-swapped {
  font-size: .85rem;
  color: var(--brand);
  background: var(--brand-wash);
  border-radius: 4px;
  padding: .25rem .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}
.pg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand); font-size: .82rem; text-decoration: underline;
  text-underline-offset: .18em;
}

.pg-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.pg-modal.hidden { display: none; }
.pg-modal-card {
  background: var(--surface);
  width: 100%; max-width: 34rem;
  max-height: 85vh; overflow-y: auto;
  border-radius: 14px 14px 0 0;
  padding: 1rem 1rem 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
}
@media (min-width: 40rem) {
  .pg-modal { align-items: center; padding: 1rem; }
  .pg-modal-card { border-radius: 14px; }
}
.pg-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pg-modal-head h3 { font-size: 1.05rem; font-weight: 750; }
.pg-modal-x {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 .25rem;
}
.pg-modal-sub { font-size: .85rem; color: var(--muted); }
.pg-modal-body { display: flex; flex-direction: column; gap: .4rem; }
.pg-alt {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  background: none; border: 1px solid var(--rule); border-radius: 8px;
  padding: .5rem; cursor: pointer; width: 100%;
  transition: border-color .15s, background .15s;
}
.pg-alt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-wash); }
.pg-alt:disabled { opacity: .5; cursor: default; }
.pg-alt img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.pg-alt-nogif {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px;
  background: var(--paper); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.pg-alt-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pg-alt-text b { font-size: .92rem; }
.pg-alt-text small { font-size: .76rem; color: var(--muted); }

.pg-empty {
  border: 1px dashed var(--rule-strong);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
}

@media (max-width: 30rem) {
  .pg-rule { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .pg-rule .k { padding-top: 0; }
}

@media print {
  .pg { background: #fff; }
  .pg-toc, .pg-now { display: none; }
  .pg-block, .pg-ex, .pg-sess { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .pg * { transition: none !important; animation: none !important; }
}