/* ============================================================================
   HINOVEST bridge — maps the Django app's JS-generated DOM (workspace tabs,
   alerts, backdrop, mobile sidebar) onto the Claude Design prototype's
   component look. The prototype CSS (tokens/components/views/screens) stays
   pristine; this file only styles the dynamic hooks the app's JS emits.
   ============================================================================ */

/* ---- Workspace tabs (app-shell.js injects <a class="workspace-tab">) ------- */
.tabs-bar, .tabs { gap: var(--space-1); }
.tabs .workspace-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-3);
    /* Chrome's strip, both directions: a few tabs spread out to fill the bar
       (up to a tab's own maximum, which is why three of them still stop short
       of the far edge), and as they multiply they give up that width again
       rather than running off the end. The floor is a tab you can still read
       -- icon, about eight characters, close button. Squeezing past that
       turned eight journals into eight single-letter stubs, which is worse
       than scrolling for them; below the floor the bar scrolls instead, which
       is what the wheel handler in app-shell.js is for. */
    /* basis 0, so every tab is the same width as its neighbour rather than
       keeping a share of its own label's length. */
    flex: 1 1 0;
    min-width: 120px;
    max-width: 220px;
    /* A tab looks like a tab before you touch it: its own faint box on the
       bar, which hover and the open tab then brighten. The line is always
       there — only its colour changes — so nothing beside it moves. */
    border: 1px solid var(--color-border-subtle);
    border-bottom: 0;
    background: var(--color-surface-0);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    text-decoration: none;
    transition: color 110ms ease, background 110ms ease, border-color 110ms ease;
}
/* The label is the only part that may be cut; the icon and the close button
   keep their size all the way down. It also takes the tab's spare width rather
   than leaving it as a gap, so a wide tab is a wide label with the close button
   at the far end, not a short label adrift in the middle. */
.tabs .workspace-tab > span {
    flex: 1; min-width: 0; text-align: start;
    overflow: hidden; text-overflow: ellipsis;
}
.tabs .workspace-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-2);
    border-color: var(--color-border-mid);
}
.tabs .workspace-tab.is-active {
    color: var(--color-text-primary);
    background: var(--color-surface-1);
    border-color: var(--color-border-mid);
}
.tabs .workspace-tab.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    /* Flush with the tab's own bottom edge, not a pixel past it: the strip
       clips its overflow now, and that pixel was outside the clip. */
    bottom: 0;
    height: 2px;
    background: var(--color-accent-primary);
    border-radius: 2px 2px 0 0;
}
.tabs .workspace-tab .ico { font-size: 14px; opacity: 0.7; flex: 0 0 auto; }
.tabs .workspace-tab.is-active .ico { opacity: 1; color: var(--color-accent-glow); }
.tabs .workspace-tab.is-dragging { opacity: 0.5; }
.tabs .workspace-tab.is-drop-target { background: var(--color-surface-2); }
.tabs .workspace-tab__close {
    position: relative;
    width: 16px;
    height: 16px;
    /* The UA gives buttons padding: 1px 6px. With border-box that shrinks the content
       area to 4x14, so place-items: center centred the glyph in the padding box rather
       than the button. */
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-tertiary);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    opacity: 0;
    transition: opacity 110ms ease, background 110ms ease;
}
/* The visible glyph stays 16px so the tab strip keeps its density; the actual
 * target grows to the WCAG 2.5.8 minimum of 24x24 via a pseudo-element. */
.tabs .workspace-tab__close::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}
.tabs .workspace-tab__close .bi { display: block; }
.tabs .workspace-tab:hover .workspace-tab__close,
.tabs .workspace-tab.is-active .workspace-tab__close { opacity: 1; }
.tabs .workspace-tab__close:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

/* ---- Data tables: force the prototype .dt graphite palette ----------------
   The legacy theme.css shell rules (.trade-management-shell--dark …) are more
   specific than table.dt and still carry slate/navy tints. Re-assert the exact
   prototype colors with a higher-specificity selector (adds .dt) so the trades
   and reports tables read as clean graphite. ------------------------------- */
.trade-management-shell .trade-management-table.dt thead th,
.reports-page table.dt thead th {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border-mid);
}
.trade-management-shell .trade-management-table.dt tbody td,
.reports-page table.dt tbody td {
    background: var(--color-surface-1);
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-subtle);
}
.trade-management-shell .trade-management-table.dt tbody tr:hover td,
.reports-page table.dt tbody tr:hover td {
    background: var(--color-surface-2);
}
.trade-management-shell .trade-management-table.dt tbody tr.is-row-selected td {
    background: var(--color-accent-muted);
}
.trade-management-shell .trade-management-table.dt tbody tr:nth-child(even) td {
    background: var(--color-surface-1);
}
.trade-management-shell .trade-management-table.dt tbody tr:nth-child(even):hover td {
    background: var(--color-surface-2);
}
/* sticky action column */
.trade-management-shell .trade-management-table.dt .is-sticky-end {
    background: var(--color-surface-inset);
    border-inline-start: 1px solid var(--color-border-subtle);
}
.trade-management-shell .trade-management-table.dt thead .is-sticky-end {
    background: var(--color-surface-2);
}
.trade-management-shell .trade-management-table.dt tbody tr:hover .is-sticky-end {
    background: var(--color-surface-2);
}
/* surrounding shell + wrap = flat graphite, no legacy navy gradient */
.trade-management-shell,
.trade-management-shell--dark {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}
.trade-management-shell .trade-management-table-wrap {
    background: var(--color-surface-inset);
    border-color: var(--color-border-subtle);
}
.trade-management-shell .trade-management-table-head,
.trade-management-shell .trade-management-toolbar {
    background: transparent;
}

/* ---- Mobile sidebar drawer + backdrop ------------------------------------- */
.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}
.app-shell.is-sidebar-open ~ .app-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
    .shell .sidebar {
        transform: translateX(-100%);
        transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    html[dir="rtl"] .shell .sidebar { transform: translateX(100%); }
    /* The RTL rule above is (0,3,1) and outweighed the plain open rule (0,3,0),
       so in Persian the drawer never left its off-canvas position. */
    .app-shell.is-sidebar-open .sidebar,
    html[dir="rtl"] .app-shell.is-sidebar-open .sidebar { transform: translateX(0); }
    .shell .main { margin-inline-start: 0; }
}

/* ---- Server-rendered alerts ----------------------------------------------- */
.app-alert {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--color-border-mid);
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}
.app-alert--success { border-color: var(--color-profit-muted); background: var(--color-profit-muted); }
.app-alert--error, .app-alert--danger { border-color: var(--color-loss-muted); background: var(--color-loss-muted); color: var(--color-loss); }
.app-alert--warning { border-color: var(--color-warning-muted); background: var(--color-warning-muted); }
.app-alert.is-dismissing { opacity: 0; transition: opacity 320ms ease; }

/* Collapsed sidebar: hide labels/text (prototype parity for app hooks) */
.shell.is-collapsed .nav__label,
.shell.is-collapsed .userpill__meta,
.shell.is-collapsed .userpill__logout { display: none; }
.shell.is-collapsed .userpill { justify-content: center; padding-inline: 0; }

.mobile-only { display: none; }
@media (max-width: 900px) { .mobile-only { display: inline-grid; } .desktop-only { display: none; } }

/* ---- Topbar: keep on one row, never overflow horizontally ----------------- *
 * overflow-x: clip rather than hidden — `hidden` on one axis forces the other to
 * become a scroll container, which vertically clipped the global-search dropdown at
 * the topbar's bottom edge. `clip` constrains only the axis it names. */
.topbar { overflow-x: clip; overflow-y: visible; }
.crumb { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar__search { width: auto; flex: 0 1 280px; min-width: 0; }
.topbar__theme,
.topbar__language { flex: 0 0 auto; }

/* Inter carries no Persian glyphs, so anything reaching for --font-display in RTL
   fell back to a system Arabic face mid-page. Retarget the token rather than the
   body element: headings, buttons and cards resolve --font-display themselves.
   (Two identical blocks used to sit here, one shadowing the other.)

   Sahel rather than Vazirmatn since 2026-09-17, and served from this host: the
   readers are in Iran, and a Persian face fetched from fonts.googleapis.com is
   a face that sometimes does not arrive. Vazirmatn is still named behind it,
   which is what renders in the moment before the file lands. */
html[dir="rtl"] {
    --font-display: "Sahel", "Vazirmatn", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The Persian face goes BEHIND JetBrains Mono, never in front of it: digits
       still come from the mono face, so tabular-nums holds in every price
       column, and only the glyphs it lacks — the Persian ones — fall through.
       Mono boxes that sometimes hold a word instead of a figure ("محقق‌شده"
       under a KPI) were otherwise assembled letter by letter out of a
       last-resort face. */
    --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Sahel", "Vazirmatn", monospace;
}

/* Set by the head script, cleared once main.js has translated the page. Keeps a
   load from flashing the server's English markup before the Persian pass runs. */
html.i18n-pending body { visibility: hidden; }

/* SVG text-anchor is direction-aware: under an inherited RTL direction, "end"
   anchors on the left and "start" on the right, so every axis label rendered
   mirrored and the edge ones spilled out of the card. Plot geometry is drawn
   left-to-right in all languages, so the drawing surface stays LTR. */
html[dir="rtl"] .chart-svg,
html[dir="rtl"] .reports-chart,
html[dir="rtl"] .jtile__spark { direction: ltr; }

/* A figure is a left-to-right run whatever the surrounding language: without
   this, bidi reordering pushes a leading "-" or "$" to the right-hand end of
   the number. isolate keeps the number from reordering its neighbours too. */
html[dir="rtl"] .mono,
html[dir="rtl"] .num,
html[dir="rtl"] .chart-stat .v,
html[dir="rtl"] .chart-tip b,
html[dir="rtl"] .metric-row__v,
html[dir="rtl"] .kpi__value,
html[dir="rtl"] .calc-hero__v,
html[dir="rtl"] .calc-cell .v,
html[dir="rtl"] .acct-stat .v:not(.v--text),
html[dir="rtl"] .preview-strip .pv .v,
html[dir="rtl"] .ref-stat-card__value,
html[dir="rtl"] .cal-day__pnl,
html[dir="rtl"] .radar__value,
html[dir="rtl"] .range-val,
html[dir="rtl"] .toolbar__count b,
html[dir="rtl"] table.dt td.num,
html[dir="rtl"] .cell-mono,
html[dir="rtl"] .cell-pnl {
    direction: ltr;
    unicode-bidi: isolate;
}

/* A number column's header carries .num too, but it holds a Persian phrase, not
   a figure — left-to-right it reads back to front. And it sits on its figures'
   side: they are ltr, so their "end" is the right edge, while the header's rtl
   "end" was the left — in a wide column (the dashboard's recent trades) the
   label and its numbers sat at opposite edges. */
html[dir="rtl"] table.dt thead th.num { direction: inherit; unicode-bidi: normal; text-align: right; }

html[dir="rtl"] body {
    font-family: var(--font-display);
}

html[dir="rtl"] .bi-arrow-right::before { transform: scaleX(-1); }

/* Bootstrap ships .bi::before { vertical-align: -0.125em } to sit icons on the
   Latin descent; Vazirmatn text centers on its own box, so in Persian every
   icon in a flex row rode ~2px low. Move the compensation from the glyph
   (::before, which shifts inside flex items too) onto the <i> itself, which
   only matters in inline flow — flex rows now center the glyph exactly, and
   plain inline icons keep their old position. */
html[dir="rtl"] .bi::before { vertical-align: 0; }
html[dir="rtl"] .bi { vertical-align: -0.125em; }

/* Pure-Latin runs lose their vertical center in Vazirmatn: it reserves a deep
   descent for Persian, so descender-less Latin caps ride ~2px high in their
   box. Elements whose text is always Latin render in Inter instead; the فا
   toggle stays Vazirmatn, which centers Persian correctly. */
html[dir="rtl"] .brand__mark,
html[dir="rtl"] .brand__word,
html[dir="rtl"] [data-lang-option="en"] {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}
html[dir="rtl"] .topbar__search input { text-align: right; }
html[dir="rtl"] .auth-shell { direction: rtl; }

.auth-language-switch {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 10;
}

.topbar__language button,
.auth-language-switch button {
    min-width: 42px;
    justify-content: center;
}

/* Free up room on narrower viewports instead of overflowing */
@media (max-width: 1180px) {
    .topbar__theme button span { display: none; }      /* theme switch → icon-only */
    .topbar__theme button,
    .topbar__language button { padding-inline: 9px; }
}
@media (max-width: 1000px) {
    .topbar__search { display: none; }                 /* drop the decorative search */
}
@media (max-width: 820px) {
    .crumb .sep:first-of-type, .crumb span:nth-of-type(1) { display: none; } /* trim "HINOVEST /" prefix */
}
/* The language switch used to be dropped below 700px: two labelled segments
   were ~70px of non-shrinkable topbar, and at 320px the staff row overflowed
   and clipped the bell. It is one 34px icon button now, the same size as the
   three beside it, so it fits and stays. */

/* ---- Trades ledger ------------------------------------------------------- */
.trades-page {
    min-width: 0;
}

.trades-page .page-head {
    margin-bottom: var(--space-6);
}

.trades-page .page-head h1 {
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.trades-page .page-head__sub {
    max-width: 620px;
}

.trades-page .page-head__actions {
    align-self: end;
}

/* Height and min-width now come from .page-head__actions in components.css, so
   every page's header row is one row of controls rather than three sizes. */
.trades-page .page-head__actions .btn {
    justify-content: center;
}

.trades-page .trade-management-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    background: var(--color-surface-1);
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.trades-page .trade-management-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 16px 8px;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface-1);
}

.trades-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(290px, 30vw);
    height: 36px;
    padding: 0 12px;
    color: var(--color-text-tertiary);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.trades-search:focus-within {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.trades-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: 500 var(--text-xs)/1 var(--font-display);
}

.trades-search input::placeholder {
    color: var(--color-text-tertiary);
}

.trade-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.trade-filter-group > span {
    margin: 0 2px 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.trade-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.trade-filter-chip:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-2);
}

.trade-filter-chip.is-active {
    color: var(--color-accent-glow);
    background: var(--color-accent-muted);
    border-color: var(--color-accent-border);
}

.trade-management-toolbar__spacer {
    flex: 1;
}

.trade-view-switch {
    display: flex;
    padding: 3px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
}

.trade-view-switch button {
    display: grid;
    width: 32px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
}

.trade-view-switch button.is-active {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.trade-management-subtoolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.trades-page .column-visibility__menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.trades-page .trade-management-bulk-bar {
    margin: 10px 16px 0;
}

.trades-page .trade-management-table-wrap {
    max-height: min(64vh, 720px);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-surface-inset);
}

/* The outer .trade-management-table-wrap (max-height + overflow:auto) is the sole
   scroll container, so the sticky <thead> freezes against it on vertical scroll. */
.trades-page .trade-management-table-wrap .table-responsive {
    overflow: visible;
}

.trades-page .trade-management-table {
    width: 100%;
    min-width: 990px;
    table-layout: auto;
}

.trades-page .trade-management-table.dt thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 40px;
    padding-inline: 14px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

/* Frozen leading row-number column (sticky on horizontal scroll). */
.trades-page .trade-management-table.dt .trade-rownum-cell {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    width: 44px;
    min-width: 44px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-surface-inset);
}
.trades-page .trade-management-table.dt thead .trade-rownum-cell {
    z-index: 4;
    background: var(--color-surface-2);
}
.trades-page .trade-management-table.dt tbody tr:hover .trade-rownum-cell {
    background: var(--color-surface-2);
}

.trades-page .trade-management-table.dt tbody td {
    height: 44px;
    padding: 8px 14px;
    font-size: var(--text-sm);
    background: var(--color-surface-inset);
}

.trades-page [data-density="compact"] .trade-management-table.dt tbody td {
    height: 36px;
    padding-block: 4px;
}

/* Numeric columns right-align with tabular mono digits (matches HTML reference .num). */
.trades-page .trade-management-table [data-column="entry_price"],
.trades-page .trade-management-table [data-column="take_profit"],
.trades-page .trade-management-table [data-column="win_pip"],
.trades-page .trade-management-table [data-column="rr"],
.trades-page .trade-management-table [data-column="commission"],
.trades-page .trade-management-table [data-column="pnl_pure"],
.trades-page .trade-management-table [data-column="balance"] {
    text-align: end;
}

/* Profit/loss tint on P&L and pip cells — must out-specify the generic
   `.trade-management-shell .trade-management-table.dt tbody td` color rule. */
.trades-page .trade-management-table.dt tbody td.cell-pnl.is-pos {
    color: var(--color-profit);
}
.trades-page .trade-management-table.dt tbody td.cell-pnl.is-neg {
    color: var(--color-loss);
}

/* Sort indicators on sortable headers (matches HTML reference .sort-ind). */
.trades-page .trade-management-table.dt thead th.is-sortable {
    cursor: pointer;
}
.trades-page .trade-management-table.dt thead th.is-sortable:hover {
    color: var(--color-text-primary);
}
.trades-page .trade-management-table.dt thead th.is-sortable::after {
    content: "";
    margin-inline-start: 4px;
    font-size: 10px;
    opacity: 0;
}
.trades-page .trade-management-table.dt thead th.is-sorted-asc,
.trades-page .trade-management-table.dt thead th.is-sorted-desc {
    color: var(--color-text-primary);
}
.trades-page .trade-management-table.dt thead th.is-sorted-asc::after {
    content: "▲";
    opacity: 1;
    color: var(--color-accent-primary);
}
.trades-page .trade-management-table.dt thead th.is-sorted-desc::after {
    content: "▼";
    opacity: 1;
    color: var(--color-accent-primary);
}

.trades-page .trade-management-table.dt tbody tr:nth-child(even) td {
    background: var(--color-surface-inset);
}

.trades-page .trade-management-table.dt tbody tr:hover td,
.trades-page .trade-management-table.dt tbody tr:nth-child(even):hover td {
    background: var(--color-surface-2);
}

.trades-page .trade-management-table [data-column="date_open"] {
    min-width: 220px;
}

.trades-page .trade-management-table [data-column="status"] {
    min-width: 110px;
}

.trades-page .trade-management-table [data-column="entry_price"],
.trades-page .trade-management-table [data-column="take_profit"],
.trades-page .trade-management-table [data-column="balance"] {
    min-width: 112px;
}

.trades-page .trade-management-table [data-column="actions"] {
    min-width: 76px;
    width: 76px;
}

.trade-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 26px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

/* Same rule as .badge--long/--short: direction never borrows the money colors. */
.trade-direction--long {
    color: var(--color-info);
    background: var(--color-info-muted);
}

.trade-direction--short {
    color: var(--color-warning);
    background: var(--color-warning-muted);
}

.trade-identity__copy {
    display: grid;
    gap: 3px;
}

.trade-identity__copy strong {
    color: var(--color-text-primary);
    font: 600 14px/1.1 var(--font-mono);
}

.trade-identity__copy small {
    color: var(--color-text-tertiary);
    font-size: 11px;
}

.trade-setup {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

.trades-page .cell-mono,
.trades-page .cell-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.trades-page .cell-pnl {
    font-weight: var(--weight-semibold);
}

.trade-cost {
    color: var(--color-text-tertiary) !important;
}

/* Add-trade modal: the card itself never scrolls (head + footer always visible);
   only the inputs column scrolls internally, like the HTML reference. The card
   height is bounded by capping the inputs column, so the whole popup never grows
   past the viewport. */
.trade-editor-modal .modal-dialog-scrollable { height: auto; }
.trade-editor-modal .modal-dialog-scrollable .modal-content {
    max-height: 90vh;
    overflow: hidden;
}
.trade-editor-modal .modal__body { padding: 0; }
.trade-editor-modal .trade-form__inputs { max-height: calc(90vh - 172px); }
.trade-editor-modal .trade-form__calc { max-height: calc(90vh - 172px); overflow-y: auto; }

/* Strategy #-autocomplete under the comment field. */
.strategy-suggest {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    min-width: 180px;
    margin-top: 2px;
    padding: 4px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Cap to ~5 rows and scroll the rest so long strategy lists stay usable. */
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.strategy-suggest[hidden] { display: none; }
.strategy-suggest button { flex: 0 0 auto; }
.strategy-suggest button {
    text-align: start;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
}
.strategy-suggest button:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

/* The HTML `hidden` attribute must always win — several components (.btn, .empty,
   .jtile__chart, wizard step buttons) set their own display and were overriding it,
   leaving "hidden" elements visible (e.g. the wizard Create button on every step). */
[hidden] { display: none !important; }

/* Journal colour swatch picker. */
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: border-color 110ms ease; }
.color-swatch:hover { border-color: var(--color-border-strong); }
.color-swatch.is-on { border-color: var(--color-text-primary); box-shadow: 0 0 0 2px var(--color-surface-1); }

/* Trade detail spec grid. */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.spec-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-inset); }
.spec-cell .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.spec-cell .v { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.spec-cell .v.mono { font-family: var(--font-mono); }

/* Global toast stack (success/error/info feedback for user actions). */
.app-toast-host {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-mid);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(8px);
    /* 160ms matches the modal enter — one duration family for transients. */
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: auto;
}
.app-toast.is-in { opacity: 1; transform: none; }
.app-toast i { font-size: 15px; }
.app-toast--success i { color: var(--color-profit); }
.app-toast--error i { color: var(--color-loss); }
.app-toast--info i { color: var(--color-accent-primary); }

.trade-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 100ms ease;
}

.trade-management-table tbody tr:hover .trade-row-actions,
.trade-row-actions:focus-within,
.trade-management-table tbody tr.is-row-selected .trade-row-actions {
    opacity: 1;
}

.trade-row-actions a {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: var(--radius-xs);
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.trade-row-actions a:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.trade-row-actions a.is-danger:hover {
    color: var(--color-loss);
}

.trades-page .trade-management-table.dt .is-sticky-end {
    background: var(--color-surface-inset);
}

.trades-page .trade-management-pagination {
    min-height: 58px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-surface-1);
}

.trades-page .trade-management-pagination__summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
}

.trades-page .trade-management-pagination__nav {
    gap: 16px;
}

.trade-management-pagination__total {
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.trade-management-pagination__total strong {
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}

.trades-page .pagination {
    gap: 5px;
}

.trades-page .pagination .page-link {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
    font: 500 12px/1 var(--font-mono);
}

.trades-page .pagination .page-item.active .page-link {
    color: var(--color-accent-glow);
    background: var(--color-accent-muted);
    border-color: var(--color-accent-border);
}

.trades-page .pagination .page-item.disabled .page-link {
    opacity: 0.38;
}

@media (max-width: 1180px) {
    .trades-page .trade-management-toolbar {
        flex-wrap: wrap;
    }
    .trades-search {
        width: min(360px, 100%);
        flex: 1 1 280px;
    }
    .trade-management-toolbar__spacer {
        display: none;
    }
    .trade-view-switch {
        margin-inline-start: auto;
    }
}

@media (max-width: 720px) {
    .trades-page .page-head {
        align-items: flex-start;
    }
    .trades-page .page-head h1 {
        font-size: 30px;
    }
    .trades-page .page-head__actions {
        width: 100%;
    }
    .trades-page .page-head__actions .btn {
        flex: 1;
    }
    .trades-search {
        flex-basis: 100%;
        width: 100%;
    }
    .trade-filter-group {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .trade-filter-group > span {
        min-width: 38px;
    }
    .trade-view-switch {
        display: none;
    }
    .trades-page .trade-management-pagination {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .trades-page .trade-management-pagination__nav {
        width: 100%;
        justify-content: space-between;
    }
}

/* ---- Site settings ------------------------------------------------------- */
.site-settings-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.site-settings-page .settings-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 30px;
}

.site-settings-page .settings-nav {
    top: calc(var(--topbar-h) + 20px);
    gap: 3px;
}

.site-settings-page .settings-nav a {
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius);
    font-size: 13px;
    text-decoration: none;
}

.site-settings-page .settings-nav a.is-active {
    background: var(--color-accent-muted);
    color: var(--color-accent-glow);
}

.site-settings-page .settings-main {
    padding-bottom: 40px;
}

.site-settings-page .settings-section {
    scroll-margin-top: calc(var(--sticky-h) + var(--space-4));
}

.site-settings-page .settings-section__head .eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-tertiary);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.site-settings-page .settings-section__head h2 {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.site-settings-page .settings-section__head p {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.site-settings-page .theme-grid {
    gap: 12px;
}

.site-settings-page .theme-card {
    min-height: 142px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--color-surface-1);
}

.site-settings-page .theme-card__swatch {
    height: 62px;
    margin-bottom: 12px;
    border-radius: var(--radius);
}

.site-settings-page .theme-card__name {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .theme-card__desc {
    margin-top: 3px;
    font-size: 11px;
}

.site-settings-page .theme-card__check {
    top: 12px;
    inset-inline-end: 12px;
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.site-settings-form {
    display: block;
}

.site-settings-page .settings-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.site-settings-page .list-editor {
    min-height: 162px;
    padding: 16px;
    gap: 12px;
    border-radius: var(--radius);
    background: var(--color-surface-1);
}

.site-settings-page .list-editor__head .name {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .list-editor__head .name .ico {
    color: var(--color-text-tertiary);
}

.site-settings-page .list-editor__count {
    color: var(--color-text-tertiary);
    font-size: 10px;
}

.site-settings-page .searchable-multi-select__control {
    min-height: 64px;
    padding: 7px;
    border-color: var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
    box-shadow: none;
}

.site-settings-page .searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    background: var(--color-surface-inset);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.site-settings-page .searchable-multi-select__selected {
    align-content: flex-start;
    gap: 5px;
    min-height: 48px;
}

.site-settings-page .searchable-multi-select__chip {
    min-height: 28px;
    padding-block: 3px; padding-inline: 10px 7px;
    border-color: var(--color-border-subtle);
    border-radius: 7px;
    background: var(--color-surface-2);
    font-size: 11px;
}

.site-settings-page .searchable-multi-select__chip i {
    color: var(--color-text-tertiary);
}

.site-settings-page .searchable-multi-select__search {
    flex: 1 1 68px;
    min-width: 68px;
    min-height: 27px;
    padding-inline: 3px;
    font-size: 11px;
}

.site-settings-page .searchable-multi-select__search::placeholder {
    color: var(--color-text-tertiary);
}

.site-settings-page .searchable-multi-select__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: 190px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-float);
}

.site-settings-page .searchable-multi-select__option,
.site-settings-page .searchable-multi-select__option-remove,
.site-settings-page .searchable-multi-select__no-results {
    min-height: 30px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-1);
    font-size: 11px;
}

.site-settings-page .settings-behavior {
    display: grid;
    gap: 12px;
}

.site-settings-page .toggle-row {
    min-height: 82px;
    padding: var(--space-4);
    border-radius: var(--radius);
}

.site-settings-page .toggle-row__copy strong {
    color: var(--color-text-primary);
    font-size: 13px;
}

.site-settings-page .toggle-row__copy span {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
}

.site-settings-page .switch {
    width: 45px;
    height: 25px;
    flex-basis: 45px;
}

.site-settings-page .switch::after {
    width: 19px;
    height: 19px;
}

.site-settings-page .switch.is-on::after {
    transform: translateX(20px);
}

html[dir="rtl"] .site-settings-page .switch.is-on::after {
    transform: translateX(-20px);
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

@media (max-width: 1050px) {
    .site-settings-page .settings-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 820px) {
    .site-settings-page .settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* One row of chips above the content: a vertical rail would eat the screen. */
    .site-settings-page .settings-nav {
        position: sticky;
        top: var(--topbar-h);
        z-index: 12;
        max-height: none;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 8px 0;
        overflow-x: auto;
        overflow-y: visible;
        background: var(--color-void);
    }
    .site-settings-page .settings-nav a {
        flex: 0 0 auto;
    }
    .site-settings-page .settings-nav__label {
        flex: 0 0 auto;
        align-self: center;
        margin-block: 0; margin-inline: var(--space-3) var(--space-1);
    }
    .site-settings-page .settings-filter {
        flex: 0 0 200px;
        margin-bottom: 0;
    }
}

@media (max-width: 620px) {
    .site-settings-page .theme-grid,
    .site-settings-page .settings-lists {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-settings-page .toggle-row {
        align-items: flex-start;
    }
    .settings-section__head { padding: var(--space-3) var(--space-4); }
    .settings-section__body { padding: var(--space-4); }
}

/* ============================================================================
   JOURNAL BUILDER WIZARD  (jb-*)
   Moved here from views.css so views.css stays as the verbatim prototype file.
   ============================================================================ */

/* Modal override — remove default padding so our layout fills edge-to-edge */
.journal-create-modal .modal-content { padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
.journal-create-modal .modal-dialog { max-width: 820px; }

/* ── XLSX drop zone ── */
.jb-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 200px; border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-lg); cursor: pointer; text-align: center;
    padding: var(--space-8); margin-top: var(--space-2);
    background: var(--color-surface-inset);
    transition: border-color 150ms, background 150ms;
}
.jb-drop:hover, .jb-drop.is-over { border-color: var(--color-accent-glow); background: var(--color-accent-muted); }
.jb-drop__input { display: none; }
.jb-drop__icon { font-size: 42px; color: var(--color-text-tertiary); margin-bottom: var(--space-3); display: block; }
.jb-drop:hover .jb-drop__icon, .jb-drop.is-over .jb-drop__icon { color: var(--color-accent-glow); }
.jb-drop__primary { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-primary); margin: 0 0 var(--space-1); }
.jb-drop__secondary { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.jb-drop__link { color: var(--color-accent-glow); text-decoration: underline; }
.jb-drop__hint { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 0; }
.jb-drop__picked { display: flex; align-items: center; gap: var(--space-3); }
.jb-drop__name { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--weight-medium); }
.jb-drop__clear {
    background: none; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
    cursor: pointer; color: var(--color-text-tertiary); font-size: var(--text-base);
    line-height: 1; padding: 2px 8px;
    transition: color 120ms, border-color 120ms;
}
.jb-drop__clear:hover { color: var(--color-loss); border-color: var(--color-loss); }

/* ============================================================================
   BOOTSTRAP COMPATIBILITY — views.css defines .modal-backdrop with opacity:0
   and display:grid. Bootstrap appends its backdrop/modal as direct body children,
   so body > selectors restore the correct Bootstrap behavior.
   ============================================================================ */

/* Bootstrap's dimming backdrop (body child, NOT our views.css modal-backdrop wrapper) */
body > .modal-backdrop {
    position: fixed; top: 0; left: 0;
    z-index: 1050; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.56);
    display: block !important;
    opacity: 0;
    pointer-events: auto;
    backdrop-filter: none;
    padding: 0; transform: none; grid-template-columns: unset;
    transition: opacity 0.15s linear;
}
body > .modal-backdrop.show { opacity: 1; }

/* Bootstrap's outer .modal container (hoisted to body by main.js) */
body > .modal {
    position: fixed; top: 0; left: 0;
    z-index: 1055; width: 100%; height: 100%;
    max-height: none; overflow-x: hidden; overflow-y: auto; outline: 0;
    display: none !important;
    background: transparent; border: none; border-radius: 0;
    box-shadow: none; transform: none; flex-direction: unset;
    padding: 0; transition: opacity 0.15s linear;
}
body > .modal.show { display: block !important; }

/* Bootstrap modal inner structure */
.modal-dialog {
    position: relative; width: auto;
    margin: 1.75rem auto; pointer-events: none;
}
@media (min-width: 576px) { .modal-dialog { max-width: 500px; } }
.modal-xl { max-width: 1140px; }
.modal-dialog-scrollable { height: calc(100% - 3.5rem); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow-y: auto; }
body > .modal.show .modal-dialog { pointer-events: auto; }

.modal-content {
    position: relative; display: flex; flex-direction: column; width: 100%;
    pointer-events: auto;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-lg);
    outline: 0;
}
.modal-header {
    display: flex; flex-shrink: 0; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.modal-title {
    margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}
.modal-body { position: relative; flex: 1 1 auto; padding: var(--space-4) var(--space-5); overflow-y: auto; }
.modal-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--space-2); padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

/* Bootstrap close button (used in trade modal and journal modal) */
.btn-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa1ab'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0; border-radius: var(--radius); opacity: 0.6; cursor: pointer; color: transparent;
}
.btn-close:hover { opacity: 1; }

/* Bootstrap pagination structure (JS in trade-editor.js generates these) */
.pagination { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }

/* Legacy button classes used in trade_modal_content.html */
.outline-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 38px; padding: 0 var(--space-4);
    border: 1px solid var(--color-border-mid); border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-secondary);
    font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
    transition: background 110ms ease, color 110ms ease, scale 110ms ease;
}
.outline-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.primary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: 38px; padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-accent-primary); color: var(--color-accent-ink);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    transition: background 110ms ease, scale 110ms ease;
}
.primary-btn:hover { background: var(--color-accent-glow); }
/* Same press feedback as .btn, so the legacy modal buttons feel like the rest. */
.outline-btn:active, .primary-btn:active { scale: 0.96; }
@media (prefers-reduced-motion: reduce) { .outline-btn:active, .primary-btn:active { scale: none; } }

/* Bootstrap utility classes used in templates */
.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.table-responsive { overflow-x: auto; }
.align-middle td, .align-middle th { vertical-align: middle; }

/* form-control: remap Bootstrap's input class to the new design tokens */
.form-control {
    display: block; width: 100%;
    height: 38px; padding: 0 var(--space-3);
    background: var(--color-surface-inset);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--text-sm); font-family: inherit;
    outline: none; transition: border-color 110ms ease, box-shadow 110ms ease;
}
.form-control:focus {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    color: var(--color-text-primary); background: var(--color-surface-inset);
    outline: none;
}
.form-control::placeholder { color: var(--color-text-tertiary); }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }
/* A textarea inherits the 38px input height above and then fights its own rows
   attribute: a five-line block renders one line tall with two scrollbars and a
   resize grip on top of them. One rule here instead of a per-page override,
   because every textarea in the app is a .form-control. */
textarea.form-control {
    height: auto;
    min-height: 82px;
    padding-block: var(--space-3);
    line-height: 1.6;
    resize: vertical;
}
.form-control[type="date"], .form-control[type="time"] {
    font-family: var(--font-mono); cursor: pointer;
}
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button { opacity: 0; }

/* ---- Enhanced form controls ---------------------------------------------- */
.custom-select {
    position: relative;
    width: 100%;
}
.custom-select__native,
.searchable-multi-select__source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}
.custom-select__trigger {
    width: 100%;
    min-height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: start;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.custom-select__trigger:hover,
.custom-select.is-open .custom-select__trigger {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    background: var(--color-surface-2);
}
.custom-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Option text is often mixed — "Zephyr — زن، روشن و سریع" — and one base
       direction gets one of the two halves wrong. */
    unicode-bidi: plaintext;
}
.custom-select__trigger i {
    color: var(--color-text-tertiary);
    transition: transform 120ms ease;
}
.custom-select.is-open .custom-select__trigger i {
    transform: rotate(180deg);
}
.custom-select__menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 45;
    display: none;
    gap: 4px;
    max-height: 190px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-lg);
}
.custom-select.is-open .custom-select__menu {
    display: grid;
}
/* An editable list: every option carries an × and the menu ends in a row you
   can type into. The × only appears on the row under the cursor — eighteen
   little crosses down an open menu is a list that looks like it is asking to be
   emptied. */
.custom-select__option { display: flex; align-items: center; gap: var(--space-2); }
.custom-select__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.custom-select__remove {
    flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: var(--radius-xs);
    display: grid; place-items: center;
    color: var(--color-text-tertiary); font-size: 14px; line-height: 1;
    opacity: 0; transition: opacity 110ms ease, background 110ms ease, color 110ms ease;
}
.custom-select__option:hover .custom-select__remove,
.custom-select__remove:focus-visible { opacity: 1; }
.custom-select__remove:hover { background: var(--color-loss-muted); color: var(--color-loss); }
.custom-select__add {
    display: flex; align-items: center; gap: 4px;
    margin-top: 4px; padding-top: 6px;
    border-top: 1px solid var(--color-border-subtle);
}
.custom-select__add input {
    flex: 1; min-width: 0; height: 30px; padding: 0 var(--space-2);
    border: 1px solid var(--color-border-mid); border-radius: var(--radius-xs);
    background: var(--color-surface-inset); color: var(--color-text-primary);
    font-size: var(--text-xs); outline: none;
}
.custom-select__add input:focus { border-color: var(--color-accent-border); }
.custom-select__add-btn {
    flex: 0 0 30px; height: 30px;
    border: 1px solid var(--color-accent-border); border-radius: var(--radius-xs);
    background: var(--color-accent-muted); color: var(--color-accent-primary);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.custom-select__add-btn:hover { background: var(--color-accent-primary); color: var(--color-accent-ink); }

.custom-select__option {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
    text-align: start;
    cursor: pointer;
    unicode-bidi: plaintext;
}
.custom-select__option:hover,
.custom-select__option.is-selected {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}
.custom-select__option:disabled {
    opacity: 0.5;
    cursor: default;
}

.searchable-multi-select {
    position: relative;
    width: 100%;
}
/* The whole control is the click target — it opens the menu and focuses the
   search box — so it says so: a pointer, a hover edge, and the accent ring while
   the menu is open. Surface-1 rather than the inset well, because the typing box
   inside it is the sunken thing now. */
.searchable-multi-select__control {
    position: relative;
    min-height: 52px;
    padding: 8px;
    padding-inline-end: 34px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.searchable-multi-select__control:hover { border-color: var(--color-border-strong); }
.searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
/* The chevron every other dropdown on the page has, so this reads as one. */
.searchable-multi-select__control::after {
    content: "";
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 12px;
    width: 8px; height: 8px;
    border-inline-end: 2px solid var(--color-text-tertiary);
    border-block-end: 2px solid var(--color-text-tertiary);
    transform: rotate(45deg);
    transition: transform 160ms ease;
    pointer-events: none;
}
.searchable-multi-select.is-open .searchable-multi-select__control::after {
    transform: rotate(225deg);
    border-color: var(--color-accent-primary);
}
.searchable-multi-select.is-open .searchable-multi-select__control {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.searchable-multi-select__selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
}
.searchable-multi-select__empty {
    padding: 5px 2px;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
}
.searchable-multi-select__chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 7px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.searchable-multi-select__chip i {
    color: var(--color-text-tertiary);
}
/* A box, not a hint. This used to be a borderless transparent input floating
   among the chips, so the one part of the control you are meant to type in was
   the only part that did not look like anything. */
.searchable-multi-select__search {
    flex: 1 1 150px;
    min-width: 120px;
    min-height: 30px;
    padding: 3px var(--space-3);
    border: 1px dashed var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    outline: 0;
    transition: border-color 120ms ease, background 120ms ease;
}
.searchable-multi-select__search::placeholder { color: var(--color-text-tertiary); }
.searchable-multi-select__search:hover { border-color: var(--color-border-strong); }
.searchable-multi-select__search:focus {
    border-style: solid;
    border-color: var(--color-accent-border);
    background: var(--color-surface-2);
}
.searchable-multi-select__menu {
    max-height: 190px;
    overflow-y: auto;
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-subtle);
}
.searchable-multi-select__menu[hidden] {
    display: none;
}
.searchable-multi-select__option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}
.searchable-multi-select__option,
.searchable-multi-select__option-remove,
.searchable-multi-select__no-results {
    min-height: 32px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    text-align: start;
}
.searchable-multi-select__option {
    width: 100%;
}
/* The "add what you just typed" row. It is the one row in the menu that is an
   action rather than a choice, so it says so: accent-tinted, with the plus in
   front of the words. */
.searchable-multi-select__option--add {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-accent-muted);
    color: var(--color-accent-primary);
    font-weight: var(--weight-semibold);
}
.searchable-multi-select__option--add .aico { width: 15px; height: 15px; flex: none; }
.searchable-multi-select__option--add:hover { background: var(--color-accent-primary); color: var(--color-accent-ink); }
.searchable-multi-select__option-remove {
    width: 34px;
    color: var(--color-loss);
}
.searchable-multi-select__option:hover,
.searchable-multi-select__option-remove:hover {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
}
.searchable-multi-select__option.is-selected,
.searchable-multi-select__option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Journal settings ---------------------------------------------------- */
.journal-settings-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.journal-settings-page .page-head__sub a {
    color: var(--color-accent-glow);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.journal-settings-page .journal-banner__dot {
    background: var(--color-accent-primary);
    box-shadow: 0 0 0 5px var(--color-accent-muted);
}
.journal-banner__stats {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* The journal group is a stretch of sections inside the settings page now, not
   a page of its own — it no longer carries a rail. */
.settings-nav a { text-decoration: none; }
.settings-nav a.is-danger { color: var(--color-loss); }
.journal-settings-page {
    display: flex; flex-direction: column; gap: var(--space-3);
}
.journal-settings-page .acct-stat-strip {
    margin-bottom: var(--space-5);
}
.journal-settings-fields {
    margin-top: var(--space-5);
}
.journal-settings-page .col-span-2 > .field {
    width: 100%;
}
.journal-settings-page .searchable-multi-select__control {
    min-height: 76px;
}
.journal-settings-page .symbol-pricing-builder {
    width: 100%;
}
@media (max-width: 760px) {
    .journal-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .journal-banner__stats {
        width: 100%;
        margin-inline-start: 30px;
        justify-content: flex-start;
    }
}

/* ---- Reports ------------------------------------------------------------- */
.reports-page,
.reports-explorer,
.reports-charts-grid,
.reports-chart-card {
    min-width: 0;
}
.reports-page .reports-explorer > *,
.reports-page .report-grid > *,
.reports-page .report-chart-card,
.reports-page .reports-trades-panel,
.reports-page .ref-stat-card {
    min-width: 0;
}
.reports-explorer,
.reports-charts-grid,
.report-grid {
    display: grid;
    gap: var(--space-5);
}
.reports-page .reports-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reports-charts-grid {
    margin-top: var(--space-5);
}
.reports-chart-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-0);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.reports-chart-card.is-active {
    border-color: var(--color-accent-border);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.reports-chart-card__head,
.reports-chart-card__head-actions,
.reports-chart-card__axes,
.reports-trades-panel__tools,
.reports-per-page {
    display: flex;
    align-items: center;
}
.reports-chart-card__head {
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.reports-chart-card__head strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
.reports-chart-card__head small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}
.reports-chart-card__head-actions,
.reports-chart-card__axes {
    gap: var(--space-2);
    flex-wrap: wrap;
}
.reports-builder__controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.reports-builder__controls .field-group {
    min-width: 0;
}
.reports-chart-card__axes {
    margin-bottom: var(--space-4);
}
.reports-chart-card__axis-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.reports-chart-card__axis-copy {
    display: grid;
    gap: 2px;
}
.reports-chart-card__axis-copy small {
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
}
.reports-chart-card__axis-copy strong {
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.reports-chart-card__axis-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--color-accent-muted);
}
.reports-chart-card__axis-icon::before,
.reports-chart-card__axis-icon::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-pill);
    background: var(--color-accent-primary);
}
.reports-chart-card__axis-icon--horizontal::before {
    width: 14px;
    height: 2px;
    inset: 11px 5px auto;
}
.reports-chart-card__axis-icon--horizontal::after {
    width: 2px;
    height: 8px;
    inset: 8px auto auto 5px;
}
.reports-chart-card__axis-icon--vertical::before {
    width: 2px;
    height: 14px;
    inset: 5px auto auto 11px;
}
.reports-chart-card__axis-icon--vertical::after {
    width: 8px;
    height: 2px;
    inset: auto auto 5px 8px;
}
/* ---- Journal comparison: legend, per-journal columns --------------------- */
.reports-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}
.reports-chart-legend__item,
.reports-compare-card__name,
.reports-trade-column__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.reports-chart-legend__item i,
.reports-compare-card__name i,
.reports-trade-column__name i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}
.reports-compare-card__name,
.reports-trade-column__name {
    color: var(--color-text-primary);
    font-weight: 600;
}
.reports-trades-compare {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    overflow-x: auto;
    scrollbar-width: thin;
}
.reports-trade-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
    overflow: hidden;
}
.reports-trade-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}
.reports-trade-column__head small {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    white-space: nowrap;
}
.reports-trade-column__rows {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.reports-trade-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-xs);
}
.reports-trade-row:last-child {
    border-bottom: 0;
}
.reports-trade-column__more,
.reports-trades-compare__empty {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    text-align: center;
    margin: 0;
}
.reports-chart-stage {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    background: var(--color-surface-inset);
}
.reports-chart-viewport,
.reports-chart-scroll,
.reports-chart-xaxis-scroll {
    min-width: 0;
    overflow-y: hidden;
}
.reports-chart-viewport {
    overflow-x: hidden;
}
.reports-chart-shell,
.reports-chart-xaxis-shell {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
}
.reports-chart-xaxis-shell {
    min-height: 64px;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-inset);
}
.reports-chart-xaxis-spacer {
    min-height: 64px;
}
/* The divider down the y-axis column is drawn twice — once beside the plot,
   once beside the x-axis labels — and the two halves have to meet. They did
   not: an <svg> computes direction:ltr whatever the page does, so the plot
   half's border-inline-end landed on the opposite side from the strip's. Both
   halves take a physical side, picked off the page direction. */
html[dir="ltr"] .reports-chart--axis,
html[dir="ltr"] .reports-chart-xaxis-spacer {
    border-right: 1px solid var(--color-border-subtle);
}
html[dir="rtl"] .reports-chart--axis,
html[dir="rtl"] .reports-chart-xaxis-spacer {
    border-left: 1px solid var(--color-border-subtle);
}
.reports-chart-scroll,
.reports-chart-xaxis-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.reports-chart-xaxis-scroll {
    scrollbar-width: none;
}
/* The plot SVG is drawn left-to-right regardless of UI language. Under RTL the
   scroll box put its start edge on the right, so the overflow ran the opposite
   way from every scroll gesture and scrollLeft = 0 landed mid-chart — reachable
   with arrow keys only. Pin the scrollers to LTR; the shell grid keeps the
   y-axis on the correct side. */
html[dir="rtl"] .reports-chart-scroll,
html[dir="rtl"] .reports-chart-xaxis-scroll {
    direction: ltr;
}
.reports-chart-xaxis-scroll::-webkit-scrollbar {
    display: none;
}
.reports-chart {
    display: block;
    max-width: none;
}
.reports-chart--axis {
    width: 82px;
    min-width: 82px;
}
.reports-chart-stage.is-axis-hidden .reports-chart-shell {
    grid-template-columns: minmax(0, 1fr);
}
.reports-chart-stage.is-axis-hidden .reports-chart-xaxis-shell {
    display: none;
}
.reports-chart__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    color: var(--color-text-tertiary);
    text-align: center;
    pointer-events: none;
}
.reports-chart__empty[hidden],
.reports-chart__scroll-hint[hidden],
.reports-chart__tooltip[hidden] {
    display: none;
}
.reports-chart__scroll-hint {
    min-height: 36px;
    padding: 8px var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-tertiary);
    font-size: var(--text-2xs);
    text-align: center;
}
.reports-chart__tooltip {
    position: absolute;
    z-index: 4;
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    background: var(--color-surface-3);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    pointer-events: none;
}
.reports-chart__tooltip strong {
    display: block;
    color: var(--color-text-primary);
}
.reports-chart__grid-line {
    stroke: var(--chart-grid);
    stroke-width: 1;
}
.reports-chart__baseline,
.reports-chart__line {
    fill: none;
    stroke: var(--color-accent-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.reports-chart__bar {
    transition: fill 120ms ease;
}
.reports-chart__bar.is-positive {
    fill: var(--color-profit);
}
.reports-chart__bar.is-negative {
    fill: var(--color-loss);
}
.reports-chart__bar.is-accent {
    fill: var(--color-accent-primary);
}
.reports-chart__bar:hover {
    filter: brightness(1.08);
}
/* On-chart value labels above bars / line points (matches HTML reference .rc-barlabel). */
.reports-chart__value-label {
    fill: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-anchor: middle;
}
.reports-chart__value-label.is-negative {
    fill: var(--color-loss);
}
.reports-chart__point {
    fill: var(--color-surface-1);
    stroke: var(--color-accent-primary);
    stroke-width: 2;
}
.reports-chart__x-label,
.reports-chart__y-label {
    fill: var(--chart-axis);
    font-family: var(--font-mono);
    font-size: 11px;
}
.reports-chart__y-label {
    text-anchor: end;
}
.reports-trades-panel__tools {
    justify-content: flex-end;
    gap: var(--space-4);
}
.reports-per-page {
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.reports-per-page .custom-select { width: 84px; }
.reports-per-page .custom-select__trigger {
    min-height: 30px;
    padding-inline: 8px;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.reports-trades-panel__meta {
    min-width: 94px;
    text-align: end;
}
.reports-trades-panel__meta strong,
.reports-trades-panel__meta small {
    display: block;
}
.reports-trades-panel__meta small {
    margin-top: 3px;
    color: var(--color-text-tertiary);
}
.reports-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}
.reports-pagination__current {
    min-width: 34px;
    text-align: center;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}
.report-card__body {
    padding: 0;
}
.report-card__table {
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.report-empty-cell {
    padding: var(--space-5) !important;
    text-align: center;
}
.cell-pnl.is-pos {
    color: var(--color-profit);
}
.cell-pnl.is-neg {
    color: var(--color-loss);
}
@media (max-width: 900px) {
    .reports-page .reports-summary-grid,
    .reports-page .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .reports-builder__controls {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .reports-page .reports-summary-grid,
    .reports-page .report-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .reports-page .report-chart-card {
        padding: var(--space-3);
        overflow: hidden;
    }
    .reports-chart-card__head,
    .reports-trades-panel .card__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .reports-chart-card__head-actions,
    .reports-trades-panel__tools {
        width: 100%;
        justify-content: space-between;
    }
    .reports-chart-shell,
    .reports-chart-xaxis-shell {
        grid-template-columns: 70px minmax(0, 1fr);
    }
    .reports-chart--axis {
        width: 70px;
        min-width: 70px;
    }
}

/* ---- Reports: one card, one tile, one chart, one table --------------------
   The owner's word for the report was "tidier". Each tab had grown its own
   heading sizes, captions, footnotes and tiles, so the eye had to relearn every
   card. Every card now reads the same way - title, one line of caption, the
   content, a footnote under a hairline - and every figure tile, chart and table
   in every tab is the same object. Only looks: the markup, the order and the
   words are the ones in the recorded videos. Colours are tokens, so the report
   follows the theme. Everything is scoped to .reports-explorer, which holds the
   masthead, the tabs and the panes and nothing else. */

/* the card: title, caption, content, footnote */
.reports-explorer .card__head { padding: var(--space-5) var(--space-5) 0; }
.reports-explorer .card__head h2 { margin: 0; font-size: var(--text-md); line-height: 1.5; }
.reports-explorer .card__head p,
.reports-explorer .card__head .mc-axes { margin: 2px 0 0; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: 1.6; max-width: 90ch; }
.reports-explorer .card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.reports-explorer .card__body--flush { padding: var(--space-4) 0 0; }
/* what each axis measures: a quiet caption, its parts separated by a dot */
.reports-explorer .mc-axes { gap: 2px var(--space-2); color: var(--color-text-tertiary); font-size: var(--text-xs); }
.reports-explorer .mc-axes span + span::before { content: "·"; margin-inline-end: var(--space-2); color: var(--color-border-strong); }
.reports-explorer .card__body > .mc-axes,
.reports-explorer #ovDrawdownCard > .mc-axes { margin: var(--space-5) 0 var(--space-2); }
.reports-explorer .mc-legend { gap: var(--space-2) var(--space-5); margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-xs); }
/* The footnote. The one-line reading under a chart used to sit in a tinted box and the
   note under a table in bare text with other paddings; both are the same footnote. */
.reports-explorer .rp-take,
.reports-explorer .rp-note { margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border-subtle);
    border-radius: 0; background: none; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.75; }
.reports-explorer .card > .rp-note { margin: 0; padding: var(--space-3) var(--space-5) var(--space-4); }
.reports-explorer .rp-note--bare { margin-top: var(--space-4); }
.reports-explorer .rp-take b,
.reports-explorer .rp-note b { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.reports-explorer .rp-take bdi,
.reports-explorer .rp-note bdi { font-variant-numeric: tabular-nums; }
.reports-explorer .rp-take:empty,
.reports-explorer .rp-note:empty { display: none; }
.reports-explorer .rp-lead { color: var(--color-text-tertiary); font-size: var(--text-sm); }
/* the compare picker and the figures under it are two cards, not one block */
.reports-explorer [data-report-pane="compare"] > * + * { margin-top: var(--space-5); }
.reports-explorer [data-report-pane="compare"] > .chart-note { margin-top: var(--space-4); }

/* The figure tile. The overview's eight, the risk card's twelve and the simulator's
   five were three designs: a joined grid, boxes with a coloured stripe on top, and
   thin boxes with smaller figures. One tile now: label (and its grade) on one line of
   fixed height, the figure, one quiet line under it. */
.reports-explorer .rp-kpis,
.reports-explorer #riskStats,
.reports-explorer .whatif-cmp-row { display: grid; gap: var(--space-3); border: 0; border-radius: 0; background: none; overflow: visible; }
.reports-explorer .rp-kpis,
.reports-explorer #riskStats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reports-explorer .whatif-cmp-row { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: var(--space-4); }
.reports-explorer .rp-kpi,
.reports-explorer #riskStats .stat,
.reports-explorer .whatif-cmp { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: var(--color-surface-1); box-shadow: none; }
.reports-explorer #riskStats .stat::before { display: none; }
.reports-explorer #riskStats .stat__head,
.reports-explorer .rp-kpi__l { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 20px; }
.reports-explorer .rp-kpi__l,
.reports-explorer #riskStats .stat__label,
.reports-explorer .whatif-cmp > span { color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.reports-explorer #riskStats .stat__main { display: block; }
.reports-explorer #riskStats .stat__figure { gap: var(--space-1); }
.reports-explorer .rp-kpi__v,
.reports-explorer #riskStats .stat__value,
.reports-explorer .whatif-cmp b { margin-top: 2px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: var(--weight-bold);
    line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reports-explorer .rp-kpi__v b { font-weight: inherit; }
.reports-explorer .rp-kpi__d,
.reports-explorer #riskStats .stat__sub,
.reports-explorer .whatif-cmp small { display: block; color: var(--color-text-tertiary); font-size: var(--text-xs); line-height: 1.6; }
.reports-explorer .rp-kpi__d bdi,
.reports-explorer #riskStats .stat__sub bdi,
.reports-explorer .whatif-cmp small bdi { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.reports-explorer #riskStats .meter { margin-top: var(--space-3); }
.reports-explorer #riskStats .meter__track { height: 6px; }
.reports-explorer .whatif-cmp { padding: var(--space-3) var(--space-4); }
.reports-explorer .whatif-cmp small { white-space: nowrap; }
.reports-explorer .whatif-cmp__gap { margin-top: -2px; }
html[dir="rtl"] .reports-explorer .whatif-cmp b { text-align: right; }
/* A grade is a word beside the label, the same size wherever it appears. */
.reports-explorer .grade { padding: 0 7px; font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 18px; }
/* the facts over the daily bars: a step below the tiles, so the tiles stay the headline */
.reports-explorer .facts { gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); }
.reports-explorer .fact b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.reports-explorer .fact span,
.reports-explorer .fact small { color: var(--color-text-tertiary); }

/* The chart. One height per kind, a quiet grid, axis figures in tabular digits, and
   the series in the chart tokens; profit and loss keep the site's own two colours. */
.reports-explorer .chart-grid line { stroke: var(--chart-grid); }
.reports-explorer .chart-grid line.chart-zero { stroke: var(--color-border-mid); }
.reports-explorer .chart-axis text { fill: var(--chart-axis); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.reports-explorer .chart-line { stroke: var(--chart-1); stroke-width: 1.75; }
.reports-explorer .chart-line--loss { stroke: var(--color-loss); }
.reports-explorer .chart-line--info { stroke: var(--color-info); }
.reports-explorer .chart-line--warn { stroke: var(--color-warning); }
.reports-explorer .chart-line[class*="chart-line--s"] { stroke: var(--s); }
.reports-explorer .chart-line--capital { stroke: var(--color-text-tertiary); stroke-width: 1.25; }
.reports-explorer .chart-end { r: 3px; stroke: var(--color-surface-1); }
.reports-explorer .chart-end--accent { fill: var(--chart-1); }
.reports-explorer .bar { opacity: .88; }
.reports-explorer .bar-val { fill: var(--color-text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; }
.reports-explorer .mc-band { fill: var(--chart-1); }
.reports-explorer .mc-median { stroke: var(--chart-1); stroke-width: 1.25; }
.reports-explorer .mc-key--actual { border-top-color: var(--chart-1); }
.reports-explorer .mc-key--median { border-top-color: var(--chart-1); }
.reports-explorer .mc-key--mid,
.reports-explorer .mc-key--wide { background: var(--chart-1); }
.reports-explorer .chart-vline { stroke: var(--chart-grid); stroke-dasharray: none; }
.reports-explorer .dot { opacity: .75; }
/* Journals in Compare: the first two were indigo and blue, read as one colour. The
   chart tokens first, each far from the one before it; the rest keep their colours. */
.reports-explorer .chart-line--s0, .reports-explorer .key-line--s0 { --s: var(--chart-1); }
.reports-explorer .chart-line--s1, .reports-explorer .key-line--s1 { --s: var(--chart-5, var(--color-warning)); }
.reports-explorer .chart-line--s2, .reports-explorer .key-line--s2 { --s: var(--chart-4, var(--color-info)); }
.reports-explorer .chart-line--s3, .reports-explorer .key-line--s3 { --s: var(--chart-2, var(--color-info)); }
.reports-explorer .chart-end--s0 { color: var(--chart-1); }
.reports-explorer .chart-end--s1 { color: var(--chart-5, var(--color-warning)); }
.reports-explorer .chart-end--s2 { color: var(--chart-4, var(--color-info)); }
.reports-explorer .chart-end--s3 { color: var(--chart-2, var(--color-info)); }
.reports-explorer .cmp-dot { box-shadow: none; }
.reports-explorer .cmp-chip { background: transparent; font-weight: var(--weight-medium); }

/* The table. A header that labels rather than shouts, the first and last columns on
   the card's own margins so a table lines up with the title above it, figures in
   tabular digits, and no line under the last row (the card or the footnote has one). */
.reports-explorer table.dt thead th { height: 34px; background: transparent; color: var(--color-text-tertiary); font-size: var(--text-xs);
    font-weight: var(--weight-medium); letter-spacing: 0; border-bottom: 1px solid var(--color-border-subtle); }
.reports-explorer table.dt tbody td { background: transparent; }
.reports-explorer table.dt tbody tr:hover td { background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
.reports-explorer table.dt tr > :first-child { padding-inline-start: var(--space-5); }
.reports-explorer table.dt tr > :last-child { padding-inline-end: var(--space-5); }
.reports-explorer table.dt tbody tr:last-child td { border-bottom: 0; }
.reports-explorer table.dt td.num { font-variant-numeric: tabular-nums; }
.reports-explorer table.dt td.num b { font-weight: var(--weight-semibold); }
.reports-explorer table.dt td:first-child { color: var(--color-text-primary); }
.reports-explorer .rp-versus td:first-child { color: var(--color-text-secondary); }
.reports-explorer .dbar { width: 64px; height: 6px; }
.reports-explorer .dbar i { height: 6px; border-radius: 3px; }
.reports-explorer .dbar::before { background: var(--color-border-mid); }
/* Figures that are one label and one value (the simulation's results): set in two
   columns of pairs, not a two-column table with the room of a whole page between them. */
.reports-explorer table.rp-kv { display: block; }
.reports-explorer table.rp-kv tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: var(--space-8); padding-inline: var(--space-5); }
.reports-explorer table.rp-kv tr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.reports-explorer table.rp-kv tbody td { height: auto; padding: var(--space-3) 0; border-bottom: 0; white-space: normal; }
.reports-explorer table.rp-kv tr > :first-child,
.reports-explorer table.rp-kv tr > :last-child { padding-inline: 0; }
.reports-explorer table.rp-kv td:first-child { color: var(--color-text-secondary); }
.reports-explorer table.rp-kv tbody tr:hover td { background: none; }

/* Monthly results: the columns of a table, a thinner bar, and the day figures set
   under the result they belong to instead of under the month's name. */
.reports-explorer .months { max-width: none; }
.reports-explorer .months__row { grid-template-columns: minmax(96px, 1fr) minmax(0, 3fr) 64px 64px 76px; padding: var(--space-3) 0; }
.reports-explorer .months__row--head { padding: 0 0 var(--space-2); color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.reports-explorer .months__track { height: 6px; border-radius: 3px; }
.reports-explorer .months__track i { border-radius: 3px; }
.reports-explorer .months__net b,
.reports-explorer .months__n,
.reports-explorer .months__wr,
.reports-explorer .months__ret { font-variant-numeric: tabular-nums; }
.reports-explorer .months__net b { font-weight: var(--weight-semibold); }
.reports-explorer .months__meta { grid-column: 2 / -1; margin-top: 2px; }
.reports-explorer .months__sum { gap: var(--space-2) var(--space-6); }
.reports-explorer .months__sum bdi { font-variant-numeric: tabular-nums; }
/* The list was meant to lay itself out by its card's width (components.css), but the
   container was looked for one level too high and never found; this is the card body
   that actually holds it. */
.reports-explorer .card__body:has(> .months) { container-type: inline-size; }
@container (max-width: 560px) {
    .reports-explorer .months__row { grid-template-columns: minmax(0, 1fr) auto; }
    .reports-explorer .months__meta { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .reports-explorer .months__meta { grid-column: 1 / -1; }
}

/* Findings and habits: every tag the same width, so the sentences start on one line. */
.reports-explorer .ins__tag { min-width: 64px; padding: 0 8px; text-align: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 20px; }
.reports-explorer .ins__item dd { font-variant-numeric: tabular-nums; }
.reports-explorer .ins__item dt { color: var(--color-text-tertiary); }
/* The numbered actions are a list, not a row of accent buttons. */
.reports-explorer .rp-actions li::before { width: 22px; height: 22px; border: 1px solid var(--color-border-mid); background: none; color: var(--color-text-secondary); font-size: 11px; font-weight: var(--weight-semibold); }
.reports-explorer .rp-actions li { color: var(--color-text-primary); }

/* the empty states: a quiet panel where the cards would be */
.reports-explorer [data-report-pane] > .empty { padding: var(--space-10) var(--space-6); border: 1px dashed var(--color-border-mid); border-radius: var(--radius-lg); }
.reports-explorer [data-report-pane] > .empty h3 { font-size: var(--text-md); }

/* Under 1500px a pair of cards holding a table stacks (components.css), but that rule
   looks for the table, which is not there yet when the chart beside it is drawn: the
   chart measured half a row and was then stretched, small and centred, across a full
   one. These selectors find the pair by the cards themselves, so the layout is final
   before anything is drawn. */
@media (max-width: 1500px) {
    .reports-explorer [data-report-pane] .grid-2:has(.card__body--flush),
    .reports-explorer [data-report-pane] .grid-2:has(.months),
    .reports-explorer [data-report-pane] .grid-2:has(#dirVersus) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .reports-explorer .rp-kpis,
    .reports-explorer #riskStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .reports-explorer .card__head { padding: var(--space-4) var(--space-4) 0; }
    .reports-explorer .card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
    .reports-explorer .card__body--flush { padding: var(--space-3) 0 0; }
    .reports-explorer .card > .rp-note { padding: var(--space-3) var(--space-4); }
    .reports-explorer .rp-kpis,
    .reports-explorer #riskStats,
    .reports-explorer .whatif-cmp-row { gap: var(--space-2); }
    .reports-explorer .rp-kpi,
    .reports-explorer #riskStats .stat,
    .reports-explorer .whatif-cmp { padding: var(--space-3); }
    .reports-explorer table.dt tr > :first-child { padding-inline-start: var(--space-4); }
    .reports-explorer table.dt tr > :last-child { padding-inline-end: var(--space-4); }
    .reports-explorer table.rp-kv tbody { padding-inline: var(--space-4); }
    .reports-explorer table.rp-kv tr > :first-child,
    .reports-explorer table.rp-kv tr > :last-child { padding-inline: 0; }
    /* a long label or a held time wraps instead of pushing the figures out of the card */
    .reports-explorer .rp-groups td:first-child,
    .reports-explorer .rp-versus td,
    .reports-explorer table.dt thead th { white-space: normal; }
    .reports-explorer table.dt thead th { height: auto; padding-block: var(--space-2); }
    .reports-explorer .mc-axes { flex-direction: column; }
    .reports-explorer .mc-axes span + span::before { content: none; }
}

/* ---- EA Bridge settings section (journal-workspace.js initializeEaBridgeSection) --- */
.ea-key-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* The download button follows the text it belongs to: in Persian the block
   reads right to left and ends on the left, so the button ends there too. */
html[dir="rtl"] .ea-key-row { justify-content: flex-end; }
.ea-key-value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-mid);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
}
.ea-todo-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.ea-todo-row:last-child { border-bottom: 0; }
/* plaintext: each item takes its direction from its own first letter, so an
   English line on the Persian page keeps its question mark at its end. Lined
   up by the page's side, not its own, or a mixed list reads ragged. */
.ea-todo-row__text { flex: 1; font-size: var(--text-sm); color: var(--color-text-primary); unicode-bidi: plaintext; text-align: left; }
[dir="rtl"] .ea-todo-row__text { text-align: right; }
/* Space above it, or the editor lands against the switch that opened it. */
.todo-gate { border: 0; margin: var(--space-4) 0 0; padding: 0; min-inline-size: 0; }
/* Hidden rather than dimmed when the feature is off — see the template. */
.todo-gate[hidden] { display: none !important; }

/* The two expert switches. A tick and a line of text, not a filled card each:
   boxing them made two switches look like two sections, and the second one
   then shared an edge with the checklist editor it opens. */
.ea-switch-row {
    margin-top: var(--space-4);
    padding: 0;
}
.ea-switch-row .field { gap: 4px; }
.ea-switch-row .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.ea-switch-row .field__hint { font-size: var(--text-xs); }
.ea-switch-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent-primary); }
.ea-todo-row__del { width: 26px; height: 26px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.ea-todo-row__del:hover { background: var(--color-loss-muted); color: var(--color-loss); }

/* ---- Signal Bot settings section (journal-workspace.js initializeSignalBotSection) --- */
.signal-bot { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.signal-bot__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.signal-bot__sep { width: 1px; height: 20px; background: var(--color-border-subtle); margin: 0 4px; }
.signal-bot__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.signal-bot__chip {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
}
.signal-bot__chip:hover { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-bot__chip--emoji { font-family: inherit; font-size: var(--text-sm); }
.signal-bot__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.signal-bot__editor textarea { min-height: 190px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; }
.signal-bot__preview { display: flex; flex-direction: column; gap: var(--space-2); }
.tg-bubble {
    min-height: 190px;
    padding: 12px 14px;
    border-radius: 14px 14px 14px 4px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
    word-break: break-word;
}
.tg-bubble code { font-family: var(--font-mono); font-size: var(--text-xs); }
.tg-bubble tg-spoiler { background: var(--color-text-tertiary); border-radius: 3px; color: transparent; }
@media (max-width: 900px) {
    .signal-bot__split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Signal Bot event checklist (journal-workspace.js initializeSignalBotSection) --- */
.signal-events { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-4); }
.signal-events__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.signal-events__head p { margin: 4px 0 0; max-width: 60ch; }
.signal-events__count { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }
.signal-event { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface-1); }
.signal-event.is-on { border-color: var(--color-accent-border); }
.signal-event__row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; }
.signal-event__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.signal-event__label { font-size: var(--text-sm); color: var(--color-text-primary); }
.signal-event__hint { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.signal-event__edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
}
.signal-event__edit:hover { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-event__edit[aria-expanded="true"] { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.signal-event__editor { padding: 0 12px 12px; border-top: 1px solid var(--color-border-subtle); }
.signal-event__editor .signal-bot__bar { margin: 10px 0 8px; }

/* ---- Signal Bot: Dev options message editors (site-settings.js) --- */
.signal-wrap { margin-top: var(--space-5); }
.signal-simple { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.signal-simple .tg-bubble { min-height: 40px; }
.dev-options { margin-top: var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--color-surface-1); }
.dev-options > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-options > summary::marker { color: var(--color-text-tertiary); }
.dev-options[open] > summary { margin-bottom: var(--space-3); color: var(--color-text-primary); }
.signal-template { border-top: 1px solid var(--color-border-subtle); }
.signal-template:first-of-type { border-top: 0; }
.signal-template__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 2px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
}
.signal-template__head:hover { color: var(--color-accent-glow); }
.signal-template.is-open .signal-template__head { color: var(--color-accent-glow); }
.signal-template.is-open .signal-template__head .ico { transform: rotate(90deg); }
.signal-template__head .ico { transition: transform .15s ease; }
.signal-template__body { padding-block: 0 14px; padding-inline: 20px 0; }

/* Theme picker in the top bar: a short scrolling list so it never grows into a page of its own. */
.tpick { position: relative; }
.tpick > summary { list-style: none; cursor: pointer; }
.tpick > summary::-webkit-details-marker { display: none; }
.tpick__menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 1200; width: 190px; max-height: 280px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; background: var(--color-surface-1); border: 1px solid var(--color-border-mid); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.tpick__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.tpick__item:hover, .tpick__item.is-active { background: color-mix(in srgb, currentColor 10%, transparent); }
.tpick__item.is-active { font-weight: 700; }
.tpick__dots { display: inline-flex; flex: 0 0 auto; border-radius: 5px; overflow: hidden; border: 1px solid rgba(128,128,128,.35); }
.tpick__dots i { width: 9px; height: 16px; }