/* Styles for the loading screen and the Today tab (the rest comes from the original log page) */
.boot { max-width: 1120px; margin: 40px auto; padding: 0 20px; font-family: "IBM Plex Sans", system-ui, sans-serif; color: #5f6b64; }
.boot.bad { color: #b5402a; }
.t-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card.t-race { display: flex; justify-content: space-between; align-items: center; border-top: 4px solid var(--race); }
.t-rn { font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; line-height: 1.1; }
.t-big { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--race); }
.t-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.t-week div { display: grid; }
.t-week b { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; }
.t-week span { font-size: 12px; color: var(--muted); }
.t-week .t-d { font-size: 12px; }
.t-k { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 6px; }
.t-k.fit { background: var(--accent); } .t-k.fat { background: var(--race); }
.t-run { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--grid); }
.t-run:first-child { border-top: 0; padding-top: 0; }
.t-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-mi { font-weight: 600; text-align: right; white-space: nowrap; }
.t-meta { grid-column: 1 / -1; color: var(--muted); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.t-zone { display: inline-block; padding: 0 6px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: 700; margin-right: 4px; font-family: var(--font-body); }
#tMore { justify-self: start; }
@media (max-width: 600px) {
  /* on phones, personal bests show on the History tab only */
  body:not([data-view="history"]) header.top { display: none; }
  .t-stats { gap: 8px; }
  .t-week { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .t-week b { font-size: 22px; }
  .t-big { font-size: 26px; }
  .t-rn { font-size: 19px; }
}

/* coach */
.c-card { border-left: 4px solid var(--accent); }
.c-call { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; }
.c-call.c-rest, .c-call.c-easy { color: var(--muted); }
.c-call.c-key, .c-call.c-race { color: var(--race); }
.c-call.c-done { color: var(--good); }
.c-why { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.c-notes { display: grid; gap: 4px; }
.c-table td { padding: 6px 8px; }
.c-table tr.c-now td { background: var(--accent-soft); font-weight: 600; }
.c-table tr.c-past td { color: var(--muted); }
.c-ok { color: var(--good); font-weight: 600; white-space: nowrap; }
.c-miss { color: var(--bad); white-space: nowrap; }
.c-today { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) { .c-call { font-size: 24px; } }
.card.t-race.t-race-wrap { flex-wrap: wrap; }
.t-past { flex-basis: 100%; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--grid); padding-top: 8px; }
.t-past b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }

/* ask your coach (AI) */
#aiQ { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; color: var(--ink); resize: vertical; }
.ai-card .btn[disabled] { opacity: 0.5; cursor: wait; }
#aiOut { display: grid; gap: 12px; }
.ai-ans { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.ai-ans p { margin: 4px 0; }
.ai-ans ul { margin: 4px 0; padding-left: 18px; }
.ai-ans .ai-h { font-weight: 600; margin-top: 8px; }
.ai-who { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: 0.04em; }
.ai-wait { color: var(--muted); }
.ai-err { border-left-color: var(--bad); color: var(--bad); }
.ai-who .small { display: block; font-family: var(--font-body); text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 12px; }
[hidden] { display: none !important; }