/* Tip Pooling & Tip Sharing Calculator. Shared pieces are in assets/ab-tools.css. */

/* Show only the labels and fields for the current choices. The root
   element's data-mode, data-listby and data-kind are set by the script. */
.abt-tips[data-mode="pool"] [data-only-mode="tipout"],
.abt-tips[data-mode="tipout"] [data-only-mode="pool"],
.abt-tips[data-listby="people"] [data-only-listby="roles"],
.abt-tips[data-listby="roles"] [data-only-listby="people"],
.abt-tips:not([data-kind="percent"]) [data-only-kind="percent"],
.abt-tips:not([data-kind="hours"]) [data-only-kind="hours"],
.abt-tips:not([data-kind="tipout"]) [data-only-kind="tipout"],
.abt-tips[data-kind="hours"] [data-hide-kind="hours"],
.abt-tips[data-kind="hours"] .abt-row-people {
  display: none;
}

.abt-toggles {
  display: grid;
  gap: 0 12px;
}

/* --- Rows -------------------------------------------------------------- */

.abt-rows {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

/* One line per row: name, share, remove. Roles split by percentage need
   a "people" box too, so on phones those rows use two lines. */
.abt-row {
  display: grid;
  grid-template-columns: 1fr 96px 40px;
  grid-template-areas: "name value remove";
  gap: 8px;
  padding: 8px;
  background: var(--abt-surface-low);
  border-radius: var(--abt-radius);
}

.abt-tips[data-listby="roles"]:not([data-kind="hours"]) .abt-row {
  grid-template-columns: 1fr 1fr 40px;
  grid-template-areas:
    "name   name   remove"
    "people value  .";
}

/* Column labels show on the first row only; screen readers still get them on every row. */
.abt-row + .abt-row .abt-label--sm {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.abt-row > label {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
}

.abt-row-name {
  grid-area: name;
}

.abt-row-people {
  grid-area: people;
}

.abt-row-value {
  grid-area: value;
}

.abt-row-remove {
  grid-area: remove;
  align-self: end;
  display: grid;
  place-items: center;
  width: 40px;
  height: var(--abt-tap);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--abt-radius);
  background: none;
  color: var(--abt-muted);
  cursor: pointer;
}

.abt-row-remove:hover {
  background: var(--abt-surface-high);
  color: var(--abt-error);
}

.abt-row-remove:focus-visible {
  outline: 2px solid var(--abt-primary);
  outline-offset: 2px;
}

.abt-row-remove:disabled {
  visibility: hidden;
}

/* The running total under the rows. */
.abt-tally {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--abt-radius);
  background: var(--abt-surface-low);
  font-size: 15px;
  color: var(--abt-muted);
}

.abt-tally:empty {
  display: none;
}

/* Keeps a gap above Calculate when there's no running total to show yet. */
.abt-tips [data-calculate] {
  margin-top: 16px;
}

.abt-tally strong {
  color: var(--abt-text);
}

.abt-tally.is-done {
  background: var(--abt-primary-soft);
}

.abt-tally.is-done strong {
  color: var(--abt-primary);
}

.abt-tally.is-over strong {
  color: var(--abt-error);
}

/* --- Larger screens ---------------------------------------------------- */

@media (min-width: 600px) {
  .abt-toggles {
    grid-template-columns: 1fr 1fr;
  }

  /* One line per row: name, (people), share, remove. */
  .abt-row {
    grid-template-columns: 1fr 140px 40px;
    padding: 10px 12px;
  }

  .abt-tips[data-listby="roles"]:not([data-kind="hours"]) .abt-row {
    grid-template-columns: 1fr 130px 120px 40px;
    grid-template-areas: "name people value remove";
  }
}