/* Treatly Glass — the material every pop-up is made of.
 *
 * Sheets, toasts, the money sheet and the cheque's panel share one surface:
 * a clear, heavily blurred pane with a hairline edge that catches the light
 * on top, and the system's own type. Values follow iOS's dark palette so the
 * app sits next to the OS without looking like a costume of it. */

:root {
  --sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --sys-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI Variable Display', 'Segoe UI', Roboto, system-ui, sans-serif;
  --sys-round: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --serif: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;

  --label: #fff;
  --label-2: rgba(235, 235, 245, 0.6);
  --label-3: rgba(235, 235, 245, 0.3);
  --fill: rgba(120, 120, 128, 0.36);
  --fill-2: rgba(120, 120, 128, 0.24);
  --fill-3: rgba(118, 118, 128, 0.16);
  --sep: rgba(255, 255, 255, 0.12);
  --tint: #0a84ff;
  --red: #ff453a;
  --green: #30d158;
  --orange: #ff9f0a;
  --gold: #e6c27a;

  /* see-through, not grey: a dark tint the blurred app shows through */
  --mat: rgba(8, 8, 10, 0.34);
  --mat-blur: blur(44px) saturate(1.8);
  /* toasts float over the live app with no dimming, so they hold a bit more tint */
  --mat-toast: rgba(12, 12, 14, 0.58);
  --mat-edge: inset 0 0.5px 0 rgba(255, 255, 255, 0.34), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --mat-lift: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.25);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* what's behind a pop-up: still there, dimmed and softly out of focus */
  --scrim: rgba(0, 0, 0, 0.55);
  --scrim-blur: blur(24px) saturate(1.4);
}

/* ---------- the surface ---------- */

.gm-material,
.g-sheet,
.g-toast {
  background: var(--mat);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  box-shadow: var(--mat-edge), var(--mat-lift);
}
/* the old rim gradient reads as a costume next to this; the hairline does its job */
.g-sheet.glass::before,
.g-toast.glass::before {
  display: none;
}

/* ---------- system type in everything that pops up ---------- */

.g-sheet-wrap,
.g-toasts,
.g-cheque-view {
  font-family: var(--sys);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
.g-sheet-wrap .g-ask h3 {
  font-family: var(--sys-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.g-sheet-wrap .g-ask p,
.g-sheet-wrap .g-ask-hint {
  font-size: 15px;
  font-weight: 400;
  color: var(--label-2);
}
.g-sheet-wrap .g-answer {
  font-family: var(--sys);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 16px;
  background: var(--fill-3);
  box-shadow: none;
}
.g-sheet-wrap .g-answer:hover {
  background: var(--fill-2);
}
.g-sheet-wrap .g-answer.is-on {
  color: #000;
  background: #fff;
}

/* ---------- sheets ---------- */

.g-sheet {
  border-radius: 38px;
  transition: transform 0.5s var(--ease-spring);
}
/* ---------- one backdrop for every pop-up ----------
   The app stays visible behind, blurred and dimmed, the way the cheque's
   pay screen does it. */
.g-sheet-bg,
.g-set-bg,
.g-cheque-bg {
  background: var(--scrim);
  -webkit-backdrop-filter: var(--scrim-blur);
  backdrop-filter: var(--scrim-blur);
}
.g-set-confirm {
  background: var(--scrim);
  -webkit-backdrop-filter: var(--scrim-blur);
  backdrop-filter: var(--scrim-blur);
}
/* photos and videos need a darker room to be seen properly */
.g-viewer-bg {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: var(--scrim-blur);
  backdrop-filter: var(--scrim-blur);
}
/* Settings and confirmations are glass panes too, not solid black */
.g-set-panel,
.g-set-confirm-card {
  background: var(--mat);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  box-shadow: var(--mat-edge), var(--mat-lift);
}
.g-set-confirm-card::before {
  display: none;
}
.g-set-panel,
.g-set-confirm-card {
  font-family: var(--sys);
}
.g-set-panel :is(h1, h2, h3),
.g-set-confirm-card :is(h1, h2, h3) {
  font-family: var(--sys-display) !important;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.g-grabber,
.gm-grab {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- toasts: like a notification banner ---------- */

.g-toasts {
  z-index: 118;
  gap: 6px;
}
.g-toast {
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border-radius: 24px;
  transition:
    transform 0.5s var(--ease-spring),
    opacity 0.3s;
}
.g-toast.is-urgent,
.g-toast.is-good,
.g-toast.is-friend {
  box-shadow: var(--mat-edge), var(--mat-lift);
}
.g-toast-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: var(--fill);
}
.g-toast.is-urgent .g-toast-mark {
  background: var(--red);
}
.g-toast.is-good .g-toast-mark {
  color: #fff;
  background: var(--green);
}
.g-toast-mark.is-person {
  border-radius: 50%;
  font-family: var(--sys);
  font-size: 15px;
  font-weight: 600;
  background: hsl(var(--h) 45% 46%);
}
.g-toast-text strong {
  font-family: var(--sys);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.g-toast-text small {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--label-2);
}
.g-toast-act {
  font-family: var(--sys);
  font-size: 15px;
  font-weight: 600;
  color: var(--tint);
  background: none;
}
.g-toast + .g-toast {
  filter: none;
  opacity: 0.94;
}

/* ---------- the money sheet ---------- */

.g-money-wrap {
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}
.gm-sheet {
  padding: 8px 16px calc(16px + var(--safe-b));
  bottom: 8px;
  max-height: calc(100% - var(--safe-t) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.gm-sheet::-webkit-scrollbar {
  display: none;
}
.gm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 4px 4px;
}
.gm-head-txt {
  flex: 1;
  min-width: 0;
}
.g-sheet-wrap .gm-head h2 {
  margin: 0;
  font-family: var(--sys-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
}
.gm-head p {
  margin: 3px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  color: var(--label-2);
}
.gm-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--label-2);
  background: var(--fill-2);
  transition: background 0.2s, transform 0.2s var(--ease-spring);
}
.gm-x:hover {
  background: var(--fill);
}
.gm-x:active {
  transform: scale(0.9);
}
.gm-x svg {
  width: 13px;
  height: 13px;
}

/* the amount */
.gm-hero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 10px 0 0;
  cursor: text;
}
.gm-cur {
  font-family: var(--sys-round);
  font-size: 34px;
  font-weight: 600;
  color: var(--label-2);
  transform: translateY(-14px);
}
.gm-amt {
  min-width: 1ch;
  max-width: 6ch;
  padding: 0;
  border: 0;
  outline: 0;
  text-align: center;
  font-family: var(--sys-round);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--label);
  caret-color: var(--tint);
  background: none;
}
.gm-hero.is-empty .gm-amt::placeholder {
  color: var(--label-3);
}
.gm-breakdown {
  margin: -4px 0 4px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--label-2);
}

/* segmented control: a sliding thumb on a quiet track */
.gm-seg {
  --n: 4;
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  height: 36px;
  padding: 2px;
  border-radius: 18px;
  background: var(--fill-3);
}
.gm-seg--rails {
  --n: 4;
}
.gm-seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(2px + var(--i) * (100% - 4px) / var(--n));
  width: calc((100% - 4px) / var(--n));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.9);
  transition:
    left 0.35s var(--ease-spring),
    opacity 0.2s,
    transform 0.25s var(--ease-spring);
}
.gm-seg.has-on .gm-seg-thumb {
  opacity: 1;
  transform: none;
}
.gm-seg-opt {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--label-2);
  transition: color 0.2s;
}
.gm-seg-opt.is-on {
  font-weight: 600;
  color: var(--label);
}

/* an inset group, like a Settings table */
.gm-label {
  display: flex;
  justify-content: space-between;
  margin: 8px 16px -6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--label-2);
}
.gm-label span {
  font-variant-numeric: tabular-nums;
}
.gm-group {
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
}
.gm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  text-align: left;
  color: var(--label);
  transition: background 0.15s;
}
button.gm-row:active,
.gm-link:active {
  background: rgba(255, 255, 255, 0.08);
}
.gm-sep {
  height: 0.5px;
  margin-left: 58px;
  background: var(--sep);
}
.gm-form .gm-sep {
  margin-left: 16px;
}
.gm-sep--face {
  margin-left: 64px;
}
.gm-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
}
.gm-tile svg {
  width: 16px;
  height: 16px;
}
.gm-tile.is-auto {
  background: var(--tint);
}
.gm-tile.is-cheque {
  color: #3a2a06;
  background: linear-gradient(160deg, #f6dc9e, #d3a650);
}
.gm-tile.is-where {
  background: var(--green);
}
.gm-glyph {
  font-family: var(--sys-round);
  font-size: 17px;
  font-weight: 700;
}
.gm-row-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gm-row-txt b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.gm-row-txt small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.3;
  color: var(--label-2);
}
.gm-row-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--label-3);
}
.gm-row-end em {
  font-style: normal;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--label-2);
}
.gm-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--label-3);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    color 0.2s;
}
.gm-check svg {
  width: 12px;
  height: 12px;
}
.gm-choice.is-on .gm-check {
  color: #fff;
  background: var(--tint);
  box-shadow: none;
}
.gm-choice.is-on .gm-row-end em {
  color: var(--label);
}

.gm-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: var(--label);
  caret-color: var(--tint);
  background: none;
}
.gm-input::placeholder {
  color: var(--label-3);
}
.gm-field {
  padding: 0 0 0 16px;
  cursor: text;
}
.gm-field-k {
  flex: none;
  width: 92px;
  font-size: 16px;
}
.gm-field .gm-input {
  padding-left: 0;
  font-variant-numeric: tabular-nums;
}

.gm-fine {
  margin: 0 16px;
  font-size: 13px;
  line-height: 1.38;
  color: var(--label-2);
}
.gm-err {
  margin: -4px 16px 0;
  font-size: 13px;
  color: var(--red);
}
.gm-err:empty {
  display: none;
}
.gm-cta {
  height: 52px;
  margin-top: 4px;
  border-radius: 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #000;
  background: #fff;
  transition:
    transform 0.2s var(--ease-spring),
    opacity 0.2s;
}
.gm-cta:active {
  transform: scale(0.97);
  opacity: 0.85;
}
.gm-cta.is-busy,
.g-cheque-act.is-busy {
  opacity: 0.45;
  pointer-events: none;
}
.gm-plain {
  align-self: center;
  padding: 10px 16px;
  font-size: 17px;
  color: var(--tint);
}
.gm-plain.is-danger {
  color: var(--red);
}

/* ---------- the wallet ---------- */

.gm-wallet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-face {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: hsl(var(--h) 45% 42%);
}
.gm-amt-end {
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.gm-amt-end b {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--label);
}
.gm-amt-end em {
  font-size: 12px;
  font-weight: 500;
  color: var(--label-2);
}
.gm-amt-end em.is-due {
  color: var(--orange);
}
.gm-amt-end em.is-sent {
  color: var(--tint);
}
.gm-amt-end em.is-cashed {
  color: var(--green);
}
.gm-amt-end em.is-void {
  color: var(--red);
}
.gm-empty {
  margin: 24px 16px;
  text-align: center;
  font-size: 15px;
  color: var(--label-2);
}
/* the wallet inside Settings sits on Settings' own surface */
.g-set-page .gm-group {
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- the cheque's panel ---------- */

.g-cheque-close {
  position: absolute;
  top: calc(var(--safe-t) + 16px);
  right: 16px;
  width: 36px;
  height: 36px;
}
.g-cheque-panel {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px 16px;
  border-radius: 32px;
}
.g-cheque-say {
  margin: 0 4px;
  font-family: var(--sys-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.g-cheque-sub {
  margin: 0 4px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--label-2);
}
.g-cheque-acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.g-cheque-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  font-family: var(--sys);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--label);
  background: var(--fill-2);
  transition:
    transform 0.2s var(--ease-spring),
    opacity 0.2s,
    background 0.2s;
}
.g-cheque-act svg {
  width: 16px;
  height: 16px;
}
.g-cheque-act:active {
  transform: scale(0.97);
  opacity: 0.85;
}
.g-cheque-act:disabled {
  opacity: 0.4;
}
.g-cheque-act.is-main {
  color: #000;
  background: #fff;
}
.g-cheque-act.is-danger {
  color: var(--red);
  background: var(--fill-3);
}
.g-cheque-panel.is-flash {
  animation: gm-flash 1.4s var(--ease-spring) 0.3s both;
}
@keyframes gm-flash {
  0% {
    box-shadow: var(--mat-edge), var(--mat-lift), 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  100% {
    box-shadow: var(--mat-edge), var(--mat-lift), 0 0 0 16px rgba(255, 255, 255, 0);
  }
}
.g-cheque-bank {
  overflow: hidden;
  margin-top: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
}
.g-cheque-bank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 8px 0 16px;
}
.g-cheque-bank-row + .g-cheque-bank-row {
  border-top: 0.5px solid var(--sep);
}
.g-cheque-bank-row small {
  width: 88px;
  font-size: 15px;
  color: var(--label-2);
}
.g-cheque-bank-row b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.g-cheque-copy {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tint);
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .gm-seg-thumb,
  .gm-cta,
  .g-cheque-act,
  .g-cheque-panel.is-flash {
    transition: none;
    animation: none;
  }
}

/* every sheet in the app speaks the same type: the system face, not the
   display fonts the cards use */
.g-sheet-wrap :is(h1, h2, h3, h4, p, span, small, strong, b, em, button, input, textarea, label, li) {
  font-family: var(--sys);
}
/* (the app sets every heading in Poppins with !important; pop-ups opt out) */
.g-sheet-wrap :is(h1, h2, h3),
.g-cheque-view :is(h1, h2, h3) {
  font-family: var(--sys-display) !important;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.g-sheet-wrap :is(strong, b) {
  font-weight: 600;
}
.g-sheet-wrap .gm-amt,
.g-sheet-wrap .gm-cur,
.g-sheet-wrap .gm-glyph {
  font-family: var(--sys-round);
}
/* header buttons in sheets: small filled circles, like the system's */
.g-new-head .g-btn--round.glass {
  width: 30px;
  height: 30px;
  color: var(--label-2);
  background: var(--fill-2);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.g-new-head .g-btn--round.glass::before {
  display: none;
}
.g-new-head .g-btn--round.glass svg {
  width: 13px;
  height: 13px;
}

/* On phones running the lighter glass (g-q-low / g-q-medium), live blur is
   switched off across the app to keep scrolling smooth. A pop-up is one
   pane over a still screen, so it keeps its blur there too: that's what
   makes the cheque's pay screen feel the way it does. */
html:is(.g-q-low, .g-q-medium) .g-sheet-wrap .g-sheet-bg,
html:is(.g-q-low, .g-q-medium) .g-set .g-set-bg,
html:is(.g-q-low, .g-q-medium) .g-cheque-view .g-cheque-bg {
  background: var(--scrim) !important;
  -webkit-backdrop-filter: var(--scrim-blur) !important;
  backdrop-filter: var(--scrim-blur) !important;
}
html:is(.g-q-low, .g-q-medium) .g-sheet-wrap .g-sheet,
html:is(.g-q-low, .g-q-medium) .g-set .g-set-panel,
html:is(.g-q-low, .g-q-medium) .g-toasts .g-toast {
  background: var(--mat) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important;
  backdrop-filter: var(--mat-blur) !important;
}

.g-toast,
html:is(.g-q-low, .g-q-medium) .g-toasts .g-toast {
  background: var(--mat-toast) !important;
}
/* inside a clearer pane the grouped rows need a touch more body */
.gm-group,
.g-cheque-bank,
.g-sheet-wrap .g-answer {
  background: rgba(255, 255, 255, 0.08);
}

/* where the money is: a step list under a paid-out money treat */
.g-track { list-style: none; margin: 10px 4px 0; padding: 0; display: flex; flex-direction: column; }
.g-track-step { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.g-track-step:last-child { padding-bottom: 0; }
.g-track-step:not(:last-child)::after {
  content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.g-track-step.is-done:not(:last-child)::after { background: #3ddc84; }
.g-track-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); color: #06210f;
}
.g-track-step.is-done .g-track-dot { background: #3ddc84; box-shadow: none; }
.g-track-dot .gi { width: 12px; height: 12px; }
.g-track-txt { display: flex; flex-direction: column; line-height: 1.3; padding-top: 1px; }
.g-track-txt b { font-size: 15px; font-weight: 600; }
.g-track-txt small { font-size: 13px; color: var(--label-2); }
.g-track-step:not(.is-done) .g-track-txt b { color: var(--label-2); }