/* tabtada base layer. Every colour, radius and target size is a --tt-* token from tokens.css,
   which owns the light / dark / manual-toggle selection; this file holds no colour literal.
   Class names follow the component inventory in doc/design/README.md section 6. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tt-cream);
  color: var(--tt-ink);
  font-family: var(--tt-font);
  font-size: 16px;
  line-height: 1.45;
}

/* One phone column, centred; there is no desktop design yet. */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px var(--tt-gutter) 32px;
}

main.has-actionbar {
  padding-bottom: var(--tt-bar-clearance);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.15;
}

h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

a {
  color: var(--tt-warm);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tt-ink);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--tt-ink);
  outline-offset: 2px;
}

.tt-eyebrow {
  color: var(--tt-warm);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-amount-text,
.tt-money {
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.tt-muted {
  color: var(--tt-muted);
  font-size: 14px;
  /* An address is one unbreakable word; without this a long one scrolls the page sideways. */
  overflow-wrap: anywhere;
}

/* The first tab stop of every page: off-screen until focused (WCAG 2.4.1). */
.tt-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--tt-radius-md);
  background: var(--tt-ink);
  color: var(--tt-cream);
  font-weight: 750;
  transform: translateY(-200%);
}

.tt-skip:focus-visible {
  transform: none;
}

main:focus {
  outline: none;
}

.tt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Buttons: 48 px standard, 52 px in the action bar. */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tt-target-button);
  padding: 0 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  color: var(--tt-ink);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.tt-btn:hover {
  color: var(--tt-ink);
}

.tt-btn--primary {
  border-color: transparent;
  background: var(--tt-accent);
  color: var(--tt-on-accent);
}

.tt-btn--primary:hover {
  color: var(--tt-on-accent);
}

.tt-btn--danger {
  border-color: var(--tt-danger);
  background: var(--tt-danger-bg);
  color: var(--tt-danger);
}

.tt-btn--danger:hover {
  color: var(--tt-danger);
}

.tt-btn--quiet {
  min-height: var(--tt-target);
  border-color: transparent;
  background: transparent;
  color: var(--tt-warm);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tt-btn--block {
  display: flex;
  width: 100%;
}

.tt-btn[disabled],
.tt-btn[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
}

.tt-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--tt-target);
  height: var(--tt-target);
  padding: 0;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-surface);
  color: var(--tt-ink);
  cursor: pointer;
}

.tt-iconbtn svg {
  width: 20px;
  height: 20px;
}

/* Forms: 52 px fields, 16 px text so iOS does not zoom. */
.tt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-field > span {
  font-size: 14px;
  font-weight: 800;
}

.tt-field .tt-help {
  color: var(--tt-muted);
  font-size: 14px;
  font-weight: 400;
}

.tt-field .tt-error {
  color: var(--tt-danger);
  font-size: 14px;
  font-weight: 750;
}

.tt-input {
  width: 100%;
  min-height: var(--tt-target-primary);
  padding: 12px 14px;
  border: 1px solid var(--tt-field-line);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-field-bg);
  color: var(--tt-ink);
  font: inherit;
}

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

/* Balance pills: sign + word + colour, never colour alone. */
.tt-pill {
  display: inline-block;
  padding: 5px 9px;
  border-radius: var(--tt-radius-pill);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tt-pill--owed {
  background: var(--tt-positive-bg);
  color: var(--tt-positive);
}

.tt-pill--owes {
  background: var(--tt-negative-bg);
  color: var(--tt-negative);
}

.tt-pill--settled {
  background: var(--tt-neutral-bg);
  color: var(--tt-muted);
}

/* Sticky bottom action bar: one full-width primary action. */
.tt-actionbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px var(--tt-gutter) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--tt-line);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-bar);
}

.tt-actionbar > .tt-btn {
  display: flex;
  width: 100%;
  max-width: 448px;
  min-height: var(--tt-target-primary);
  margin: 0 auto;
}

/* Bottom sheet and its scrim. */
.tt-scrim {
  position: fixed;
  inset: 0;
  background: var(--tt-scrim);
}

.tt-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  border-radius: var(--tt-radius-xl) var(--tt-radius-xl) 0 0;
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-sheet);
}

/* A sheet is a native <dialog>: drawn `open` (non-modal) by the server so it works without JS,
   reopened with showModal() by app.js for the focus trap, Esc and the inert page behind. The
   UA's dialog box (centred, bordered, inset on every side) gives way to the sheet's. */
dialog.tt-sheet {
  top: auto;
  width: auto;
  max-height: 100%;
  overflow: auto;
  border: 0;
  color: var(--tt-ink);
}

dialog.tt-sheet::backdrop {
  background: transparent;
}

.tt-sheet h2:focus {
  outline: none;
}

.tt-sheet::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-line);
}

.tt-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--tt-muted);
  font-size: 12px;
}

.tt-note svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.tt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  border: 1.5px dashed var(--tt-line-dashed);
  border-radius: var(--tt-radius-lg);
  color: var(--tt-muted);
  text-align: center;
}

.tt-empty h2 {
  color: var(--tt-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Banners: offline and success strips, the error alert, the toast. */
.tt-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--tt-gutter);
  border-radius: var(--tt-radius-md);
  font-size: 14px;
  font-weight: 750;
}

.tt-banner--offline {
  background: var(--tt-negative-bg);
  color: var(--tt-negative);
}

.tt-banner--success {
  background: var(--tt-positive-bg);
  color: var(--tt-positive);
}

.tt-alert {
  padding: 14px 16px;
  border: 2px solid var(--tt-danger);
  border-radius: var(--tt-radius-md);
  background: var(--tt-danger-bg);
  color: var(--tt-ink);
}

.tt-alert strong {
  display: block;
  color: var(--tt-danger);
}

/* The error page's title is its page heading (WCAG 2.4.6), drawn like the alert's strong title. */
.tt-alert__title {
  color: var(--tt-danger);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  line-height: inherit;
}

/* --tt-warm on the danger and negative fills is 4.4:1; each fill's own text token is the pair
   the design sets (README §1), so a link or quiet button inside takes it. */
.tt-alert a {
  color: var(--tt-danger);
}

.tt-banner--offline a,
.tt-banner--offline .tt-btn--quiet {
  color: var(--tt-negative);
}

.tt-toast {
  padding: 12px 16px;
  border-radius: var(--tt-radius-md);
  background: var(--tt-toast-bg);
  box-shadow: var(--tt-shadow-sheet);
  color: var(--tt-toast-fg);
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/* Single column: below the phone design width the page simply fills the screen. */
@media (max-width: 480px) {
  main {
    max-width: none;
  }

  .tt-actionbar > .tt-btn {
    max-width: none;
  }
}

/* App bar (home): logo tile and wordmark left, round icon buttons right (Main.dc.html). */
.tt-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 480px;
  min-height: 69px;
  margin: 0 auto;
  padding: 13px var(--tt-gutter) 6px;
}

.tt-appbar__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-target);
  color: var(--tt-ink);
  text-decoration: none;
}

.tt-appbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-appbar__actions form {
  display: flex;
  margin: 0;
}

.tt-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: var(--tt-brand-tile);
  color: var(--tt-on-brand-tile);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.09em;
}

.tt-wordmark {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.tt-icon {
  flex: none;
}

/* Theme toggle: with no manual choice the server renders both buttons and the system
   preference picks one; with a choice (data-theme on <html>) it renders only the other. */
:root:not([data-theme]) .tt-theme-toggle__light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tt-theme-toggle__light {
    display: inline-grid;
  }

  :root:not([data-theme]) .tt-theme-toggle__dark {
    display: none;
  }
}

/* Offline strip (States.dc.html): hidden until the service worker marks a cached copy. */
body[data-offline="1"] .tt-offline {
  display: flex;
}

.tt-offline {
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px var(--tt-gutter);
  background: var(--tt-negative-bg);
  color: var(--tt-negative);
  font-size: 14px;
  font-weight: 750;
}

.tt-offline > span {
  flex: 1;
}

.tt-offline__retry {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--tt-target);
  padding: 0 14px;
  border: 1px solid var(--tt-negative);
  border-radius: var(--tt-radius-md);
  color: var(--tt-negative);
  font-weight: 800;
  text-decoration: none;
}

.tt-offline__retry:hover {
  color: var(--tt-negative);
}

/* "Showing data from …", filled by app.js on a copy served from the cache. */
.tt-offline__since {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.tt-offline__since[hidden] {
  display: none;
}

/* Toasts app.js raises: a stack above the sticky action bar that never blocks a tap around it. */
.tt-toasts {
  position: fixed;
  right: 0;
  bottom: calc(var(--tt-bar-clearance) + env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--tt-gutter);
  pointer-events: none;
}

.tt-toast--live {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 448px;
  pointer-events: auto;
}

.tt-toast--live > span {
  flex: 1;
}

.tt-toast__action {
  flex: none;
  min-height: var(--tt-target);
  padding: 0 14px;
  border: 1px solid currentcolor;
  border-radius: var(--tt-radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
}

/* Writes queued offline on a group page (States.dc.html note rows). */
.tt-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1.5px dashed var(--tt-line-dashed);
  border-radius: var(--tt-radius-md);
}

.tt-pending[hidden] {
  display: none;
}

.tt-pending__title {
  font-size: 14px;
  font-weight: 800;
}

.tt-pending__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-pending__list > .tt-note {
  color: var(--tt-ink);
  font-size: 14px;
}

/* A page of stacked blocks: title, panels, forms (dashboard, auth pages). */
main.tt-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Login and signup: the narrow centred column of Invitation.dc.html. */
main.tt-auth {
  padding-top: 24px;
}

.tt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tt-tagline {
  margin-top: -8px;
  color: var(--tt-warm);
  font-weight: 750;
}

.tt-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tt-form > .tt-btn {
  margin-top: 6px;
}

.tt-theme-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-rule {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px dashed var(--tt-line-dashed);
}

.tt-empty__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--tt-radius-md);
  background: var(--tt-soft);
  color: var(--tt-warm);
}

/* The unverified-email banner sits between the app bar and the page. */
.tt-unverified {
  margin: 0 var(--tt-gutter) 12px;
}

/* htmx's request indicators. htmx would inject these as an inline <style>, which the CSP refuses,
   so base.html turns that off (htmx-config includeIndicatorStyles) and they live here. */
.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* After the rule above, which it must out-order: no fade for a person who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    transition: none;
  }
}

/* Screen app bar: back button, centred title, an action or a spacer (GroupActivity.dc.html). */
.tt-appbar--screen h1 {
  flex: 1;
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.tt-appbar--screen .tt-iconbtn {
  flex: none;
}

.tt-appbar__spacer {
  flex: none;
  width: var(--tt-target);
  height: var(--tt-target);
}

/* Initials avatar; a placeholder member has a dashed ring and no fill. */
.tt-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: var(--tt-radius-avatar);
  background: var(--tt-soft);
  color: var(--tt-warm);
  font-size: 14px;
  font-weight: 850;
}

.tt-avatar--small {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.tt-avatar--you {
  background: var(--tt-positive-bg);
  color: var(--tt-positive);
}

.tt-avatar--placeholder {
  border: 1.5px dashed var(--tt-line-placeholder);
  background: transparent;
  color: var(--tt-muted);
}

/* Hero balance of a group, per currency. */
.tt-hero {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-soft);
  box-shadow: var(--tt-shadow-card);
}

.tt-hero__label {
  color: var(--tt-warm);
  font-size: 14px;
  font-weight: 800;
}

.tt-hero__amount {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1.1;
}

.tt-hero a {
  font-size: 14px;
}

/* Segmented tabs that switch between two views of one group. */
.tt-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-tabs a {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: var(--tt-target);
  border-radius: var(--tt-radius-tab);
  color: var(--tt-muted);
  font-size: 14px;
  text-decoration: none;
}

.tt-tabs a[aria-current="page"] {
  background: var(--tt-soft);
  box-shadow: inset 0 0 0 1px var(--tt-line);
  color: var(--tt-ink);
}

/* Day headings and grouped lists. */
.tt-day {
  margin: 20px 0 8px 2px;
  color: var(--tt-warm);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tt-day:first-child {
  margin-top: 0;
}

.tt-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
  list-style: none;
}

.tt-list > li + li {
  border-top: 1px solid var(--tt-line);
}

.tt-activity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  color: var(--tt-ink);
  font-weight: 400;
  text-decoration: none;
}

.tt-activity__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: var(--tt-radius-avatar);
  background: var(--tt-soft);
  color: var(--tt-warm);
}

.tt-activity__tile--paid {
  background: var(--tt-positive-bg);
  color: var(--tt-positive);
}

.tt-activity__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  overflow-wrap: anywhere;
}

.tt-activity__title {
  font-weight: 800;
  line-height: 1.25;
}

.tt-activity__meta {
  color: var(--tt-muted);
  font-size: 14px;
  line-height: 1.25;
}

.tt-load-more {
  margin-top: 16px;
}

/* Who owes what: one row per member, the amount on the right with its word under it. */
.tt-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-section + .tt-section {
  margin-top: 26px;
}

.tt-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px;
}

.tt-section__title {
  margin: 18px 2px 0;
}

.tt-ledger-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
}

.tt-ledger-row__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.tt-ledger-row__who small {
  color: var(--tt-muted);
  font-size: 12px;
}

.tt-ledger-row__net {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.tt-ledger-row__net small {
  color: var(--tt-muted);
  font-weight: 600;
}

.tt-ledger-row__net--owed {
  color: var(--tt-positive);
}

.tt-ledger-row__net--owes {
  color: var(--tt-negative);
}

.tt-ledger-row__net--settled {
  color: var(--tt-muted);
}

.tt-transfers {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-transfer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-transfer__what {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.tt-transfer__amount {
  font-size: 18px;
}

.tt-btn--compact {
  padding: 0 13px;
  font-size: 14px;
}

.tt-panel {
  padding: 18px;
  border: 1.5px dashed var(--tt-line-dashed);
  border-radius: var(--tt-radius-lg);
  color: var(--tt-muted);
  font-size: 14px;
  text-align: center;
}

.tt-simplify {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-simplify__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: var(--tt-muted);
}

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

.tt-suggestion-note {
  margin: 10px 2px 0;
}

/* New group: the roomy form, the people list and its add-a-name row. */
.tt-form--roomy {
  gap: 16px;
}

.tt-iconbtn--bare {
  border-color: transparent;
  background: transparent;
  color: var(--tt-muted);
}

.tt-add-person {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.tt-add-person .tt-field {
  flex: 1;
}

.tt-add-person .tt-input {
  min-height: var(--tt-target-button);
  padding: 10px 12px;
}

.tt-section .tt-error {
  color: var(--tt-danger);
  font-size: 14px;
  font-weight: 750;
}

/* Members: the list's row actions, the pair of buttons under it, the closing card (the account
   pages' danger zone), the sheet. */
.tt-iconbtn--danger {
  color: var(--tt-danger);
}

.tt-inline-form {
  display: contents;
}

.tt-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* A date beside a currency: side by side only when both fit whole, so on a phone the currency
   select is full width and "PLN · złoty polski" is not cut off. */
.tt-pair--wrap {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.tt-archive {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.tt-archive h2 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.tt-archive p {
  margin: 0 0 14px;
  font-size: 14px;
}

/* Account deletion (TG8): the Members page's closing panel, in the danger colour. */
.tt-danger-zone {
  border-color: var(--tt-danger);
}

.tt-danger-zone h2 {
  color: var(--tt-danger);
}

.tt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-target);
  font-size: 14px;
  font-weight: 800;
}

.tt-check input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--tt-danger);
}

.tt-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tt-sheet__head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.tt-alert ul {
  margin: 6px 0;
  padding: 0;
  list-style: none;
}

/* Add expense: the group chip under the title, the amount field, the split preview. */
.tt-appbar__title {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 0;
}

.tt-appbar__title h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.tt-groupchip {
  position: relative;
  max-width: 100%;
}

.tt-groupchip summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--tt-radius-pill);
  color: var(--tt-warm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
  list-style: none;
}

.tt-groupchip summary::-webkit-details-marker {
  display: none;
}

.tt-groupchip__list {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: max-content;
  max-width: 280px;
  margin: 4px 0 0;
  padding: 4px;
  transform: translateX(-50%);
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-sheet);
  list-style: none;
}

.tt-groupchip__list a {
  display: flex;
  align-items: center;
  min-height: var(--tt-target);
  padding: 0 12px;
  border-radius: var(--tt-radius-tab);
  color: var(--tt-ink);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.tt-groupchip__list a[aria-current="true"] {
  background: var(--tt-soft);
  font-weight: 800;
}

.tt-field > .tt-amount {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding-left: 14px;
  border: 1px solid var(--tt-field-line);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-field-bg);
  font-size: 22px;
  font-weight: 800;
}

.tt-amount__input {
  flex: 1;
  width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--tt-ink);
  font: inherit;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -0.04em;
  outline: none;
}

.tt-amount:focus-within {
  outline: 2px solid var(--tt-warm);
  outline-offset: 2px;
}

.tt-amount__code {
  padding-right: 14px;
  color: var(--tt-muted);
  font-size: 14px;
  font-weight: 800;
}

.tt-split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-soft);
}

.tt-split__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tt-split__each {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.tt-split__off,
.tt-split .tt-error {
  color: var(--tt-danger);
}

.tt-people {
  margin-top: 8px;
}

.tt-people summary,
.tt-disclosure summary {
  display: flex;
  align-items: center;
  min-height: var(--tt-target);
  color: var(--tt-warm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.tt-people__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-person-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: var(--tt-target);
  padding: 4px 0;
  border-bottom: 1px dashed var(--tt-line-dashed);
  font-size: 14px;
}

.tt-person-row__pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-target);
  overflow-wrap: anywhere;
}

.tt-person-row__pick input {
  width: 22px;
  height: 22px;
  accent-color: var(--tt-warm);
}

.tt-person-row__value {
  width: 110px;
  min-height: var(--tt-target);
  padding: 8px 10px;
}

.tt-person-row__share {
  flex: none;
  width: 80px;
  text-align: right;
  white-space: nowrap;
}

.tt-person-row__error {
  flex-basis: 100%;
  font-size: 14px;
}

.tt-disclosure {
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-disclosure summary {
  min-height: var(--tt-target-primary);
  padding: 0 16px;
  font-size: 16px;
}

.tt-disclosure__body {
  display: grid;
  gap: 14px;
  padding: 4px 16px 16px;
}

.tt-segmented {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-segmented label {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: var(--tt-target);
  border-radius: var(--tt-radius-tab);
  color: var(--tt-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
}

.tt-segmented label:has(input:checked) {
  background: var(--tt-soft);
  box-shadow: inset 0 0 0 1px var(--tt-line);
  color: var(--tt-ink);
}

.tt-segmented label:has(input:focus-visible) {
  outline: 2px solid var(--tt-warm);
}

/* Invitation (Invitation.dc.html): the group card and the stack of member initials under it. */
.tt-invite {
  padding: 20px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-soft);
  box-shadow: var(--tt-shadow-card);
}

.tt-invite h1 {
  margin: 0 0 6px;
  font-size: 36px;
  letter-spacing: -0.06em;
  line-height: 1.05;
}

.tt-invite p:not(.tt-eyebrow) {
  margin: 0 0 14px;
}

.tt-avatar-stack {
  display: flex;
}

.tt-avatar-stack .tt-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid var(--tt-soft);
  border-radius: 12px;
  background: var(--tt-surface);
  font-size: 12px;
}

.tt-avatar-stack .tt-avatar + .tt-avatar {
  margin-left: -8px;
}

/* Members: the share-link sheet lists each placeholder with its link to copy and a resend. */
.tt-share {
  display: grid;
  gap: 8px;
  padding: 12px 0;
}

.tt-share + .tt-share {
  border-top: 1px solid var(--tt-line);
}

.tt-share strong {
  font-weight: 800;
}

.tt-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-share__actions > .tt-btn {
  flex: 1;
}

.tt-share__actions:not(:has(> :not([hidden]))) {
  display: none;
}

/* Expense detail: the total panel, the row groups, the delete area and the sheet's buttons. */
.tt-detail__title {
  margin-top: 6px;
  font-size: 28px;
  letter-spacing: -0.05em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.tt-detail__heading {
  margin: 0 2px 8px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.tt-total {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-soft);
  box-shadow: var(--tt-shadow-card);
  font-size: 14px;
}

.tt-total__amount {
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1.15;
}

.tt-rows {
  padding: 4px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.tt-rows__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 14px;
}

.tt-rows__row + .tt-rows__row {
  border-top: 1px dashed var(--tt-line-dashed);
}

.tt-rows__row--out {
  color: var(--tt-muted);
}

.tt-rows__what {
  text-align: right;
}

.tt-detail__danger {
  display: grid;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px dashed var(--tt-line-dashed);
  font-size: 14px;
  justify-items: start;
}

.tt-sheet__title {
  margin-bottom: 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.tt-sheet__why {
  margin-bottom: 18px;
}

.tt-sheet__actions {
  display: flex;
  gap: 10px;
}

.tt-sheet__actions > .tt-btn,
.tt-sheet__actions > .tt-inline-form > .tt-btn {
  flex: 1;
}

/* Settle up: the payer-to-payee strip, the balance panel's signs and the confirmation page. */
.tt-paystrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 2px;
}

.tt-paystrip__who {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
}

.tt-paystrip__who .tt-avatar {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

.tt-paystrip__arrow {
  color: var(--tt-warm);
}

[data-sign="owed"] {
  color: var(--tt-positive);
}

[data-sign="owes"] {
  color: var(--tt-negative);
}

.tt-done {
  display: grid;
  gap: 8px;
  padding-top: 40px;
}

.tt-done h1 {
  font-size: 28px;
  letter-spacing: -0.05em;
  line-height: 1.15;
}

.tt-done__tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 13px;
  border-radius: 16px;
  background: var(--tt-positive-bg);
  color: var(--tt-positive);
}

/* Dashboard: the page head, totals, balance cards, group rows, settled panel, latest-group bar. */
.tt-pagehead {
  display: grid;
  gap: 3px;
  margin: 12px 0 0;
}

.tt-pagehead h1 {
  font-size: 28px;
  letter-spacing: -0.045em;
  line-height: 1.15;
}

.tt-positive {
  color: var(--tt-positive);
}

.tt-negative {
  color: var(--tt-negative);
}

/* Definition rows: label left, value right, dashed dividers, in one panel. */
.tt-dl {
  margin: 0;
  padding: 4px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.tt-dl__head,
.tt-dl__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 14px;
}

.tt-dl__head {
  padding-bottom: 0;
}

.tt-dl__row + .tt-dl__row,
.tt-dl__head + .tt-dl__row {
  border-top: 1px dashed var(--tt-line-dashed);
}

.tt-dl dt {
  color: var(--tt-muted);
}

.tt-dl dt.tt-eyebrow {
  color: var(--tt-warm);
}

.tt-dl dd {
  margin: 0;
  font-weight: 850;
}

.tt-totals {
  display: grid;
  gap: 9px;
}

.tt-cards {
  display: grid;
  gap: 9px;
}

.tt-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 67px;
  padding: 12px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-card);
  color: var(--tt-ink);
  text-decoration: none;
}

.tt-balance-card__who {
  display: grid;
  gap: 1px;
  min-inline-size: 0;
}

.tt-balance-card__status {
  font-size: 14px;
  font-weight: 800;
}

.tt-balance-card__status--owed {
  color: var(--tt-positive);
}

.tt-balance-card__status--owes {
  color: var(--tt-negative);
}

.tt-balance-card__group {
  overflow-wrap: anywhere;
  color: var(--tt-muted);
  font-size: 12px;
}

.tt-balance-card__amount {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-align: right;
}

.tt-section__head--spaced {
  margin-top: 18px;
}

.tt-section__head h2 {
  font-size: 18px;
  letter-spacing: -0.025em;
}

.tt-links {
  display: flex;
  gap: 16px;
}

.tt-links a {
  font-size: 15px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tt-grouprow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 75px;
  padding: 13px 16px;
  color: var(--tt-ink);
  text-decoration: none;
}

.tt-grouprow__text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-inline-size: 0;
  line-height: 1.25;
}

.tt-grouprow__text strong {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.tt-grouprow__text small {
  color: var(--tt-muted);
  font-size: 14px;
}

.tt-grouprow__pills {
  display: grid;
  gap: 4px;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.tt-settled {
  padding: 28px 19px;
  border: 1.5px dashed var(--tt-line-dashed);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
  text-align: center;
}

.tt-settled h2 {
  font-size: 18px;
  letter-spacing: -0.025em;
}

.tt-settled p {
  margin-top: 6px;
  color: var(--tt-muted);
  font-size: 14px;
}

.tt-actionbar__label {
  display: grid;
  text-align: left;
  line-height: 1.2;
}

.tt-actionbar__label small {
  font-size: 12px;
  font-weight: 650;
}

/* A step indicator ("Step 4 of 4 · Review") and a note callout, for the import flow. */
.tt-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.tt-steps__bar {
  height: 4px;
  border-radius: var(--tt-radius-pill);
  background: var(--tt-line);
}

.tt-steps__bar--done {
  background: var(--tt-accent);
}

.tt-callout {
  padding: 14px 16px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-md);
  background: var(--tt-soft);
}

/* Footer on every page: the two legal links (TG9). */
.tt-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  padding: 8px var(--tt-gutter) 24px;
  font-size: 14px;
}

.tt-signup-legal {
  margin: 0;
}

.tt-signup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}

/* Links that stand alone (not words inside a sentence) get the design's tap-target floor. */
.tt-footer a,
.tt-signup-links a,
.tt-hero > a,
.tt-alert > a,
.tt-archive__why a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-target);
}

/* The legal pages (TG9): a plain reading column on the tokens, wider than the phone column
   the app pages use; nothing decorative. */
main.tt-prose {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-prose article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.55;
}

.tt-prose h2 {
  margin-top: 12px;
}

.tt-prose ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-legal-dl {
  margin: 0;
}

.tt-legal-dl dt {
  margin-top: 12px;
  font-weight: 800;
}

.tt-legal-dl dd {
  margin: 4px 0 0;
}

.tt-legal-lang {
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.tt-legal-lang a[aria-current="true"] {
  color: var(--tt-ink);
  text-decoration: none;
}

.tt-placeholder {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--tt-danger-bg);
  color: var(--tt-danger);
  font-weight: 800;
}

.tt-legal-draft p {
  margin-top: 6px;
}

/* The CSV import: a fieldset of ticks for the people's columns, and one row per name of the file. */
.tt-choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.tt-choices legend {
  padding: 0;
  font-size: 14px;
  font-weight: 800;
}

.tt-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tt-target);
  overflow-wrap: anywhere;
}

.tt-choice input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--tt-warm);
}

.tt-import-member {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
}

.tt-import-member > strong {
  overflow-wrap: anywhere;
}

.tt-import-member .tt-field[hidden],
.tt-share__actions > [hidden] {
  display: none;
}

/* The product site (TG15): landing, help and changelog. Reading columns on the tokens; the
   landing hero uses the 64 px logo tile of System.dc.html. */
main.tt-site {
  max-width: 40rem;
}

.tt-landing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0 8px;
}

.tt-logo--hero {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 28px;
}

.tt-wordmark--hero {
  font-size: 36px;
}

.tt-lead {
  color: var(--tt-muted);
  font-size: 18px;
  line-height: 1.5;
}

.tt-landing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tt-benefits {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tt-benefits > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-card);
}

.tt-benefits h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.tt-benefits p {
  color: var(--tt-muted);
  line-height: 1.5;
}

.tt-help-toc {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-faq section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-margin-top: 16px;
}

.tt-changelog h2 {
  margin-top: 20px;
}

.tt-changelog h3 {
  margin-top: 12px;
  font-size: 15px;
  color: var(--tt-warm);
}

.tt-changelog li {
  overflow-wrap: anywhere;
}

/* The split preview's computed head (`#split-head`): swapped alone by a preview, so it keeps
   the summary card's own rhythm. */
.tt-split__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A row's error slot: empty (and taking no line) until the preview puts an error in it. */
.tt-person-row__errslot {
  flex-basis: 100%;
}

.tt-person-row__errslot:empty {
  display: none;
}

/* Offline, the preview cannot be worked out: the form says so instead of a stale headline.
   A page the worker served from its cache is offline from the start (`body[data-offline]`);
   one that lost the line while open learns it from a failed preview (app.js). */
.tt-split__offline {
  display: none;
  margin: 0;
  color: var(--tt-muted);
}

body[data-offline="1"] .tt-split__offline,
form[data-preview-offline="1"] .tt-split__offline {
  display: block;
}

body[data-offline="1"] .tt-split__summary,
form[data-preview-offline="1"] .tt-split__summary {
  display: none;
}