/* The split-bills page. Tokens come from site.css. */

.split-app {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: min(100%, 36rem);
}

.split-app[hidden] { display: none; }

.panel { display: flex; flex-direction: column; gap: .7rem; }
.panel[hidden] { display: none; }
.panel h2 { margin: 0; font-size: 1.2rem; }

.note { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.status { margin: 0 0 1rem; color: var(--warn); }
.status:empty { display: none; }

/* --- the group's name and its buttons ------------------------------------ */

.group-head { display: flex; flex-direction: column; gap: .6rem; }
.group-head h2 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.group-head .actions button { flex: 0 1 auto; padding: .5rem .9rem; font-size: .95rem; }

.all-groups { color: var(--ink-soft); font-size: .9rem; text-decoration: none; }
.all-groups:hover { text-decoration: underline; }

/* --- lists: groups, balances, payments, expenses, people ----------------- */

.rows { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  padding: .7rem .6rem .7rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.row.empty { color: var(--ink-faint); }

.row-main {
  flex: 1 1 6rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
}

a.row-main { text-decoration: none; font-weight: 600; }
a.row-main:hover { text-decoration: underline; }

.row button {
  padding: .35rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.row button:hover { border-color: var(--accent); }

.row button.icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-faint);
  border: 0;
  border-radius: 50%;
}

.row button.icon:hover { color: var(--warn); background: var(--warn-soft); }

.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount.is-owed { color: var(--accent); font-weight: 600; }
.amount.owes { color: var(--warn); font-weight: 600; }

.expense .row-main { display: flex; flex-direction: column; }
.expense-meta { color: var(--ink-soft); font-size: .88rem; }
.expense.is-payment .expense-title { color: var(--ink-soft); font-style: italic; }

/* --- forms --------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: .4rem; }
.form label, .form .label { font-weight: 600; font-size: .95rem; margin-top: .3rem; }
.form .actions { margin-top: .5rem; }

.form input[type="text"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form textarea { resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.two > div { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.form.inline { flex-direction: row; gap: .5rem; }
.form.inline input { flex: 1; min-width: 0; }
.form.inline button {
  flex: none;
  padding: .65rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.form.inline button:hover { border-color: var(--accent); }

/* --- how to split: four segments, one row per person --------------------- */

.segments {
  display: flex;
  padding: .25rem;
  gap: .25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.segments button {
  flex: 1;
  padding: .5rem .4rem;
  font: inherit;
  font-size: .92rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.segments button[aria-pressed="true"] { color: var(--paper); background: var(--accent); font-weight: 600; }

.split-rows { margin: .2rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }

.split-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.6rem;
  padding: .2rem .2rem .2rem .2rem;
  border-bottom: 1px solid var(--line);
}

.form .split-name { flex: 1; min-width: 0; margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.split-row input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }

.split-input { display: flex; align-items: center; gap: .35rem; flex: 0 0 9.5rem; }
.form .split-input input { padding: .45rem .6rem; text-align: right; }
.split-unit { color: var(--ink-faint); font-size: .85rem; min-width: 2.2rem; }

.split-share {
  flex: 0 0 5.5rem;
  text-align: right;
  color: var(--ink-soft);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.remaining { margin: 0; min-height: 1.3em; color: var(--ink-soft); font-size: .92rem; }
.message { margin: 0; min-height: 1.3em; color: var(--warn); font-size: .95rem; }
.message.is-ok { color: var(--accent); }

/* --- buttons, as on the other pages -------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.actions button {
  flex: 1 1 8rem;
  padding: .75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.actions button:hover:not(:disabled) { border-color: var(--accent); }
.actions button[hidden] { display: none; }

.actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .actions button.primary,
  .segments button[aria-pressed="true"] { color: #10201b; }
}

/* On a phone, the share moves under the name instead of squeezing it. */
@media (max-width: 30rem) {
  .split-row { flex-wrap: wrap; }
  .split-input { flex: 1 1 8rem; }
  .split-share { flex: 0 0 auto; }
}