/* ============================================================================
   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(--topbar-h) + var(--space-4));
    max-height: calc(100vh - var(--topbar-h) - var(--space-8));
    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; }
.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); }
.settings-nav__links { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.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; }

/* Each section is a <details>: closed, the page reads as an index of headings
   instead of a mile of open forms. <summary> gives us the toggle, the keyboard
   handling and the aria state for free — no JS needed to open or close one. */
.settings-section {
    scroll-margin-top: calc(var(--topbar-h) + var(--space-5));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-card);
}
.settings-section__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
    transition: background 110ms ease;
}
.settings-section__head::-webkit-details-marker { display: none; }
.settings-section__head:hover { background: var(--color-surface-2); }
.settings-section__head:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.settings-section__title { min-width: 0; }
.settings-section__chevron {
    flex: 0 0 auto; margin-top: 2px;
    color: var(--color-text-tertiary); font-size: 15px;
    transition: transform 160ms ease;
}
.settings-section[open] > .settings-section__head {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.settings-section[open] > .settings-section__head .settings-section__chevron { transform: rotate(180deg); }
.settings-section__body { padding: var(--space-5); }
/* Closed, the description is noise between two headings; open, it is the intro. */
.settings-section:not([open]) .settings-section__head p { display: none; }
.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. */
.subcard {
    margin-top: var(--space-6);
    border: 1px solid var(--color-border-subtle); border-radius: var(--radius);
    background: var(--color-surface-0); overflow: hidden;
}
.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);
}
.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); }

/* 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: 460px; }
.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: 76px; height: 32px; 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); }
.theme-select__menu {
    position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50;
    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);
    width: min(720px, 92vw); max-height: 60vh; overflow: auto;
}
.theme-select__menu[hidden] { display: none; }

/* theme cards (now rendered inside the dropdown menu) */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.theme-card {
    position: relative; text-align: start; cursor: pointer;
    padding: var(--space-3); border-radius: var(--radius);
    border: 1px solid var(--color-border-subtle); background: var(--color-surface-1);
    transition: border-color 120ms ease, transform 120ms ease;
}
.theme-card:hover { border-color: var(--color-border-mid); }
.theme-card.is-active { border-color: var(--color-accent-border); box-shadow: 0 0 0 1px var(--color-accent-border); }
.theme-card__swatch { height: 56px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); display: flex; overflow: hidden; border: 1px solid var(--color-border-subtle); }
.theme-card__swatch span { flex: 1; }
.theme-card__name { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.theme-card__name .ico { font-size: 14px; }
.theme-card__desc { margin-top: 2px; font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.theme-card__check { position: absolute; top: 10px; inset-inline-end: 10px; 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; }
.theme-card.is-active .theme-card__check { display: grid; }

/* 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: 0 6px 0 10px; 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: 4px; 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: none; box-shadow: var(--ring-focus); }
.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: 9px; font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-info); background: var(--color-info-muted); padding: 1px 5px; border-radius: 4px; }

/* 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 */
.color-swatch-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: transform 110ms ease, border-color 110ms ease;
}
.swatch:hover { transform: scale(1.15); }
.swatch.is-on { border-color: var(--color-text-primary); transform: scale(1.1); }

/* 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; }
.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: 6px; 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)); }
    .acct-type-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .risk-model-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px) {
    .acct-stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .acct-type-grid { grid-template-columns: repeat(3, 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)); }
}