/* looks.css (2026-10-29) -- three minimal site-wide looks: Mono, Noir, Sand.
   Active only when <html data-look="mono|noir|sand">; nova/aqua are switched off then.
   Remove the <link> to looks.css in base.html to roll back. */

/* ---------- Mono: black on paper, no accent colour ---------- */
html[data-look="mono"][data-theme]{
  --font-ui:'Inter Tight',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Instrument Serif',Georgia,serif; --disp-w:400; --disp-ls:0;
  --font-num:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  --canvas:#fafaf8; --surface:#fafaf8; --surface-2:#f4f4f0; --sunken:#efefea;
  --line:#e6e6e1; --line-strong:#cfcfc8;
  --ink-1:#111; --ink-2:#4b4b47; --ink-3:#8f8f88;
  --brand:#111; --mark-from:#111; --mark-to:#111;
  --accent:#111; --accent-ink:#111; --accent-soft:rgba(17,17,17,.06); --accent-contrast:#fafaf8;
  --buy:#17804a; --buy-soft:#e6f2ea; --sell:#c23b22; --sell-soft:#f8e7e3; --warn:#b7791f; --warn-soft:#f7eedc;
  --sh-1:none; --sh-2:none; --sh-3:0 12px 32px rgba(0,0,0,.12);
  --r-xs:0; --r-sm:0; --r:0; --r-lg:0; --r-pill:0;
  --bg-art:none; --top-bg:rgba(250,250,248,.92);
  --grad:#111; --grad-ink:#fafaf8; --grad-glow:none;
  --nav-on-bg:transparent; --nav-on-ink:#111;
  --hero-bg:#fafaf8; --hero-ink:#111; --hero-mut:#8f8f88; --hero-line:#e6e6e1;
  --card-bg:#fafaf8; --glass:none; --ic-a:#111;
  color-scheme:light;
}
/* ---------- Noir: true black, one lime accent, monospace numbers ---------- */
html[data-look="noir"][data-theme]{
  --font-ui:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Space Grotesk',-apple-system,sans-serif; --disp-w:500; --disp-ls:-.03em;
  --font-num:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --canvas:#000; --surface:#0a0a0a; --surface-2:#101010; --sunken:#141414;
  --line:#1d1d1d; --line-strong:#2c2c2c;
  --ink-1:#f2f2f2; --ink-2:#a3a3a3; --ink-3:#666;
  --brand:#f2f2f2; --mark-from:#d4ff3a; --mark-to:#d4ff3a;
  --accent:#d4ff3a; --accent-ink:#d4ff3a; --accent-soft:rgba(212,255,58,.1); --accent-contrast:#000;
  --buy:#d4ff3a; --buy-soft:rgba(212,255,58,.1); --sell:#ff4d4d; --sell-soft:rgba(255,77,77,.12); --warn:#ffb020; --warn-soft:rgba(255,176,32,.12);
  --sh-1:none; --sh-2:none; --sh-3:0 16px 40px rgba(0,0,0,.7);
  --r-xs:2px; --r-sm:3px; --r:4px; --r-lg:4px; --r-pill:3px;
  --bg-art:none; --top-bg:rgba(0,0,0,.9);
  --grad:#d4ff3a; --grad-ink:#000; --grad-glow:none;
  --nav-on-bg:transparent; --nav-on-ink:#d4ff3a;
  --hero-bg:#0a0a0a; --hero-ink:#f2f2f2; --hero-mut:#666; --hero-line:#1d1d1d;
  --card-bg:#0a0a0a; --glass:none; --ic-a:#d4ff3a;
  color-scheme:dark;
}
/* ---------- Sand & Ink: warm paper, ink blocks, one orange accent ---------- */
html[data-look="sand"][data-theme]{
  --font-ui:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Manrope',-apple-system,sans-serif; --disp-w:800; --disp-ls:-.04em;
  --font-num:'Manrope',-apple-system,sans-serif;
  --canvas:#efebe4; --surface:#fffdf9; --surface-2:#f8f5ef; --sunken:#f4f0e9;
  --line:#e4ded3; --line-strong:#d3cbbd;
  --ink-1:#1b1a17; --ink-2:#5a5750; --ink-3:#97928a;
  --brand:#1b1a17; --mark-from:#ff5b1f; --mark-to:#ff5b1f;
  --accent:#ff5b1f; --accent-ink:#e0480f; --accent-soft:#ffe6dc; --accent-contrast:#fff;
  --buy:#1d8f4e; --buy-soft:#e3f3e8; --sell:#df3f26; --sell-soft:#fbe4df; --warn:#c47f12; --warn-soft:#f8ecd6;
  --sh-1:none; --sh-2:none; --sh-3:0 18px 44px rgba(27,26,23,.16);
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-pill:999px;
  --bg-art:none; --top-bg:rgba(239,235,228,.9);
  --grad:#1b1a17; --grad-ink:#fffdf9; --grad-glow:none;
  --nav-on-bg:#1b1a17; --nav-on-ink:#fffdf9;
  --hero-bg:#1b1a17; --hero-ink:#fffdf9; --hero-mut:rgba(255,253,249,.6); --hero-line:rgba(255,255,255,.1);
  --card-bg:#fffdf9; --glass:none; --ic-a:#ff5b1f;
  color-scheme:light;
}

/* ---------- shared calming rules for all three ---------- */
html[data-look] body{background:var(--canvas)!important;background-image:none!important;font-family:var(--font-ui)}
html[data-look] .num,html[data-look] [class*="pnl"],html[data-look] td{font-variant-numeric:tabular-nums}
html[data-look] *{text-shadow:none}
html[data-look] .tbar{background:var(--top-bg)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:blur(12px)}
html[data-look] .card,html[data-look] .panel,html[data-look] .tile,html[data-look] .kpi{box-shadow:none!important}
html[data-look] .sbar{background:var(--canvas)!important;border-bottom:1px solid var(--line)}
html[data-look] .sb-chip{background:transparent!important}
html[data-look="mono"] .card,html[data-look="mono"] .panel{border-color:var(--line)!important}
html[data-look="mono"] h1,html[data-look="mono"] .page-header-title{font-family:var(--font-disp);font-weight:400;letter-spacing:0}
html[data-look="noir"] th,html[data-look="noir"] label,html[data-look="noir"] .funds-k{font-family:var(--font-num);text-transform:uppercase;letter-spacing:.08em}
html[data-look="sand"] .card,html[data-look="sand"] .panel{border-color:transparent!important}

/* swatches for the Style menu */
.sp-sw.mono{background:linear-gradient(135deg,#fafaf8 50%,#111 50%)!important}
.sp-sw.noir{background:linear-gradient(135deg,#000 50%,#d4ff3a 50%)!important}
.sp-sw.sand{background:linear-gradient(135deg,#efebe4 50%,#ff5b1f 50%)!important}

/* header dropdowns near the right edge open leftwards (2026-10-29) */
.tbar-nav .drop.mnav:nth-last-of-type(-n+2) .drop-panel{left:auto!important;right:0!important}