/* ============================================================
   Commons — Decentral Park brand core
   Vanilla-CSS port of @decentralpark/ui (theme.css + components)
   Fonts self-hosted from the kit: Park Display (Space Grotesk),
   Park Body (Inter). App hue: pine (Commons in the solidarity apps).
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Park Display"; src: url("../fonts/spacegrotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Park Display"; src: url("../fonts/spacegrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Park Display"; src: url("../fonts/spacegrotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Park Body"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Park Body"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Park Body"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens (verbatim from theme.css) ---------- */
:root {
  --core-green: #16a34a;
  --green: #16a34a; --green-0: #86efac; --green-1: #15803d; --green-2: #166534;
  --pine: #0d9488;  --pine-0: #5eead4;  --pine-1: #0f766e;  --pine-2: #134e4a;
  --sky: #0284c7;   --sky-0: #7dd3fc;   --sky-1: #0369a1;   --sky-2: #075985;
  --paper-main: #f0fdf4; --paper-0: #ffffff; --paper-1: #dcfce7; --paper-2: #bbf7d0;
  --ink: #14211a;
  --grey: #808080; --grey-2: #595959; --grey-soft: #3f4a44;
  --brown: #513c35; --brown-1: #301f18;
  --red: #df0b00; --red-0: #f7cac2; --red-1: #f4b8ad;
  --warning: #ce7f00;
  --white: #ffffff; --black: #000000;

  --display: "Park Display", ui-sans-serif, system-ui, sans-serif;
  --body: "Park Body", ui-sans-serif, system-ui, sans-serif;

  /* Commons app hue */
  --app: var(--pine); --app-0: var(--pine-0); --app-1: var(--pine-1); --app-2: var(--pine-2);

  --radius: 18px; --radius-sm: 10px;
  --shadow-card: 0 18px 40px -24px rgba(20,33,26,.35), 0 4px 14px -10px rgba(20,33,26,.22);
  --shadow-pop: 0 30px 60px -24px rgba(20,33,26,.35), 0 6px 18px -10px rgba(20,33,26,.25);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--paper-2), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, var(--paper-1), transparent 55%),
    var(--paper-main);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.55;
  font-size: 16px;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--pine-1); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--green-0); color: var(--ink); }

/* ---------- Typography ---------- */
.text-h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; font-size: clamp(2.75rem, 7.5vw, 6.25rem); }
.text-h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; line-height: .98; font-size: clamp(2rem, 4.5vw, 3.75rem); }
.text-h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(1.4rem, 2.6vw, 2.25rem); }
.text-h4 { font-family: var(--body); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2; }
.text-h5 { font-family: var(--body); font-weight: 400; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.text-body { font-family: var(--body); font-size: 1rem; }
.text-caption { font-family: var(--body); font-size: .78rem; }
.display { font-family: var(--display); font-weight: 500; }
.display-bold { font-family: var(--display); font-weight: 700; }
.kicker { font-family: var(--display); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; font-size: clamp(11px, 1.1vw, 13px); color: var(--app-1); }
.kicker.green { color: var(--green-1); }
.kicker.sky { color: var(--sky-1); }
.lede { font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--grey-soft); line-height: 1.5; }
.muted { color: var(--grey-soft); }
.small { font-size: .875rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.container.narrow { width: min(760px, calc(100% - 48px)); }
.section { padding-block: clamp(40px, 7vw, 88px); }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .container { width: calc(100% - 32px); } }
.center-text { text-align: center; }
.spacer { flex: 1; }

/* ---------- Lifted button (the signature) ---------- */
.lifted {
  --lift-bg: var(--app); --lift-text: var(--white);
  --lift-hover-bg: var(--app-2); --lift-hover-text: var(--white);
  --lift-shadow: var(--grey-2);
  position: relative; display: inline-block; margin-bottom: 4px;
  border: 0; padding: 0; background: none; cursor: pointer; text-decoration: none;
}
.lifted:hover { text-decoration: none; }
.lifted .shadow { position: absolute; inset: 0; background: var(--lift-shadow); }
.lifted .face {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  height: 56px; padding-inline: 37px;
  background: var(--lift-bg); color: var(--lift-text);
  transition: transform .15s ease-out, background .15s ease-out, color .15s ease-out;
  white-space: nowrap;
}
.lifted:hover .face { transform: translate(-2.5px, -2.5px); background: var(--lift-hover-bg); color: var(--lift-hover-text); }
.lifted:active .face { transform: translate(2px, 2px); }
.lifted.sm .face { height: 44px; padding-inline: 22px; font-size: .93rem; }
.lifted.xs .face { height: 36px; padding-inline: 16px; font-size: .85rem; }
.lifted.green { --lift-bg: var(--green); --lift-hover-bg: var(--green-2); }
.lifted.sky { --lift-bg: var(--sky); --lift-hover-bg: var(--sky-2); }
.lifted.stroke { --lift-bg: var(--paper-main); --lift-text: var(--ink); --lift-hover-bg: var(--paper-1); --lift-hover-text: var(--ink); }
.lifted.stroke .face { border: 1px solid var(--ink); }
.lifted.burn { --lift-bg: var(--red-0); --lift-text: var(--red); --lift-hover-bg: var(--red-1); --lift-hover-text: var(--red); }
.lifted.disabled, .lifted[disabled] { pointer-events: none; opacity: .5; }
.lifted.block { display: block; width: 100%; }
.lifted.block .face { width: 100%; }

/* ---------- Park buttons (rounded, quieter) ---------- */
.park-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 500; font-size: 1rem;
  border-radius: 8px; padding: 10px 18px; cursor: pointer; border: 0;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.park-btn:hover { text-decoration: none; }
.park-btn.sm { padding: 6px 12px; font-size: .875rem; }
.park-btn.primary { background: var(--app); color: var(--white); }
.park-btn.primary:hover { background: var(--app-1); }
.park-btn.green { background: var(--green); color: var(--white); }
.park-btn.green:hover { background: var(--green-1); }
.park-btn.secondary { background: var(--paper-1); color: var(--app-2); }
.park-btn.secondary:hover { background: var(--paper-2); }
.park-btn.light { background: var(--paper-0); color: var(--ink); border: 1px solid var(--paper-2); }
.park-btn.light:hover { border-color: var(--app-0); }
.park-btn.outline { background: transparent; border: 2px solid var(--app); color: var(--app-1); }
.park-btn.outline:hover { background: rgba(13,148,136,.08); }
.park-btn.destructive { background: var(--red); color: var(--white); }
.park-btn.destructive:hover { background: #b30900; }
.park-btn.ghost { background: transparent; color: var(--grey-soft); }
.park-btn.ghost:hover { color: var(--ink); background: rgba(20,33,26,.05); }
.park-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Chips (square, ink border — from the kit) ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--ink); background: var(--paper-main);
  padding: 4px 16px; font-size: .875rem; font-family: var(--body);
  transition: border-color .15s, background .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--green); }
.chip.lg { padding: 12px 24px; font-size: 1rem; }
.chip.on { background: var(--ink); color: var(--paper-main); border-color: var(--ink); }
.chip.pine { background: var(--pine-0); border-color: var(--pine-2); }
.chip.soft { border-color: var(--paper-2); background: var(--paper-0); }
button.chip { cursor: pointer; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper-0); border: 1px solid var(--paper-2);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-card);
}
.card.flat { box-shadow: none; }
.card.clickable { transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s; cursor: pointer; display: block; color: inherit; text-decoration: none; }
.card.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--app-0); text-decoration: none; }
.card.ink { background: var(--ink); color: var(--paper-main); border-color: var(--ink); }
.card.ink .muted { color: #9db3a6; }
.card-band { height: 92px; border-radius: 12px 12px 0 0; margin: -22px -22px 16px; display: flex; align-items: flex-end; padding: 12px 18px; font-family: var(--display); font-weight: 700; font-size: 2rem; color: rgba(255,255,255,.92); }

/* ---------- Badges & pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 500; font-family: var(--display); white-space: nowrap; }
.pill.match { background: var(--green-0); color: var(--green-2); }
.pill.conflict { background: var(--red-0); color: var(--red); }
.pill.zero { background: var(--paper-1); color: var(--grey-soft); }
.pill.open { background: var(--sky-0); color: var(--sky-2); }
.pill.pine { background: var(--pine-0); color: var(--pine-2); }
.pill.ink { background: var(--ink); color: var(--paper-main); }
.pill.warn { background: #fde9cc; color: var(--warning); }
.pill.paper { background: var(--paper-1); color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
.dot.sky { background: var(--sky); } .dot.pine { background: var(--pine); } .dot.red { background: var(--red); } .dot.warn { background: var(--warning); } .dot.grey { background: var(--grey); }

/* ---------- Avatars ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  color: var(--white); background: var(--pine); border: 2px solid var(--paper-0);
}
.avatar.sm { width: 30px; height: 30px; font-size: .7rem; }
.avatar.lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -10px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--display); font-weight: 500; font-size: .9rem; }
.field .help { font-size: .8rem; color: var(--grey-soft); }
.input, textarea.input, select.input {
  font: inherit; color: var(--ink); background: var(--paper-0);
  border: 1px solid var(--ink); border-radius: 6px; padding: 10px 14px; width: 100%;
}
.input:focus { outline: 2px solid var(--app); outline-offset: 1px; border-color: var(--app); }
textarea.input { resize: vertical; min-height: 90px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { border: 1px solid var(--ink); background: var(--paper-0); padding: 10px 16px; cursor: pointer; font-size: .95rem; transition: all .12s; }
.choice:hover { border-color: var(--app); }
.choice.on { background: var(--ink); color: var(--paper-main); }
input[type="range"].slider { width: 100%; accent-color: var(--app); height: 32px; }
.range-labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--grey-soft); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--paper-2); flex-wrap: wrap; }
.tab { font-family: var(--display); font-weight: 500; padding: 10px 18px; color: var(--grey-soft); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--app-1); border-bottom-color: var(--app); }

/* ---------- Progress ---------- */
.progress { height: 8px; background: var(--paper-1); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .35s ease; }
.progress.green > i { background: var(--green); }
.progress.warn > i { background: var(--warning); }

/* ---------- Meter (dimension bars) ---------- */
.meter { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: .875rem; }
.meter .bar { height: 10px; background: var(--paper-1); border-radius: 999px; position: relative; overflow: hidden; }
.meter .bar > i { position: absolute; inset: 0 auto 0 0; background: var(--pine); border-radius: 999px; }
.meter .bar > i.you { background: var(--sky); opacity: .55; }

/* ---------- Ledger / table rows ---------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th { font-family: var(--display); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-soft); text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--paper-2); }
.ledger td { padding: 12px 10px; border-bottom: 1px solid var(--paper-1); font-size: .95rem; vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.amount { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.amount.neg { color: var(--red); }
.amount.pos { color: var(--green-1); }

/* ---------- Chat (steward) ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: .95rem; line-height: 1.5; }
.bubble.steward { background: var(--paper-0); border: 1px solid var(--paper-2); border-bottom-left-radius: 4px; align-self: flex-start; box-shadow: var(--shadow-card); }
.bubble.me { background: var(--pine); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble .bubble-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-2);
}
.navbar .nav-inner { display: flex; align-items: center; gap: 22px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand .word { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.brand .word em { font-style: normal; color: var(--pine-1); }
.brand .byline { font-size: .68rem; color: var(--grey-soft); letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: -3px; font-family: var(--display); font-weight: 500; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a { font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--grey-soft); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.nav-links a:hover { color: var(--ink); background: var(--paper-1); }
.nav-links a.on { color: var(--pine-1); background: var(--paper-1); }
.nav-burger { display: none; font-size: 1.5rem; padding: 6px 10px; }
@media (max-width: 880px) {
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--paper-0); border-bottom: 1px solid var(--paper-2); flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; box-shadow: var(--shadow-card); }
  .nav-links.open { display: flex; }
  .nav-burger { display: block; }
}

/* ---------- Demo banner ---------- */
.demo-banner { background: var(--ink); color: var(--paper-1); font-size: .8rem; text-align: center; padding: 7px 16px; }
.demo-banner button, .demo-banner a { color: var(--green-0); text-decoration: underline; font-size: .8rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper-main); margin-top: clamp(48px, 8vw, 96px); }
.footer a { color: var(--green-0); }
.footer .foot-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; }
@media (max-width: 760px) { .footer .foot-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer .tagline { color: #9db3a6; max-width: 340px; margin-top: 10px; font-size: .95rem; }
.footer h4 { font-family: var(--display); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; color: #9db3a6; margin-bottom: 14px; }
.footer li { list-style: none; margin-bottom: 9px; font-size: .95rem; }
.footer .legal { border-top: 1px solid rgba(240,253,244,.14); padding-block: 18px; font-size: .8rem; color: #9db3a6; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: var(--paper-main); padding: 12px 22px; border-radius: 999px; font-family: var(--display); font-weight: 500; font-size: .9rem; box-shadow: var(--shadow-pop); animation: toast-in .25s ease-out; }
.toast.green { background: var(--green-2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,33,26,.45); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--paper-0); border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; padding: 28px; box-shadow: var(--shadow-pop); }
.hidden { display: none !important; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 48px 24px; border: 2px dashed var(--paper-2); border-radius: var(--radius); color: var(--grey-soft); background: rgba(255,255,255,.5); }

/* ---------- Hero helpers ---------- */
.hero-wash { background: radial-gradient(900px 420px at 70% -20%, var(--pine-0), transparent 55%); }
.step-num { font-family: var(--display); font-weight: 700; font-size: .85rem; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper-main); display: inline-flex; align-items: center; justify-content: center; flex: none; }