/* ============================================================
   WEALTH HUB — "printout & blue screen" theme
   Loaded after each page's own <style>, so these tokens win.
   Light: 1980s fanfold printout, navy ribbon ink, trust-blue accent,
          tractor-feed holes down the reading edge.
   Dark:  1980s blue-screen word processor: pale type on deep navy,
          a soft glow on headlines only.
   Headlines/navigation/buttons: IBM Plex Mono. Reading text: IBM Plex Sans.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root{
  --serif:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* display face (pages call it --serif) */
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* printout: cool paper, navy ribbon ink, trust blue */
  --bg:#eef2f8;          /* desk under the paper */
  --panel:#fbfcfe;       /* paper */
  --sheet:#f3f6fb;
  --band:transparent;
  --hole:#dfe5ef;        /* tractor-feed holes */
  --ink:#14213d;         /* navy ribbon ink */
  --ink-2:#43506b;
  --muted:#73809a;
  --line:#c9d2e3;
  --accent:#1e4fa8;
  --accent-ink:#ffffff;
  --accent-wash:#dfe7f7;
  --glow:none;
  --radius:3px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#071228; --panel:#0b1a38; --sheet:#0f2045; --band:transparent; --hole:transparent;
  --ink:#e8efff; --ink-2:#b4c4e6; --muted:#7f92bd; --line:#22365f;
  --accent:#7fb2ff; --accent-ink:#071228; --accent-wash:#13284f;
  --glow:0 0 12px rgba(127,178,255,.30), 0 0 2px rgba(127,178,255,.45);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#071228; --panel:#0b1a38; --sheet:#0f2045; --band:transparent; --hole:transparent;
  --ink:#e8efff; --ink-2:#b4c4e6; --muted:#7f92bd; --line:#22365f;
  --accent:#7fb2ff; --accent-ink:#071228; --accent-wash:#13284f;
  --glow:0 0 12px rgba(127,178,255,.30), 0 0 2px rgba(127,178,255,.45);
  color-scheme:dark }

body{font-family:var(--sans);letter-spacing:0}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px;border-radius:0!important}
h1,h2,h3{text-shadow:var(--glow)}

/* The paper: green bars + tractor holes (light). The screen: scanlines (dark). */
.paper, .pane, .wrap-paper{
  background-color:var(--panel);
  background-image:
    radial-gradient(circle at 12px 12px, var(--hole) 0 4.5px, transparent 5px),
    linear-gradient(90deg, transparent 23px, var(--line) 23px 24px, transparent 24px);
  background-size:24px 24px, 100% 100%;
  background-repeat:repeat-y, no-repeat;
  background-attachment:local, local;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.paper,.pane,.wrap-paper){
  background-image:radial-gradient(120% 90% at 50% 35%, rgba(127,178,255,.07), transparent 70%); background-size:100% 100%; background-repeat:no-repeat; background-attachment:local } }
:root[data-theme="dark"] :is(.paper,.pane,.wrap-paper){
  background-image:radial-gradient(120% 90% at 50% 35%, rgba(127,178,255,.07), transparent 70%); background-size:100% 100%; background-repeat:no-repeat; background-attachment:local }

/* Block cursor: the one moving thing on a page. */
.cursor::after{content:"";display:inline-block;width:.5em;height:.82em;margin-left:.12em;vertical-align:-.04em;background:var(--accent);
  box-shadow:var(--glow);animation:blink 1.06s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .cursor::after{animation:none} }

/* Tags read like terminal flags: [Live] */
.tag{border:0!important;background:none!important;padding:0!important;border-radius:0!important;font-family:var(--mono);font-size:12px!important;letter-spacing:0!important;color:var(--muted)}
.tag::before{content:"["}
.tag::after{content:"]"}
.tag.on{color:var(--accent)!important}

/* Path-style location labels instead of all-caps eyebrows */
.eyebrow{font-family:var(--mono);text-transform:none!important;letter-spacing:0!important;font-size:13px!important;color:var(--muted)}

/* ============ HUB (app.html) ============ */
.side{background:var(--bg)}
.brand .mark{border-radius:0!important;border:0!important;background:var(--ink);color:var(--panel);font-family:var(--mono)!important;font-weight:600;font-size:15px!important;width:24px!important;height:24px!important;transform:translateY(4px)!important}
.brand .name{font-family:var(--mono)!important;font-weight:600;font-size:19px!important;letter-spacing:-.02em!important}
.navlabel{font-family:var(--mono);text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important}
.navbtn{font-family:var(--mono);font-size:14px!important;border-radius:0!important;padding:9px 10px!important;transition:none!important}
.navbtn .t{position:relative;padding-left:1.6ch;display:block}
.navbtn .t::before{content:"";position:absolute;left:0;top:0}
.navbtn:hover{background:var(--accent-wash)!important}
.navbtn[aria-current="true"]{background:var(--ink)!important;color:var(--panel)!important}
.navbtn[aria-current="true"] .t{font-weight:500!important}
.navbtn[aria-current="true"] .t::before{content:">"}
.navbtn[aria-current="true"] .live{background:var(--panel)}
.navbtn .live{border-radius:0!important;width:6px!important;height:6px!important}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .navbtn[aria-current="true"]{background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:var(--glow)} }
:root[data-theme="dark"] .navbtn[aria-current="true"]{background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:var(--glow)}
.side .foot{font-family:var(--mono);font-size:11.5px!important}

.section{animation:none!important;padding-left:max(64px, env(safe-area-inset-left, 0px))!important}
.section h1{font-family:var(--mono)!important;font-weight:600!important;font-size:clamp(30px,4.2vw,50px)!important;letter-spacing:-.035em!important;line-height:1.05!important}
.lede{font-size:16px!important;max-width:62ch}
.subhead{border-bottom:1px dashed var(--line)!important}
.sub{border-bottom:1px dashed var(--line)!important}
.subbtn{padding:20px 8px!important}
.subbtn:hover{background:var(--accent-wash)}
.st{font-family:var(--mono)!important;font-weight:500;font-size:21px!important;letter-spacing:-.02em}
.subbtn:hover .st::before{content:"> ";color:var(--accent)}
.go{border-radius:0!important;width:40px!important;height:40px!important;transition:none!important}
.subbtn:hover .go{transform:none!important;background:var(--ink);color:var(--panel);border-color:var(--ink)}
.empty{border-radius:0!important;border-style:dashed!important}
.empty h3{font-family:var(--mono)!important;font-weight:500;font-size:20px!important}

.toolbar{font-family:var(--mono)}
.back,.full{border-radius:0!important;font-family:var(--mono)}
.back:hover{background:var(--ink);color:var(--panel);border-color:var(--ink)}

.bell,.me{border-radius:0!important}
.me .av{border-radius:0!important;font-family:var(--mono)}
.badge{border-radius:0!important;font-family:var(--mono)}
.toast{border-radius:0!important;font-family:var(--mono);font-size:13.5px!important;box-shadow:6px 6px 0 var(--line)!important}
.toast button{border-radius:0!important;font-family:var(--mono)}

.btn,.btn2{border-radius:0!important;font-family:var(--mono)!important;font-weight:500!important;letter-spacing:-.01em}
.btn{box-shadow:3px 3px 0 var(--line)}
.btn:hover:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 var(--line)}
.btn2:hover{background:var(--ink)!important;color:var(--panel)!important;border-color:var(--ink)!important}
.fgrid input,.watchbox select{border-radius:0!important;font-family:var(--mono)!important;font-size:14px!important;caret-color:var(--accent)}
.panel h2{font-family:var(--mono)!important;font-weight:500!important;font-size:20px!important;letter-spacing:-.02em}
.pill{border-radius:0!important;font-family:var(--mono)}
.filters button{border-radius:0!important;font-family:var(--mono)}

/* alerts */
.watchbox{border-radius:0!important;background:var(--panel)}
.report{border-radius:0!important;background:var(--panel)!important}
.report.unread{border:3px double var(--accent)!important;box-shadow:none!important}
.rh h2{font-family:var(--mono)!important;font-weight:500!important;font-size:21px!important;letter-spacing:-.02em}
.new{font-family:var(--mono);text-transform:none!important;letter-spacing:0!important;background:var(--accent);color:var(--accent-ink)!important;padding:1px 6px;font-size:12px!important}
.item .j,.item .aff span,.rsec{font-family:var(--mono);text-transform:none!important;letter-spacing:0!important}
.item .aff span::before{content:"["} .item .aff span::after{content:"]"}
.st-pill{border-radius:0!important;font-family:var(--mono)}
.items,.arch{border-top-style:dashed!important;border-top-color:var(--line)!important}
.item,.arch li{border-bottom-style:dashed!important;border-bottom-color:var(--line)!important}
.yr{font-family:var(--mono)!important;font-size:17px!important}
.crumb{font-family:var(--mono);border:0!important}
.crumb:hover{background:var(--ink);color:var(--panel)!important}

@media (max-width:820px){
  .navbtn{border-radius:0!important}
  .section{padding-left:max(36px, env(safe-area-inset-left, 0px))!important}
}

/* ============ FRONT DOOR (index.html) ============ */
.intro h1{font-family:var(--mono)!important;font-weight:600!important;letter-spacing:-.045em!important;font-size:clamp(36px,5vw,64px)!important;line-height:1.02!important}
.intro .lede{font-size:16.5px!important}
.inside li{border-color:var(--line)!important;border-bottom-style:dashed!important}
.inside b{font-family:var(--mono);font-weight:500!important}
.door{background:var(--bg)!important}
.card{border:3px double var(--ink);background:var(--panel);padding:0!important;border-radius:0}
.card .term{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;padding:7px 12px;background:var(--ink);color:var(--panel)}
.card .body{padding:26px 26px 28px}
.card h2{font-family:var(--mono)!important;font-weight:600!important;font-size:26px!important;letter-spacing:-.03em}
.tabs{border-radius:0!important;padding:0!important;gap:0!important;border:1px solid var(--line)!important}
.tab{border-radius:0!important;font-family:var(--mono);font-size:13.5px!important}
.tab[aria-selected="true"]{background:var(--ink)!important;color:var(--panel)!important;font-weight:500!important}
.card label{font-family:var(--mono);font-size:12.5px!important}
.card input[type=email],.card input[type=password],.card input[type=text]{border-radius:0!important;font-family:var(--mono)!important;font-size:14.5px!important;background:var(--panel)!important;caret-color:var(--accent)}
.card input:focus{box-shadow:none!important;border-color:var(--ink)!important;outline:2px solid var(--accent)}
.primary{border-radius:0!important;font-family:var(--mono)!important;font-weight:500!important;box-shadow:4px 4px 0 var(--line)}
.primary:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.ghost{border-radius:0!important;font-family:var(--mono)}
.msg{border-radius:0!important;font-family:var(--mono);font-size:13px!important}
.linkbtn{font-family:var(--mono);font-size:12.5px}
.banner{border-radius:0!important;font-family:var(--mono)}
.state .who{border-radius:0!important}
.state .icon{border-radius:0!important}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card{border-color:var(--accent);box-shadow:0 0 24px rgba(127,178,255,.14)} :root:not([data-theme="light"]) .card .term{background:var(--accent);color:var(--accent-ink)} :root:not([data-theme="light"]) .tab[aria-selected="true"]{background:var(--accent)!important;color:var(--accent-ink)!important} }
:root[data-theme="dark"] .card{border-color:var(--accent);box-shadow:0 0 24px rgba(127,178,255,.14)}
:root[data-theme="dark"] .card .term{background:var(--accent);color:var(--accent-ink)}
:root[data-theme="dark"] .tab[aria-selected="true"]{background:var(--accent)!important;color:var(--accent-ink)!important}
@media (max-width:860px){ .card{border-width:3px!important;border-radius:0!important;padding:0!important} .card .body{padding:20px 18px 22px} }

/* ============ CONTENT PAGES (courses, reports, privacy) ============ */
.wrap h1, main h1{font-family:var(--mono)!important;font-weight:600!important;letter-spacing:-.04em!important}
.wrap h2, main h2{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:-.025em}
.screen,.thumb,.list,.ocard,.ep{border-radius:0!important}
.ocard .t,.now h2,li a .t{font-family:var(--mono)!important;letter-spacing:-.025em}
body.wrap-paper{background-attachment:scroll!important}
@media (max-width:820px){ body.wrap-paper main, body.wrap-paper .wrap{padding-left:max(40px, env(safe-area-inset-left, 0px))!important} }