@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&display=swap');

/* design.css — the house style, shared by every page.
 *
 * Loaded AFTER each page's inline <style> on purpose. Every page carries its
 * own :root block with the original warm palette, and rather than edit
 * eighteen copies of it this file wins on document order at equal specificity.
 *
 * Dark mode is NOT here — theme.css owns it, and its values already match.
 */

:root{
  /* Cool grey page, pure white cards. The contrast between those two is where
     the whole look comes from; the old warm off-white left cards with almost
     nothing to sit against. */
  --ink:#15151a; --paper:#f1f1f4; --paper-rgb:241,241,244;
  --card:#ffffff; --card2:#e9e9ef;
  --line:#e6e6ec; --line2:#dcdce4;
  --soft:#3c3c44; --faint:#86868f;
  --ghost-line:#d7d7df; --ghost-fill:#e5e5ec;

  /* One family everywhere: display, body and the small mono labels. */
  --f-ui:'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* The card lift. Borderless cards on a cool page separate by themselves, so
     a diffuse shadow does the work a hairline box used to. */
  --lift:0 1px 2px rgba(20,20,32,.045), 0 6px 14px -8px rgba(20,20,32,.16);
}

body, body *{ font-family:var(--f-ui) !important }
/* Geist Mono's small caps carried the tracking; Nunito needs it stated. */
.mono, .greet, .lbl, .barlbl, .dayrow__sub, .slbl a{ letter-spacing:.06em }

/* Cards lose their borders and float instead. Deliberately a named list rather
   than a blanket rule: inputs, chips, buttons and the dashed receipt rules all
   need their borders, and flattening those breaks them. */
.stat, .slip, .rcard, .crow, .reg, .wcard, .wallet,
.profile, .settings, .group, .items, .howto, .wrow, .pk,
.form, .trust, .warr, .warrcard, .cat{
  border:none !important;
  box-shadow:var(--lift);
}
[data-theme="dark"] .stat, [data-theme="dark"] .slip, [data-theme="dark"] .rcard,
[data-theme="dark"] .crow, [data-theme="dark"] .reg, [data-theme="dark"] .wcard,
[data-theme="dark"] .wallet, [data-theme="dark"] .profile, [data-theme="dark"] .settings,
[data-theme="dark"] .group, [data-theme="dark"] .items, [data-theme="dark"] .howto,
[data-theme="dark"] .wrow, [data-theme="dark"] .pk, [data-theme="dark"] .form,
[data-theme="dark"] .trust, [data-theme="dark"] .warr, [data-theme="dark"] .warrcard,
[data-theme="dark"] .cat{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 18px -10px rgba(0,0,0,.6);
}

/* A receipt is paper: it keeps its edge and its perforations. */
.slip--print, .slip__head, .slip__sum, .billto, .dash{ box-shadow:none }

/* The profile button, top right of every main page.
 *
 * It replaced the You tab. A tab is for a place you move between; your own
 * account is somewhere you visit and come back from, and giving it a fifth of
 * the bar was spending the most valuable real estate on settings. The freed
 * slot went to Earn. app.html already had a `.top .av` rule for a 42px circle
 * that was never rendered — this supersedes it (document order) so the app and
 * the web agree on 38px.
 */
.top .av{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;line-height:1;text-decoration:none;
  box-shadow:var(--lift);transition:transform .12s;
}
.top .av:active{transform:scale(.92)}
[data-theme="dark"] .top .av{background:var(--card2);color:var(--ink)}