/* ===== SpentTogether – Base Styles (Tarka-inspired) ===================== */
/* Bold yellow background, deep black nav, red accents, chunky pills */

:root{
  /* Brand palette */
  --brand-yellow: #ffd200;
  --brand-black:  #0b0b0b;
  --brand-red:    #ef3b2d;
  --brand-red-700:#d83226;
  --brand-red-800:#ba2a1f;

  /* Map to your design tokens */
  --bg:         var(--brand-yellow);   /* page bg */
  --surface:    #ffffff;               /* cards */
  --surface-2:  var(--brand-yellow);   /* secondary bg */
  --border:     rgba(0,0,0,.10);
  --text:       var(--brand-black);
  --muted:      #2e2e2e;
  --brand:      var(--brand-red);
  --brand-700:  var(--brand-red-700);
  --brand-800:  var(--brand-red-800);

  /* Sizing & radius */
  --radius-sm:  12px;
  --radius:     16px;
  --radius-lg:  22px;
  --space:      18px;

  /* Shadows */
  --shadow-1:   8px 8px 0 rgba(0,0,0,.25);  /* chunky comic */
  --shadow-2:   18px 18px 0 rgba(0,0,0,.22);

  /* Typography */
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Component heights */
  --h-input: 48px;
  --h-button: 50px;
}

/* Light mode stays bold; keep alt for people forcing dark scheme */
@media (prefers-color-scheme: dark){
  :root{ /* keep the same bright theme even in dark mode */ }
}

*,
*::before,
*::after{ box-sizing:border-box }

html{ color-scheme: light; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 var(--font);
  font-weight:550;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video,canvas{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
code,kbd,pre{ font-family:var(--mono) }

/* Focus visibility for keyboard users */
:focus{ outline:none }
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}

/* ===== Layout ============================================================ */
.container{ max-width:1040px; margin:0 auto; padding: calc(var(--space) * 1.25) var(--space) }
.stack{ display:flex; flex-direction:column; gap:var(--space) }
.row{ display:flex; align-items:center; gap:var(--space) }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:var(--space) }
.grid{ display:grid; gap:var(--space) }
.grid-2{ grid-template-columns:1fr 1fr }
.grid-3{ grid-template-columns:repeat(3, 1fr) }
@media (max-width: 980px){ .grid-2,.grid-3{ grid-template-columns:1fr } }

/* ===== Top Nav: solid black bar with pill links ========================= */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  background:var(--brand-black);
  color:#fff;
  border-bottom:0;
  box-shadow:none;
}
.nav a{
  color:#fff;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.06em;
  padding:10px 14px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease, transform .05s ease;
}
.nav a:hover{ background:rgba(255,255,255,.12); color:#fff; transform: translateY(-1px) }
.nav .right{ margin-left:auto }

/* ===== Cards: white with thick border + shadow ========================== */
.card{
  background:#fff;
  border:2px solid var(--brand-black);
  border-radius:20px;
  padding: clamp(16px, 2.6vw, 22px);
  box-shadow: var(--shadow-1);
}
.card--ghost{
  background:transparent;
  border:2px dashed var(--brand-black);
}

/* ===== Buttons: chunky pills =========================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h-button);
  padding:0 22px;
  border-radius:999px;
  border:2px solid var(--brand-black);
  background:var(--brand-black);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, var(--shadow-1);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn:disabled{ opacity:.6; cursor:not-allowed }

.btn--ghost{
  background:transparent; color:var(--brand-black);
  border-color:var(--brand-black);
}
.btn--danger{ background:var(--brand-red); color:#fff }
.btn--success{ background:#22c55e; color:#06130a }

/* Icon-only buttons */
.icon-btn{
  width:40px; height:40px;
  display:inline-grid; place-items:center;
  border-radius:12px; background:#fff; border:2px solid var(--brand-black);
  box-shadow: var(--shadow-1);
}

/* ===== Forms: bold borders on yellow =================================== */
.label{ color:var(--brand-black); font-size:14px; margin-bottom:6px; display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.05em }
.input, .select, .textarea{
  width:100%;
  height:var(--h-input);
  padding:0 14px;
  background:#fff;
  color:var(--text);
  border:2px solid var(--brand-black);
  border-radius:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-height:120px; padding:12px 14px; height:auto; resize:vertical }
.input::placeholder, .textarea::placeholder{ color:#646464 }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{
  border-color:var(--brand-red);
  box-shadow:0 0 0 4px rgba(239,59,45,.25);
}
.input--inline{ max-width:360px }

.input-wrap{ position:relative }
.input-wrap .prefix{ position:absolute; inset:0 auto 0 12px; display:grid; place-items:center; width:20px; color:#666 }
.input-wrap .suffix{ position:absolute; inset:0 12px 0 auto; display:grid; place-items:center; color:#666 }
.input-wrap .input{ padding-left:40px; padding-right:40px }

/* Switch */
.switch{
  --w: 52px; --h: 30px;
  inline-size: var(--w); block-size: var(--h);
  background: #fff;
  border:2px solid var(--brand-black);
  border-radius: var(--h);
  position:relative; cursor:pointer;
  box-shadow: var(--shadow-1);
}
.switch::after{
  content:""; position:absolute; inset:3px auto 3px 3px;
  inline-size: calc(var(--h) - 6px); block-size: calc(var(--h) - 6px);
  background: var(--brand-black); border-radius:50%; transition: transform .2s ease, background .2s ease;
}
.switch[aria-checked="true"]{ background: var(--brand-red) }
.switch[aria-checked="true"]::after{ transform: translateX(calc(var(--w) - var(--h))); background:#fff }

/* ===== Tables: strong separators ======================================= */
.table{ width:100%; border-collapse:collapse; font-size:15px; background:#fff; border:2px solid var(--brand-black); border-radius:16px; overflow:hidden; box-shadow: var(--shadow-1) }
.table th, .table td{ padding:14px; border-bottom:2px solid var(--brand-black); text-align:left; color:var(--brand-black) }
.table th{ font-weight:900; letter-spacing:.02em; text-transform:uppercase; background:#f6f6f6 }
.table tr:hover td{ background:rgba(0,0,0,.05) }
.table .num{ text-align:right; font-variant-numeric:tabular-nums }

/* ===== Badges / Pills =================================================== */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:2px solid var(--brand-black); background:#000; color:#fff; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em }
.badge--brand{ background:var(--brand-red); border-color:var(--brand-black); color:#fff }
.badge--danger{ background:#000; color:var(--brand-red) }

/* ===== Calendar ========================================================= */
.calendar{ --day: 56px; display:grid; gap:12px; grid-template-columns: repeat(7, 1fr) }
.calendar .cell{
  min-height: calc(var(--day) * 2.1);
  background:#fff;
  border:2px solid var(--brand-black);
  border-radius:16px;
  padding:10px;
  box-shadow: var(--shadow-1);
}
.calendar .cell .date{ color:#555; font-size:12px; margin-bottom:6px; font-weight:800; text-transform:uppercase }
.calendar .event{ display:block; margin:6px 0; padding:8px 10px; border-radius:999px; background:var(--brand-red); color:#fff; font-size:13px; font-weight:800 }

/* ===== Utilities ======================================================== */
.m-0{ margin:0 } .mt-1{ margin-top:8px } .mt-2{ margin-top:16px } .mt-3{ margin-top:24px }
.mb-1{ margin-bottom:8px } .mb-2{ margin-bottom:16px } .mb-3{ margin-bottom:24px }
.p-1{ padding:8px } .p-2{ padding:16px } .p-3{ padding:24px }
.center{ display:grid; place-items:center }
.right{ margin-left:auto }
.mono{ font-family:var(--mono) }
.muted{ color:#4a4a4a }
.hr{ height:2px; background:var(--brand-black); border:0; margin:16px 0; opacity:.25 }
.hide{ display:none !important }

/* Progress bar */
.progress{
  --pct: 40%;
  inline-size:100%; block-size:12px;
  background:#fff; border:2px solid var(--brand-black);
  border-radius:999px; overflow:hidden; box-shadow: var(--shadow-1)
}
.progress > span{
  display:block; block-size:100%; inline-size:var(--pct);
  background:linear-gradient(90deg, var(--brand-red-800), var(--brand-red));
}

/* Toast / notice */
.toast{
  position:fixed; inset:auto 16px 16px auto; z-index:50;
  background:#fff; color:var(--brand-black);
  border:2px solid var(--brand-black);
  border-radius:16px; padding:12px 16px; box-shadow: var(--shadow-2)
}

/* Modal */
.modal{ position:fixed; inset:0; z-index:60; display:none; background:rgba(0,0,0,.55) }
.modal.open{ display:grid; place-items:center }
.modal .dialog{
  width:min(720px, 92vw);
  background:#fff; border:2px solid var(--brand-black);
  border-radius:22px; padding:22px; box-shadow: var(--shadow-2)
}

/* Hero helpers for big headings like the screenshot */
.hero{ padding: clamp(28px, 6vw, 72px) 0; text-align:center }
.hero .headline{
  font-size: clamp(28px, 6vw, 64px);
  line-height:1.05; font-weight:900;
  text-transform:uppercase; letter-spacing:.02em;
  margin:10px 0 18px;
}
.hero .sub{ font-size: clamp(16px, 2.4vw, 22px); font-weight:650; letter-spacing:.03em }

/* Animations */
@media (prefers-reduced-motion: no-preference){
  .fade-in{ animation:fade .25s ease both }
  @keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
}

/* ===== Landing helpers (mobile-first) ================================== */
.hero-card{ max-width: 980px; margin: 0 auto }
.eyebrow{ text-transform: uppercase; font-weight: 900; letter-spacing: .12em; color:#000; opacity:.8 }
.display{ font-size: clamp(32px, 8vw, 72px); line-height:1.02; text-shadow: 0 3px 0 rgba(0,0,0,.1) }
.lead{ font-size: clamp(16px, 2.8vw, 22px) }

/* Buttons */
.btn-lg{ height: 56px; padding: 0 24px; font-size: 15px }

/* Stacks that adapt to mobile nicely */
.cta-stack{ display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center }
.chips{ display:flex; flex-wrap: wrap; gap:10px; justify-content:center }
.features .card{ display:flex; flex-direction:column }

/* Inline CTA row (wraps to column on small screens) */
.cta-inline{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* Extra breathing room on small screens */
@media (max-width: 640px){
  .container{ padding: 24px 16px }
  .card{ padding: 16px }
}




/*PL on traansactions page */
.pl-summary { display:flex; gap:12px; margin:12px 0; flex-wrap:wrap; }
.pl-box { flex:1 1 160px; border:1px solid #eee; border-radius:12px; padding:12px; background:#fafafa; }
.pl-box .pl-k { font-size:.9rem; opacity:.8; }
.pl-box .pl-v { font-weight:700; font-size:1.15rem; }
.pl-net { background:#f5f8ff; border-color:#e6edff; }

.pl-breakdown { margin-top:8px; }
.pl-tree { list-style:none; margin:.15rem 0 .15rem .75rem; padding-left:1rem; border-left:1px dashed #e1e1e1; }
.pl-tree.root { margin-left:0; }
.pl-item { display:flex; justify-content:space-between; align-items:center; margin:.2rem 0; }
.pl-name { font-weight:500; }
.pl-amt { font-variant-numeric: tabular-nums; }
.pl-amt.pos { color:#444; }      /* expenses (positive) */
.pl-amt.neg { color:#0a7b4f; }    /* income (negative) */
.pl-amt.zero { color:#888; }
@media (max-width:640px){
  .pl-item { gap:10px; }
}