/* ============================================================================
   HINOVEST — Screens: Site Settings, Create-Journal modal,
   full Register-Trade form, Reports chart builder
   ============================================================================ */

/* ============================================================================
   SETTINGS
   ============================================================================ */
/* stretch, not start: the main column has to fill the viewport so `margin-top:
   auto` can push the save bar to the bottom of a short group. The rail opts
   back out with align-self so it stays its natural height and can stick. */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.settings-layout > .settings-nav { align-self: start; }
/* The rail is taller than the viewport once every group is listed, and a sticky
   box taller than its viewport only pins after its own bottom has scrolled past
   — which is why the last sections used to scroll with the page. Capping it and
   letting it scroll inside itself is what makes it pin from the first pixel. */
.settings-nav {
    position: sticky;
    top: calc(var(--sticky-h) + var(--space-3));
    max-height: calc(100vh - var(--sticky-h) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--space-1);
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.settings-nav::-webkit-scrollbar { width: 6px; }
.settings-nav::-webkit-scrollbar-thumb { background: var(--color-border-mid); border-radius: var(--radius-pill); }
.settings-nav::-webkit-scrollbar-track { background: transparent; }
.settings-nav a {
    display: flex; align-items: center; gap: var(--space-3);
    height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
    color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}
.settings-nav a .ico { font-size: 15px; opacity: .8; width: 18px; text-align: center; }
/* The icons animate themselves — see the settings-rail block in components.css,
   where each one moves the part of itself that means something. All this rule
   does is bring them to full strength on the row you are on; an earlier version
   scaled the whole glyph instead, which is the one gesture an icon can make
   that says nothing about what it is. */
.settings-nav a .ico,
.settings-nav__label .ico {
    display: inline-grid; place-items: center;
    transition: opacity 160ms ease;
}
.settings-nav a:hover .ico,
.settings-nav a:focus-visible .ico,
.settings-nav a.is-active .ico,
.settings-nav__label:hover .ico,
.settings-nav__label:focus-visible .ico,
.settings-nav__group.is-current .settings-nav__label .ico { opacity: 1; }
.settings-nav a:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.settings-nav a.is-active { background: var(--color-accent-muted); color: var(--color-accent-glow); }
/* Group heading inside the settings rail — the control that swaps the main
   column, and the disclosure for its own links. */
.settings-nav__group + .settings-nav__group { margin-top: var(--space-2); }
.settings-nav__label {
    width: 100%;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; text-align: start;
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--color-text-tertiary);
    transition: background 110ms ease, color 110ms ease;
}
.settings-nav__label span { flex: 1; min-width: 0; }
.settings-nav__label .ico { font-size: 14px; }
.settings-nav__label:hover { background: var(--color-surface-2); color: var(--color-text-secondary); }
.settings-nav__group.is-current .settings-nav__label { color: var(--color-accent-glow); }
.settings-nav__caret { font-size: 11px; transition: transform 160ms ease; }
.settings-nav__label[aria-expanded="true"] .settings-nav__caret { transform: rotate(180deg); }
/* Indented, and hung off a hairline: a group's links used to start at exactly
   the same edge as the group heading above them, so the rail read as one flat
   list of eighteen things rather than four groups. */
.settings-nav__links {
    display: flex; flex-direction: column; gap: 2px;
    padding-top: 2px; padding-inline-start: var(--space-3);
    margin-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--color-border-subtle);
}
.settings-nav__links[hidden] { display: none; }
.settings-filter {
    display: flex; align-items: center; gap: var(--space-2);
    height: 34px; margin-bottom: var(--space-3); padding: 0 var(--space-3);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
    background: var(--color-surface-inset); color: var(--color-text-tertiary);
}
.settings-filter input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    color: var(--color-text-primary); font-size: var(--text-xs);
}
.settings-no-match { margin: 0; color: var(--color-text-tertiary); font-size: var(--text-sm); }
.settings-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* A plain <section>, open. It used to be a <details> so the page could read as
   an index of headings, but the rail already is that index — the caret only
   added a second thing to click before you could read anything, and nineteen
   half-shut boxes never lined up into one surface.

   The head rounds its own top corners to match the card instead of leaning on
   overflow: hidden — that used to clip the theme-picker dropdown against the
   card's own bottom edge, since an absolutely positioned menu is clipped by
   any hidden-overflow ancestor no matter its z-index. */
.settings-section {
    scroll-margin-top: calc(var(--sticky-h) + var(--space-4));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-card);
}
/* Structure, not depth: this line separates the heading from the fields, so it
   stays a border while the card's own lift comes from the shadow. */
.settings-section__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.settings-section__title { min-width: 0; }
.settings-section__body { padding: var(--space-5); }
.settings-section__head .eyebrow { color: var(--color-text-tertiary); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.settings-section__head h2 { margin: 4px 0 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.settings-section__head p { margin: 6px 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 64ch; }
.settings-section--danger { border-color: color-mix(in srgb, var(--color-loss) 30%, var(--color-border-subtle)); }
.settings-section--danger .settings-section__head h2 { color: var(--color-loss); }

/* A plain nested block for a self-contained action inside a section (changing
   your password). Not .danger-zone, which pads only its own row markup. Same
   corner-rounding-without-overflow-hidden reasoning as .settings-section. */
.subcard {
    margin-top: var(--space-6);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius);
    background: var(--color-surface-0);
}
.subcard__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: var(--radius) var(--radius) 0 0;
}
.subcard__head .ico { color: var(--color-accent-primary); font-size: 17px; }
.subcard__head h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.subcard__head p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.subcard__body { padding: var(--space-4); }

/* Change password: the current one confirms the change, so it goes first and
   alone; the new one and its repeat are the pair you compare, so they go side
   by side under it. Explicit placement rather than flow order — left to
   auto-placement the third field wrapped onto its own row and the first
   ended up beside the one it is not related to. */
.pwd-grid > [data-field="old_password"]  { grid-column: 1; grid-row: 1; }
.pwd-grid > [data-field="new_password1"] { grid-column: 1; grid-row: 2; }
.pwd-grid > [data-field="new_password2"] { grid-column: 2; grid-row: 2; }
/* One column below 820px (see .form-grid in views.css): let them stack in
   source order instead of holding a two-column plan against a one-column grid. */
@media (max-width: 820px) {
    .pwd-grid > [data-field] { grid-column: auto; grid-row: auto; }
}

/* Pinned to the viewport, not to the end of the content: the bar shows up the
   moment something changes, wherever you happen to be scrolled to. */
.settings-savebar {
    position: sticky; bottom: var(--space-4); z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    margin-top: auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-accent-border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-1) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-float);
    animation: savebar-in 180ms ease-out;
}
.settings-savebar[hidden] { display: none; }
.settings-savebar__note {
    margin-inline-end: auto;
    display: flex; align-items: center; gap: 2px;
    color: var(--color-accent-glow); font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.settings-savebar__note .bi { font-size: 20px; line-height: 0; }
@keyframes savebar-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
html.reduce-motion .settings-savebar { animation: none; }
/* The rail sticks to the viewport, so the column has to be at least as tall as
   one — otherwise a short group leaves the save bar floating mid-screen. */
.settings-layout { min-height: calc(100vh - var(--topbar-h) - var(--space-12)); }
.settings-main { padding-bottom: var(--space-4); }

/* theme chooser — collapsed into a dropdown */
.theme-select { position: relative; max-width: 420px; }
.theme-select__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); cursor: pointer;
    border: 1px solid var(--color-border-mid); border-radius: var(--radius);
    background: var(--color-surface-1); color: var(--color-text-primary);
    transition: border-color 120ms ease;
}
.theme-select__trigger:hover { border-color: var(--color-border-strong); }
.theme-select__current { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.theme-select__swatch { width: 64px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; overflow: hidden; border: 1px solid var(--color-border-subtle); }
.theme-select__swatch span { flex: 1; }
.theme-select__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.theme-select__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.theme-select__hint { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.theme-select__chevron { transition: transform 160ms ease; color: var(--color-text-tertiary); }
.theme-select__trigger[aria-expanded="true"] .theme-select__chevron { transform: rotate(180deg); }

/* The menu is as wide as the control it hangs off, not as wide as the card.
   It used to open at 720px over a 460px trigger, which is what made it read as
   a second page rather than a list of options. */
.theme-select__menu {
    position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 50;
    width: 100%; min-width: 340px;
    padding: var(--space-3); border: 1px solid var(--color-border-mid); border-radius: var(--radius);
    background: var(--color-surface-1); box-shadow: var(--shadow-float);
    max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.theme-select__menu[hidden] { display: none; }

.theme-group { display: flex; flex-direction: column; gap: var(--space-2); }
.theme-group__label {
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--color-text-tertiary);
}
/* Four to a row, and the row is the swatch. A palette is judged by its colours,
   so the colours are the whole tile and the name is a caption under it. */
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.theme-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer; text-align: center;
}
.theme-card__swatch {
    position: relative; height: 34px; border-radius: var(--radius-sm);
    display: flex; overflow: hidden;
    border: 1px solid var(--color-border-mid);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-card__swatch span { flex: 1; }
.theme-card:hover .theme-card__swatch { transform: translateY(-1px); border-color: var(--color-border-strong); }
.theme-card:focus-visible { outline: none; }
.theme-card:focus-visible .theme-card__swatch { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.theme-card.is-active .theme-card__swatch {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}
.theme-card__name {
    font-size: var(--text-2xs); font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-card.is-active .theme-card__name { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
/* A badge in the corner of the swatch, not a wash over it: the swatch is the
   only thing on this tile that tells you what you are choosing, so the tick
   must not be painted across it. */
.theme-card__check {
    position: absolute; inset-block-start: 3px; inset-inline-end: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    display: none; place-items: center;
    background: var(--color-accent-primary); color: var(--color-accent-ink);
    font-size: 10px; box-shadow: 0 0 0 2px var(--color-surface-1);
}
.theme-card__check .aico { width: 10px; height: 10px; }
.theme-card.is-active .theme-card__check { display: grid; }
@media (max-width: 560px) {
    .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .theme-select__menu { min-width: 0; }
}

/* list editor (tag manager) */
.list-editor { background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.list-editor__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.list-editor__head .name { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.list-editor__head .name .ico { color: var(--color-text-tertiary); font-size: 14px; }
.list-editor__count { font-size: var(--text-2xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }
.tag-field { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-mid); background: var(--color-surface-inset); transition: border-color 110ms ease, box-shadow 110ms ease; }
.tag-field:focus-within { border-color: var(--color-accent-border); box-shadow: 0 0 0 3px var(--color-accent-muted); }
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding-block: 0; padding-inline: 10px 6px; border-radius: var(--radius-sm);
    background: var(--color-surface-2); border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
}
.tag button { width: 16px; height: 16px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.tag button:hover { background: var(--color-loss-muted); color: var(--color-loss); }
.tag-field input { flex: 1; min-width: 80px; height: 26px; border: 0; background: transparent; color: var(--color-text-primary); font-size: var(--text-sm); outline: none; }
.list-editor__hint { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.settings-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* toggle row */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); }
.toggle-row__copy strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.toggle-row__copy span { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.switch { position: relative; width: 40px; height: 23px; border-radius: var(--radius-pill); background: var(--color-surface-3); border: 1px solid var(--color-border-mid); cursor: pointer; flex: 0 0 40px; transition: background 120ms ease, border-color 120ms ease; }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--color-text-secondary); transition: transform 130ms cubic-bezier(.22,1,.36,1), background 120ms ease; }
.switch.is-on { background: var(--color-accent-muted); border-color: var(--color-accent-border); }
.switch.is-on::after { transform: translateX(17px); background: var(--color-accent-primary); }
html[dir="rtl"] .switch.is-on::after { transform: translateX(-17px); }

/* ============================================================================
   CREATE JOURNAL (modal)
   ============================================================================ */
.modal--wide { width: min(720px, 100%); }
.jb-create { display: flex; flex-direction: column; min-height: 0; }
.jb-create__body { padding: var(--space-5) var(--space-6); overflow-y: auto; max-height: min(70vh, 620px); }
.jb-create__lede { margin: 0 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 62ch; }

/* Everything that already has a good default lives behind one of these. */
.jb-fold { margin-top: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: var(--color-surface-0); }
.jb-fold__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
    border-radius: var(--radius);
}
.jb-fold__head::-webkit-details-marker { display: none; }
.jb-fold__head:hover { background: var(--color-surface-2); }
.jb-fold__head:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }
.jb-fold__head > .ico { color: var(--color-text-tertiary); font-size: 16px; }
.jb-fold__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.jb-fold__hint { margin-inline-start: auto; color: var(--color-text-tertiary); font-size: var(--text-2xs); text-align: end; }
.jb-fold__caret { flex: 0 0 auto; color: var(--color-text-tertiary); font-size: 12px; transition: transform 160ms ease; }
.jb-fold[open] > .jb-fold__head { border-bottom: 1px solid var(--color-border-subtle); border-radius: var(--radius) var(--radius) 0 0; }
.jb-fold[open] > .jb-fold__head .jb-fold__caret { transform: rotate(180deg); }
.jb-fold__body { padding: var(--space-4); }
.jb-fold__section + .jb-fold__section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); }
.jb-fold__section-title {
    display: block; margin-bottom: var(--space-3);
    color: var(--color-text-tertiary); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
@media (max-width: 560px) {
    .jb-create__body { padding: var(--space-4); }
    .jb-fold__hint { display: none; }
}

/* ============================================================================
   FULL TRADE FORM  (two-column: inputs + sticky live calc)
   ============================================================================ */
.modal--trade { width: min(1080px, 100%); }
.trade-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; }
.trade-form__inputs { padding: var(--space-5); overflow-y: auto; max-height: 76vh; }
.trade-form__calc { border-inline-start: 1px solid var(--color-border-subtle); background: var(--color-surface-0); padding: var(--space-5); }
.trade-form__calc-inner { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.context-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-inset); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); margin-bottom: var(--space-5); }
.context-bar .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.context-bar .v { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.context-bar .chip-auto { margin-inline-start: auto; }

.form-block { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-subtle); }
.form-block:first-of-type { border-top: 0; padding-top: 0; }
.form-block__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.form-block__title .ico { color: var(--color-accent-primary); font-size: 15px; }
.form-block__hint { font-size: var(--text-2xs); color: var(--color-text-tertiary); margin: 0 0 var(--space-4); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }

/* auto field — marked as computed/editable */
.field--auto .input { background: color-mix(in srgb, var(--color-info) 7%, var(--color-surface-inset)); }
.field__label .auto-tag { margin-inline-start: 6px; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-info); background: var(--color-info-muted); padding: 1px 5px; border-radius: var(--radius-xs); }

/* collapsible */
.collapse { border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow: hidden; margin-top: var(--space-4); }
.collapse__head { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-4); background: var(--color-surface-1); border: 0; color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
.collapse__head .chev { margin-inline-start: auto; transition: transform 140ms ease; color: var(--color-text-tertiary); }
.collapse.is-open .collapse__head .chev { transform: rotate(90deg); }
.collapse__head .pill { font-size: var(--text-2xs); color: var(--color-text-secondary); background: var(--color-surface-3); padding: 1px 7px; border-radius: var(--radius-pill); font-weight: var(--weight-medium); }
.collapse__body { display: none; padding: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.collapse.is-open .collapse__body { display: block; }

/* live calc panel */
.calc-title { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-tertiary); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 6px; }
.calc-hero { padding: var(--space-4); border-radius: var(--radius); background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); }
.calc-hero__k { font-size: var(--text-xs); color: var(--color-text-secondary); }
.calc-hero__v { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border-subtle); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border-subtle); }
.calc-cell { background: var(--color-surface-1); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.calc-cell .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.calc-cell .v { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.rr-meter { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.rr-meter span { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 200ms ease, background 200ms ease; }

/* file drop */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-5); border: 1.5px dashed var(--color-border-mid); border-radius: var(--radius); background: var(--color-surface-inset); color: var(--color-text-tertiary); cursor: pointer; transition: border-color 110ms ease, color 110ms ease; }
.dropzone:hover { border-color: var(--color-accent-border); color: var(--color-accent-glow); }
.dropzone .ico { font-size: 22px; }

/* ============================================================================
   REPORTS — chart builder
   ============================================================================ */
.report-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.report-builder-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.rb-control label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-bottom: 6px; }
.axis-cards { display: flex; gap: var(--space-3); margin: var(--space-4) 0; flex-wrap: wrap; }
.axis-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: var(--color-surface-1); }
.axis-card__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-accent-muted); color: var(--color-accent-glow); font-size: 15px; }
.axis-card .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.axis-card .v { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.report-chart-card { background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.report-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.report-chart-head h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.report-chart-head p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.chart-canvas { position: relative; height: 360px; margin-top: var(--space-5); }
.chart-canvas svg { width: 100%; height: 100%; overflow: visible; }
.rc-grid line { stroke: var(--chart-grid); stroke-width: 1; }
.rc-axis text { fill: var(--chart-axis); font-family: var(--font-mono); font-size: 11px; }
.rc-bar { transition: height .35s cubic-bezier(.22,1,.36,1), y .35s cubic-bezier(.22,1,.36,1); cursor: pointer; }
.rc-bar:hover { filter: brightness(1.12); }
.rc-barlabel { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.rc-line { fill: none; stroke: var(--color-accent-primary); stroke-width: 2; stroke-linejoin: round; }
.rc-dot { fill: var(--color-surface-1); stroke: var(--color-accent-primary); stroke-width: 2; }

/* ============================================================================
   JOURNAL SETTINGS — additional components
   ============================================================================ */

/* account type selector */
.acct-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.acct-type-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-4) var(--space-3);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius);
    background: var(--color-surface-1); cursor: pointer; text-align: center;
    transition: border-color 120ms ease, background 120ms ease;
}
.acct-type-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.acct-type-card:hover { border-color: var(--color-border-mid); background: var(--color-surface-2); }
.acct-type-card.is-on { border-color: var(--color-accent-border); background: var(--color-accent-muted); }
.acct-type-card__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 18px; background: var(--color-surface-2); }
.acct-type-card.is-on .acct-type-card__icon { background: var(--color-accent-muted); color: var(--color-accent-glow); }
.acct-type-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.acct-type-card__sub { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.acct-type-card__check { position: absolute; top: 8px; inset-inline-end: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent-primary); color: var(--color-accent-ink); display: none; place-items: center; font-size: 11px; }
.acct-type-card.is-on .acct-type-card__check { display: grid; }

/* Journal color swatches live in bridge.css as .color-swatch — the only
   markup this screen renders (settings.html + journal-workspace.js). */

/* account stats row */
.acct-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow: hidden; }
.acct-stat { background: var(--color-surface-1); padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.acct-stat .k { font-size: var(--text-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.acct-stat .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
/* Three of these four cells hold a number; the fourth holds a name. JetBrains
   Mono has no Persian glyphs, so "درصد ریسک" was assembled letter by letter out
   of whatever face the system offered — and the LTR run below reversed it. */
.acct-stat .v--text { font-family: inherit; font-size: var(--text-lg); }
.acct-stat .hint { font-size: var(--text-2xs); color: var(--color-text-tertiary); }

/* symbol pricing table */
.sym-table-wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow: auto; }
/* Keep the builder inside its container; the table never forces the page wider. */
.symbol-pricing-builder__list { max-width: 100%; overflow-x: auto; }
/* Fixed layout + flexible inputs so all columns fit the available width. */
.sym-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.sym-table .si { width: 100%; min-width: 0; box-sizing: border-box; }
.sym-table thead th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-mid); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: start; white-space: nowrap; }
.sym-table thead th.num { text-align: end; }
.sym-table tbody td { height: 44px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
.sym-table tbody tr:last-child td { border-bottom: 0; }
.sym-table tbody tr:hover td { background: var(--color-surface-2); }
.sym-table .sym-name { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.sym-table .sym-cat { font-size: var(--text-2xs); color: var(--color-text-tertiary); display: block; }
.sym-table td.num { text-align: end; }
.sym-table .si { height: 32px; padding: 0 var(--space-2); font-family: var(--font-mono); text-align: end; }
.sym-table .si::-webkit-inner-spin-button { opacity: 0; }
.sym-table .sym-del { width: 28px; height: 28px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: grid; place-items: center; }
.sym-table .sym-del:hover { background: var(--color-loss-muted); color: var(--color-loss); }

/* Narrow screens: stack each symbol's fields vertically (label + input) so the
   commission / spread / pip size / pip value fields never overflow sideways. */
@media (max-width: 720px) {
    .sym-table, .sym-table tbody, .sym-table tr, .sym-table td { display: block; width: 100%; }
    .sym-table thead { display: none; }
    .sym-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
    .sym-table tbody td { height: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-3); border: 0; }
    .sym-table tbody td::before { content: attr(data-label); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
    .sym-table tbody td:not([data-label])::before { content: ""; }
    .sym-table .si { width: 60%; text-align: end; }
}

/* alert threshold row */
.alert-block { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); }
.alert-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.alert-block__copy strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.alert-block__copy span { font-size: var(--text-xs); color: var(--color-text-secondary); }
.alert-block__threshold { display: none; gap: var(--space-3); align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.alert-block.is-on .alert-block__threshold { display: flex; }
.range-track { flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: var(--radius-pill); background: var(--color-surface-3); outline: none; cursor: pointer; }
.range-track::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent-primary); border: 2px solid var(--color-surface-1); cursor: pointer; box-shadow: var(--shadow-sm); }
.range-track::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent-primary); border: 2px solid var(--color-surface-1); cursor: pointer; }
.range-val { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 48px; text-align: end; color: var(--color-text-primary); }

/* danger zone */
.danger-zone { border: 1px solid color-mix(in srgb, var(--color-loss) 30%, var(--color-border-subtle)); border-radius: var(--radius-lg); overflow: hidden; }
.danger-zone__head { padding: var(--space-4) var(--space-5); background: color-mix(in srgb, var(--color-loss) 6%, var(--color-surface-1)); border-bottom: 1px solid color-mix(in srgb, var(--color-loss) 20%, var(--color-border-subtle)); display: flex; align-items: center; gap: var(--space-3); }
.danger-zone__head .ico { color: var(--color-loss); font-size: 18px; }
.danger-zone__head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.danger-zone__head p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.danger-row:last-child { border-bottom: 0; }
.danger-row__copy strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.danger-row__copy span { font-size: var(--text-xs); color: var(--color-text-secondary); }
.danger-row .btn--danger { flex: 0 0 auto; }

/* journal header band */
.journal-banner {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}
.journal-banner__dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.journal-banner__name { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.journal-banner__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 2px; }
.journal-banner__meta span { font-size: var(--text-xs); color: var(--color-text-secondary); }
.journal-banner__meta .sep { color: var(--color-text-tertiary); }

/* risk model cards */
.risk-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.risk-card { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: var(--color-surface-1); cursor: pointer; transition: border-color 110ms ease, background 110ms ease; text-align: start; }
.risk-card:hover { border-color: var(--color-border-mid); background: var(--color-surface-2); }
.risk-card.is-on { border-color: var(--color-accent-border); background: var(--color-accent-muted); }
.risk-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 6px; }
.risk-card.is-on .risk-card__name { color: var(--color-accent-glow); }
.risk-card__desc { font-size: var(--text-2xs); color: var(--color-text-tertiary); margin-top: 3px; }

@media (max-width: 1100px) {
    .acct-stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Three 88px cards at 320px wrap their labels to four lines — go 2-up instead. */
@media (max-width: 560px) {
    .acct-type-grid, .risk-model-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ============================================================================
   EXISTING RESPONSIVE (unchanged below)
   ============================================================================ */
@media (max-width: 1100px) {
    .settings-layout { grid-template-columns: minmax(0,1fr); }
    .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .trade-form { grid-template-columns: minmax(0,1fr); }
    .trade-form__calc { border-inline-start: 0; border-top: 1px solid var(--color-border-subtle); }
    .trade-form__calc-inner { position: static; }
    .report-builder-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
    .settings-lists { grid-template-columns: minmax(0,1fr); }
    .theme-grid { grid-template-columns: minmax(0,1fr); }
    .form-grid-3, .form-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}