/* ============================================================================
 *  pta-polish.css — the depth layer.
 *
 *  Loaded LAST, on top of style.css and each page's own <style>, so it can add
 *  finish without anyone having to touch the existing rules.
 *
 *  The rule it follows: every gradient here is nearly invisible on its own.
 *  What they do collectively is stop the interface reading as flat blocks of
 *  #252527 — surfaces catch a little light at the top, edges have a hairline,
 *  and things lift slightly when you touch them. That is where "premium"
 *  actually comes from; a visible gradient just looks like a gradient.
 *
 *  Nothing in here changes a text colour, so every contrast measurement taken
 *  against the token palette still holds.
 * ========================================================================== */

/* ── Page ground: one very soft pool of light, top-left ─────────────────── */
/* The light pool is painted by a fixed pseudo-element rather than
   background-attachment:fixed on the body. That property forces the whole
   page background to repaint on every scroll and is a known cause of blank
   or torn regions on long pages; a fixed ::before is composited once. */
body{ background: var(--bg); position: relative; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(115% 85% at 12% -8%, rgba(237,226,204,.045) 0%, transparent 55%);
}

/* ── Surfaces ────────────────────────────────────────────────────────────
   A 1px inset highlight along the top edge is what reads as "material".
   The gradient itself runs out by 45% so the body of the card stays flat and
   text keeps a uniform ground. */
.card, .pf-card, .pf-cell, .an-card, .stat-card, .kpi-card, .acc-card,
.tbl-wrap, .chart-card, .panel, .box, .mchip, .cons-pop, .sb-acc-inner{
  background-image: linear-gradient(180deg, rgba(237,226,204,.030) 0%, rgba(237,226,204,0) 45%);
  box-shadow:
    inset 0 1px 0 rgba(237,226,204,.055),
    0 1px 2px rgba(0,0,0,.30),
    0 8px 24px -16px rgba(0,0,0,.55);
}

/* Grid cells sit inside a shared border, so they take the highlight only. */
.pf-grid{
  background-image: linear-gradient(180deg, rgba(237,226,204,.022), rgba(237,226,204,0) 30%);
  box-shadow: inset 0 1px 0 rgba(237,226,204,.05), 0 10px 30px -20px rgba(0,0,0,.6);
}

/* ── Sidebar and topbar: a slow vertical fall, plus an edge ─────────────── */
.sidebar{
  background-image: linear-gradient(180deg, rgba(237,226,204,.032) 0%, rgba(237,226,204,0) 22%);
  box-shadow: inset -1px 0 0 rgba(237,226,204,.07);
}
.topbar{
  background-image: linear-gradient(180deg, rgba(237,226,204,.030), rgba(237,226,204,0));
  box-shadow: inset 0 -1px 0 rgba(237,226,204,.07), 0 6px 20px -14px rgba(0,0,0,.6);
  backdrop-filter: saturate(140%) blur(8px);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav-item{ transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.nav-item:hover{ transform: translateX(1px); }
.nav-item.active{
  background-image: linear-gradient(90deg, rgba(237,226,204,.13), rgba(237,226,204,.03));
  box-shadow: inset 0 1px 0 rgba(237,226,204,.08);
}

/* ── Buttons: the cream primary gets a real surface ─────────────────────── */
.btn-primary, .btn-grad, .plan-cta-primary, .btn-plan.btn-grad{
  background-image: linear-gradient(180deg, #F5EFE0 0%, var(--accent) 55%, #E2D6BE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 22px -14px rgba(237,226,204,.5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn-primary:hover, .btn-grad:hover, .plan-cta-primary:hover, .btn-plan.btn-grad:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(0,0,0,.35),
    0 16px 30px -16px rgba(237,226,204,.62);
}
.btn-primary:active, .btn-grad:active{ transform: translateY(0); }

.btn-secondary, .btn-outline, .plan-cta-secondary{
  background-image: linear-gradient(180deg, rgba(237,226,204,.055), rgba(237,226,204,.012));
  box-shadow: inset 0 1px 0 rgba(237,226,204,.07);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-secondary:hover, .btn-outline:hover, .plan-cta-secondary:hover{ transform: translateY(-1px); }

/* ── Tables: banding plus a readable hover ──────────────────────────────── */
.tbl tbody tr, table tbody tr{ transition: background .15s var(--ease); }
.tbl tbody tr:hover td, table tbody tr:hover td{ background: rgba(237,226,204,.045); }
.tbl thead th, table thead th{
  background-image: linear-gradient(180deg, rgba(237,226,204,.045), rgba(237,226,204,.012));
  box-shadow: inset 0 -1px 0 rgba(237,226,204,.10);
}

/* ── Outcome figures: a whisper of glow so P&L reads first ──────────────── */
.pf-val, .kpi-val, .stat-value, .dm-kpi-val{ letter-spacing:-.4px; }
[style*="--profit"], .txt-profit, .profit{ text-shadow: 0 0 22px rgba(34,197,94,.16); }
[style*="--loss"],   .txt-loss,   .loss  { text-shadow: 0 0 22px rgba(255,71,87,.16); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
input, select, textarea{
  background-image: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 60%);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(237,226,204,.14);
  outline: none;
}

/* ── Focus, for anyone navigating by keyboard ───────────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Section headings get a fading rule rather than a hard line ─────────── */
.pf-sec-ttl, .sec-title, .an-hdr{
  position: relative;
  padding-bottom: 9px;
}
.pf-sec-ttl::after, .sec-title::after, .an-hdr::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, rgba(237,226,204,.24), rgba(237,226,204,0) 65%);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(237,226,204,.30), rgba(237,226,204,.16));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(237,226,204,.42); }

/* ── Collapsed-sidebar tooltips ─────────────────────────────────────────── */
.sidebar.collapsed .nav-item{ position: relative; }
.sidebar.collapsed .nav-item > span:not(.nav-icon){
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
  display: block !important; width: max-content; max-width: 200px;
  background: var(--bg4); color: var(--t1);
  border: 1px solid var(--border2); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.85);
  opacity: 0; pointer-events: none; z-index: 500;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.sidebar.collapsed .nav-item:hover > span:not(.nav-icon),
.sidebar.collapsed .nav-item:focus-visible > span:not(.nav-icon){
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* Badges inside a collapsed item would float loose — hide them there. */
.sidebar.collapsed .pf-nav-badge{ display: none !important; }

/* ── Motion preferences respected ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .nav-item:hover, .btn-primary:hover, .btn-grad:hover{ transform: none; }
}


/* ── Type ───────────────────────────────────────────────────────────────
   Headings and figures on Sora; figures get tabular numerals so columns of
   numbers line up without needing a monospace face. */
body{ font-family: var(--font); }
h1,h2,h3,h4,h5,.sb-brand,.sb-name,.pf-sec-ttl,.sec-title{ font-family: var(--display); letter-spacing:-.015em; }
.pf-val,.kpi-val,.kpi2-val,.stat-val,.stat-value,.an-ss-v,.cal-stat-value,.imp-sum b,.dm-kpi-val{
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 700;
}
/* Genuine code — trade IDs, hashes, references — keeps a mono. */
code,.imp-sample,.mono{ font-family: var(--mono); }

/* ============================================================================
   DASHBOARD OVERVIEW + CALENDAR
   ========================================================================== */
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:18px}
.ov-card{background:var(--bg2);padding:18px 20px;min-height:104px;transition:background .18s var(--ease)}
.ov-card:hover{background:var(--bg3)}
.ov-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.085em;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.ov-val{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:25px;
  font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--t1)}
.ov-sub{font-size:11px;color:var(--t3);margin-top:7px;line-height:1.45}

.ov-card-gauge{display:flex;align-items:center;gap:12px}
.ov-gauge{width:64px;height:38px;flex:none}
.ov-arc{transition:stroke-dasharray .9s var(--ease)}

.ov-card-cons .ov-meter{position:relative;height:6px;border-radius:99px;background:var(--bg);
  margin:9px 0 0;box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.ov-meter-fill{height:100%;border-radius:99px;transition:width .9s var(--ease)}
.ov-meter-tgt{position:absolute;top:-3px;width:2px;height:12px;background:var(--t1);
  border-radius:2px;box-shadow:0 0 0 2px var(--bg2)}

/* Tooltip that is reachable by keyboard, not hover-only. */
.ov-hint{position:relative;color:var(--t3);cursor:help;display:inline-flex}
.ov-hint:hover,.ov-hint:focus-visible{color:var(--accent);outline:none}
.ov-tip{position:absolute;left:0;top:calc(100% + 7px);width:230px;z-index:60;
  background:var(--bg4);color:var(--t2);border:1px solid var(--border2);border-radius:9px;
  padding:9px 11px;font-size:11px;font-weight:400;line-height:1.5;text-transform:none;
  letter-spacing:0;box-shadow:0 14px 30px -12px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:.16s var(--ease)}
.ov-hint:hover .ov-tip,.ov-hint:focus-visible .ov-tip{opacity:1;visibility:visible;transform:none}

/* ── Calendar ───────────────────────────────────────────────────────────── */
.cal-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:16px;
  padding:18px;margin-bottom:18px}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-arrow{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--t2);background:var(--bg);border:1px solid var(--border);font-size:11px;
  text-decoration:none;transition:.16s var(--ease)}
.cal-arrow:hover{color:var(--t1);border-color:var(--border2);background:var(--bg3)}
.cal-month{font-family:var(--display);font-size:15px;font-weight:700;color:var(--t1);min-width:150px}
.cal-month-sum{display:flex;align-items:baseline;gap:9px;font-size:11px;color:var(--t3)}
.cal-month-sum b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}

.cal-body{display:grid;grid-template-columns:1fr 132px;gap:12px;align-items:start}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.09em;text-align:center;padding-bottom:3px}
.cal-cell{background:var(--bg);border:1px solid var(--border);border-radius:9px;
  min-height:70px;padding:7px 8px;display:flex;flex-direction:column;gap:2px;
  text-decoration:none;transition:.16s var(--ease)}
.cal-cell.cal-empty{background:transparent;border-color:transparent}
.cal-d{font-size:10.5px;font-weight:600;color:var(--t3)}
.cal-p{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:13.5px;
  font-weight:700;margin-top:auto;letter-spacing:-.02em}
.cal-m{font-size:9px;color:var(--t3)}
a.cal-cell:hover{transform:translateY(-1px);border-color:var(--border3)}
.cal-cell.is-win{background:var(--profit-bg);border-color:var(--profit-bdr)}
.cal-cell.is-win .cal-p{color:var(--profit)}
.cal-cell.is-win .cal-d{color:var(--profit)}
.cal-cell.is-loss{background:var(--loss-bg);border-color:var(--loss-bdr)}
.cal-cell.is-loss .cal-p{color:var(--loss)}
.cal-cell.is-loss .cal-d{color:var(--loss)}
.cal-cell.is-flat .cal-p{color:var(--t3)}

.cal-weeks{display:flex;flex-direction:column;gap:5px;padding-top:19px}
.cal-week{background:var(--bg);border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.cal-week-n{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em}
.cal-week b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}
.cal-week-d{font-size:9px;color:var(--t3)}

@media(max-width:900px){
  .cal-body{grid-template-columns:1fr}
  .cal-weeks{flex-direction:row;flex-wrap:wrap;padding-top:0}
  .cal-week{flex:1 1 120px;min-height:auto}
}
@media(max-width:560px){
  .cal-cell{min-height:56px;padding:5px}
  .cal-p{font-size:11px}
  .cal-m{display:none}
}

/* ============================================================================
   PAGE ENTRANCE
   One short, eased rise as a page settles. Elements marked .reveal start
   slightly low and fade up; data-delay staggers them so the page assembles
   rather than snapping in. Kept to 420ms — long enough to feel considered,
   short enough that it never delays reading.
   ========================================================================== */
@keyframes ptaRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal{animation:ptaRise .42s cubic-bezier(.22,.8,.28,1) both}
.reveal[data-delay="1"]{animation-delay:.06s}
.reveal[data-delay="2"]{animation-delay:.12s}
.reveal[data-delay="3"]{animation-delay:.18s}
.reveal[data-delay="4"]{animation-delay:.24s}
/* Charts and tables get the same treatment without needing markup changes. */
.chart-panel,.pf-grid,.tbl-wrap,.an-card,.imp-card{animation:ptaRise .42s cubic-bezier(.22,.8,.28,1) both}
.chart-panel:nth-of-type(2){animation-delay:.07s}

@media (prefers-reduced-motion: reduce){
  .reveal,.chart-panel,.pf-grid,.tbl-wrap,.an-card,.imp-card{animation:none}
  .ov-arc,.ov-meter-fill,.cons-meter-fill{transition:none}
}

/* All-accounts row in the switcher */
.sb-acc-all{border-bottom:1px solid var(--border);margin-bottom:3px;padding-bottom:7px}
.sb-acc-count{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--t3);
  background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:1px 7px}
.sb-acc-all.active .sb-acc-count{color:var(--accent);border-color:var(--border2)}

/* Account scope switch on the dashboard */
.scope-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.scope-tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--border);
  border-radius:11px;padding:3px;gap:2px}
.scope-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--t3);text-decoration:none;
  transition:.16s var(--ease);white-space:nowrap}
.scope-tab:hover{color:var(--t1)}
.scope-tab.on{background:var(--bg4);color:var(--t1);
  box-shadow:inset 0 1px 0 rgba(237,226,204,.08),0 1px 2px rgba(0,0,0,.3)}
.scope-n{font-size:9.5px;font-weight:700;background:var(--bg);border:1px solid var(--border);
  border-radius:99px;padding:1px 6px;color:var(--t3)}
.scope-tab.on .scope-n{color:var(--accent);border-color:var(--border2)}
.scope-warn{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.5;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-bdr);
  border-radius:9px;padding:8px 12px;max-width:560px}
@media(max-width:560px){.scope-tabs{width:100%}.scope-tab{flex:1;justify-content:center}}

/* ============================================================================
   FLUID LAYOUT
   The page was capped at 1380px and centred, which left very large empty
   margins on a wide monitor while the content stayed cramped. Width is now
   decided in ONE place — here — and everything scales continuously rather
   than jumping between a couple of breakpoints.
   ========================================================================== */
.page-content{
  /* Fills the screen, with side padding that grows with the viewport.
     The cap is generous rather than absent: past ~2200px a single row of text
     becomes genuinely hard to track across, so it stops there. */
  max-width: min(2200px, 100%);
  padding-left:  clamp(14px, 2.2vw, 44px);
  padding-right: clamp(14px, 2.2vw, 44px);
  margin: 0 auto;
}

/* Overview: there are exactly EIGHT cards, so the column count must divide
   into eight or the last row sits half empty. auto-fit produced five columns
   at 1500px, leaving a 5+3 split. Fixed steps of 2 and 4 always fill. */
.ov-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 1080px){ .ov-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ov-val{ font-size: clamp(21px, 1.55vw, 30px); }
.ov-card{ padding: clamp(14px, 1.1vw, 22px) clamp(15px, 1.25vw, 26px); }

/* Calendar: cells and the week column both grow with the page. */
.cal-wrap{ padding: clamp(14px, 1.2vw, 24px); }
.cal-body{ grid-template-columns: minmax(0,1fr) clamp(112px, 9.5vw, 190px); }
.cal-cell{ min-height: clamp(58px, 6.2vw, 104px); }
.cal-week{ min-height: clamp(58px, 6.2vw, 104px); }
.cal-p{ font-size: clamp(11px, .95vw, 16px); }
.cal-week b{ font-size: clamp(12px, 1.05vw, 18px); }
.cal-month{ font-size: clamp(14px, 1.1vw, 19px); }

/* Charts share the same fluid behaviour. */
.chart-grid{ grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Tables stay readable by scrolling inside their own box, never the page. */
.tbl-wrap, .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px){
  .cal-body{ grid-template-columns: 1fr; }
  .cal-weeks{ flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .cal-week{ flex: 1 1 132px; min-height: auto; }
}
@media (max-width: 560px){
  .cal-m{ display: none; }
  .cal-cell{ padding: 5px 6px; }
}

/* Hero three.js backdrop. Sits behind the copy, fades in only once WebGL has
   actually started, so a failed load leaves no empty box. */
.hero{position:relative;overflow:hidden}
.hero-three{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease)}
.hero-three.is-on{opacity:.55}
.hero-three canvas{display:block;width:100%;height:100%}
/* Everything in the hero stays above it, and the existing scrim still applies. */
.hero > *:not(.hero-three){position:relative;z-index:1}
@media (max-width:900px){ .hero-three{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-three{display:none} }

/* Gradient-clipped text must never be the ONLY thing making a heading visible.
   If the gradient fails to resolve, transparent fill leaves an invisible
   heading — so set a real colour first and let the clip enhance it. */
.hero-title-grad,.hero-stat-num,.cta-card-title,.gradient-text{
  color: var(--t1);
}
@supports (-webkit-background-clip: text) or (background-clip: text){
  .hero-title-grad,.hero-stat-num,.cta-card-title,.gradient-text{
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ── Final CTA card: one centred column ─────────────────────────────────
   The logo was an inline image sharing a line with the inline-flex badge,
   so the pair centred as a unit and neither sat on the card's axis. */
.cta-card > div{ display:flex; flex-direction:column; align-items:center; }
.cta-card-logo{ display:block; margin:0 auto 30px; }
.cta-card-title{ margin:0 auto 14px; max-width:18ch; }
.cta-card-sub{ margin:0 auto 32px; }
.cta-actions{ justify-content:center; }
.cta-note{ margin-top:18px; }