body { font: 16px/1.5 system-ui, sans-serif; margin: 1.5rem auto; max-width: 56rem; padding: 0 1.5rem; box-sizing: border-box; color: #222; }
  .sitenav { margin-bottom: .9rem; font: 14px system-ui; }
  .sitenav a { color: #e8742a; font-weight: 600; text-decoration: none; }
  .sitenav a:hover { text-decoration: underline; }
  h1 { font-size: 1.3rem; margin: 0 0 .8rem; }
  .tabs { display: flex; gap: .3rem; border-bottom: 2px solid #ddd; margin-bottom: 1rem; }
  .tab { font: 15px system-ui; padding: .5rem 1rem; border: 0; background: none; color: #777;
         cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
  .tab.active { color: #2b7; border-bottom-color: #2b7; font-weight: bold; }

  .controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
              background: #f6f8f7; border: 1px solid #dde; border-radius: 6px; padding: .7rem 1rem; }
  label { font-size: .9rem; }
  input, select { font: 14px monospace; padding: .25rem; }
  #vdot { width: 5rem; font-size: 1.1rem; font-weight: bold; }
  #temp { width: 5rem; }
  button { font: 14px system-ui; padding: .4rem .9rem; border: 1px solid #2b7; background: #2b7;
           color: #fff; border-radius: 5px; cursor: pointer; }
  button.ghost { background: #fff; color: #2b7; }

  .panels { margin: 1.1rem 0; }
  .panel { margin-bottom: 1.4rem; --pace: #222; }
  .panel-h { font-weight: bold; font-size: .95rem; margin-bottom: .35rem; }
  .panel table { border-collapse: collapse; }
  .panel td, .panel th { padding: 2px 1.1rem 2px 0; font: 13px/1.55 monospace; text-align: left; white-space: nowrap; }
  .panel th { color: #999; font-weight: normal; border-bottom: 1px solid #ddd; }
  .panel td { color: var(--pace); }
  .panel td.lbl { color: #1a5; }
  .heatbadge { font-size: .8rem; color: #c0392b; font-weight: bold; margin-left: .6rem; }
  .agpct { font-size: 2.4rem; font-weight: bold; line-height: 1.1; }
  .agrate { font-size: 1rem; color: #555; margin-bottom: .6rem; }

  ul.bullets { color: #666; font-size: .82rem; padding-left: 1.1rem; margin: .6rem 0; }
  ul.bullets li { margin: .15rem 0; }

  textarea { width: 100%; height: 5rem; font: 14px/1.4 monospace; }
  #out { border-collapse: collapse; width: 100%; margin-top: .6rem; }
  #out th { text-align: left; font-size: .75rem; color: #999; border-bottom: 1px solid #ccc; padding: .3rem .5rem; }
  #out th:nth-child(n+2) { text-align: center; }   /* Total / Fuelling / Download headers align with their centred cells */
  #out td { border-top: 1px solid #eee; padding: .35rem .5rem; vertical-align: top; }
  #out td.in  { color: #999; font: 13px/1.4 monospace; }
  #out td.cvt { font: 14px/1.4 monospace; }
  #out td.tot { font: 14px/1.4 monospace; font-weight: bold; text-align: center; white-space: nowrap; }
  button.icon { background: none; border: 0; padding: 0 0 0 .4rem; font-size: 13px; cursor: pointer; color: #999; }
  button.fit { padding: .15rem .5rem; font-size: 12px; }
  .optrow { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
  .optrow .fitopts { flex: 1 1 22rem; margin: .7rem 0; align-self: flex-start; }
  .optrow .optbox { display: block; padding-top: 0; padding-bottom: 0; }   /* vertical space handled by summary + optbody */
  .optbox > summary { cursor: pointer; list-style: none; user-select: none;
                      display: flex; align-items: center; gap: .5rem;
                      padding: .7rem .9rem; margin: 0 -.9rem; border-radius: 8px; }
  .optbox > summary:hover { background: #eef4f1; }
  .optbox > summary::-webkit-details-marker { display: none; }
  .optbox > summary::before { content: '▶'; color: #2b7; font-size: .7em; transition: transform .15s ease; }
  .optbox[open] > summary::before { transform: rotate(90deg); }
  .optbody { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: flex-end; padding-bottom: .7rem; }
  .optbody > label:not(.frow) { flex-basis: 100%; font-size: .9rem; cursor: help; }
  .fgroup { flex-basis: 100%; }
  .fgroup + .fgroup { margin-top: .3rem; }
  .fgroup .subhead { margin: 0 0 .3rem; }
  .frows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; align-items: end; }
  .frows.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuelopts.optbox .frow { flex: none; min-width: 0; max-width: none; align-items: flex-start; }
  .fuelopts.optbox .frow > select { width: auto; max-width: 100%; }
  .fuelopts .frow > input[type=number] { width: 4.5rem; max-width: 100%; }
  .fsentence { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-top: .4rem;
               font-size: .8rem; color: #555; cursor: default; }
  .fsentence input[type=number] { width: 4rem; }
  .fitopts .cap { flex-basis: 100%; font-size: .72rem; color: #999; margin-top: .2rem; }
  .fitopts .subhead { flex-basis: 100%; font-size: .72rem; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .04em; margin: .35rem 0 -.15rem; }
  .fitopts select, .fitopts input[type=number] { font: 13px monospace; padding: .2rem; cursor: pointer; }
  .fitopts .frow { flex: 1 1 7.5rem; min-width: 6.5rem; max-width: 13rem; display: flex; flex-direction: column;
                   align-items: stretch; gap: .15rem; cursor: default; font-size: .8rem; color: #555; }
  .fitopts .frow select, .fitopts .frow input { width: 100%; margin: 0; }
  .dlbtn { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: #2b7; padding: .2rem .5rem; }
  .dlbtn:hover { color: #1a5; }
  #out td.dl { text-align: center; }
  #out td.fuel { font: 12.5px/1.45 system-ui; color: #555; white-space: pre-line; text-align: center; }
  #out td.cvt { white-space: normal; }
  #out td.timing { font: 12px/1.5 monospace; text-align: center; white-space: nowrap; color: #555; }
  #out td.timing .dur { font-size: 11px; color: #888; }
  #out td.timing .wake { font-size: 11px; color: #2e8b6e; cursor: help; }
  .chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .chip { padding: 2px 7px; border-radius: 5px; font: 12px/1.4 monospace; white-space: nowrap; }
  .rep { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 3px 5px;
         border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
  .repx { font: bold 11px system-ui; color: #475569; }
  .controls.vstack { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .find-h { font-size: .85rem; color: #777; font-style: italic; margin-bottom: .25rem; }
  #tempval { font: 13px monospace; color: #555; min-width: 3.5rem; display: inline-block; }
  .fitopts { border: 1px solid #e3e8e6; border-radius: 8px; padding: .7rem .9rem; margin: .7rem 0;
             display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: flex-end; background: #fafbfb; }
  .fitopts-h { flex-basis: 100%; font-size: .72rem; color: #888; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
  .fitopts > label:not(.frow) { flex-basis: 100%; font-size: .9rem; cursor: help; }
  ul.intro { font-size: .9rem; color: #444; margin-bottom: .2rem; }
  .sec-head { font-size: 1.15rem; margin: 0 0 .4rem; }
  .sec-sub { font-size: .9rem; color: #444; margin: 0 0 .3rem; }
  .legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: #555; margin: 0 0 .9rem; }
  .legend b { color: #1a5; font-family: monospace; }
  .examples { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0 0 .6rem; }
  .ex-h { font-size: .82rem; color: #555; margin-right: .2rem; }
  .ex-hint { color: #999; }
  .ex { font: 12px/1.3 monospace; color: #345; background: #f1f5f9; border: 1px solid #dde3ea;
        border-radius: 5px; padding: .2rem .45rem; cursor: pointer; }
  .ex:hover { background: #e2e9f1; border-color: #c3cedd; }
  .importnote { font-size: .85rem; color: #555; background: #f6f8f7; border: 1px solid #dde;
                border-radius: 6px; padding: .6rem .9rem; margin: .9rem 0; }
  .importnote ol { margin: .4rem 0 0; padding-left: 1.3rem; }
  .importnote li { margin: .2rem 0; }
  [hidden] { display: none; }

/* ---- race builder ---- */
  .pcontrols-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
  .pcontrols-row .controls { flex: 2 1 23rem; }
  .pcontrols-row .fuelopts { flex: 1 1 17rem; margin: 0; align-content: flex-start; }
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pbias-l { display: inline-flex; align-items: center; gap: .5rem; }
  #pbiasval { font: 12px monospace; color: #555; min-width: 9rem; display: inline-block; }
  .pspacer { flex: 1 1 0; min-width: 1rem; }
  .psummary { margin: 1.1rem 0 .3rem; }
  .psummary .pbig { font-size: 2.2rem; font-weight: bold; line-height: 1.1; color: #222; }
  .psummary .pmeta { font: 13px monospace; color: #555; margin-top: .15rem; }
  .psummary .pgood { color: #2b7; font-weight: bold; }
  .psummary .pover { color: #c0392b; font-weight: bold; }
  #ptable { border-collapse: collapse; width: 100%; min-width: 30rem; max-width: 46rem; margin-top: .4rem; }
  #ptable th { text-align: left; font-size: .75rem; color: #999; border-bottom: 1px solid #ccc; padding: .3rem .6rem; }
  #ptable td { border-top: 1px solid #eee; padding: .3rem .6rem; font: 13px/1.4 monospace; }
  #ptable td.pmark { color: #1a5; font-weight: bold; }
  #ptable td.pfuel { white-space: nowrap; }
  #ptable td.padj { width: 6rem; }
  #ptable input.padji { width: 4.2rem; font: 13px monospace; padding: .15rem; text-align: right; }
  #ptable tr.phill td { background: #fff7ed; }
  #ptable tr.psurge td { background: #f0fdf4; }
  .gelmark { background: #ffedd5; color: #9a3412; border-radius: 5px; padding: 1px 7px; font-size: 12px; white-space: nowrap; }
  .capmark { background: #e0f2fe; color: #075985; border-radius: 5px; padding: 1px 7px; font-size: 12px; white-space: nowrap; margin-left: 4px; }
  .psummary .pfuel { font: 13px system-ui; color: #555; margin-top: .25rem; }

/* ---- workout builder flow (subway stepper) ---- */
  .flow { margin-top: .8rem; }
  .fstep { position: relative; padding-left: 2.6rem; padding-bottom: 1.7rem; }
  .fstep:not(:last-child)::before { content: ''; position: absolute; left: .8rem; top: .4rem; bottom: -.1rem;
                                    width: 2px; background: #cfe3d8; }
  .fnum { position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%;
          background: #2b7; color: #fff; font: bold 13px/1.7rem system-ui; text-align: center; }
  .fhead { display: flex; align-items: center; min-height: 1.7rem; margin: 0 0 .5rem;
           font-size: 1.05rem; font-weight: bold; color: #222; }
  .fstep .sec-sub { margin-top: -.2rem; }
  .fstep textarea, .fstep .optrow, .fstep .importnote, .fstep .tablewrap, .fstep table,
  .fstep .controls, .fstep .pcontrols-row, .fstep .panels, .fstep .psummary { margin-top: .4rem; }

/* ---- age grade sub-section (under VDOT) ---- */
  .subsection { margin-top: .8rem; padding: 1.2rem 0 0 2.6rem; border-top: 1px solid #e5e7eb; }
  .subsection .sec-head { font-size: 1.05rem; margin-bottom: .6rem; }

/* ---- footer / attribution ---- */
footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #ddd; font-size: .8rem; color: #777; }
footer a { color: #2b7; }
footer .cred { font-size: .72rem; color: #999; line-height: 1.5; max-width: 60rem; }

/* ---- responsive ---- */
.panel { overflow-x: auto; }
@media (max-width: 640px) {
  body { margin: 1rem auto; padding: 0 .8rem; }
  h1 { font-size: 1.15rem; }
  input, select, textarea { font-size: 16px; }      /* prevents iOS zoom on focus */
  .tabs { gap: 0; }
  .tab { padding: .5rem .55rem; font-size: 14px; }
  .controls { gap: .7rem 1rem; }
  .fitopts .frow { max-width: none; }
  button.icon, button.fit { font-size: 15px; padding: .3rem .55rem; }

  /* workout list -> stacked cards (no cramped 4-column table) */
  #out thead { position: absolute; left: -9999px; }
  #out, #out tbody, #out tr, #out td { display: block; width: auto; }
  #out tr { border: 1px solid #e5e7eb; border-radius: 8px; padding: .55rem .75rem; margin: 0 0 .7rem; }
  #out td { border: 0; padding: .15rem 0; }
  #out td.tot, #out td.dl, #out td.fuel, #out td.timing { text-align: left; }
  #out td.fuel { white-space: pre-line; }
  #out td::before { content: attr(data-label); display: block; font-size: .64rem; text-transform: uppercase;
                    letter-spacing: .05em; color: #aaa; margin-bottom: .05rem; }

  #ptable { min-width: 26rem; }
  #ptable td, #ptable th { padding: .35rem .45rem; }
  #ptable input.padji { width: 3.4rem; }
  #pbiasval { min-width: 0; }

  .fstep { padding-left: 2rem; }
  .fstep:not(:last-child)::before { left: .65rem; }
  .fnum { width: 1.4rem; height: 1.4rem; font-size: 12px; line-height: 1.4rem; }
  .fhead { font-size: 1rem; min-height: 1.4rem; }
  .subsection { padding-left: 2rem; }
}