/* ─────────────────────────────────────────────────────────────────────────────
   Springy — depth layer.

   The portals were flat-pop: 2px black borders, hard 4px offset shadow, no
   gradients. That style reads playful and cheap-cheerful, which is the opposite
   of what someone paying $199/mo wants to look at every morning.

   Premium here means DEPTH, not decoration. Three rules:
     1. Light comes from above. Every raised surface gets a top inset highlight
        and a shadow that grows softer and wider as it falls.
     2. Shadows stack. One shadow is a sticker; three is an object.
     3. Nothing moves unless it's being touched.
   Load AFTER the page's own <style> so these win.
   ───────────────────────────────────────────────────────────────────────────*/
:root{
  --lift-1: 0 1px 2px rgba(22,20,15,.05), 0 2px 6px rgba(22,20,15,.05);
  --lift-2: 0 1px 2px rgba(22,20,15,.05), 0 4px 12px rgba(22,20,15,.07),
            0 12px 28px rgba(22,20,15,.06);
  --lift-3: 0 2px 4px rgba(22,20,15,.06), 0 10px 24px rgba(22,20,15,.09),
            0 28px 60px rgba(22,20,15,.10);
  --gloss: inset 0 1px 0 rgba(255,255,255,.95);
  --hair: 1px solid rgba(22,20,15,.10);
  --hair-soft: 1px solid rgba(22,20,15,.07);
  --surface: linear-gradient(180deg,#FFFEFA 0%,#FDFAF2 100%);
  --ease: cubic-bezier(.2,.7,.3,1);

  /* Redefining the two tokens the old flat-pop style was built on retires it
     everywhere at once, including elements this file never names. */
  --b: 1px solid rgba(22,20,15,.10);
  --pop: var(--lift-2);
}

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.card,.plan,.panel,.tile{
  background: var(--surface);
  border: var(--hair);
  border-radius: 18px;
  box-shadow: var(--lift-2), var(--gloss);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card:hover,.tile:hover{ transform: translateY(-2px); box-shadow: var(--lift-3), var(--gloss); }

/* A card that holds a list of records shouldn't bob about when you read it. */
.card.static:hover{ transform:none; box-shadow: var(--lift-2), var(--gloss); }

/* ── buttons: a real press ────────────────────────────────────────────────── */
.btn,button:not(.bare):not(nav.tabs button){
  border: var(--hair);
  border-radius: 12px;
  box-shadow: var(--lift-1), var(--gloss);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s;
}
.btn:hover,button:not(.bare):not(nav.tabs button):hover{ transform: translateY(-1px); box-shadow: var(--lift-2), var(--gloss); filter:saturate(1.06); }
.btn:active,button:not(.bare):not(nav.tabs button):active{ transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(22,20,15,.18); }
.btn:disabled,button:disabled{ transform:none; box-shadow:var(--lift-1); opacity:.5 }

/* ── inputs: recessed, not raised ─────────────────────────────────────────── */
input,select,textarea{
  border: var(--hair);
  border-radius: 11px;
  background: #FFFDF8;
  box-shadow: inset 0 2px 4px rgba(22,20,15,.055);
  transition: box-shadow .2s var(--ease), border-color .2s;
}
input:focus,select:focus,textarea:focus{
  outline: none;
  border-color: rgba(22,20,15,.28);
  box-shadow: inset 0 2px 4px rgba(22,20,15,.05), 0 0 0 4px rgba(255,200,56,.30);
}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1,h2,h3{ letter-spacing:-.021em }
.amount,.stat,.num,td.n{ font-variant-numeric: tabular-nums; letter-spacing:-.02em }

/* ── chips and tags sit ON the surface, so they get the smallest lift ─────── */
.chip,.tag,.pill{ box-shadow: var(--lift-1), var(--gloss); border:var(--hair-soft) }

/* ── toast ────────────────────────────────────────────────────────────────── */
.toast{
  background: linear-gradient(180deg,#242019 0%,#16140f 100%) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px !important;
  box-shadow: var(--lift-3);
  max-width: min(560px, calc(100vw - 40px));
  text-align: center; line-height:1.45; white-space:pre-line;
}
.toast.bad{ background: linear-gradient(180deg,#E8452A 0%,#C9331B 100%) !important; color:#fff }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important }
  .card:hover,.tile:hover,.btn:hover{ transform:none }
}

/* ─── info affordance ───────────────────────────────────────────────────────
   Replaces explainer paragraphs. The label says what the field IS; the `i`
   holds the detail for the one person in twenty who wants it. Works on hover
   and on tap, and flips to the left near the right edge of the screen.       */
.i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
   border-radius:50%;background:rgba(22,20,15,.12);color:rgba(22,20,15,.55);
   font:italic 700 10px/1 Georgia,serif;vertical-align:2px;margin-left:6px;
   cursor:help;position:relative;user-select:none;transition:.15s;flex:none}
.i:hover,.i:focus{background:var(--ink,#16140f);color:#FBF6EC;outline:none}
.i::after{content:attr(data-t);position:absolute;bottom:calc(100% + 9px);left:50%;
   transform:translateX(-50%) translateY(4px);width:max-content;max-width:270px;
   background:linear-gradient(180deg,#242019,#16140f);color:#FBF6EC;
   font:500 12.5px/1.5 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:0;
   text-align:left;padding:9px 12px;border-radius:10px;
   box-shadow:0 8px 24px rgba(22,20,15,.22);opacity:0;pointer-events:none;
   transition:opacity .16s,transform .16s;z-index:80;white-space:normal}
.i:hover::after,.i:focus::after{opacity:1;transform:translateX(-50%) translateY(0)}
.i.left::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.i.left:hover::after{transform:translateX(0) translateY(0)}
label .i,h3 .i,.head .i{vertical-align:1px}