/**
 * components.css
 * The reusable pieces, ported from the approved mockup.
 *
 * Two deliberate departures from the mockup, both for the accessibility floor
 * in CLAUDE.md. Both are noted at the rule.
 */

/* ---------- App shell ---------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;      /* dvh, so the iOS address bar collapsing does not clip the tab bar */
  max-width: 560px;    /* on a desktop the app stays phone shaped and centred */
  margin: 0 auto;
  background: var(--card);
  position: relative;
}

.appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--appbar-h);
  padding: 8px 16px 12px;
  padding-top: calc(8px + var(--safe-top));
  border-bottom: 1px solid var(--line2);
  background: var(--card);
}

.appbar .title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.appbar .sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--mute);
  letter-spacing: 0;
}

.back {
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: -10px;      /* pull the 44px target back so it looks like the mockup's 28px */
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink2);
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.back:hover { background: var(--line2); }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--verd-bg);
  color: var(--verd-dk);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  padding: 14px 14px 22px;
}

/* ---------- Tab bar ---------- */

.tabbar {
  flex: none;
  display: grid;
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 4px 4px 6px;
  padding-bottom: calc(6px + var(--safe-bottom));
}

.tabbar button {
  background: none;
  border: 0;
  font: inherit;
  font-size: 11px;
  color: var(--mute);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tap-min);   /* mockup had ~38px, raised to the 44px floor */
  padding: 4px 0;
}

.tabbar button.on { color: var(--verd-dk); font-weight: 600; }
.tabbar button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- Screens ---------- */

.screen { display: none; }
.screen.on { display: block; }

/* ---------- Card ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.card + .card { margin-top: 11px; }

.sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 2px 8px;
}
.sectionhead:first-child { margin-top: 4px; }
.sectionhead h2, .sectionhead h3 { font-size: 15.5px; margin: 0; }
.sectionhead a, .sectionhead button.link {
  font-size: 12.5px;
  color: var(--verd-dk);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 6px 2px;      /* padding gives the link a usable target without changing its look */
}

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: var(--radius-pill);
  background: var(--line2);
  color: var(--ink2);
}
.pill.verd   { background: var(--verd-bg);   color: var(--verd-dk); }
.pill.claret { background: var(--claret-bg); color: var(--claret); }
.pill.brass  { background: var(--brass-bg);  color: var(--brass); }

/* ---------- Buttons ---------- */

.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  min-height: var(--tap-min);
  border-radius: var(--radius-ctrl);
  cursor: pointer;
  border: 1px solid var(--verd);
  background: var(--verd);
  color: #fff;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background var(--dur) var(--ease);
}
.btn:hover  { background: var(--verd-dk); border-color: var(--verd-dk); }
.btn:active { transform: translateY(1px); }

.btn.ghost  { background: #fff; color: var(--ink2); border-color: var(--line); }
.btn.ghost:hover { background: var(--line2); }

.btn.danger { background: #fff; color: var(--claret); border-color: #E4C6CB; }
.btn.danger:hover { background: var(--claret-bg); }

.btn.sm { padding: 8px 12px; font-size: 13px; width: auto; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-busy="true"] { position: relative; color: transparent; }
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.ghost[data-busy="true"]::after,
.btn.danger[data-busy="true"]::after {
  border-color: rgba(44,62,90,.25);
  border-top-color: var(--ink2);
}
@keyframes spin { to { transform: rotate(360deg); } }

.row { display: flex; gap: 9px; }
.row.wrap { flex-wrap: wrap; }

/* ---------- Form fields ---------- */

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 5px;
}
.field .hint { font-weight: 400; color: var(--mute); }

.input, select.input, textarea.input {
  width: 100%;
  font: inherit;
  font-size: 16px;          /* 16px minimum, or iOS Safari zooms the page on focus */
  padding: 11px;
  min-height: var(--tap-min);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  appearance: none;
}
textarea.input { min-height: 80px; resize: vertical; }

select.input {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.input[aria-invalid="true"] { border-color: var(--claret); }

.field .error {
  display: block;
  font-size: 12.5px;
  color: var(--claret);
  font-weight: 600;
  margin-top: 5px;
}

/* ---------- Segmented control ---------- */

.seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctrl);
  overflow: hidden;
  background: #fff;
}
.seg button {
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 4px;
  min-height: var(--tap-min);
  border: 0;
  background: #fff;
  color: var(--slate);
  cursor: pointer;
}
.seg button.on { background: var(--ink); color: #fff; }
.seg.money button.on:first-child { background: var(--verd); }
.seg.money button.on:last-child  { background: var(--claret); }

/* ---------- Chips ---------- */

.chipwrap { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  color: var(--ink2);
}
.chip.on { background: var(--verd); border-color: var(--verd); color: #fff; font-weight: 600; }
.chip.add { border-style: dashed; color: var(--verd-dk); font-weight: 600; }

/* ---------- Ledger lines ---------- */

.ledger {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  padding: 11px 13px;
  min-height: var(--tap-min);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line2);
  cursor: pointer;
}
.line:last-child { border-bottom: 0; }
.line:hover { background: #FAFBFC; }
.line[aria-disabled="true"], .line.static { cursor: default; }
.line.static:hover { background: none; }

.line .who  { font-weight: 600; font-size: 14.5px; }
.line .meta {
  grid-column: 1;
  font-size: 12px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.line .amt {
  grid-row: 1 / 3;
  align-self: center;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.line .amt.out { color: var(--claret); }
.line .amt.in  { color: var(--verd-dk); }

.line.voided { opacity: 0.55; }
.line.voided .who, .line.voided .amt { text-decoration: line-through; }

.clip { width: 13px; height: 13px; stroke: var(--verd); fill: none; stroke-width: 1.8; vertical-align: -2px; }
.warn { color: var(--claret); font-weight: 600; }

.daybreak {
  padding: 9px 13px 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  background: #F8FAFB;
  border-bottom: 1px solid var(--line2);
}

/* ---------- Totals ---------- */

.totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.totals > div { background: var(--card); padding: 13px; }
.totals .k { font-size: 12px; color: var(--slate); }
.totals .v {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.totals .v.in  { color: var(--verd-dk); }
.totals .v.out { color: var(--claret); }
.totals .wide  { grid-column: 1 / 3; }

.bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line2);
  overflow: hidden;
  margin-top: 8px;
}
.bar span { display: block; height: 100%; background: var(--verd); }

/* ---------- Alerts ---------- */

.alert {
  border: 1px solid #E4C6CB;
  background: var(--claret-bg);
  border-radius: var(--radius);
  padding: 12px 13px;
  display: flex;
  gap: 10px;
}
.alert.note { border-color: #D9E3DF; background: var(--verd-bg); }
.alert svg { flex: none; margin-top: 1px; }
.alert b { display: block; font-size: 13.5px; }
.alert p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink2); }

/* ---------- Key and value list ---------- */

.kv {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 8px 10px;
  font-size: 13.5px;
  margin: 0;
}
.kv dt { color: var(--slate); }
.kv dd { margin: 0; font-weight: 500; }

.kv.split { grid-template-columns: 1fr auto; }
.kv.split dt { color: var(--ink); }

/* ---------- People rows ---------- */

.person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  min-height: var(--tap-min);
  border-bottom: 1px solid var(--line2);
}
.person:last-child { border-bottom: 0; }
.person .nm { flex: 1; min-width: 0; }
.person .nm b { font-size: 14.5px; display: block; }
.person .nm span { font-size: 12px; color: var(--slate); }

/* ---------- Sub tabs ---------- */

.tabs {
  display: flex;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  overflow-x: auto;
}
.tabs button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 12px 1px;
  color: var(--mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--verd); }

/* ---------- Numbered steps ---------- */

.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 13.5px;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--verd-bg);
  color: var(--verd-dk);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.steps li.done::before { content: "\2713"; background: var(--verd); color: #fff; }

/* ---------- Thumbnails ---------- */

.thumb {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctrl);
  background: #F9FAFB;
  display: block;
}

/* ---------- Empty states ---------- */
/* Empty states invite an action. They never just say "nothing here". */

.empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--slate);
}
.empty svg { stroke: var(--mute); fill: none; stroke-width: 1.4; margin-bottom: 10px; }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.empty p { font-size: 13.5px; max-width: 32ch; margin: 0 auto 14px; }

/* ---------- Toast ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 14px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 28px);
  max-width: 420px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-ctrl);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px -8px rgba(22,35,59,.5);
  pointer-events: auto;
  animation: toastin var(--dur) var(--ease);
}
.toast.error   { background: var(--claret); }
.toast.success { background: var(--verd-dk); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Loading ---------- */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--slate);
  font-size: 13.5px;
}
.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--verd);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* Skeleton rows, shown during the Apps Script cold start so the screen is
   never frozen and never blank. */
.skeleton {
  background: linear-gradient(90deg, var(--line2) 25%, #F6F8FA 50%, var(--line2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 6px;
  height: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }