/* Pennington Futures — reporting site
   Dark mode only — locked, no toggle. */

:root{
  --bg:#0b1220;
  --surface:#121b2f;
  --surface-2:#111a33;
  --text:#e5e7eb;
  --muted:#aab3c2;
  --border:rgba(229,231,235,.14);
  --shadow:0 18px 30px rgba(0,0,0,.35);
  --accent:#8b5cf6;
  --accent-2:#60a5fa;
  --gain:#22c55e;
  --loss:#ef4444;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  /* Respect iOS safe areas (notches, home indicator) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* When installed as a PWA on iOS with black-translucent status bar,
     the header sits under the status bar — push it down. */
  padding-top: env(safe-area-inset-top);
}

a{ color:inherit; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.site-header,
.nav,
.nav-links,
.nav-actions,
.nav-theme-toggle,
.nav-theme-icon,
.nav-theme-label,
.hamburger { display: none !important; }

/* =========================================================
   Login overlay
   =========================================================
   Shown on every visit. Hides the dashboard until the user enters the
   shared password and the server creates a session. The body gets
   .pre-auth while the page is mounting so there's no flash of dashboard
   content for unauthenticated visitors.
*/
body.pre-auth main,
body.pre-auth footer{
  visibility: hidden;
}
.login-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(900px 480px at 30% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    radial-gradient(900px 480px at 75% 80%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 65%),
    var(--bg);
  /* Respect iOS safe areas */
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.login-overlay[hidden]{ display: none !important; }

.login-card{
  width: min(420px, 100%);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 1.1rem;
  padding: 1.75rem 1.5rem;
  box-shadow:
    0 22px 40px rgba(0, 0, 0, .35),
    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-title{
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
}
.login-sub{
  margin: -.5rem 0 .25rem;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
}
.login-field{
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.login-label{
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.login-field input,
.login-field select{
  appearance: none;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: .15em;
  min-height: 48px;
}
.login-field select{
  /* Selects don't get letter-spacing — text gets clipped on iOS otherwise */
  letter-spacing: normal;
  /* Custom dropdown chevron, since appearance:none kills the native one */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
  cursor: pointer;
}
.login-field select:disabled{
  opacity: .65;
  cursor: not-allowed;
}
.login-field input:focus,
.login-field select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.login-submit{
  font-size: 1rem;
  padding: .85rem 1rem;
  min-height: 48px;
  margin-top: .25rem;
}
.login-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}
.login-error{
  margin: 0;
  color: var(--loss);
  font-weight: 700;
  font-size: .9rem;
  min-height: 1.2em;
}
.login-error.success{
  color: var(--gain);
}

/* Setup overlay (set / change password) — uses .login-overlay base styles
   and adds a couple of layout extras for the multiple-field form. */
.setup-overlay .login-card{
  gap: .85rem;
}
/* When the card has tabs, give the title a tighter bottom margin so the
   tab strip sits close to it. */
.setup-card .login-title{ margin-bottom: 0; }

.setup-tabs{
  display: flex;
  gap: .25rem;
  padding: .25rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: .75rem;
  margin-bottom: .25rem;
}
.setup-tab{
  flex: 1 1 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  padding: .55rem .5rem;
  border-radius: .5rem;
  cursor: pointer;
  min-height: 40px;
}
.setup-tab:hover{ color: var(--text); }
.setup-tab.is-active{
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.setup-pane{
  display: none;
  flex-direction: column;
  gap: .85rem;
}
.setup-pane.is-active{
  display: flex;
}

.setup-actions{
  display: flex;
  gap: .5rem;
  margin-top: .25rem;
}
.setup-submit,
.api-submit{
  flex: 1;
  font-size: 1rem;
  padding: .85rem 1rem;
  min-height: 48px;
}
.setup-cancel,
.api-cancel{
  font-size: 1rem;
  padding: .85rem 1rem;
  min-height: 48px;
}

/* Footer copyright easter egg — feels tappable but isn't visually flashy.
   Suppresses iOS tap highlight + text selection so 5 quick taps register
   cleanly without the OS jumping in to select text. */
.footer-copyright{
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:.75rem;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}

.btn-accent{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:white;
  box-shadow:var(--shadow);
}

.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}

.btn-ghost:hover{
  background:color-mix(in srgb, var(--surface) 65%, transparent);
}

main{ display:block; }

.hero{
  padding:1.25rem 1rem .5rem;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 420px at 80% 10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%);
}

.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:block;
}

/* Kept for backwards compatibility but the panel is now empty */
.hero-panel{ display:none; }

.badge{
  display:inline-block;
  font-weight:800;
  font-size:.85rem;
  color:color-mix(in srgb, var(--text) 85%, transparent);
  background:color-mix(in srgb, var(--surface) 65%, transparent);
  border:1px solid var(--border);
  padding:.35rem .6rem;
  border-radius:999px;
  margin:0 0 .9rem;
}

.hero h1{
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  line-height:1;
  margin:0 0 1.25rem;
  letter-spacing:-.025em;
  font-weight:900;
  color: var(--text);
}

.tagline{
  margin: -.5rem 0 1.25rem;
  font-size: clamp(.9rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}

.lede{
  margin:0 0 .75rem;
  color:var(--muted);
  font-size:1.05rem;
  max-width:52ch;
}

/* --- Headline balance block in hero --- */
.balance-block{
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .14),
    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  max-width: 420px;
}
.balance-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.balance-row.sub{
  margin-top:.35rem;
  padding-top:.55rem;
  border-top:1px dashed var(--border);
}
.balance-label{
  color:var(--muted);
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.balance-value{
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing:-.01em;
  font-variant-numeric: tabular-nums;
}
.balance-delta{
  font-weight:800;
  font-variant-numeric: tabular-nums;
}
.balance-delta.gain{ color:var(--gain); }
.balance-delta.loss{ color:var(--loss); }

.hero-cta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Section tabs (View performance / Recent activity) -- act as toggles
   between the two main content panels below. */
.section-panel{ display: none; }
.section-panel.is-active{ display: block; }

.section-tab{ position: relative; }
/* Make the active tab visually pop more than the inactive one — even when
   they're both .btn-accent or one is .btn-ghost, the active state needs
   to read clearly. */
.btn-ghost.section-tab.is-active{
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.btn-accent.section-tab:not(.is-active){
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

.tiny{
  margin:1.1rem 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.hero-panel{
  display:flex;
  justify-content:flex-end;
}

.panel-card{
  width:min(360px, 100%);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.1rem;
  box-shadow:var(--shadow);
}

.panel-title{
  font-weight:800;
  color:var(--muted);
  margin-bottom:.9rem;
}

.section{
  padding:2.5rem 1rem;
}

/* Active panel (selected via the section-tab buttons in the hero) sits
   tighter against the buttons above */
.section-panel{ padding-top: .5rem; }

.section-inner{
  max-width:1100px;
  margin:0 auto;
}

.section h2{
  margin:0;
  font-size:1.8rem;
  letter-spacing:-.01em;
}

.section-sub{
  margin:.35rem 0 1.5rem;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}

.grid.two{
  grid-template-columns:repeat(2, 1fr);
}

.grid.stats{
  grid-template-columns: repeat(3, 1fr);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--shadow);
}

.card h3{ margin:.1rem 0 .5rem; }
.card p{ margin:0; color:var(--muted); }

/* --- Stat cards (DTD/WTD/MTD/YTD) --- */
.stat-card{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  position:relative;
  overflow:hidden;
}
.stat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.stat-head h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.04em;
}
.stat-tag{
  font-size:.7rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.2rem .5rem;
  border:1px solid var(--border);
  border-radius:999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.stat-value{
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight:900;
  letter-spacing:-.01em;
  font-variant-numeric: tabular-nums;
  /* Prevent overflow on narrow screens — let the value shrink rather than
     break the card layout. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.stat-sub{
  font-weight:700;
  font-size:.95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stat-card.gain .stat-value,
.stat-card.gain .stat-sub{ color: var(--gain); }
.stat-card.loss .stat-value,
.stat-card.loss .stat-sub{ color: var(--loss); }

.spark{
  width:100%;
  height: 60px;
  margin-top:.4rem;
  display:block;
  overflow:visible;
}
.spark-line{
  fill:none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark-area{
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke:none;
}
.stat-card.gain .spark-line{ stroke: var(--gain); }
.stat-card.gain .spark-area{ fill: color-mix(in srgb, var(--gain) 18%, transparent); }
.stat-card.loss .spark-line{ stroke: var(--loss); }
.stat-card.loss .spark-area{ fill: color-mix(in srgb, var(--loss) 18%, transparent); }

/* --- P&L chart card --- */
.chart-card{
  margin-top:1.5rem;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.chart-head h3{ margin:0; }
.chart-head .section-sub{ margin:.25rem 0 0; }

.range-tabs{
  display:inline-flex;
  gap:.25rem;
  padding:.25rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border:1px solid var(--border);
  border-radius:.75rem;
}
.range-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:.85rem;
  padding:.4rem .75rem;
  border-radius:.5rem;
  cursor:pointer;
  letter-spacing:.04em;
}
.range-tab:hover{ color: var(--text); }
.range-tab.is-active{
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.pnl-chart{
  width:100%;
  height: 320px;
  display:block;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius:.9rem;
  border:1px solid var(--border);
  overflow:visible;
}
.pnl-grid path{
  stroke: color-mix(in srgb, var(--muted) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill:none;
}
.pnl-axes text{
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pnl-zero{
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  fill:none;
}
.pnl-line{
  fill:none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pnl-area{ stroke:none; }
.pnl-dot{
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 2;
}

/* --- Activity --- */
.kv-list{
  list-style:none;
  margin:.4rem 0 0;
  padding:0;
}
.kv-list li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
  border-bottom:1px dashed var(--border);
  color: var(--muted);
  font-weight:600;
}
.kv-list li:last-child{ border-bottom:0; }
.kv-list strong{
  color: var(--text);
  font-weight:800;
  font-variant-numeric: tabular-nums;
}

.trade-list{
  list-style:none;
  margin:.4rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.trade-list li{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:.75rem;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.trade-side{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  padding:.18rem .5rem;
  border-radius:999px;
  border:1px solid var(--border);
}
.trade-side.long{ color: var(--gain); border-color: color-mix(in srgb, var(--gain) 45%, var(--border)); }
.trade-side.short{ color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, var(--border)); }
.trade-mid{
  display:flex;
  flex-direction:column;
}
.trade-symbol{ font-weight:800; }
.trade-meta{ color: var(--muted); font-size:.8rem; }
.trade-pnl{
  font-weight:800;
  font-variant-numeric: tabular-nums;
}
.trade-pnl.gain{ color: var(--gain); }
.trade-pnl.loss{ color: var(--loss); }

/* =========================================================
   P&L Calendar
   ========================================================= */
.calendar-card{
  margin-top: 1.5rem;
}

.trades-card{
  margin-top: 1.5rem;
}
.trades-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  /* Match the inner padding of the trade rows below so the date and the
     P&L number visually stack with the row text, not the card edge. */
  padding: 0 .75rem;
  margin-bottom: 1.25rem;
}
.trades-head h3{
  margin: 0;
}
.trades-stats{
  margin: 0;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trades-stats strong{
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: .15rem;
}
.trades-stats strong.gain{ color: var(--gain); }
.trades-stats strong.loss{ color: var(--loss); }
.trades-stats .sep{ opacity: .5; margin: 0 .15rem; }

.trades-empty{
  margin: .5rem 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: .9rem;
}
.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.5rem;
}
.cal-title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.cal-nav{
  appearance:none;
  background: transparent;
  border:1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: .6rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cal-nav:hover{
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.cal-nav:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.cal-summary{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}
.cal-summary .kv{
  display:inline-flex;
  gap:.35rem;
  align-items:baseline;
}
.cal-summary strong{
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cal-summary strong.gain{ color: var(--gain); }
.cal-summary strong.loss{ color: var(--loss); }

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:.4rem;
}
.cal-dow{
  text-align:center;
  font-size:.7rem;
  font-weight:800;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.25rem 0;
}
.cal-day{
  position: relative;
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.4rem .45rem;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  min-height: 64px;
  display:flex;
  flex-direction:column;
  font-variant-numeric: tabular-nums;
  /* Prevent any inner content from blowing out the cell */
  overflow: hidden;
  min-width: 0;
}
/* Day cells with data are clickable */
.cal-day.has-data{
  cursor: pointer;
  transition: transform .08s ease;
}
.cal-day.has-data:hover{
  transform: translateY(-1px);
}
.cal-day.has-data:active{
  transform: translateY(0);
}
.cal-day .cal-pnl,
.cal-day .cal-trades{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day .cal-dnum{
  font-size:.8rem;
  font-weight:700;
  color: var(--muted);
  margin-bottom:.15rem;
}
.cal-day .cal-pnl{
  font-size:.8rem;
  font-weight:800;
  line-height:1.1;
}
.cal-day .cal-trades{
  font-size:.7rem;
  font-weight:600;
  color: var(--muted);
  margin-top: auto;
}
.cal-day.outside{
  opacity: .35;
}
.cal-day.empty{
  background: transparent;
  border-color: transparent;
}
.cal-day.gain{
  background: color-mix(in srgb, var(--gain) 22%, transparent);
  border-color: color-mix(in srgb, var(--gain) 45%, var(--border));
}
.cal-day.gain .cal-dnum{ color: color-mix(in srgb, var(--gain) 70%, var(--text)); }
.cal-day.gain .cal-pnl{ color: var(--gain); }
.cal-day.gain .cal-trades{ color: color-mix(in srgb, var(--gain) 50%, var(--muted)); }

.cal-day.loss{
  background: color-mix(in srgb, var(--loss) 22%, transparent);
  border-color: color-mix(in srgb, var(--loss) 45%, var(--border));
}
.cal-day.loss .cal-dnum{ color: color-mix(in srgb, var(--loss) 70%, var(--text)); }
.cal-day.loss .cal-pnl{ color: var(--loss); }
.cal-day.loss .cal-trades{ color: color-mix(in srgb, var(--loss) 50%, var(--muted)); }

/* Selected day (clicked from the calendar) gets the prominent accent halo. */
.cal-day.selected{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Today gets a subtle dot in the corner so you can tell it apart. */
.cal-day.today::after{
  content: "";
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Tighter on mobile */
@media (max-width: 600px){
  .cal-grid{ gap: .25rem; }
  .cal-day{
    min-height: 54px;
    padding:.3rem .25rem;
  }
  .cal-day .cal-dnum{ font-size: .65rem; }
  .cal-day .cal-pnl{ font-size: .68rem; letter-spacing: -.02em; }
  .cal-day .cal-trades{ font-size: .58rem; }
}
/* Really narrow phones — drop the trade count to give the P&L the full cell */
@media (max-width: 380px){
  .cal-day .cal-trades{ display: none; }
  .cal-day{ min-height: 46px; }
}

.footer{
  border-top:1px solid var(--border);
  padding:1.6rem 1rem;
  /* Keep footer content above the iOS home indicator */
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.footer a{ text-decoration:none; font-weight:700; }
.footer a:hover{ color:var(--text); }
.dot{ opacity:.55; }

/* Responsive */
@media (max-width: 1000px){
  .grid.stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .grid.two{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  /* nothing nav-specific needed anymore — menu is always a dropdown */

  .pnl-chart{ height: 260px; }
}
@media (max-width: 520px){
  .grid.stats{ grid-template-columns: 1fr; }

  /* Keep label and value side-by-side, but allow the value to shrink. */
  .balance-value{ font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}

/* Phones in landscape: re-spread the stat cards horizontally and reduce
   vertical padding (height is the limiting dimension when rotated). */
@media (max-width: 900px) and (orientation: landscape){
  .grid.stats{ grid-template-columns: repeat(3, 1fr); }
  .hero{ padding-top: .75rem; padding-bottom: .25rem; }
  .section{ padding-top: 1rem; padding-bottom: 1rem; }
}


/* --- Sticky/tech hero background + candlestick chart (preserved) --- */
.hero{
  position: relative;
  overflow: clip;
}

.hero-bg{
  position:absolute;
  inset:-40vh -10vw -40vh -10vw;
  z-index:0;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(900px 420px at 80% 10%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 65%, transparent), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2399a3b3' stroke-opacity='0.18'%3E%3Cpath d='M0 20H120M0 60H120M0 100H120'/%3E%3Cpath d='M20 0V120M60 0V120M100 0V120'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,200px 200px;
  background-position:left top,right top,center top,0 0;
  transform: translateZ(0);
  will-change: transform;
  background-attachment: scroll, scroll, scroll, fixed;
}

.hero-inner{ position: relative; z-index:1; }
.hero::before{ opacity: 0 !important; }

.panel-tech{
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.candle-chart{
  width:100%;
  height:auto;
  display:block;
  margin-top:.25rem;
  border-radius:.9rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border:1px solid var(--border);
}
.candle-chart .gridlines path{
  stroke: color-mix(in srgb, var(--muted) 35%, transparent);
  stroke-width:1;
}
.candle-chart .trend{
  fill:none;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width:2.2;
  opacity:.75;
}
.candle-chart .labels text{
  fill: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.candle-chart .wick{
  stroke-width:2.2;
  stroke-linecap:round;
}
.candle-chart .body{ stroke: rgba(0,0,0,.12); stroke-width:1; }
.candle-chart .up{ stroke: color-mix(in srgb, var(--accent-2) 70%, #22c55e 30%); }
.candle-chart .down{ stroke: color-mix(in srgb, var(--accent) 55%, #ef4444 45%); }
.candle-chart rect.up{ fill: color-mix(in srgb, var(--accent-2) 55%, #22c55e 45%); }
.candle-chart rect.down{ fill: color-mix(in srgb, var(--accent) 45%, #ef4444 55%); }

.panel-meta{
  display:flex;
  gap:.45rem;
  margin-top:.85rem;
  flex-wrap:wrap;
}
.chip{
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  color: var(--muted);
}

/* Status pill (live / sample / error) shown in the hero "Last updated" line */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.18rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  color: var(--muted);
  margin-right:.4rem;
  vertical-align: 1px;
}
.status-pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--muted);
}
.status-pill[data-state="live"]{
  color: var(--gain);
  border-color: color-mix(in srgb, var(--gain) 45%, var(--border));
  background: color-mix(in srgb, var(--gain) 10%, transparent);
}
.status-pill[data-state="live"]::before{
  background: var(--gain);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gain) 60%, transparent);
  animation: pulse 1.8s ease-out infinite;
}
.status-pill[data-state="error"]{
  color: var(--loss);
  border-color: color-mix(in srgb, var(--loss) 45%, var(--border));
  background: color-mix(in srgb, var(--loss) 10%, transparent);
}
.status-pill[data-state="error"]::before{ background: var(--loss); }
.status-pill[data-state="loading"]::before{
  background: var(--accent);
  animation: pulse 1.2s ease-out infinite;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: .85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* =========================================================
   PWA — install button + iOS install hint banner
   ========================================================= */

/* Android / desktop install button (hidden until beforeinstallprompt fires).
   Sits inline next to the LIVE status pill / Last updated text. */
.install-btn{
  font-size:.78rem;
  padding:.32rem .65rem;
  margin-left:.5rem;
  vertical-align: 1px;
  font-weight:700;
  letter-spacing:.04em;
}
.install-btn[hidden]{ display:none !important; }

/* iOS "Add to Home Screen" hint */
.ios-install-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: .75rem;
  /* Lift above the iOS home indicator */
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.ios-install-banner[hidden]{ display:none; }
.ios-install-inner{
  pointer-events: auto;
  width: min(560px, calc(100% - .5rem));
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem .9rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: saturate(150%) blur(14px);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.ios-install-banner.show .ios-install-inner{
  transform: translateY(0);
  opacity: 1;
}
.ios-install-icon{
  width:44px;
  height:44px;
  border-radius:.6rem;
  flex-shrink:0;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.ios-install-text{
  display:flex;
  flex-direction:column;
  font-size:.9rem;
  line-height:1.3;
  flex:1;
  min-width: 0;
}
.ios-install-text strong{
  font-weight:800;
  margin-bottom:.1rem;
}
.ios-install-text span{ color: var(--muted); }
.ios-install-text em{ color: var(--text); font-style: normal; font-weight:700; }
.ios-share{
  display:inline-flex;
  align-items:center;
  vertical-align: -3px;
  padding:.05rem .25rem;
  margin: 0 .1rem;
  color: var(--accent);
  border:1px solid var(--border);
  border-radius:.4rem;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.ios-install-close{
  appearance:none;
  border:0;
  background:transparent;
  color: var(--muted);
  font-size:1.4rem;
  line-height:1;
  width:36px;
  height:36px;
  border-radius:.6rem;
  cursor:pointer;
  flex-shrink:0;
}
.ios-install-close:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}

/* =========================================================
   Mobile polish — bigger tap targets, denser spacing
   (44x44 minimum recommended by Apple's HIG)
   ========================================================= */
@media (max-width: 768px){
  /* Bigger CTA buttons */
  .btn{
    padding: .75rem 1rem;
    min-height: 44px;
  }

  /* Bigger range tabs (DTD/WTD/MTD/YTD) */
  .range-tabs{
    width: 100%;
    justify-content: space-between;
  }
  .range-tab{
    flex: 1 1 0;
    padding: .65rem .5rem;
    min-height: 44px;
    font-size: .9rem;
  }

  /* Hide the install button label text on tiny screens; keep the icon */
  .install-btn span:last-child{ display:none; }
  .install-btn{ min-width: 44px; min-height: 44px; padding:.55rem .7rem; }

  /* Reserve space for the iOS install banner so content doesn't sit under it */
  body.ios-banner-visible{ padding-bottom: 110px; }
}

/* When the app is launched standalone (installed PWA), hide the install
   affordances entirely — they're irrelevant inside the installed app. */
@media all and (display-mode: standalone){
  .install-btn{ display: none !important; }
  .ios-install-banner{ display: none !important; }
}