/* 10-28 DRAFT (Gerb): GerbFlow in the Tradrbook UI. Skin only: same pages, tabs, data and ids.
   Tokens copied from tapebook/web/public/css/tb.css: pure black, hairlines, 2px corners, Geist + Geist Mono,
   one green and one red for P&L, white as the only accent. Loaded LAST on each page so it wins.
   Remove this file + js/tb-motion.js (and their two tags) to go back to the current look. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap");

:root {
  --tb-bg: #000; --tb-panel: rgba(8, 8, 8, .86); --tb-panel2: #0d0d0d; --tb-line: #1f1f1f; --tb-line2: #2e2e2e;
  --tb-fg: #f4f4f4; --tb-mut: #a3a3a3; --tb-dim: #5a5a5a; --tb-white: #fff;
  --tb-up: #8ee3b1; --tb-upbg: rgba(142, 227, 177, .06); --tb-upline: rgba(142, 227, 177, .32);
  --tb-dn: #f08a8a; --tb-dnbg: rgba(240, 138, 138, .06); --tb-dnline: rgba(240, 138, 138, .32);
  --tb-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tb-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --tb-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;

  /* gerbflow.com marketing tokens (css/gf-2026.css) */
  --ink-0: #000 !important; --ink-1: #080808 !important; --ink-2: #0d0d0d !important; --ink-3: #151515 !important;
  --bone: #f4f4f4 !important; --bone-2: #a6a6a6 !important; --bone-3: #8c8c8c !important;
  --line: #1f1f1f !important; --line-2: #2e2e2e !important;
  --c-gp: #f4f4f4 !important; --t-gp: #fff !important;
  --f-display: var(--tb-sans) !important; --f-text: var(--tb-sans) !important;

  /* student portal tokens (students.html; plan-theme-0927.js sets these inline, !important wins) */
  --dark: #000 !important; --dark2: #080808 !important; --dark3: #0d0d0d !important;
  --muted: #8c8c8c !important; --text: #f4f4f4 !important; --text-soft: #a6a6a6 !important;
  --border: #1f1f1f !important; --radius: 2px !important;
}

html, body { background: var(--tb-bg) !important; color: var(--tb-fg); }
body, body *:not(svg):not(svg *):not(code):not(pre) { font-family: var(--tb-sans) !important; }
::selection { background: var(--tb-fg); color: #000; }

/* Display type: Tradrbook headings are 600, tight, never serif / condensed caps */
h1, h2, h3, .main-title, .profile-name, .panel-header h2, .ob-title, .sidebar-logo-text { font-weight: 600 !important; letter-spacing: -.02em !important; font-stretch: 100% !important; }
h1 em, h2 em { font-style: normal; color: var(--tb-mut); }
.sidebar-logo-text { color: var(--tb-fg) !important; letter-spacing: -.01em !important; font-size: 15px !important; }

/* Numbers: Geist Mono, tabular (every class that used Playfair for a figure) */
.community-stat-num, .jform-pnlbar-value, .dash-card-val, .dash-trade-pnl, .an-summary-val, .an-combo-stat-val,
.an-setup-pnl, .an-dd-val, .profile-stat-val, .cc-big, .jform-pnl-value, .entry-pnl, .daily-progress-text,
.stat-box-num, .result-value, .macro-num, .cal-day-pnl, .cal-sum-num, .lb-rank, .lb-value, .booking-day-num,
.slot-time, .ds-num, .n, .v, .num, [class*="-val"], [class*="-num"], [class*="pnl"]:not(.jform-pnlbar):not([class*="bar"]) {
  font-family: var(--tb-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em !important; font-weight: 600 !important;
}

/* Small caps labels = Tradrbook .lbl */
.eye, .k, .sidebar-section, .cal-day-header, .an-card-sub, .jr-label, .dash-card-label, .panel-header p.eyebrow,
[class*="eyebrow"], [class*="-eye"] {
  font-family: var(--tb-mono) !important; letter-spacing: .09em !important; text-transform: uppercase; color: var(--tb-mut) !important;
}

/* Corners: 2px everywhere; real circles (avatars, dots, rings, toggles) stay round */
*, *::before, *::after { border-radius: 2px !important; }
[class*="avatar"], [id*="avatar"], [class*="dot"], [class*="knob"], [class*="ring"], [class*="badge"]:empty,
[class*="level-orb"], [class*="lvl-orb"], [class*="-n"]:empty, .jform-sec-n, .toggle-slider::before, .switch span::before,
[style*="border-radius:50%"], [style*="border-radius: 50%"], #a11y-btn, .a11y-btn, [class*="a11y-fab"], [aria-label*="ccessibility"] {
  border-radius: 999px !important;
}

/* Cards / panels: black glass panel, one hairline, no glow */
.dash-card, .an-card, .form-card, .fact-card, .settings-section, .resource-block, .plan-card, .cc-row, .thread-post,
.lb-row, .achiev-card, .booking-day, .slot, .task-card, .card, [class*="-card"]:not([class*="cards"]):not([class*="-card-"]):not(.plan-chip) {
  background: var(--tb-panel) !important; border: 1px solid var(--tb-line) !important; box-shadow: none !important;
}
[class*="-card"]:hover, .dash-card:hover { border-color: var(--tb-line2) !important; }

/* Rail */
.sidebar { background: var(--tb-bg) !important; border-right: 1px solid var(--tb-line) !important; }
.sidebar-logo { border-bottom: 0 !important; }
.sidebar-item { color: #d4d4d4 !important; font-weight: 500 !important; background: transparent !important; }
.sidebar-section { color: #8f8f8f !important; }
.sidebar-item:hover { background: var(--tb-panel2) !important; color: var(--tb-fg) !important; }
.sidebar-item.active { color: #fff !important; background: rgba(var(--gold-rgb), .1) !important; box-shadow: inset 2px 0 0 var(--gold) !important; }
.sidebar-icon { filter: grayscale(.35); opacity: 1; }
.sidebar-item.active .sidebar-icon { opacity: 1; }

/* Buttons: primary = white on black text, secondary = hairline */
.submit-btn, .btn-primary, .gf-btn--gold, .btn--gold, .nav-cta, [class*="btn-gold"], [class*="cta-gold"],
[style*="background:var(--gold)"], [style*="background: var(--gold)"], [style*="gradient(135deg,var(--gold)"], [style*="gradient(135deg, var(--gold)"] {
  background: var(--gold) !important; color: #000 !important; border-color: var(--gold) !important; box-shadow: none !important;
  font-weight: 600 !important; opacity: 1 !important; filter: none !important;
}
.submit-btn:hover, .btn-primary:hover { background: var(--gold-light) !important; }
/* Gerb 10-28: Log Trade / Next never look grayed out; the hint line under the step says what's missing */
.submit-btn:disabled, .ts-next:disabled, .ts-next[disabled] { opacity: 1 !important; cursor: not-allowed; }
.ts-next { background: var(--gold) !important; border-color: var(--gold) !important; color: #000 !important; font-weight: 600 !important; opacity: 1 !important; }

/* Inputs */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
  background: var(--tb-panel2) !important; border: 1px solid var(--tb-line2) !important; color: var(--tb-fg) !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold) !important; outline-offset: 2px;
}

/* Chips / segmented: off = hairline, on = solid white (Tradrbook filters) */
.tagchip, .jform-chip, .an-mode-btn, .eq-range-btn, .theme-btn, [class*="chip"]:not(.plan-chip), [class*="seg"] button {
  background: transparent !important; border: 1px solid var(--tb-line2) !important; color: var(--tb-mut) !important;
}
.tagchip.on, .jform-chip.on, .an-mode-btn.on, .eq-range-btn.on, .eq-range-btn.active, [class*="chip"].on, [class*="chip"].active,
[aria-pressed="true"], [aria-selected="true"][role="tab"] {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #000 !important;
}

/* P&L colours: the portal's old greens/reds (and JS inline ones) become Tradrbook up/dn */
.pos, .green, .win, .up, [style*="#7ecf7e"], [style*="rgb(126, 207, 126)"], [style*="#2FD18B"], [style*="#4ade80"] { color: var(--tb-up) !important; }
.neg, .red, .loss, .dn, [style*="#e8857a"], [style*="rgb(232, 133, 122)"], [style*="#E5484D"], [style*="#f87171"] { color: var(--tb-dn) !important; }
.jform-pnlbar { background: var(--tb-upbg) !important; border: 1px solid var(--tb-upline) !important; }
.jform-pnlbar.neg { background: var(--tb-dnbg) !important; border-color: var(--tb-dnline) !important; }
.jform-dirbtn.pos.on { background: var(--tb-upbg) !important; border-color: var(--tb-up) !important; color: var(--tb-up) !important; }
.jform-dirbtn.neg.on { background: var(--tb-dnbg) !important; border-color: var(--tb-dn) !important; color: var(--tb-dn) !important; }

/* Calendar days: Tradrbook day tiles (green / red top rule instead of filled tiles) */
.cal-day.green, .cal-day.win, .cal-day.pos, .cal-day[class*="profit"] { background: #0a0a0a !important; box-shadow: inset 0 2px 0 var(--tb-up) !important; }
.cal-day.red, .cal-day.loss, .cal-day.neg { background: #0a0a0a !important; box-shadow: inset 0 2px 0 var(--tb-dn) !important; }

/* Progress / meters: white fill on a hairline track */
[class*="progress"] > [class*="fill"], [class*="xp-fill"], [class*="bar-fill"], .meter i { background: var(--plan-grad, var(--gold)) !important; }

/* Level badge + XP bar: white, no gold gradient */
.lv-badge { background: var(--plan-grad, var(--gold)) !important; color: #000 !important; box-shadow: none !important; border-radius: 2px !important; font-family: var(--tb-mono) !important; }
.lv-track { background: var(--tb-panel2) !important; border: 1px solid var(--tb-line) !important; }
.lv-fill { background: var(--plan-grad, var(--gold)) !important; }
.lv-wrap { background: var(--tb-panel) !important; border: 1px solid var(--tb-line) !important; }

/* Accessibility button: black chip with a hairline, not a gold coin */
:root { --a11y-accent: #f4f4f4 !important; }
#a11y-btn { background: #000 !important; color: var(--tb-fg) !important; border: 1px solid var(--tb-line2) !important; box-shadow: none !important; }

/* Header pills (Refresh / Report card / Live): Tradrbook hairline buttons */
.dash-header-right > button, .dash-header-right > a, .panel-header button { background: transparent !important; border: 1px solid var(--tb-line2) !important; color: var(--tb-fg) !important; }
@media (max-width: 760px) { .dash-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-right: 56px; } .dash-header-right { flex-wrap: wrap !important; gap: 6px !important; } .dash-header-right > * { white-space: nowrap; } }
.booking-day.has-slots, .booking-day.available, [class*="cal-day"].available { box-shadow: inset 0 -2px 0 var(--tb-up) !important; }
.mobile-menu-btn { background: #000 !important; color: var(--tb-fg) !important; border: 1px solid var(--tb-line2) !important; box-shadow: 0 10px 30px rgba(0,0,0,.6) !important; }
svg text { font-family: var(--tb-sans) !important; }

/* Tables */
th { font-family: var(--tb-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-dim) !important; font-weight: 500 !important; }
td, th { border-color: var(--tb-line) !important; }

/* Marketing site: no gold steel wallpaper, no gold glows */
#gf-steel { display: none !important; }
[class*="glow"], .gf-hero h1 span, .hero-title span { text-shadow: none !important; }

/* Modals / drawers / popups: Tradrbook drawer */
[class*="modal"] > div, [class*="popup"]:not([class*="popup-"]), [class*="-sheet"], .ob-card, #push-ask > div {
  background: var(--tb-panel2) !important; border: 1px solid var(--tb-line2) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .7) !important;
}

/* Scrollbars */
* { scrollbar-color: var(--tb-line2) transparent; }

/* Motion (paired with js/tb-motion.js): springy hover lift + press squish, Liquid Journal style.
   --tb-spring is replaced at runtime with a sampled spring linear() where the browser supports it. */
.panel.active { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .dash-card, .an-card, .form-card, .fact-card, .resource-block, .cc-row, .lb-row, .thread-post, .achiev-card,
  .booking-day, .slot, .task-card, [class*="-card"]:not([class*="cards"]):not([class*="-card-"]) {
    transition: transform .55s var(--tb-spring), border-color .2s ease !important;
  }
  .dash-card:hover, .an-card:hover, .fact-card:hover, .resource-block:hover, .booking-day:hover, .slot:hover,
  .task-card:hover, .achiev-card:hover, [class*="-card"]:not([class*="cards"]):not([class*="-card-"]):hover { transform: translateY(-3px); }
  button, .btn, [class*="btn"], .sidebar-item, a[class*="cta"], [role="button"] {
    transition: transform .45s var(--tb-spring), background-color .15s ease, color .15s ease, border-color .15s ease !important;
  }
  button:active, .btn:active, [class*="btn"]:active, .sidebar-item:active, a[class*="cta"]:active, [role="button"]:active,
  [class*="-card"]:active { transform: scale(.96) !important; transition-duration: .08s !important; }
  /* scroll reveals on the marketing pages (js/gf-motion.js) get the same spring */
  .gf-reveal, .ga-rise { transform: translate3d(0, 22px, 0) scale(.97); transition: opacity .35s ease, transform .8s var(--tb-spring) !important; }
}

/* Liquid Journal modals: heavy frosted backdrop behind every portal dialog */
#edit-modal, #profile-modal, .pk-back, .rc-back, .tj-shot-back, .feed-overlay {
  backdrop-filter: blur(14px) saturate(.9) !important; -webkit-backdrop-filter: blur(14px) saturate(.9) !important;
}

/* Gerb 10-28 corrections: plan color on stat highlights; Settings = soft surfaces, not hard boxes */
.dash-card-val.gold, .gold, .plan-chip { color: var(--gold) !important; }
#panel-settings .form-card, #panel-settings .plan-card {
  background: rgba(255, 255, 255, .028) !important; border: 0 !important; border-radius: 14px !important;
  padding: 22px 24px !important; margin-bottom: 14px !important;
}
#panel-settings .form-card .settings-section {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 22px !important;
}
#panel-settings .form-card .settings-section:last-child { margin-bottom: 0 !important; }
#panel-settings .plan-card::before { border-radius: 14px 0 0 14px !important; }
#panel-settings .settings-section h3 { color: var(--tb-fg) !important; font-size: 15px !important; }
#panel-settings .settings-section p, #panel-settings label { color: #b3b3b3 !important; }
#panel-settings input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), #panel-settings select, #panel-settings textarea {
  background: rgba(255, 255, 255, .05) !important; border: 1px solid transparent !important; border-radius: 10px !important;
}
#panel-settings input:focus { border-color: rgba(var(--gold-rgb), .6) !important; }
#panel-settings button, #panel-settings .submit-btn, #panel-settings a.submit-btn { border-radius: 10px !important; }
#panel-settings input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; border-radius: 5px !important; }
.lock-note a { color: var(--gold) !important; font-weight: 600; text-decoration: none; }
#j-trade-panel > .jform-sec.ts-locked { opacity: .7 !important; }