/* ===========================================================================
   Theme: paper and forest.

   After kesslerbrant.com — warm cream paper, deep forest ink, a tight
   grotesque, an editorial serif for anything that carries weight, tiny mono
   labels for metadata, square corners, hairline rules, numbered sections.

   Everything here is scoped to every surface EXCEPT the landing page, which
   keeps its own design. The scope is wrapped in :where(), which contributes
   no specificity: each rule below ties with the one in app.css it replaces
   and wins only by loading later. That matters, because app.css has a few
   deliberately more specific rules — the light-on-dark buttons inside the
   sign-in glass, for one — and those should keep winning. A plain
   `body:not(…) .btn` would have beaten them and turned the sign-in button
   forest-green on a forest-green card.

   Delete the <link> to this file and the app is exactly what it was.
   =========================================================================== */

/* ------------------------------------------------------------- tokens -- */

body:not([data-route="landing"]){
  --ink:#0C2E22;
  --ink-2:#41594B;
  --sky:#E7E3D2;                 /* the page — app.css paints with --sky */
  --paper:#EDE9DA;
  --forest:#17291F;              /* dark panels, the ticker, the loader */
  --moss:#2F5443;                /* chamfered buttons, accents */
  --cream:#E8E3D0;               /* type on forest */

  --muted:rgba(12,46,34,.64);
  --quiet:rgba(12,46,34,.42);
  --line:rgba(12,46,34,.22);
  --line-soft:rgba(12,46,34,.11);
  --surface:transparent;
  --surface-hi:rgba(255,255,255,.32);
  --radius:0px;

  --positive:#2E6A4E;
  --danger:#8F3A2B;

  --ui:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Sometype Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  font-family:var(--ui);
  /* index.html paints the body inline so first paint is never white; an
     inline style can only be beaten with !important. */
  background:var(--sky) !important;
  color:var(--ink) !important;
  -webkit-font-smoothing:antialiased;
}
body[data-route="app"]{background:var(--sky) !important}
body[data-route="auth"]{background:#0F1C15 !important}

::selection{background:var(--ink);color:var(--cream)}

/* ------------------------------------------------------------- chrome -- */

:where(body:not([data-route="landing"])) .topbar{background:var(--sky)}

:where(body:not([data-route="landing"])) .appbar{
  background:rgba(231,227,210,.86);
  border-bottom:1px solid var(--line-soft);
}

/* The wordmark gets a mark and a mono strapline under it, the way the
   reference sets its name: one confident line and a quiet technical one. */
:where(body:not([data-route="landing"])) .appbar .logo{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:10px;
  align-items:center;
  font-family:var(--ui);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:-.04em;
  color:var(--ink);
}
:where(body:not([data-route="landing"])) .appbar .logo .logo-mark{
  grid-row:1 / span 2;
  grid-column:1;
  width:31px;
  height:26px;
}
:where(body:not([data-route="landing"])) .appbar .logo::after{
  content:"PAYMENTS \00D7  PEOPLE";
  grid-column:2;
  grid-row:2;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--ink-2);
  margin-top:1px;
}

/* Chamfered squares — the reference's octagonal buttons. */
:where(body:not([data-route="landing"])) .icon-btn{
  border:0;
  border-radius:0;
  background:var(--moss);
  color:var(--cream);
  clip-path:polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px),
                    calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
:where(body:not([data-route="landing"])) .icon-btn:hover{
  background:var(--ink);
  color:var(--cream);
  border-color:transparent;
}
:where(body:not([data-route="landing"])) .unread-dot{box-shadow:0 0 0 2px var(--moss)}

/* Tabs: mono, uppercase, spaced — metadata, not buttons. */
:where(body:not([data-route="landing"])) .tabbar{
  background:rgba(231,227,210,.94);
  border-top:1px solid var(--line);
}
:where(body:not([data-route="landing"])) .tabbar a{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
:where(body:not([data-route="landing"])) .tabbar a:hover,
:where(body:not([data-route="landing"])) .tabbar a[aria-current="page"]{color:var(--ink)}
:where(body:not([data-route="landing"])) .tab-dot{height:1px}

@media (min-width:901px){
  :where(body:not([data-route="landing"])) .tabbar{
    border-top:0;
    border-bottom:1px solid var(--line);
    background:var(--sky);
  }
  :where(body:not([data-route="landing"])) .tabbar a{font-size:10.5px}
}

/* ----------------------------------------------------------- headings -- */

:where(body:not([data-route="landing"])) .page-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,5.4vw,4.4rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink);
}
:where(body:not([data-route="landing"])) .page-title em{color:var(--moss)}
:where(body:not([data-route="landing"])) .page-sub{color:var(--ink-2);font-size:.98rem}

/* Numbered sections: "01 / WAITING ON YOU" on a hairline, link on the right.
   The numbering is a CSS counter, so no view had to change to get it. */
:where(body:not([data-route="landing"])) .main{counter-reset:k-section}
:where(body:not([data-route="landing"])) .section-head{
  counter-increment:k-section;
  align-items:flex-end;
  padding-bottom:10px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
:where(body:not([data-route="landing"])) .section-title,
:where(body:not([data-route="landing"])) .section-link{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
/* Only a real section header is numbered. A bare .section-title — the one
   labelling the balance card — was never counted, so it read "00 /". */
:where(body:not([data-route="landing"])) .section-head .section-title::before{
  content:counter(k-section, decimal-leading-zero) " / ";
  color:var(--quiet);
}
:where(body:not([data-route="landing"])) .section-link{color:var(--ink-2)}
:where(body:not([data-route="landing"])) .section-link::after{content:" \2197";display:inline-block;transition:transform .4s var(--ease)}
:where(body:not([data-route="landing"])) .section-link:hover{color:var(--ink)}
:where(body:not([data-route="landing"])) .section-link:hover::after{transform:translate(2px,-2px)}

/* ------------------------------------------------------------ surfaces -- */

:where(body:not([data-route="landing"])) .card{
  border:1px solid var(--line);
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
:where(body:not([data-route="landing"])) a.card:hover{
  background:var(--surface-hi);
  border-color:var(--ink);
}
/* Link cards get the reference's arrow, unless something already sits in
   that corner. */
:where(body:not([data-route="landing"])) a.card{position:relative}
:where(body:not([data-route="landing"])) a.card:not(:has(.status))::after{
  content:"\2197";
  position:absolute;
  top:14px;
  right:16px;
  font-size:15px;
  line-height:1;
  color:var(--ink);
  transition:transform .45s var(--ease);
}
:where(body:not([data-route="landing"])) a.card:hover::after{transform:translate(3px,-3px)}

:where(body:not([data-route="landing"])) .list{
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:none;
}
:where(body:not([data-route="landing"])) .list-item{
  border-radius:0;
  border-bottom:1px solid var(--line-soft);
  transition:background-color .35s var(--ease);
}
:where(body:not([data-route="landing"])) a.list-item:hover,
:where(body:not([data-route="landing"])) button.list-item:hover{background:var(--surface-hi)}
:where(body:not([data-route="landing"])) .list-title{letter-spacing:-.02em}
:where(body:not([data-route="landing"])) .list-sub{color:var(--ink-2)}
:where(body:not([data-route="landing"])) .list-amount{letter-spacing:-.03em;font-weight:500}

:where(body:not([data-route="landing"])) .empty{
  border:1px solid var(--line);
  border-radius:0;
  background:none;
}
:where(body:not([data-route="landing"])) .empty-title{
  font-family:var(--display);
  font-size:1.9rem;
  letter-spacing:-.015em;
}

:where(body:not([data-route="landing"])) .banner{
  border-radius:0;
  background:rgba(255,255,255,.28);
  border-color:var(--line);
}
:where(body:not([data-route="landing"])) .banner-warn{background:rgba(255,255,255,.4)}

/* ----------------------------------------------------------- numbers -- */

/* Money set the way the reference sets its pairings: a big grotesque, pulled
   tight, not a serif. */
:where(body:not([data-route="landing"])) .amount-hero{
  font-family:var(--ui);
  font-weight:400;
  font-size:clamp(2.6rem,6vw,4.2rem);
  letter-spacing:-.055em;
  line-height:1;
}
:where(body:not([data-route="landing"])) .amount-hero .muted{
  font-size:.42em;
  letter-spacing:.02em;
  font-family:var(--mono);
  text-transform:uppercase;
}

:where(body:not([data-route="landing"])) .progress{
  height:2px;
  border-radius:0;
  background:var(--line);
}
:where(body:not([data-route="landing"])) .progress-bar{
  border-radius:0;
  background:var(--ink);
  transition:width 1.2s var(--ease);
}

/* ------------------------------------------------------------- labels -- */

:where(body:not([data-route="landing"])) .status{
  border-radius:0;
  background:none;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
}
:where(body:not([data-route="landing"])) .detail-key{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
:where(body:not([data-route="landing"])) .mono,
:where(body:not([data-route="landing"])) .receive-address{font-family:var(--mono)}
:where(body:not([data-route="landing"])) .receive-address{border-radius:0}

:where(body:not([data-route="landing"])) .chip,
:where(body:not([data-route="landing"])) .segmented{border-radius:0}

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

:where(body:not([data-route="landing"])) .field label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
:where(body:not([data-route="landing"])) .input,
:where(body:not([data-route="landing"])) .textarea,
:where(body:not([data-route="landing"])) .select{
  border-radius:0;
  background:rgba(255,255,255,.34);
  border-color:var(--line);
}
:where(body:not([data-route="landing"])) .input:focus,
:where(body:not([data-route="landing"])) .textarea:focus,
:where(body:not([data-route="landing"])) .select:focus{
  background:rgba(255,255,255,.6);
  border-color:var(--ink);
  box-shadow:none;
}

/* ------------------------------------------------------------ buttons -- */

:where(body:not([data-route="landing"])) .btn{
  border-radius:0;
  background:var(--ink);
  color:var(--cream);
  letter-spacing:-.01em;
}
:where(body:not([data-route="landing"])) .btn:hover{
  background:var(--moss);
  box-shadow:none;
  transform:none;
}
:where(body:not([data-route="landing"])) .btn-quiet,
:where(body:not([data-route="landing"])) .btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
:where(body:not([data-route="landing"])) .btn-quiet:hover,
:where(body:not([data-route="landing"])) .btn-ghost:hover{
  background:var(--surface-hi);
  border-color:var(--ink);
}
:where(body:not([data-route="landing"])) .policy-btn{border-radius:0}

/* ------------------------------------------------------------- dialogs -- */

:where(body:not([data-route="landing"])) .modal,
:where(body:not([data-route="landing"])) dialog{
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
}
:where(body:not([data-route="landing"])) .modal-title{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.015em;
}

:where(body:not([data-route="landing"])) .toast{
  border-radius:0;
  background:var(--forest);
  color:var(--cream);
  border:0;
}
:where(body:not([data-route="landing"])) .toast-body{color:rgba(232,227,208,.72)}

:where(body:not([data-route="landing"])) .skeleton{
  border-radius:0;
  background:linear-gradient(90deg, rgba(12,46,34,.05), rgba(12,46,34,.1), rgba(12,46,34,.05));
  background-size:200% 100%;
}

:where(body:not([data-route="landing"])) .local-link-note,
.local-link-note{
  margin:12px 0 0;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:10.5px;
  letter-spacing:.06em;
  line-height:1.6;
  color:var(--ink-2, rgba(11,11,12,.56));
}

/* ---------------------------------------------------- dashboard glyphs -- */
/* Quick actions as the reference's specimen cards: a big serif glyph, an
   arrow, a name and one line under it. */

.k-glyphs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;
  margin-top:22px;
}
:where(body:not([data-route="landing"])) .k-glyph{
  display:flex;
  flex-direction:column;
  min-height:190px;
  padding:18px 18px 16px;
}
.k-glyph__mark{
  font-family:var(--display);
  font-size:clamp(3.2rem,5vw,4.3rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--ink);
}
.k-glyph__name{
  margin-top:auto;
  padding-top:22px;
  font-size:1.2rem;
  letter-spacing:-.04em;
  color:var(--ink);
}
.k-glyph__sub{
  margin-top:4px;
  font-size:12.5px;
  color:var(--ink-2);
}

/* ------------------------------------------------------------ ticker -- */

.k-marquee{
  --k-marquee-speed:38s;
  position:relative;
  overflow:hidden;
  /* Edge to edge. The page sits in a centred column with a maximum width,
     so pulling out by its padding still left the band boxed in on a wide
     screen; 50% − 50vw reaches the window's edges from any centred parent. */
  margin:48px calc(50% - 50vw) 0;
  padding:11px 0;
  background:var(--forest, #17291F);
  color:var(--cream, #E8E3D0);
  white-space:nowrap;
  user-select:none;
}
.k-marquee__track{
  display:inline-flex;
  animation:kMarquee var(--k-marquee-speed) linear infinite;
}
.k-marquee__item{
  padding-right:1.3em;
  font-family:var(--ui, sans-serif);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
}
@keyframes kMarquee{ to{ transform:translateX(-50%) } }

/* ------------------------------------------------------ blur reveal -- */
/* The reference's signature: things arrive out of focus and sharpen. Hidden
   only once JS has marked them (.k-r), so no JS means nothing is hidden. */

.k-r{
  opacity:0;
  filter:blur(10px);
  transform:translate3d(0,14px,0);
}
.k-r.k-in{
  animation:kReveal 1s var(--ease) both;
  animation-delay:calc(var(--k-i, 0) * 65ms);
}
/* Ends on filter:none, not blur(0). Any filter that stays applied — even a
   zero one — makes the element a containing block, and a fixed-position
   child inside a revealed card would then pin to the card, not the window. */
@keyframes kReveal{
  from{ opacity:0; filter:blur(10px); transform:translate3d(0,14px,0) }
  to  { opacity:1; filter:none;       transform:none }
}

/* Word by word. A split element does not blur as a block — its words do,
   each a beat after the last, so a heading sharpens from left to right. */
.k-r.k-split{opacity:1;filter:none;transform:none}
.k-r.k-split.k-in{animation:none}
.k-r .k-w{
  display:inline-block;
  opacity:0;
  filter:blur(8px);
  transform:translate3d(0,.28em,0);
}
.k-r.k-in .k-w{
  animation:kWord .95s var(--ease) both;
  animation-delay:calc(var(--k-i, 0) * 65ms + var(--w) * 55ms);
}
@keyframes kWord{
  from{ opacity:0; filter:blur(8px); transform:translate3d(0,.28em,0) }
  to  { opacity:1; filter:none;      transform:none }
}

/* --------------------------------------------------------------- intro -- */
/* Once per visit: concentric circles and the mark, a count to 100, then
   forest columns stepping away like the reference's staircase. */

.k-intro{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:auto;
}
.k-intro__cols{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
}
.k-intro__col{
  background:var(--forest, #17291F);
  transform-origin:top;
  /* Six 1fr columns rarely land on whole pixels, and the anti-aliased edges
     between them showed as thin light seams. Each column bleeds a pixel
     into its neighbour so there is nothing to see through. */
  width:calc(100% + 2px);
}
.k-intro.is-leaving .k-intro__col{
  animation:kColUp .9s var(--ease-in-out) both;
  animation-delay:calc(var(--k-c) * 70ms);
}
@keyframes kColUp{ to{ transform:translateY(-100%) } }

.k-intro__art{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transition:opacity .35s ease;
}
.k-intro.is-leaving .k-intro__art{opacity:0}
.k-intro__art svg{width:min(56vmin,420px);height:auto;overflow:visible}
.k-intro__art circle{
  fill:none;
  stroke:rgba(232,227,208,.2);
  stroke-width:.6;
  stroke-dasharray:320;
  stroke-dashoffset:320;
  animation:kDraw 1.3s var(--ease) forwards;
}
.k-intro__art circle:nth-of-type(2){animation-delay:.08s}
.k-intro__art circle:nth-of-type(3){animation-delay:.16s}
.k-intro__art circle:nth-of-type(4){animation-delay:.24s}
@keyframes kDraw{ to{ stroke-dashoffset:0 } }
.k-intro__mark{fill:var(--cream, #E8E3D0)}

.k-intro__meta{
  position:absolute;
  left:24px;
  right:24px;
  bottom:20px;
  display:flex;
  justify-content:space-between;
  font-family:var(--mono, monospace);
  font-size:10px;
  letter-spacing:.1em;
  color:rgba(232,227,208,.66);
}

@media (prefers-reduced-motion:reduce){
  .k-r{opacity:1;filter:none;transform:none}
  .k-r .k-w{opacity:1;filter:none;transform:none;animation:none}
  .k-marquee__track{animation:none}
  .k-intro{display:none}
}

/* ------------------------------------------------------ sign-in glass -- */
/* The sign-in scene keeps its record and its glass, re-toned from blue night
   to the reference's dark forest so it belongs to the same site. */

body[data-route="auth"] .auth-scene{
  background:linear-gradient(200deg, #21392C 0%, #17291F 45%, #0E1A14 100%);
}
body[data-route="auth"] .auth-scene::after{
  background:linear-gradient(180deg, rgba(9,20,14,.46), rgba(9,20,14,.82));
}
@media (min-width:901px){
  body[data-route="auth"] .auth-scene::after{
    background:
      linear-gradient(90deg, rgba(9,20,14,.9) 0%, rgba(9,20,14,.66) 32%, rgba(9,20,14,.14) 62%, rgba(9,20,14,.3) 100%),
      linear-gradient(180deg, rgba(9,20,14,.12), rgba(9,20,14,.46));
  }
}
/* The theme's .page-title and .page-sub are forest ink — right on paper,
   invisible on this glass. They tie with .auth-title/.auth-sub on
   specificity and win by loading later, so the light versions are restated
   here with the route in front to settle it. */
body[data-route="auth"] .auth-title{color:#F4F0E4}
body[data-route="auth"] .auth-title em{color:rgba(232,227,208,.62)}
body[data-route="auth"] .auth-sub{color:rgba(232,227,208,.68)}
body[data-route="auth"] .auth-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
}
body[data-route="auth"] .auth-card{
  border-radius:0;
  background:linear-gradient(180deg, rgba(23,41,31,.55), rgba(12,22,17,.66));
}
body[data-route="auth"] .auth-card .btn,
body[data-route="auth"] .auth-card .input,
body[data-route="auth"] .auth-card .select,
body[data-route="auth"] .auth-card .textarea,
body[data-route="auth"] .auth-handle{border-radius:0}
body[data-route="auth"] .auth-card .field label{color:rgba(232,227,208,.7)}
body[data-route="auth"] .appbar{background:rgba(9,20,14,.3)}
body[data-route="auth"] .appbar .logo{color:var(--cream)}
body[data-route="auth"] .appbar .logo::after{color:rgba(232,227,208,.55)}
body[data-route="auth"] .tabbar{background:rgba(9,20,14,.72)}

/* ------------------------------------------------------- public pages -- */
/* Profile, pay-link and box pages — the ones friends open from a link. */

:where(body:not([data-route="landing"])) .public-card{
  border-radius:0;
  border-color:var(--line);
  background:rgba(255,255,255,.3);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
:where(body:not([data-route="landing"])) .box-card__link{color:inherit;text-decoration:none}
:where(body:not([data-route="landing"])) .box-card__link:hover{text-decoration:underline;text-underline-offset:3px}
:where(body:not([data-route="landing"])) .box-card__share{margin-top:14px}