/* Pace-Pilot — Clean rebuild (Sand from logo: #F6E9CD, Red from logo: #C72221) */
:root {
  --sand:#F6E9CD;
  --ink:#1f2937;
  --muted:#6b7280;
  --red:#C72221;
  --card:#ffffff;
  --line:#e8ddc9;
  --chip:#fff8ea;
}

*{box-sizing:border-box}
.pacepilot-wrapper {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
  color: var(--ink);
  background: var(--sand);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.pacepilot-header { display:flex; align-items:center; gap:14px; margin-bottom: 10px; }
.pacepilot-header img { height:92px; width:auto; display:block }
.pacepilot-header h1 { margin:0; font-size: clamp(22px, 2.4vw, 34px); color: var(--red) }
.pacepilot-header small { color: var(--muted) }

.pacepilot-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
.pacepilot-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.pacepilot-card h3 { margin:0 0 8px; font-size: 1rem; color:#0f172a }

.form-section-title { font-weight:700; color: var(--red); margin:6px 0 }
.row { display:grid; grid-template-columns: 200px 1fr; align-items:center; gap:10px; margin-bottom:10px }
.row label { font-weight:600; color:#374151 }
.row .control { width:100% }
.row input[type="text"], .row input[type="date"], .row select, .row input[type="range"] {
  width:100%; background:#fffdf6; border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem; color:#111827; outline:none;
}

.split { display:flex; gap:12px; flex-wrap:wrap }
.split .col { flex:1 1 260px; min-width:240px }
.hint { color: var(--muted); font-size:.86rem; margin-top:4px }

.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.btn { background: var(--red); color:white; border:none; border-radius:10px; padding:.65rem 1rem; font-weight:700; cursor:pointer }
.btn.secondary { background:#ffffff; color:var(--red); border:1px solid var(--red) }
.btn:disabled { opacity:.5; cursor:not-allowed }

.legend { display:flex; gap:8px; flex-wrap:wrap }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; color:#374151; font-size:.85rem }
.dot { width:.75rem; height:.75rem; border-radius:50% }
.dot.green{background:#2E7D32} .dot.red{background:var(--red)} .dot.blue{background:#1565C0}

.paces { display:grid; grid-template-columns: repeat(4, minmax(140px,1fr)); gap:8px }
.paces .box { background:#fffdf6; border:1px solid var(--line); border-radius:10px; padding:.6rem }
.paces .lab { color:#6b7280; font-size:.8rem }
.paces .val { font-weight:700; margin-top:2px }

.week-header { display:flex; justify-content:space-between; align-items:center; padding:.5rem .7rem; border-radius:10px; background:#fff8ea; border:1px solid var(--line); margin:.6rem 0 .3rem }
.calendar { width:100%; border-collapse:separate; border-spacing:6px }
.calendar th, .calendar td { background:#fff; border:1px solid var(--line); padding:.6rem; border-radius:10px; vertical-align:top; min-width:140px }
.calendar th { position:sticky; top:0; background:#fff3df; z-index:1; color:#1f2937 }
.cell-date { color:#6b7280; font-size:.85rem }
.session { margin-top:.45rem; padding:.45rem .55rem; border-radius:8px; line-height:1.3 }
.session.easy { background: rgba(46,125,50,.10); border:1px solid rgba(46,125,50,.25) }
.session.quality { background: rgba(199,34,33,.10); border:1px solid rgba(199,34,33,.28) }
.session.long { background: rgba(21,101,192,.10); border:1px solid rgba(21,101,192,.25) }
.title { font-weight:700; color:#111827 }
.pace { color:#374151; font-size:.94rem }
.badge { display:inline-block; font-size:.7rem; padding:.15rem .35rem; border-radius:6px; border:1px solid var(--line); margin-left:.3rem; color:#7f1d1d; background:#fff1f1 }
.badge.q { border-color:#f9cfcf; color:#991b1b; background:#ffecec }
.sum-row { text-align:right; padding:.6rem; color:#374151; background:#fff; border:1px dashed var(--line); border-radius:10px }

.race { border:2px solid var(--red) !important; box-shadow:0 0 0 3px rgba(199,34,33,.2) inset }
.race .session { background: rgba(199,34,33,.08); border:1px dashed var(--red) }

.signature { margin-top:.6rem; color:#6b7280; font-size:.85rem; text-align:right }

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
  .paces { grid-template-columns: repeat(2, minmax(140px,1fr)); }
}


/* Reasonable control widths */
:root { --control-wide: 420px; --control-narrow: 280px; }
.row .control > * { max-width: var(--control-wide); }
.split .col .control > * { max-width: var(--control-narrow); }