:root {
  --bg: #f6f7f9;
  --fg: #1c1f24;
  --card: #ffffff;
  --accent: #1f6feb;
  --accent-fg: #ffffff;
  --error: #c62828;
  --warn-bg: #fff3c4;
  --error-bg: #fde4e2;
  --error-fg: #9b1c1c;
  --warn-fg: #6b4e00;
  --warn: #b58100; /* yellow that reads on the card */
  --warn-line: #f2b705; /* a bright yellow, for lines */
  --positive: #2f8a45; /* owed: a subtle green */
  --negative: #c0392b; /* owing: a bit red */
  font-family: system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --fg: #e6e8eb;
    --card: #1f2228;
    --accent: #4c8dff;
    --warn-bg: #4a3b00;
    --error-bg: #4a1715;
    --error-fg: #ffb4ab;
    --warn-fg: #ffe08a;
    --warn: #e3b341;
    --warn-line: #f2c94c;
    --positive: #6fcf86;
    --negative: #ff8a80;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

button {
  font: inherit;
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
}

.error {
  color: var(--error);
}

a {
  color: var(--accent);
}

h1 a {
  color: inherit;
  text-decoration: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .me {
  display: flex;
  align-items: center;
  gap: 8px;
}

header .me a {
  text-decoration: none;
}

/* Guest account / Unverified, next to your name */
.account-status {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  opacity: 0.8;
}

.account-status.unverified {
  background: var(--warn-bg);
  color: var(--warn-fg);
  opacity: 1;
}

/* A failed change (ErrorBar): at the top, staying in view while scrolling */
.error-bar {
  position: sticky;
  top: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 8px 8px 16px;
  background: var(--card);
  border: 1px solid var(--error);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.2);
}

.error-bar p {
  margin: 0;
}

.error-bar button.link {
  padding: 0 8px;
  font-size: 1.4rem;
  color: var(--error);
  text-decoration: none;
}

.card + .card,
.card + .error,
.error + .card {
  margin-top: 16px;
}

h2 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  text-align: left;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  text-align: left;
}

input,
select {
  font: inherit;
  font-size: max(16px, 1em); /* below 16px, iOS Safari zooms the page in when the field is tapped */
  padding: 8px 12px;
  border: 1px solid #8884;
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
}

button.secondary {
  background: var(--bg);
  color: var(--fg);
  padding: 8px 16px;
}

/* A small, quiet button, for an action next to some text */
button.outline {
  padding: 4px 10px;
  font-size: 0.9rem;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
}

/* A button that looks like a link, for small actions inside text */
button.link {
  padding: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
}

button.danger {
  background: var(--error);
  color: #fff;
}

.amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bills */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  border: 2px dashed #8884;
  border-radius: 12px;
  cursor: pointer;
}

.dropzone.dragging {
  border-color: var(--accent);
}

.dropzone .button {
  padding: 14px 36px;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-fg);
}

.hint {
  opacity: 0.6;
  font-size: 0.9rem;
}

.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
}

.progress .bar {
  height: 100%;
  background: var(--accent);
  transition: width 3.3s ease-out;
}

.progress .bar.done {
  transition-duration: 0.2s;
}

.scan-progress {
  margin-bottom: 16px;
}

.title,
.line,
.actions,
.people li,
.add-person {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title,
.line {
  justify-content: space-between;
}

.title h2 {
  margin: 0;
}

.title {
  margin-bottom: 12px;
}

.line {
  text-align: left;
  padding: 6px 0;
}

.actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.people {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  text-align: left;
}

.people li {
  border-top: 1px solid #8883;
}

.person-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-radius: 0;
  background: none;
  color: var(--fg);
  text-align: left;
}

/* A checkbox look: empty square, green with a tick when selected */
/* The bill's creator: always on the bill, so not a button that looks off */
.person-row:disabled {
  opacity: 1;
  cursor: default;
}

.person-row .check {
  width: 20px;
  height: 20px;
  flex: none;
  box-sizing: border-box;
  border: 2px solid #8888;
  border-radius: 4px;
}

.person-row .check.hidden {
  visibility: hidden; /* a row that can't be toggled: lined up with the others */
}

.person-row[aria-pressed="true"] .check {
  border-color: #3f8f5f;
  background: #4a9e6b;
}

.person-row[aria-pressed="true"] .check::after {
  content: '✓';
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

button.bin {
  padding: 8px;
  background: none;
  color: var(--fg);
  opacity: 0.45;
}

.add-person {
  margin-top: 4px;
}

.add-person input {
  flex: 1;
  min-width: 0;
}

/* text (takes the rest) | amount | remove */
.edit-item {
  display: grid;
  grid-template-columns: 1fr 5.5em 2.5em; /* fixed, so the new item row (no bin) lines up */
  align-items: center;
  gap: 8px;
}

.edit-item input {
  min-width: 0;
}

.edit-item input.amount {
  padding: 8px;
  text-align: right;
}

.edit-item button {
  padding: 8px 0;
}

.edit-item {
  margin-bottom: 8px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-size: 0.9rem;
  margin-bottom: 12px;
  flex: 1;
  min-width: 0;
}

/* A checkbox and its text on one line (e.g. "Manually set SEK amount") */
.form label.check-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.form .check-hint {
  margin: 0 0 12px 28px; /* under the checkbox's text */
  text-align: left;
}

.check-label input {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: #4a9e6b;
}

/* Edit page: the history, newest first */
.history ol,
.history ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.history ol > li {
  padding: 8px 0;
  border-top: 1px solid #8883;
}

.history ul {
  font-size: 0.9rem;
}

/* Edit page, "Multiple people" paid: an amount next to each one picked */
.paid-by input.amount {
  width: 7em;
  padding: 8px;
  text-align: right;
}

.form .row {
  display: flex;
  gap: 12px;
}

.form h2 {
  margin-bottom: 16px;
}

.form .title h2 {
  margin: 0;
}

.item {
  text-align: left;
  padding: 8px 0;
  border-top: 1px solid #8883;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

button.chip {
  padding: 5px 10px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid #8885;
  background: var(--bg);
  color: var(--fg);
}

button.chip[aria-pressed="true"] {
  border-color: #3f8f5f;
  background: #4a9e6b;
  color: #fff;
}

/* More than one share */
button.chip.multi {
  border-color: #c9a640;
  background: #e3c15a;
  color: #3a2c00;
}

.unclaimed {
  color: var(--error);
}

.card .error {
  text-align: left;
}

.photo-thumb {
  display: block;
  padding: 0;
  margin: 0 auto 12px;
  background: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
}

.photo-full {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-out;
}

.photo-full[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A photo turned with CSS: the box takes the turned size, the image is centred in it and turned */
.rotated {
  position: relative;
  display: block;
}

.rotated img {
  position: absolute;
  left: 50%;
  top: 50%;
}

img.loading {
  visibility: hidden;
  max-width: 100px;
  max-height: 100px;
}

/* Assign: items with shares left to claim stand out; fully claimed ones fade back */

span.qty {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.item.open {
  box-shadow: inset 3px 0 var(--accent);
  padding-left: 10px;
}

.item.open .line {
  font-weight: 600;
}

.item.claimed .line {
  opacity: 0.75;
}

/* Bill page: Items, with Assign/Done */
.items-title {
  margin: 16px 0 4px;
}

.items-title h3 {
  margin: 0;
}

/* Who has an item, as initials, instead of the people to tap */
.item.compact .claimants {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  margin-left: auto;
}

.claimant {
  display: inline-flex;
  align-items: center;
}

.claim-count {
  font-size: 0.8rem;
  opacity: 0.7;
}

.shares-left {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--warn-bg);
  color: var(--warn-fg);
}

button.split {
  margin-left: auto;
  padding: 5px 10px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}

.split-dialog,
.dialog {
  box-sizing: border-box;
  width: min(400px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 20px;
  background: var(--card);
  color: var(--fg);
}

.split-dialog::backdrop,
.dialog:focus {
  outline: none;
}

.dialog::backdrop {
  background: #0008;
}

.stepper {
  display: grid;
  grid-template-columns: 1fr auto 2.5em auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.stepper button {
  padding: 6px 14px;
}

.stepper .value {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.stepper:first-of-type {
  border-bottom: 1px solid #8884;
  font-weight: 600;
}

/* Totals: each person expands to their items */

.person-total summary {
  list-style: none;
  cursor: pointer;
}

.person-total summary::-webkit-details-marker {
  display: none;
}

.person-total summary > span:first-child::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  opacity: 0.5;
  transition: transform 0.15s;
}

.person-total[open] summary > span:first-child::before {
  transform: rotate(90deg);
}

.person-total .settled-mark {
  margin-left: 8px;
  font-size: 0.8rem;
  opacity: 0.6;
}

.person-total .part {
  padding: 2px 0 2px 1em;
  font-size: 0.9rem;
  opacity: 0.8;
}

.person-total .hint {
  margin: 0 0 4px 1em;
  text-align: left;
}

.person-total[open] {
  padding-bottom: 6px;
}

.schtek {
  width: 1.4em;
  height: 1.4em;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
}

/* Bill page: to settling up, outlined until the bill is finished */
button.settle {
  width: 100%;
  margin-top: 16px;
  border: 2px solid #4a9e6b;
  background: none;
  color: #3f8f5f;
}

button.settle.ready {
  background: #4a9e6b;
  color: #fff;
}

/* The end of a new bill's or group's wizard */
button.create {
  width: 100%;
  margin-top: 24px;
  padding: 14px 24px;
  background: #4a9e6b;
  color: #fff;
  font-weight: 600;
}

/* An edit page's Save, while there are changes to save: sticks to the bottom of the screen */
.save-bar {
  position: sticky;
  bottom: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.save-bar button.create {
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
}

/* A wizard's Cancel (new bill or group), above it */
button.cancel {
  width: 100%;
  margin-bottom: 12px;
}

/* New bill by hand: the total the items add up to */
.new-bill output {
  display: block;
  padding: 8px 0;
  text-align: right;
}

/* New bill by hand: what to split */
.split-choice {
  display: grid;
  gap: 12px;
}

.split-choice button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 2px solid var(--accent);
  background: none;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
}

.split-choice .hint {
  color: var(--fg);
  font-weight: normal;
  font-size: 0.9rem;
}

/* A new bill's first step (bills/GroupStep.tsx): No group, then your groups, as rows like on /groups, but each in a
   box with a › to show it's tapped */
.group-step h3 {
  margin: 20px 0 8px;
}

.group-step ul {
  display: grid;
  gap: 8px;
}

.my-groups.group-step li + li {
  border-top: none;
}

.group-step button.line {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #8885;
  border-radius: 8px;
  background: none;
  color: inherit;
}

.group-step button.line:hover {
  border-color: var(--accent);
}

.group-step button.line::after {
  content: '›' / '';
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
}

/* A group's Settle up, when you owe: green like a bill's Settle */
button.settle-up.owing {
  background: #4a9e6b;
  color: #fff;
  padding: 8px 16px;
}

/* Edit page: under the items */
.items-mismatch {
  margin: 12px 0 0;
}

/* Bill page: above Settle */
.total-mismatch {
  margin: 16px 0 0;
}

/* Settle page */
button.back {
  width: 100%;
  margin-bottom: 12px;
  border: 2px solid var(--accent);
  background: var(--card); /* it's on the page, not in a card */
  color: var(--accent);
  font-weight: 600;
  text-align: left;
}

.payments ul,
.payments ol {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.payments .line {
  border-top: 1px solid #8883;
}

.payments .line .actions {
  margin: 0;
}

.confirmed {
  color: #3f8f5f;
  font-weight: 600;
}

/* A dialog that closes on a click outside it: only the backdrop is the <dialog> itself, the form fills the rest */
.dialog {
  padding: 0;
}

.dialog > form {
  padding: 20px;
}

/* A heading for a field that isn't a <label>, looking like one */
.form .label {
  margin: 0 0 4px;
  text-align: left;
  font-size: 0.9rem;
}

button.other-payment {
  width: 100%;
  margin-top: 12px;
}

.payments .other-payments li {
  margin-top: 8px;
}

.other-payments button {
  width: 100%;
}

/* Swish or some other way: two halves of one full-width button */
.pay-form .methods {
  display: flex;
  margin: 0 0 12px;
}

.pay-form .methods button {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: var(--card);
  color: var(--accent);
}

.pay-form .methods button:first-child {
  border-radius: 8px 0 0 8px;
}

.pay-form .methods button:last-child {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.pay-form .methods button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-fg);
}

/* A problem to fix, e.g. the items don't add up to the total. Blocking ones (must be fixed to go on) are red. */
.warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  background: var(--warn-bg);
  color: var(--warn-fg);
}

.info {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.warning.blocking {
  background: var(--error-bg);
  color: var(--error-fg);
}

/* Start page: a big upload button, join with code, then log in / register */
.start {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

button.upload-bill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

button.manual-bill {
  align-self: center;
  font-size: 0.9rem;
}

button.upload-bill .emoji,
.dropzone .emoji {
  font-size: 3rem;
  line-height: 1;
}

.join .row {
  display: flex;
  gap: 8px;
}

.join input {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.1em;
}

button.go {
  background: #4a9e6b;
}

/* Upload bill without an account: log in, register or continue as guest, as equal choices */
.choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choices h2 {
  margin: 0 0 4px;
}

.choices button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.name-step h2 {
  margin-bottom: 12px;
}

.change-password {
  text-align: left;
  margin-top: 16px;
  border-top: 1px solid #8883;
  padding-top: 12px;
}

.change-password summary {
  cursor: pointer;
  color: var(--accent);
}

.change-password form {
  margin-top: 12px;
}

/* Your bills and groups, on the start page (and a group's bills) */
.my-bills ul,
.my-groups ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.my-bills li + li,
.my-groups li + li {
  border-top: 1px solid #8883;
}

.my-bills a.line,
.my-groups a.line {
  color: inherit;
  text-decoration: none;
  padding: 10px 0;
}

.my-bills .line > span,
.my-groups .line > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-bills .amount,
.my-groups .amount {
  text-align: right;
}

.my-bills .owes,
.my-groups .owes {
  color: var(--error);
  opacity: 1;
}

.my-bills li.unsettled,
.my-groups li.unsettled {
  box-shadow: inset 3px 0 var(--accent);
  padding-left: 10px;
}

.my-bills li.unfinished { /* stands out from the faint red and green of a group's bills */
  box-shadow: inset 5px 0 var(--warn-line);
  background: color-mix(in srgb, var(--warn-bg) 30%, transparent);
  padding-left: 12px;
}

.my-bills li.group-bill {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--fg) 12%, transparent);
  padding-left: 10px;
}

.my-bills li.group-bill.owing {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--negative) 35%, transparent);
}

.my-bills li.group-bill.owed {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--positive) 35%, transparent);
}

.my-bills .unclaimed-note {
  color: var(--warn);
  opacity: 1;
}

.my-bills .show-more,
.my-groups .show-more {
  width: 100%;
  margin-top: 8px;
}

/* A group's balances, and the running balance on its bills */
.signed.positive {
  color: var(--positive);
  opacity: 1;
}

.signed.negative {
  color: var(--negative);
  opacity: 1;
}

.group-balances .line > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A group's history: payments between its bills, removed ones faded */
.group-history div.line {
  padding: 10px 0;
}

.group-history li.removal > .line > span:first-child {
  opacity: 0.7;
}

/* A group: everyone's balance */
.group-balances ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.group-balances li {
  padding: 6px 0;
}

/* Which group a new bill goes in, above the upload */
.group-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-select {
  margin-bottom: 12px;
}

.group-select select {
  flex: 1;
}

.group-edit h3 {
  margin: 16px 0 4px;
  font-size: 1rem;
}

.group-edit .leave {
  width: 100%;
  margin-top: 16px;
  color: var(--error);
}

/* Account page: what's set, as label and value rows */
.account-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
}

.account-info dt {
  opacity: 0.6;
}

.account-info dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Account page: friends, each with when you last shared a bill */
.friends ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.friends li {
  padding: 8px 0;
}

.friends li + li {
  border-top: 1px solid #8883;
}

.friends li > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A foreign bill's total in SEK, under the total, with how it was converted */
.sek-total {
  padding-top: 6px;
}

.sek-total > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Everyone's totals plus unclaimed: the sum of the items */
.grand-total {
  font-weight: 600;
  border-top: 2px solid #8885;
  margin-top: 4px;
  padding-top: 8px;
}

/* Assign page: the code others join with */
/* Left-aligned under the title, so Copy link stays clear of the title's Edit button */
.join-code {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  text-align: left;
}

.join-code strong {
  letter-spacing: 0.1em;
}

.qr-code {
  display: block;
  width: min(240px, 100%);
  margin: 0 auto 12px;
}

/* Join page: each name shows what comes with it */
.join-page .person-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.join-page h3 {
  margin-top: 16px;
}

.join-page .join-me {
  width: 100%;
}

/* People in sections by account (users/People.tsx): a name, its account, and the bills you share on a second line */
.people-section .title {
  margin: 16px 0 0;
}

.people-section h3 {
  margin: 0;
}

.people-section > .hint {
  margin: 2px 0 0;
}

.person-name {
  display: flex;
  flex-direction: column;
}

.person-name .shared {
  font-size: 0.85em;
}

/* Log in, register and the password pages: one full-width button, then links to the others, one per line, centered */
.auth button[type="submit"] {
  width: 100%;
  margin-top: 4px;
}

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}

/* A person's initials in a colored circle (users/Avatar.tsx) */
.avatars {
  display: inline-flex;
  gap: 3px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

.avatar.more {
  background: color-mix(in srgb, var(--fg) 45%, transparent);
}

.bill-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* lib/ask.ts: a question, instead of confirm() */
.ask p {
  margin: 0;
  white-space: pre-line;
}

/* Phones: no bubbles. Each card is a full-width section, set apart by a band of the page color. */
@media (max-width: 520px) {
  body {
    background: var(--card);
  }

  main {
    padding: 8px 16px 16px;
  }

  .card {
    margin-inline: -16px;
    padding: 16px;
    border-radius: 0;
    border-top: 8px solid var(--bg);
  }

  .card + .card {
    margin-top: 0;
  }
}

/* The items page (ItemsPage.tsx), over all of the screen: the items on top and the photo under them, each scrolling on
   its own; side by side on a wide screen. Its top follows what's visible, and it goes on under the keyboard (set
   inline). */
.items-editor {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* The site's header, under the items page: it showed below it */
main:has(.items-editor) > header {
  visibility: hidden;
}

.items-editor .error-bar {
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
  z-index: 1;
}

.editor-photo {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0; /* the zoomed photo scrolls, it doesn't widen the pane */
  background: #000;
}

.photo-scroll {
  height: 100%;
  overflow: auto;
  touch-action: manipulation; /* a double-tap zooms the photo, not the page */
}

.editor-items {
  flex: 0 0 50svh;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
}

/* Typing on a phone: the items at a fixed height, so the rows stay put whatever the keyboard's height */
.items-editor.typing .editor-items {
  flex-basis: 25svh;
}

.items-editor:not(:has(.editor-photo)) .editor-items {
  flex: 1; /* no photo */
}

/* Done with an item's name or amount blank */
.editor-items.blank [data-item] input:placeholder-shown {
  border-color: var(--error);
}

.follow-total {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.items-editor .items-sum {
  margin-top: 8px;
  text-align: right;
}

/* Cancel and Save, after the items */
.editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.editor-actions button {
  flex: 1;
  margin: 0;
}

.editor-actions button.outline {
  padding: 14px 24px; /* as tall as Save */
  font-size: 1rem;
}

button.round {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

.editor-photo button.zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 14px;
  background: var(--card);
  color: var(--fg);
}

@media (min-width: 900px) {
  .items-editor:has(.editor-photo) {
    flex-direction: row;
  }

  .editor-photo,
  .editor-items,
  .items-editor.typing .editor-items {
    flex: 1 1 50%;
  }

  .editor-photo {
    order: -1; /* on the left */
  }

  .items-editor:not(:has(.editor-photo)) .editor-items {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}