/* ============================================================================
   urbans — interface layer, version 2
   Built against the six criteria in APP-UI-PLAN.html:
   subtract · path A→B→C · real conditions · accessibility · hide complexity ·
   one visual idea. Brand is unchanged: paper, living green, Baloo 2 + Nunito.

   Type is set in rem with no html font-size override, so the phone's own text
   size setting scales the whole interface (the web equivalent of Dynamic Type).
   ========================================================================= */

:root{
  --paper:#F6F8F4; --card:#FFFFFF; --ink:#141F17; --muted:#5A6B5E;
  --voice:#1E6B30; --leaf:#8FCB63; --line:#E2E8E0; --tower:#0F1410;
  --amber:#F0A22E; --alert:#B4432E;
  --tint:#E7EFE3; --tint-greens:#E7EFE3; --tint-herbs:#DFEBD7; --tint-premium:#EDF1E4;

  --r-card:20px; --r-btn:16px; --tap:44px;
  --sh-1:0 1px 2px rgba(20,31,23,.05), 0 8px 22px rgba(20,31,23,.07);
  --sh-2:0 10px 30px rgba(20,31,23,.22);
  --wrap:34rem;

  --display:"Baloo 2","Nunito Sans",system-ui,sans-serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;

  /* one motion rhythm: press is instant, surfaces settle, sheets travel */
  --t-press:120ms; --t-ui:200ms; --t-surface:320ms;
  --ease:cubic-bezier(.32,.72,.24,1);
}

*{margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:var(--leaf);color:var(--tower)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD8C6;border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1rem; line-height:1.5;
  padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));
  caret-color:var(--voice);
  accent-color:var(--voice);
  scrollbar-color:#CBD8C6 transparent;
  text-underline-offset:.18em;
}
button{font-family:inherit;font-size:inherit;border:none;background:none;color:inherit;cursor:pointer}
a{color:inherit}
img{display:block}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.03em;line-height:1.08}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* every focusable thing shows where it is */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--voice);outline-offset:3px;border-radius:8px}

/* every icon in the app is drawn: same 2px stroke, same round joins */
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* labels keep their tracking but never fall below 11px */
.lbl{font-size:.66rem;letter-spacing:.12em;color:var(--muted);font-weight:700}

/* ---------------------------------------------------------------- app bar */
.appbar{max-width:var(--wrap);margin:0 auto;padding:1.15rem 1.25rem .25rem}
.appbar .row{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap)}
.appbar img{height:1.25rem}
.appbar .side{font-size:.82rem;color:var(--muted);min-height:var(--tap);
  display:flex;align-items:center;padding-left:.75rem}

/* ---------------------------------------------------------------- buttons */
.btn{
  width:100%;min-height:3.5rem;border-radius:var(--r-btn);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;font-size:1rem;letter-spacing:-0.01em;
  transition:transform var(--t-press) var(--ease), opacity var(--t-ui) linear;
}
.btn:active{transform:scale(.985)}
.btn-pay{background:var(--voice);color:#fff}
.btn-dark{background:var(--tower);color:var(--paper)}
.btn-quiet{background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700}
.btn:disabled{opacity:.45;cursor:default}
.btn-link{min-height:var(--tap);color:var(--muted);font-size:.85rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;width:100%}
.paynote{font-size:.66rem;letter-spacing:.05em;color:var(--muted);text-align:center;margin-top:.6rem}

/* ---------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--tint);color:var(--voice);border-radius:999px;
  padding:.34rem .7rem;font-size:.78rem;font-weight:700;
}
.chip.plain{background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:600}
/* state is never colour alone — every state chip carries a mark as well */
.chip .mk{font-size:.7rem;line-height:1}

/* ---------------------------------------------------------------- sheets */
.scrim{position:fixed;inset:0;background:rgba(15,20,16,.44);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:50;opacity:0;pointer-events:none;transition:opacity var(--t-ui) linear}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);
  border-radius:24px 24px 0 0;max-width:37.5rem;margin:0 auto;
  transform:translateY(105%);
  transition:transform var(--t-surface) var(--ease), visibility 0s linear var(--t-surface);
  max-height:92dvh;display:flex;flex-direction:column;
  box-shadow:0 -10px 40px rgba(20,31,23,.18);
}
.sheet:not(.show){visibility:hidden}          /* out of the reading order and tab order */
.sheet.show{transform:none;visibility:visible;transition-delay:0s}
.sheet .grab{width:2.25rem;height:4px;border-radius:2px;background:var(--line);margin:.6rem auto .2rem;flex:none}
.sheet .shead{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.25rem .1rem;flex:none}
.sheet .shead h2{font-size:1.1rem}
.sheet .close{min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;
  justify-content:center;color:var(--muted);font-size:1.5rem;margin-right:-.6rem}
.sbody{overflow-y:auto;padding:.25rem 1.25rem 1rem;-webkit-overflow-scrolling:touch}
.sfoot{flex:none;padding:.75rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 24px 24px}

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(1rem);
  background:var(--ink);color:var(--paper);border-radius:999px;
  padding:.55rem 1.1rem;font-size:.85rem;font-weight:600;
  opacity:0;transition:opacity var(--t-ui) linear, transform var(--t-ui) var(--ease);
  z-index:80;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------------------------------------------------------------- misc */
.note{font-size:.82rem;color:var(--muted)}
.cap{font-size:.66rem;letter-spacing:.08em;color:var(--muted);text-align:center;margin-top:2rem}
.tnum{font-variant-numeric:tabular-nums}

/* honest state line: stale data, offline, nothing here yet */
.statenote{display:flex;align-items:flex-start;gap:.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;
  font-size:.82rem;color:var(--muted);margin-top:1rem}
.statenote .ico{width:1.05rem;height:1.05rem;margin-top:.1rem;color:var(--muted)}
.statenote b{color:var(--ink);font-weight:700}

/* skeletons while the first load is in flight */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sk{border-radius:12px;background:linear-gradient(90deg,#EAEFE7 25%,#F2F6F0 37%,#EAEFE7 63%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .sk{background:#EAEFE7}
}