/* Running Style — Training Program & Run Log
   Theme: Pale Blue (#6FB8D9) — training-tool category colour
   Siblings: Lime = gear comparison, Orange = utility tools, Pale Blue = training
*/

/* Without this, width:100% inputs/selects add their padding and border on
   top of that 100%, so two side-by-side fields (e.g. Actual distance /
   Actual time) overflow their grid columns and clip into each other. This
   covers the modals too, since they're siblings of #rst-app, not inside it. */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --rs-black: #0D0D0D;
  --rs-navy: #2E4A63;
  --rs-lime: #C8D400;
  --rs-orange: #FF6B2B;
  --rs-white: #F5F5F3;
  --rs-paleblue: #6FB8D9;
  --rs-paleblue-dark: #4A96B8;
  --rs-text: #1e2124;
  --rs-muted: #64748b;
  --rs-border: #dbe6ec;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background-color: var(--rs-white);
}

#rst-app {
  color: var(--rs-text);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 8px 48px;
}

.rst-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  background-color: #fff;
  padding: 14px 16px;
  margin: 0 -8px 18px;
  border-bottom: 4px solid var(--rs-lime);
}
.rst-header a { display: inline-flex; flex-shrink: 0; align-self: center; }
.rst-header img { width: auto; height: 64px; max-width: 260px; display: block; }
/* Title gets the full remaining row width (rather than sharing it with the
   feedback link beside it), so it wraps onto 2 lines instead of 4; the
   feedback link sits underneath it, right-aligned and close to the lime
   rule, instead of competing for horizontal space at the same height. */
.rst-header-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.rst-header-text p { margin: 0; font-size: 1rem; color: var(--rs-navy); font-weight: 700; letter-spacing: 0.3px; line-height: 1.25; }
.rst-header-feedback-link {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--rs-paleblue-dark);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}
.rst-header-feedback-link:hover { color: var(--rs-navy); }

.rst-card {
  background-color: #ffffff;
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(22, 42, 58, 0.05);
}

.rst-disclosure {
  background-color: #eef7fb;
  border: 1px solid var(--rs-paleblue);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.rst-disclosure strong { color: var(--rs-navy); }

.rst-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.rst-field label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 4px;
  color: var(--rs-navy);
}
.rst-field-note {
  font-size: 0.72rem;
  color: var(--rs-muted);
  margin-top: 3px;
}
.rst-quiet-link {
  color: var(--rs-muted);
  text-decoration: underline;
}
.rst-quiet-link:hover { color: var(--rs-paleblue-dark); }
.rst-field select, .rst-field input, .rst-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 0.88rem;
  font-family: inherit;
  line-height: 1.4;
}
/* iOS Safari's date input is a compound control (day/month/year segments
   plus a calendar icon), not a plain text box -- it doesn't always respect
   the same padding/line-height as other inputs, which can make its
   rendered box mismatch its siblings (a jagged or overlapping bottom
   edge). Forcing an explicit height keeps it consistent with the fields
   next to it. */
.rst-field input[type="date"] {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.rst-field-device-only {
  border-left: 3px solid var(--rs-paleblue);
  padding-left: 10px;
  background: #f7fbfd;
  border-radius: 0 6px 6px 0;
}

.rst-btn {
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 0.85rem;
}
.rst-btn-primary { background-color: var(--rs-black); color: var(--rs-lime); }
.rst-btn-primary:hover { background-color: var(--rs-navy); }
.rst-btn-secondary { background-color: #fff; color: var(--rs-black); border: 2px solid var(--rs-black); }
.rst-btn-secondary:hover { background-color: var(--rs-black); color: #fff; }
.rst-btn-log { background-color: var(--rs-navy); color: #fff; padding: 6px 12px; font-size: 0.78rem; }
.rst-btn-log:hover { background-color: var(--rs-black); }

/* Shared style for the two "move the plan forward" CTAs: Generate my draft
   plan (section 1) and Confirm my plan (section 2). Same width, size and
   weight so neither reads as more/less important than the other, and both
   sit full-width so they're hard to miss/mistap. */
.rst-btn-cta {
  width: 100%;
  padding: 15px 18px;
  font-size: 1rem;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(13, 13, 13, 0.18);
}

.rst-dashboard {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: var(--rs-black);
  color: #ffffff;
  padding: 18px;
  gap: 12px;
  border-bottom: 4px solid var(--rs-lime);
}
.rst-metric { text-align: center; }
.rst-metric-label { display: block; font-size: 0.72rem; color: #b7c3cc; text-transform: uppercase; letter-spacing: 0.5px; }
.rst-metric-val { font-size: 1.35rem; font-weight: 800; color: var(--rs-lime); }

/* Bold black pill badge, matching the main site's "NUMBER OF ARTICLES: 16
   articles" treatment -- used for week totals, phase tags, and session
   type labels throughout the plan. */
.rs-pill-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--rs-black);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.rs-pill-badge-lime { background: var(--rs-lime); color: var(--rs-black); }

.rst-adherence-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid #eef2f5;
  text-transform: capitalize;
}

.rst-table-wrapper { overflow-x: auto; }
.rst-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
.rst-table th, .rst-table td { padding: 10px 12px; border-bottom: 1px solid var(--rs-border); vertical-align: top; }
.rst-table th { background-color: var(--rs-navy); color: #fff; font-weight: 600; }
.rst-table tr:nth-child(even) { background-color: #f8fbfc; }

/* Status dots — echo the logo's node-circle motif */
.rs-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--rs-paleblue);
  margin-right: 4px;
}
.rs-dot-pending { background: transparent; }
.rs-dot-completed { background: var(--rs-paleblue); }
.rs-dot-partial { background: linear-gradient(90deg, var(--rs-paleblue) 50%, transparent 50%); }
.rs-dot-missed { background: transparent; border-color: #cbd5e1; }

.rs-niggle-tag {
  font-size: 0.7rem;
  color: var(--rs-paleblue-dark);
  margin-top: 4px;
}

.rst-adaptation-item { font-size: 0.85rem; padding: 6px 0; border-bottom: 1px solid #eef2f5; }
.rst-muted { color: var(--rs-muted); font-size: 0.85rem; }

/* Modal */
.rst-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,13,13,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.rst-modal {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.rst-modal h3 { margin-top: 0; color: var(--rs-navy); }
.rst-modal-close {
  float: right;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--rs-muted);
  background: none;
  border: none;
}
.rst-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* Grid items default to min-width:auto, which floors their shrinkability at
   their content's intrinsic width. iOS Safari's compound <input type="date">
   control has an intrinsic width that can exceed a 1fr track on a narrow
   phone screen, so without this the date field refuses to shrink and
   visually bleeds into the field next to it instead of respecting the grid
   column. Same risk for any input/select in a grid, so it's not just dates. */
.rst-modal-grid > .rst-field, .rst-form-grid > .rst-field { min-width: 0; }
.rst-modal-actions { display: flex; gap: 10px; margin-top: 16px; }

details.rst-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rs-paleblue-dark);
  font-size: 0.85rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef7fb;
  border: 1px solid var(--rs-paleblue);
  border-radius: 16px;
  padding: 6px 14px;
}
details.rst-accordion summary::-webkit-details-marker { display: none; }
details.rst-accordion summary:hover { background: #e0f0f7; }
.rst-accordion-chevron { display: inline-block; transition: transform 0.15s ease; font-size: 0.75rem; }
details[open] > summary .rst-accordion-chevron { transform: rotate(90deg); }
details.rst-accordion .rst-accordion-content { margin-top: 12px; font-size: 0.85rem; color: #334155; line-height: 1.5; }

.rst-volume-warning {
  background-color: #fff7ed;
  border: 1px solid var(--rs-orange);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7c3a10;
}

.rs-day-select {
  font-size: 0.75rem;
  padding: 2px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  margin: 2px 0;
}

.rst-section {
  margin-bottom: 24px;
}
.rst-intake-panel {
  margin-bottom: 16px;
  border-radius: 12px;
}
/* "Track extras", "Dashboard" and "Save & back up" all sit a level below
   the numbered steps (1/2/3) -- indenting them and narrowing their pill a
   little shows that at a glance, rather than every panel looking like an
   equally-weighted step in the sequence. */
.rst-intake-panel-sub {
  margin-left: 18px;
}
.rst-intake-panel-sub > summary {
  padding: 10px 16px;
  font-size: 0.95em;
}
.rst-intake-panel[open] {
  border: 1px solid var(--rs-paleblue);
  padding: 18px;
}
.rst-intake-panel .rst-card {
  box-shadow: none;
}
.rst-intake-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rs-black);
  color: #fff;
  padding: 12px 18px;
  border-radius: 24px;
}
.rst-intake-panel[open] > summary {
  margin-bottom: 16px;
}
.rst-intake-panel > summary::-webkit-details-marker { display: none; }
.rst-intake-panel > summary h2 {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}
.rst-intake-panel > summary::after {
  content: '▸';
  color: var(--rs-lime);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  margin-left: auto;
  transition: transform 0.15s ease;
}
.rst-intake-panel[open] > summary::after {
  transform: rotate(90deg);
}
.rst-section-heading {
  margin-bottom: 12px;
}
.rst-section-heading h2 {
  font-size: 1.1rem;
  color: var(--rs-navy);
  margin: 0 0 4px;
}
.rst-section-heading p {
  margin: 0;
}

/* Pre-build overview: one distinct card per week, not a flat list */
.rs-overview-card {
  background: #f8fbfc;
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rs-overview-card:last-child { margin-bottom: 0; }
.rs-overview-card-adjusted {
  border-color: var(--rs-orange);
  background: #fffaf5;
}

.rs-overview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rs-border);
}
.rs-overview-card-header strong { color: var(--rs-navy); font-size: 0.95rem; }
.rs-muted-small { display: block; font-size: 0.72rem; color: var(--rs-muted); margin-top: 1px; }
.rs-overview-total-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--rs-black);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.rs-overview-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rs-overview-control-row:last-child { margin-bottom: 0; }
.rs-overview-control-label {
  font-size: 0.78rem;
  color: var(--rs-navy);
  font-weight: 600;
}

.rs-overview-runs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-overview-run-count {
  font-weight: 700;
  color: var(--rs-navy);
  min-width: 14px;
  text-align: center;
}
.rs-stepper-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rs-navy);
  background: #fff;
  color: var(--rs-navy);
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.rs-stepper-btn:hover { background: var(--rs-navy); color: #fff; }

.rs-overview-reduce {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rs-reduce-btn {
  font-size: 0.72rem;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  color: var(--rs-muted);
  font-weight: 500;
}
.rs-reduce-btn:hover { border-color: var(--rs-orange); color: var(--rs-orange); }
.rs-reduce-active {
  background: var(--rs-orange);
  border-color: var(--rs-orange);
  color: #fff;
  font-weight: 700;
}

.rst-bridge-note {
  background-color: #eef7fb;
  border: 1px solid var(--rs-paleblue);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--rs-navy);
}

.rst-warnings-panel {
  background-color: #fff7ed;
  border: 1px solid var(--rs-orange);
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 16px;
}
.rst-warning-item {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7c3a10;
  padding: 10px 0;
  border-bottom: 1px solid #fde5cc;
}
.rst-warning-item:last-child { border-bottom: none; }

/* Horizontally scrolling week cards -- one card fills most of an iPhone
   screen with a peek of the next; on wider screens several sit side by side. */
.rs-weeks-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  padding: 4px 20px 12px;
  -webkit-overflow-scrolling: touch;
}
.rs-week-card {
  flex: 0 0 85%;
  max-width: 340px;
  scroll-snap-align: start;
  background: #f8fbfc;
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  padding: 14px;
}
@media (min-width: 700px) {
  .rs-week-card { flex: 0 0 300px; }
}
.rs-week-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  color: var(--rs-navy);
}
.rs-week-total {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--rs-black);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.rs-cutback-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--rs-black);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
}
.rs-cutback-tag-race { background: var(--rs-lime); color: var(--rs-black); }

.rs-session-entry {
  background: #fff;
  border: 1px solid var(--rs-border);
  border-left: 4px solid var(--rs-paleblue);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.rs-session-easy { border-left-color: #a8d4e8; }
.rs-session-quality { border-left-color: var(--rs-orange); }
.rs-session-long { border-left-color: var(--rs-navy); }
.rs-session-runwalk { border-left-color: var(--rs-lime); }
.rs-session-race { border-left-color: var(--rs-lime); background: #fbfef4; }

.rs-session-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.rs-session-type-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--rs-black);
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: auto;
}
.rs-session-prescribed {
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 6px;
}
.rs-tip {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--rs-paleblue-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}
.rs-warmup-tip {
  font-size: 0.72rem;
  color: var(--rs-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.rs-warmup-tip a { color: var(--rs-paleblue-dark); }
.rs-chart-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}
.rs-strength-tip {
  font-size: 0.72rem;
  color: var(--rs-muted);
  margin-bottom: 8px;
  line-height: 1.4;
  padding-left: 8px;
  border-left: 2px solid var(--rs-lime);
}

.rst-howto {
  border-top: 1px solid var(--rs-border);
  padding-top: 16px;
}
.rst-howto-list {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #334155;
}
.rst-howto-list:last-child { margin-bottom: 0; }

.rst-footer-note {
  font-size: 0.72rem;
  color: var(--rs-muted);
  margin-top: 14px;
  line-height: 1.5;
}