/* Shared page styles for the tools hub and every calculator, tracker, planner
   and checker it lists. Component styles (fields, tables, callouts, the tool
   layout) come from ws.css; this file only adds patterns these pages repeat
   that ws.css does not define. Tokens only, no new colours. */

/* A short result sentence inside .tool__results, between the table and the
   headline answer. */
.tool__note {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.tool__note strong {
  color: var(--ink);
}

.tool__note--caution {
  padding: var(--s3) var(--s4);
  background: var(--caution-wash);
  border-radius: var(--r-card);
  color: var(--ink);
}

/* A right-aligned row of housekeeping actions (Reset) under a tool's inputs. */
.tool__form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}

/* Native time input, sized like other tool inputs. */
.input--time {
  max-width: 10rem;
  font-variant-numeric: tabular-nums;
}

/* A short editable list of dates: permissible breaks (outcome calculator) and
   contact or instance dates (contacts tracker). */
.break-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}

.break-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--concourse);
  border-radius: var(--r-card);
}

.break-row__field {
  flex: 1 1 9rem;
  min-width: 9rem;
  margin: 0;
}

.break-row__remove {
  flex: 0 0 auto;
}

/* Per-state public holiday disclosures (attendance deadline calculator). */
.holiday-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.holiday-block {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  padding: var(--s2) var(--s4);
}

.holiday-block + .holiday-block {
  margin-top: 0;
}

.holiday-block__summary {
  padding: var(--s3) 0;
  font-weight: 700;
  cursor: pointer;
}

.holiday-block[open] .holiday-block__summary {
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s3);
}

.holiday-block .table-wrap {
  margin-bottom: var(--s3);
}

/* Compact stat cards (wage subsidy levels, contacts tracker periods). */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s4);
}

.stat-card {
  padding: var(--s4);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--ground);
}

.stat-card--current {
  background: var(--ink);
  color: var(--on-ink);
}

.stat-card__label {
  font-size: var(--t-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card--current .stat-card__label {
  color: var(--on-ink-3);
}

.stat-card__value {
  margin-top: var(--s1);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-card__meta {
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.stat-card--current .stat-card__meta {
  color: var(--on-ink-2);
}

/* A labelled progress meter (contacts tracker). Colour is never the only
   signal: the word and figures beside it carry the same information. */
.meter {
  height: 0.75rem;
  border-radius: var(--r-pill);
  background: var(--concourse-deep);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  background: var(--ok);
  border-radius: inherit;
}

.meter__fill--caution {
  background: var(--caution);
}

.meter__fill--breach {
  background: var(--breach);
}

/* Colour swatches (brand contrast checker). */
.swatch-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.swatch {
  flex: 1 1 12rem;
  min-width: 10rem;
  padding: var(--s5);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  font-weight: 700;
  text-align: center;
}

.swatch__ratio {
  margin-top: var(--s5);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}