/* ═══════════════════════════════════════════════════════════════════
   layoutkit.css — (1) drag-to-resize dividers (layoutkit.js), with the dashboard's feel (cockpit.css
   .cpresizer / .cpvresizer): a thin line with a small grip, brighter and taller on hover, amber while dragged;
   (2) where they sit on Portfolio → Holdings and Risk mix, and how those pages fill the room they are given;
   (3) one title bar for the new views (Holdings, Trades, Income, Risk mix, News, the Today panel), as the approved
   design (docs/mocks/portfolio-b/b.html): 64px, a hairline under it, the name 22px semibold at the content's left
   edge, the tabs 15px on the name's baseline with an amber underline on the bar's rule, 38px buttons centred.
   Loaded last (after feedback.css).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lk-grip: rgba(255, 255, 255, .22);
  --lk-grip-hover: rgba(255, 255, 255, .5);
  --lk-rule: rgba(255, 255, 255, .10);
  --lk-amber: #e0a82e;
}
body[data-theme="light"] {
  --lk-grip: rgba(58, 48, 30, .26);
  --lk-grip-hover: rgba(58, 48, 30, .55);
  --lk-rule: rgba(58, 48, 30, .14);
  --lk-amber: #c08a14;
}

/* ── (1) the handles ──────────────────────────────────────────────────────────────────────────────────── */
.lk-v, .lk-h { display: none; position: relative; z-index: 2; touch-action: none; outline: none; -webkit-user-select: none; user-select: none; }
.lk-v:focus-visible, .lk-h:focus-visible { outline: none; }   /* the grip and the line turn amber instead (below) */
.lk-v { cursor: col-resize; min-height: 40px; }
.lk-h { cursor: row-resize; height: 18px; }
/* the line: faint, only while pointed at or dragged */
.lk-v::before, .lk-h::before { content: ""; position: absolute; background: transparent; transition: background-color .12s; pointer-events: none; }
.lk-v::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); }
.lk-h::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-.5px); }
/* the grip: always there, small; taller and brighter on hover; amber while dragged or focused from the keyboard */
.lk-v::after, .lk-h::after { content: ""; position: absolute; border-radius: 3px; background: var(--lk-grip); transition: background-color .12s, height .12s, width .12s; pointer-events: none; }
.lk-v::after { top: 50%; left: 50%; width: 3px; height: 28px; transform: translate(-50%, -50%); }
.lk-h::after { left: 50%; top: 50%; width: 28px; height: 3px; transform: translate(-50%, -50%); }
.lk-v:hover::before, .lk-h:hover::before { background: var(--lk-rule); }
.lk-v:hover::after { height: 44px; background: var(--lk-grip-hover); }
.lk-h:hover::after { width: 44px; background: var(--lk-grip-hover); }
.lk-v.is-drag::before, .lk-h.is-drag::before { background: color-mix(in srgb, var(--lk-amber) 55%, transparent); }
.lk-v.is-drag::after, .lk-v:focus-visible::after { height: 44px; background: var(--lk-amber); }
.lk-h.is-drag::after, .lk-h:focus-visible::after { width: 44px; background: var(--lk-amber); }
.lk-v:focus-visible::before, .lk-h:focus-visible::before { background: color-mix(in srgb, var(--lk-amber) 40%, transparent); }
/* while dragging: the resize cursor everywhere, no text selection, no hover effects under the pointer */
html.lk-drag-x, html.lk-drag-x * { cursor: col-resize !important; -webkit-user-select: none !important; user-select: none !important; }
html.lk-drag-y, html.lk-drag-y * { cursor: row-resize !important; -webkit-user-select: none !important; user-select: none !important; }
.lk-dragging iframe { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lk-v::before, .lk-v::after, .lk-h::before, .lk-h::after { transition: none; } }

/* "Reset layout": quiet, text only, in the view's toolbar; shown only while something there was moved */
.lk-reset {
  display: inline-flex; align-items: center; height: 38px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font:500 14px/1 'Inter', var(--sans); color: var(--text-2, #a8a8ae); white-space: nowrap;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px;
}
.lk-reset:hover { color: var(--text, #f5f5f4); text-decoration-color: currentColor; }
.lk-reset:focus-visible { outline: 2px solid var(--lk-amber); outline-offset: 2px; border-radius: 4px; }
.lk-reset[hidden] { display: none; }

/* ── (2a) Portfolio → Holdings: the value chart | the Summary, and the chart's height ─────────────────────
   Only where the two sit side by side (portfolio-summary.css: 1361px and wider, a chart to draw, text not
   extra large). The Summary's track is clamp(its min, the saved share, the room left after the chart's min). */
@media (min-width: 1361px) {
  body:not([data-text-size="xlarge"]) #viewPortfolio .px-hero.lk-split:not(.is-nochart) {
    grid-template-columns: minmax(0, 1fr) var(--lk-gap, 28px) clamp(var(--lk-minb, 540px), var(--lk-b, 600px), calc(100% - var(--lk-mina, 580px) - var(--lk-gap, 28px)));
    column-gap: 0; row-gap: 0;
  }
  body:not([data-text-size="xlarge"]) #viewPortfolio .px-hero.lk-split:not(.is-nochart) > .px-hero__main { grid-column: 1; grid-row: 1; }
  body:not([data-text-size="xlarge"]) #viewPortfolio .px-hero.lk-split:not(.is-nochart) > .lk-v { display: block; grid-column: 2; grid-row: 1; }
  body:not([data-text-size="xlarge"]) #viewPortfolio .px-hero.lk-split:not(.is-nochart) > .px-sum { grid-column: 3; grid-row: 1; container: pxsum / inline-size; }
  body:not([data-text-size="xlarge"]) #viewPortfolio .px-hero.lk-split:not(.is-nochart) > .lk-h { display: block; grid-column: 1 / -1; grid-row: 2; margin: 8px 0 -6px; }

  /* the Summary fills its box to the bottom of the row: the last group of each column takes the room, its rows
     spread evenly (their text centred in each), so there is never an empty band inside a card */
  #viewPortfolio .px-hero.lk-split:not(.is-nochart) .px-sum .pxs-grid { flex: 1 1 auto; }
  #viewPortfolio .px-hero.lk-split:not(.is-nochart) .px-sum .pxs-g { display: flex; flex-direction: column; }
  #viewPortfolio .px-hero.lk-split:not(.is-nochart) .px-sum .pxs-g > * { flex: 0 0 auto; }
  #viewPortfolio .px-hero.lk-split:not(.is-nochart) .px-sum .pxs-g > .pxs-r { flex: 1 0 auto; align-content: center; }

  /* as it widens it gets roomier: two columns (Value over Profit taking, Income over Allocation), one only if the text
     is so large they would not fit; larger figures, labels and spacing from 740px; the four groups in a row from 1180px */
  @container pxsum (max-width: 439.98px) {
    #viewPortfolio .px-sum.pxs .pxs-grid { grid-template-columns: minmax(0, 1fr); }
    #viewPortfolio .px-sum.pxs .pxs-col { display: contents; }
  }
  @container pxsum (min-width: 440px) {
    #viewPortfolio .px-sum.pxs .pxs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #viewPortfolio .px-sum.pxs .pxs-col { display: flex; }
  }
  /* narrow: a figure's second line and a long label may wrap rather than run out of the card */
  @container pxsum (max-width: 559.98px) {
    #viewPortfolio .px-sum.pxs .pxs-s { white-space: normal; text-align: right; }
    #viewPortfolio .px-sum.pxs .pxs-v small { white-space: normal; }
  }
  @container pxsum (min-width: 740px) {
    #viewPortfolio .px-sum.pxs .pxs-grid { gap: 12px; margin-top: 14px; }
    #viewPortfolio .px-sum.pxs .pxs-col { gap: 12px; }
    #viewPortfolio .px-sum.pxs .pxs-g { padding: 0 16px 4px; border-radius: 14px; }
    #viewPortfolio .px-sum.pxs .pxs-h { padding: 13px 0 11px; font-size:14px; }
    #viewPortfolio .px-sum.pxs .pxs-r { padding: 10px 0; column-gap: 14px; }
    #viewPortfolio .px-sum.pxs .pxs-k { font-size:15px; }
    #viewPortfolio .px-sum.pxs .pxs-rms, #viewPortfolio .px-sum.pxs .pxs-s, #viewPortfolio .px-sum.pxs .pxs-v small,
    #viewPortfolio .px-sum.pxs .pxs-note, #viewPortfolio .px-sum.pxs .pxs-mixleg { font-size:14px; }
    #viewPortfolio .px-sum.pxs .pxs-v b { font-size:16.5px; }
    #viewPortfolio .px-sum.pxs .pxs-big { font-size:24px !important; }
    #viewPortfolio .px-sum.pxs .pxs-mix { height: 10px; }
  }
  @container pxsum (min-width: 1180px) {
    body:not([data-text-size="large"]) #viewPortfolio .px-sum.pxs .pxs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body:not([data-text-size="large"]) #viewPortfolio .px-sum.pxs .pxs-col { display: contents; }
  }
}

/* ── (2b) Risk mix: the mix and the pyramid | the Summary ─────────────────────────────────────────────────
   Where the Summary sits beside them (riskmix-b.css: the explorer 1100px and wider). The Summary runs from the
   top of the mix to the foot of the pyramid, its groups spread to end level with it; the mix bar and the
   pyramid use the whole width of their column. */
@container pyx (min-width: 1100px) {
  #viewRisk .rkb-hero.lk-split {
    grid-template-columns: minmax(0, 1fr) var(--lk-gap, 40px) clamp(var(--lk-minb, 400px), var(--lk-b, clamp(440px, 34%, 560px)), min(var(--lk-maxb, 720px), calc(100% - var(--lk-mina, 640px) - var(--lk-gap, 40px))));
    grid-template-areas: "me lkv sum" "pyr lkv sum"; grid-template-rows: auto 1fr; column-gap: 0;
  }
  #viewRisk .rkb-hero.lk-split > .lk-v { display: block; grid-area: lkv; }
  #viewRisk .rkb-hero.lk-split > .rkb-sum { align-self: stretch; display: flex; flex-direction: column; container: rksum / inline-size; }
  #viewRisk .rkb-hero.lk-split > .rkb-sum .rks-grid { flex: 1 1 auto; align-content: space-between; }
  #viewRisk .rkb-hero.lk-split > .rkb-sum .rks-foot { flex: none; }
  /* the pyramid: the tiers grow with the column (to 720px), the names at its left edge, the figures at its right */
  #viewRisk .rkb-hero.lk-split .rkp-grid { grid-template-columns: max-content minmax(0, 720px) max-content; justify-content: space-between; }
  #viewRisk .rkb-hero.lk-split .rkb-mixbar, #viewRisk .rkb-hero.lk-split .rkb-mixleg { max-width: none; }
}
/* the Summary roomier as it widens */
@container rksum (min-width: 520px) {
  #viewRisk .rkb-sum .pxs-k, #viewRisk .rkb-sum .rks-lvl .pxs-k { font-size:15px; }
  #viewRisk .rkb-sum .pxs-v b, #viewRisk .rkb-sum .rks-vs { font-size:16px; }
  #viewRisk .rkb-sum .pxs-v .pxs-big { font-size:22px; }
  #viewRisk .rkb-sum .pxs-h { font-size:15px; }
}
@container rksum (min-width: 620px) {
  #viewRisk .rkb-sum .rks-kgrid { column-gap: 32px; }
  #viewRisk .rkb-sum .pxs-v small, #viewRisk .rkb-sum .rks-ksub { font-size:14px; }
}

/* the mix: "70/17 + 13% cash | Goal 65 / 35" on one baseline, as the Portfolio value's line */
#viewRisk .rkb-big { align-items: baseline; gap: 12px 0; }
#viewRisk .rkb-big__v { align-items: baseline; }
#viewRisk .rkb-big__rest { margin-left: 14px; font:500 28px/1 var(--rk-font); letter-spacing: -.02em; color: var(--rk-cents); }
#viewRisk .rkb-big__goal { position: relative; flex-direction: row; align-items: baseline; gap: 10px; margin: 0 0 0 26px; padding: 0 0 0 26px; border-left: 0; }
/* the rule between them: from the baseline up to the top of the big figures (64px Inter: caps ~46px) */
#viewRisk .rkb-big__goal::before { content: ""; position: absolute; left: 0; bottom: 0; height: 50px; width: 1px; background: var(--rk-line3); }
#viewRisk .rkb-big__goal span { font:500 15px/1 var(--rk-font); color: var(--rk-sub); }
#viewRisk .rkb-big__goal b { font:600 28px/1 var(--rk-font); letter-spacing: -.02em; color: var(--rk-text); font-variant-numeric: tabular-nums; }
#viewRisk .rkb-say { margin-top: 14px; }
/* a phone: the goal goes under the mix, with no rule beside it */
@media (max-width: 640px) {
  #viewRisk .rkb-big__goal { margin-left: 0; padding-left: 0; }
  #viewRisk .rkb-big__goal::before { display: none; }
}

/* ── (3) one title bar ─────────────────────────────────────────────────────────────────────────────────── */
.vhead { --vh-text: #f5f5f4; --vh-sub: #a8a8ae; --vh-line: #1c1d21; --vh-line2: #26272c; --vh-line3: #33343a; --vh-amber: #e0a82e; }
body[data-theme="light"] .vhead { --vh-text: #1f2126; --vh-sub: #474b55; --vh-line: rgba(58, 48, 30, .10); --vh-line2: rgba(58, 48, 30, .16); --vh-line3: rgba(58, 48, 30, .26); --vh-amber: #c08a14; }
.view > .vhead { display: block; margin: -6px 0 22px; padding: 0; border: 0; background: none; box-shadow: none; font-family: 'Inter', var(--sans); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; }
.vhead__row { display: flex; align-items: center; gap: 12px 26px; min-height: 64px; margin: 0; border-bottom: 1px solid var(--vh-line); flex-wrap: wrap; }
.vhead__name { margin: 0; font:600 22px/1.2 'Inter', var(--sans); letter-spacing: -.025em; color: var(--vh-text); text-transform: none; }
.vhead__name::before, .vhead__name::after { display: none; }
.vhead__tabs { align-self: stretch; display: flex; }
.vhead__tabs .subnav { display: flex; gap: 24px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; }
/* a group with a single tab (News while the Calendar is off): the name says it, no strip */
.vhead__tabs .subnav:has(> .subnav__tab:only-child) { display: none; }
.vhead__tabs .subnav__tab { position: relative; display: flex; align-items: center; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none !important; box-shadow: none !important; color: var(--vh-sub); font:500 15px/1 'Inter', var(--sans); cursor: pointer; }
.vhead__tabs .subnav__tab:hover, .vhead__tabs .subnav__tab.is-active { color: var(--vh-text); }
.vhead__tabs .subnav__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--vh-amber); }
.vhead__tabs .subnav__tab:focus-visible { outline: 2px solid var(--vh-amber); outline-offset: -2px; }
.vhead__acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 0 0 0 auto; padding: 0; background: none; border: 0; box-shadow: none; min-width: 0; }
.view > .vhead:not(#_) .vhead__acts :is(.export-btn, .port-filter-select) {   /* :not(#_): above the toolbar pills' id rules (cockpit.css #viewIncome .port-filter-select) */
  display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; min-height: 38px; margin: 0; padding: 0 16px; border: 1px solid var(--vh-line2); border-radius: 19px;
  background-color: transparent; box-shadow: none; color: var(--vh-text); font:500 14px/1 'Inter', var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
.view > .vhead:not(#_) .vhead__acts .port-filter-select { padding-right: 34px; }
.view > .vhead:not(#_) .vhead__acts .export-btn svg { width: 16px; height: 16px; color: var(--vh-sub); }
.view > .vhead:not(#_) .vhead__acts :is(.export-btn, .port-filter-select):hover { border-color: var(--vh-line3); background-color: color-mix(in srgb, var(--vh-text) 4%, transparent); }
.view > .vhead:not(#_) .vhead__acts :is(.export-btn, .port-filter-select):focus-visible { outline: 2px solid var(--vh-amber); outline-offset: 2px; }

/* the same geometry on the views that already had this bar: the tabs sit on the name's baseline (the two are
   centred in the row, so the smaller tab text is lowered by the difference of their baselines: 0.7266 × (22px − its
   size) for Inter), Trades starts at the same left edge and top as Holdings, Risk mix has the same spacing */
:is(#viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs, .vhead__tabs) .subnav__tab { box-sizing: border-box; padding-top: calc((22px - 1em) * .7266); }
#viewTradelog { padding: 16px 18px 56px; }
#viewRisk > .viewbar { gap: 12px 26px; }
#viewRisk > .viewbar .lk-reset:not([hidden]) { margin-left: auto; }
#viewRisk > .viewbar .lk-reset:not([hidden]) + .rkb-cta { margin-left: 4px; }
@media (max-width: 640px) {
  .vhead__row { gap: 10px 18px; padding-bottom: 12px; }
  .vhead__tabs { align-self: auto; height: 40px; }
  .vhead__acts { width: 100%; justify-content: flex-start; margin: 0; gap: 8px; }
  #viewTradelog { padding: 16px 18px 48px; }   /* as Holdings on a phone */
}

/* the Today panel's bar: the same title bar, in the panel */
#todayDrawer .tdd__bar { min-height: 64px; padding: 0 12px 0 20px; gap: 12px; align-items: center; border-bottom: 1px solid var(--vh-line, #1c1d21); background: transparent; }
body[data-theme="light"] #todayDrawer .tdd__bar { border-bottom-color: rgba(58, 48, 30, .10); }
#todayDrawer .tdd__title { display: block; font:600 22px/1.2 'Inter', var(--sans); letter-spacing: -.025em; text-transform: none; color: var(--text); }
#todayDrawer .tdd__title::before, #todayDrawer .tdd__date::before { display: none; }
#todayDrawer .tdd__date { display: block; padding-top: calc((22px - 15px) * .7266); font:500 15px/1.2 'Inter', var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
#todayDrawer .tdd__x { width: 38px; height: 38px; border: 1px solid var(--border, #26272c); font-size:22px; line-height: 1; }

/* Page titles = the Tracker's title (cockpit.css .viewbar__name): amber mono caps name | caps descriptor.
   Matt asked for this match repeatedly (Sep 30). Applies to Portfolio, Income, News and Risk mix. */
body:not(#_) :is(.px-head__name, .vhead__name, #viewRisk > .viewbar .viewbar__name) {
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .14em; line-height: 1.2;
  text-transform: uppercase; color: var(--accent-soft, var(--accent)); white-space: nowrap; margin: 0;
}
body:not(#_) :is(.px-head__row, .vhead__row) > .viewbar__tag,
body:not(#_) #viewRisk > .viewbar .viewbar__tag {
  display: inline-block; font-family: var(--mono); font-size:13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-4); padding-left: 12px; margin-right: 14px; border-left: 1px solid var(--border); white-space: nowrap;
}
@media (max-width: 1180px) { body:not(#_) :is(.px-head__row, .vhead__row) > .viewbar__tag { display: none; } }
@media (max-width: 720px) { body:not(#_) #viewRisk > .viewbar .viewbar__tag { display: none; } }

/* Page titles bigger on every view (Matt, Sep 30: "make ALL main headings bigger, they're small and not noticeable").
   Same style everywhere (amber mono caps name | caps descriptor), just larger. */
body:not(#_) :is(.viewbar__name, .px-head__name, .vhead__name, .port-toolbar__title, .research-page-header__title, #viewRisk > .viewbar .viewbar__name) {
  font-size:20px; letter-spacing: .12em; font-weight: 700; line-height: 1.15;
}
body:not(#_) :is(.viewbar__tag, :is(.px-head__row, .vhead__row) > .viewbar__tag, #viewRisk > .viewbar .viewbar__tag) {
  font-size:13px; letter-spacing: .06em; padding-left: 14px;
}
body:not(#_) .viewbar { min-height: 44px; }
@media (max-width: 720px) { body:not(#_) :is(.viewbar__name, .px-head__name, .vhead__name, .port-toolbar__title, .research-page-header__title) { font-size:17px; } }


/* "Patent pending" beside "Not financial advice" in the status bar (Oct 1 2026) */
body:not(#_) .statusbar__seg--pp { color: var(--accent, #e0a82e); font-weight: 600; letter-spacing: .02em; }
@media (max-width: 480px) { body:not(#_) .statusbar__seg--pp { display: none; } }
/* hidden until the patent application is filed: then data-pp="on" in index.html (and welcome.html) */
body:not(#_) .statusbar__seg--pp[data-pp="off"] { display: none !important; }

/* ── Page tabs you can see and click (Oct 2 2026) ──────────────────────────────────────────────────────────────
   Matt: "make news, calendar and the other headings more noticeable for users to click on". Every page's tab strip —
   Holdings · Trades · Income, News · Calendar — is one segmented control: a soft track, 40px tabs in 15px semibold, a
   hover that lights the tab, and the open tab in the gold (gold words on a gold tint with a thin gold ring). The same
   control as the News page's own Fund news · Special events · Payment changes (news-b.css v3). */
body:not(#_) { --tabs-track: rgba(255, 255, 255, .055); --tabs-hover: rgba(255, 255, 255, .085); --tabs-ink: #a8a8ae; --tabs-ink-hi: #ecebe7;
  --tabs-on: #f5c451; --tabs-on-bg: rgba(224, 168, 46, .14); --tabs-on-ring: rgba(224, 168, 46, .34); }
body[data-theme="light"]:not(#_) { --tabs-track: rgba(58, 48, 30, .06); --tabs-hover: rgba(58, 48, 30, .09); --tabs-ink: #474b55; --tabs-ink-hi: #1f2126;
  --tabs-on: #7a5500; --tabs-on-bg: rgba(154, 107, 0, .10); --tabs-on-ring: rgba(154, 107, 0, .30); }
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) { align-self: center; }
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav,
body:not(#_) main.view > .subnav {
  display: flex; width: max-content; max-width: 100%; height: auto; gap: 2px; padding: 4px; border: 0; border-radius: 12px;
  background: var(--tabs-track) !important; box-shadow: none !important;
}
body:not(#_) main.view > .subnav { margin: 4px 0 18px; }
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab,
body:not(#_) main.view > .subnav .subnav__tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 9px;
  background: none !important; box-shadow: none !important; color: var(--tabs-ink); font:600 15px/1 'Inter', var(--sans); letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab:hover,
body:not(#_) main.view > .subnav .subnav__tab:hover { color: var(--tabs-ink-hi); background: var(--tabs-hover) !important; }
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab.is-active,
body:not(#_) main.view > .subnav .subnav__tab.is-active {
  color: var(--tabs-on); background: var(--tabs-on-bg) !important; box-shadow: inset 0 0 0 1px var(--tabs-on-ring) !important;
}
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab::after,
body:not(#_) main.view > .subnav .subnav__tab::after { content: none !important; }
body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab:focus-visible,
body:not(#_) main.view > .subnav .subnav__tab:focus-visible { outline: 2px solid #e0a82e; outline-offset: 2px; }
@media (max-width: 640px) {
  body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) { height: auto; }
  body:not(#_) :is(.vhead__tabs, #viewPortfolio .px-head__tabs, #viewTradelog .tb-head__tabs) .subnav__tab,
  body:not(#_) main.view > .subnav .subnav__tab { height: 36px; min-height: 36px; padding: 0 14px; }
}
/* Temporary "Free trial" button in the top bar, for accounts without a paid plan (app.js applyTierGating) */
body:not(#_) .topbar__promo { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; margin-right: 8px; border-radius: 999px; background: #E0A82E; color: #1a1304; font-weight: 700; font-size:13.5px; text-decoration: none; white-space: nowrap; }
body:not(#_) .topbar__promo:hover { filter: brightness(1.07); }
body:not(#_) .topbar__promo[hidden] { display: none; }