/* ─── SITE CHROME (shared) ─────────────────────────────────────────
   Canonical button + buy-dropdown + icon CSS. Both index.html and
   ledger.html link to this file so the trigger renders byte-
   identical across pages and we don't drift again.

   Palette vars (--ink / --bg / --ember / --hair / --hair-strong /
   --panel / --dimmer / --ink-soft / --dim) are declared in each
   page's inline <style> :root and inherited here.

   Transition + button tokens live in this file so a single edit
   reaches both pages.
*/

:root{
  --t-micro: 150ms ease;
  --t-small: 220ms cubic-bezier(.2,.7,.2,1);
  --t-modal: 320ms cubic-bezier(.2,.7,.2,1);

  --btn-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --btn-tracking: .22em;
  --btn-radius: 999px;
  --btn-border: 1px solid var(--hair-strong);
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  --btn-size: 11px;
  --btn-gap: 12px;
  --btn-min-h: 48px;
  --btn-mini-pad-y: 8px;
  --btn-mini-pad-x: 16px;
  --btn-mini-size: 10px;
  --btn-mini-gap: 8px;
  --btn-mini-min-h: 36px;
  --btn-mini-tracking: .16em;
}

/* Buttons (canonical .btn / .btn-mini / .btn-primary / .btn-secondary) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--btn-gap);
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-family:var(--btn-font);font-size:var(--btn-size);
  letter-spacing:var(--btn-tracking);text-transform:uppercase;
  border:var(--btn-border);border-radius:var(--btn-radius);
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:border-color var(--t-micro), background var(--t-micro), color var(--t-micro), transform var(--t-micro);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);transition-duration:0.05s;}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn-primary:hover{background:var(--ember);color:var(--bg);border-color:var(--ember);}
.btn-secondary{background:transparent;color:var(--ink);}
.btn-secondary:hover{border-color:var(--ember);background:rgba(229,106,53,.06);}
.btn-mini{
  min-height:var(--btn-mini-min-h);
  padding:var(--btn-mini-pad-y) var(--btn-mini-pad-x);
  font-size:var(--btn-mini-size);
  letter-spacing:var(--btn-mini-tracking);
  gap:var(--btn-mini-gap);
}

/* Icon wrapper */
.icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;flex-shrink:0;color:currentColor;
  transition:transform var(--t-small), color var(--t-micro);
}
.icon svg{display:block;width:100%;height:100%;}
.icon-sm{width:10px;height:10px;}
.icon-md{width:14px;height:14px;}
.icon-lg{width:22px;height:22px;}

/* HUD actions slot (Buy dropdown + hamburger trigger) */
.hud-actions{display:flex;align-items:center;gap:12px;}
.buy-dropdown{position:relative;display:inline-flex;}
.buy-trigger{cursor:pointer;}
/* HUD buy button matches the 32px brand-mark height exactly. The
   global .btn-mini sets min-height 36px which renders 4px taller than
   the logo and looks misaligned in the header bar. Scoped to .hud-actions
   so other .btn-mini instances on the site keep their default sizing. */
.hud-actions .btn-mini{
  min-height:32px;
  height:32px;
  padding-top:0;
  padding-bottom:0;
}
.buy-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:230px;
  background:var(--panel);
  border:1px solid var(--hair-strong);
  border-radius:12px;
  padding:6px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity var(--t-micro), transform var(--t-micro);
  z-index:200;
  box-shadow:0 1px 0 var(--hair-strong) inset, 0 8px 24px -6px rgba(0,0,0,0.55);
}
.buy-dropdown.is-open .buy-menu{
  opacity:1;pointer-events:all;transform:translateY(0);
}
.buy-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  cursor:pointer;
  transition:background var(--t-micro);
  color:var(--ink);
  border:none;background:transparent;
  font-family:'Inter Tight',system-ui,sans-serif;
  text-align:left;width:100%;
  text-decoration:none;
}
.buy-item:hover{background:var(--hair);}
.buy-item-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--dimmer);flex-shrink:0;color:var(--ink-soft);}
.buy-item-icon svg{width:14px;height:14px;display:block;}
.buy-item-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.buy-item-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);}
.buy-item-sub{font-size:10px;color:var(--dim);}
.buy-item .icon-arrow{color:var(--dim);width:18px;height:18px;}
.buy-item:hover .icon-arrow{color:var(--ember);}
.buy-copy .buy-copy-icon{width:18px;height:18px;}
.buy-divider{height:1px;background:var(--hair);margin:4px 2px;}
.buy-copy .buy-item-addr{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--dim);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:120px;
}
.buy-copy-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--dim);flex-shrink:0;transition:color var(--t-micro);}
.buy-copy:hover .buy-copy-icon{color:var(--ember);}
.buy-copy.copied .buy-item-label{color:var(--ember);}
.buy-copy.copied .buy-copy-icon{color:var(--ember);}

/* ─── FOOTER (shared) ──────────────────────────────────────────── */
.footer{padding:64px 0 40px;background:var(--bg-deep);}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:48px;
}
.foot-brand-lockup{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
.foot-brand p{margin:0 0 18px;font-size:13px;color:var(--dim);line-height:1.5;max-width:340px;}
.foot-col .foot-h{
  margin:0 0 16px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:500;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.foot-col a,
.foot-col a:visited{font-size:13px;color:var(--ink-soft);transition:color .2s;}
.foot-col a:hover{color:var(--ember);}
.foot-copy{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--hair);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--dim);text-align:center;
}
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .foot-brand{grid-column:span 2;}
}
@media(max-width:600px){
  .foot-grid{gap:24px 20px;}
}