/* Recent runs page ------------------------------------------------------- */

.wr-runs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wr-runs__head h1 { margin: 0; }
.wr-runs .subtitle { margin: 4px 0 0; color: var(--wr-text-muted); font-size: 0.9rem; }

/* Toolbar ---------------------------------------------------------------- */
.wr-runs__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 18px 0 10px;
}
.wr-runs__search {
  position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px;
}
.wr-runs__search [data-icon] {
  position: absolute; left: 10px; color: var(--wr-text-light); pointer-events: none; display: inline-flex;
}
.wr-runs__search .wr-input { padding-left: 32px; width: 100%; }
.wr-runs__sort, .wr-runs__near { display: inline-flex; align-items: center; gap: 6px; }
.wr-runs__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wr-text-muted); font-weight: 600; }
.wr-runs__near .wr-input { width: 120px; }
.wr-runs__near-clear { padding: 6px 8px; }

/* Filter chips ----------------------------------------------------------- */
.wr-runs__chips { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.wr-chipset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--wr-border); background: var(--wr-btn-bg);
  color: var(--wr-text-muted); font-size: 0.8rem; font-weight: 600;
  font-family: inherit; transition: all 0.14s ease;
}
.wr-chip:hover { color: var(--wr-text-main); border-color: var(--wr-primary-border); }
.wr-chip.is-active {
  background: var(--wr-primary-bg); border-color: var(--wr-primary-border); color: var(--wr-primary-dark);
}

/* Table ------------------------------------------------------------------ */
.wr-runs__table { border: 1px solid var(--wr-border); border-radius: var(--wr-radius-md, 12px); overflow: hidden; }
.wr-runs__grid,
.wr-runs__header,
.run-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 150px 116px 88px 74px 128px;
  align-items: center;
  gap: 10px;
}
/* On desktop the meta wrapper is transparent so its cells are grid columns; on
   mobile (below) it becomes a flex row that wraps under the title. */
.run-meta { display: contents; }
.wr-runs__header {
  padding: 10px 14px; background: var(--wr-table-header-bg);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--wr-text-muted); font-weight: 700;
}
.wr-rcol--dur, .wr-rcol--boats { text-align: right; }
.wr-rcol--actions { text-align: right; }

.run-row { border-top: 1px solid var(--wr-border-light); }
.run-row:first-child { border-top: none; }
.run-head {
  width: 100%; padding: 7px 14px; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.run-head:hover { background: var(--wr-table-hover-bg); }
.run-caret { color: var(--wr-text-light); display: inline-flex; transition: transform 0.15s ease; }
.run-row.is-open .run-caret { transform: rotate(90deg); }

.run-title { min-width: 0; }
.run-title__name { font-size: 0.9rem; line-height: 1.25; font-weight: 600; color: var(--wr-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-title__sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.run-event {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 600;
  color: var(--wr-primary-dark); background: var(--wr-primary-bg);
  border: 1px solid var(--wr-primary-border); border-radius: 999px; padding: 0 6px; line-height: 1.7;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-event [data-icon] { flex: none; }
.run-cell { font-size: 0.82rem; color: var(--wr-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-cell--muted { color: var(--wr-text-muted); }
.run-cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.run-place { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.run-place [data-icon] { color: var(--wr-text-light); flex: none; }

.run-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.run-actions .wr-btn { padding: 4px 7px; }

/* Boats sub-panel -------------------------------------------------------- */
.run-boats { padding: 0 14px 4px 22px; background: var(--wr-table-hover-bg); }
.run-boats__loading { padding: 6px 0; color: var(--wr-text-muted); font-size: 0.85rem; }
.run-boats__meta { padding: 4px 0 2px; font-size: 0.72rem; color: var(--wr-text-muted); }
.boat-row {
  display: grid;
  grid-template-columns: 16px minmax(90px, 1.3fr) 1fr 1fr 1fr 1fr 30px;
  align-items: center; column-gap: 12px; padding: 3px 0; border-top: 1px dashed var(--wr-border-light);
}
.boat-row:first-child { border-top: none; }
.boat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.boat-name { font-size: 0.85rem; font-weight: 600; color: var(--wr-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Distribute the per-boat details evenly across the row and centre them in
   their columns, rather than crowding them at the right edge. */
.boat-source { justify-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; color: var(--wr-text-muted); white-space: nowrap; }
.boat-stat { justify-self: center; font-size: 0.8rem; color: var(--wr-text-main); white-space: nowrap; font-variant-numeric: tabular-nums; }
.boat-stat small { color: var(--wr-text-light); font-size: 0.68rem; }
.boat-del { justify-self: end; padding: 3px 5px; }

/* Footer bits ------------------------------------------------------------ */
.wr-runs__more { text-align: center; margin-top: 14px; }
.wr-live-section.wr-card { margin-bottom: 16px; }
.wr-live-section__title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 10px; }
.wr-live-list { display: flex; flex-direction: column; gap: 8px; }
.wr-live-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--wr-success-bg); border: 1px solid rgba(34, 197, 94, 0.35); color: var(--wr-text-main);
}
.wr-live-row:hover { background: rgba(34, 197, 94, 0.14); }
.wr-live-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px inherit; letter-spacing: 0.06em; text-transform: uppercase; color: #16a34a; }
.wr-live-row__title { font-weight: 700; }
.wr-live-row__meta { color: var(--wr-text-muted); font-size: 0.88em; }
.wr-live-row__cta { margin-left: auto; color: #16a34a; font-weight: 600; }
.wr-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 rgba(34,197,94,0.6); animation: wr-live-pulse 1.8s infinite; }
@keyframes wr-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5);} 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 860px) {
  .wr-runs__header { display: none; }
  .run-head {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
      "caret title actions"
      "caret meta  meta";
    column-gap: 8px; row-gap: 3px; align-items: start;
  }
  .run-head .run-caret { grid-area: caret; align-self: center; }
  .run-head .run-title { grid-area: title; align-self: center; min-width: 0; }
  .run-head .run-actions { grid-area: actions; align-self: center; }
  /* The meta wrapper becomes a real flex row so its cells FLOW instead of
     stacking on top of each other (they were all in one grid area). */
  .run-meta {
    grid-area: meta; display: flex; flex-wrap: wrap;
    column-gap: 4px; row-gap: 2px; align-items: baseline;
  }
  .run-head .run-cell {
    display: inline-flex; align-items: baseline; gap: 3px;
    white-space: nowrap; overflow: visible; text-align: left; font-size: 0.78rem;
  }
  .run-head .run-cell + .run-cell::before { content: "·"; color: var(--wr-text-light); margin-right: 1px; }
  /* Boat rows: name + delete on line 1, source + stats flow on line 2. */
  .boat-row {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 10px; row-gap: 1px; padding: 5px 0;
  }
  .boat-dot { order: 0; }
  .boat-name { order: 1; flex: 1 1 auto; }
  .boat-del { order: 2; margin-left: auto; }
  .boat-source, .boat-stat { justify-self: auto; }
  .boat-source { order: 3; }
  .boat-stat { order: 4; }
  .boat-stat--dur { order: 5; }
}