/* Components Suit adds to Flow's styling, built from the same tokens (application.css). Each area of the app keeps
   its own styles in a file of its own (criteria.css, runs.css, …) so they don't step on each other. */

/* ---------- The one page wider than the rest ---------- */

/* Pages under a project all keep the standard width, so switching between its tabs never moves the page. Only a
   run's public share page is wider: a read-only list of matches that stands alone, with nothing around it. */
.page.page--wide { max-width: 72rem; }

/* ---------- A project's sections ---------- */

.page-head__link { text-decoration: none; }
.page-head .eyebrow a { color: inherit; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}

.tabs__link {
  padding: .4rem .75rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
}

.tabs__link:hover { background: var(--tint); color: var(--ink); }
.tabs__link.is-current { background: var(--ink); color: var(--paper); }

.inline-form { display: inline; }

/* ---------- Steps on a project's overview ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.step::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tint);
  font-family: var(--display);
  font-weight: 700;
}

.step--done::before { content: "✓"; background: var(--yellow); }
.step__title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.step__text { color: var(--ink-soft); }

/* ---------- Choosing one of several options, as cards ---------- */

.choice-cards { border: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.choice-cards .label { padding: 0; margin-bottom: .25rem; }
.choice-cards[disabled] { opacity: .7; }

.choice-card { display: block; cursor: pointer; }
.choice-card__input { position: absolute; opacity: 0; pointer-events: none; }

.choice-card__body {
  display: grid;
  gap: .1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
}

.choice-card__title { font-weight: 650; }
.choice-card__text { color: var(--ink-soft); font-size: .9rem; }
.choice-card:hover .choice-card__body { border-color: var(--ink-faint); }
.choice-card__input:checked + .choice-card__body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); }
.choice-card__input:focus-visible + .choice-card__body { box-shadow: 0 0 0 3px var(--focus-soft); }

.side-names__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 540px) { .side-names__row { grid-template-columns: 1fr; } }

/* ---------- Tables of data ---------- */

.table-wrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table th { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: var(--wash); white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { text-decoration-color: var(--ink-faint); }

/* ---------- Small figures ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: 0 0 1.5rem; }
.stat { padding: .8rem 1rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.stat__value { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.stat__label { color: var(--ink-soft); font-size: .85rem; }

/* A score from 0 to 100, as a number and a short bar. */
.score { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.score__track { width: 48px; height: 5px; border-radius: 3px; background: var(--heat-off); overflow: hidden; }
.score__fill { height: 100%; background: var(--ink); }
/* The CSP allows no inline styles, so widths come in tenths: score__fill--0 … score__fill--10. */
.score__fill--0 { width: 0%; }
.score__fill--1 { width: 10%; }
.score__fill--2 { width: 20%; }
.score__fill--3 { width: 30%; }
.score__fill--4 { width: 40%; }
.score__fill--5 { width: 50%; }
.score__fill--6 { width: 60%; }
.score__fill--7 { width: 70%; }
.score__fill--8 { width: 80%; }
.score__fill--9 { width: 90%; }
.score__fill--10 { width: 100%; }

.pill--warn { background: var(--committed); color: var(--committed-ink); }
.pill--ok { background: var(--exploring); color: var(--exploring-ink); }

/* ---------- Menus ---------- */

/* A button that opens a short list of actions (a <details>). */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "▾"; margin-left: .4rem; font-size: .75rem; color: var(--ink-faint); }

.menu__panel {
  position: absolute;
  right: 0;
  z-index: 10;
  display: grid;
  min-width: 14rem;
  margin-top: .35rem;
  padding: .35rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.menu__item { padding: .5rem .75rem; border-radius: 8px; color: var(--ink); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.menu__item:hover { background: var(--tint); }
.menu__panel form { display: grid; }
.menu__button { border: none; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; padding: 0; }
button.menu__item { padding: .5rem .75rem; }
.menu__item--copy { display: grid; }

/* In a form, a dropdown takes the field's full width, like the other inputs. */
.form .field > .input--select { width: 100%; }
.menu summary.button--accent::after { color: inherit; opacity: .8; }

/* "Sizes differ by at most [1]", as one line under the group size. */
.group-spread { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.group-spread__label { color: var(--ink-soft); font-size: .9rem; }