/* ============================================================================
   HINOVEST — Calm skin
   ============================================================================

   A quieter reading of the same design system: larger type, more room between
   things, no shadows, and one accent instead of five. Nothing here is new
   design — every value is a token the rest of the CSS already reads.

   Every rule in this file is scoped to html[data-ui="calm"], and this file
   loads LAST, so the skin is purely additive: no existing rule was edited and
   none is deleted. That is the rollback plan. Set

       DJANGO_UI_SKIN=classic

   in the environment and restart — base.html stamps data-ui with it, the
   attribute stops matching, and the app is byte-for-byte the old one without a
   rebuild, a deploy or a revert. No CSS change is needed to go back.

   Why it was needed: the post-login pages stacked five bands of chrome above
   the content (topbar, breadcrumb, tab strip, page header, toolbar), three of
   which repeated the journal's name, under an 11-14px type scale. The
   information was all there and none of it was easy to read.
   ============================================================================ */

html[data-ui="calm"] {
    /* ---- Type: one step up across the scale ------------------------------
       14px body is a spreadsheet, not a page. Every size moves together so
       the existing hierarchy is preserved rather than re-tuned per component. */
    --text-2xs: 12px;   /* was 11 */
    --text-xs:  13px;   /* was 12 */
    --text-sm:  14px;   /* was 13 — also --table-fs */
    --text-base:16px;   /* was 14 */
    --text-md:  17px;   /* was 15 */
    --text-lg:  19px;   /* was 17 */
    --text-xl:  22px;   /* was 20 */
    --text-2xl: 28px;   /* was 25 */
    --text-3xl: 36px;   /* was 32 — .page-head h1 and .kpi__value */
    --text-4xl: 44px;   /* was 40 */

    /* ---- Space: only the two that separate blocks -------------------------
       space-3 and space-4 size the insides of controls (141 and 113 uses):
       moving those changes every button and input height and is where a
       density change breaks a layout. space-5 is card padding and grid gap,
       space-6 is the content gutter — those are the ones that read as calm. */
    --space-5: 24px;    /* was 20 */
    --space-6: 32px;    /* was 24 */

    /* ---- Flat ------------------------------------------------------------
       A shadow says "this floats above the page". On a grid where every card
       carries one, nothing floats and the page just looks smudged. Kept for
       the things that genuinely overlay: dropdowns, popovers, modals. */
    --shadow-sm: none;
    --shadow-card: none;

    /* ---- No decorative wash ----------------------------------------------
       .app-shell::before/::after paint two radial gradients from these. The
       glow belongs on the landing page; behind a table of fills it is noise. */
    --bg-wash-a: transparent;
    --bg-wash-b: transparent;
}

/* ---- Eyebrows --------------------------------------------------------------
   "MINDUR 2021 · LIVE" above an <h1> that says the same thing, and "BREAKDOWN"
   above a card headed "Performance". The heading is the label. */
html[data-ui="calm"] .page-head__eyebrow,
html[data-ui="calm"] .card__eyebrow,
html[data-ui="calm"] .panel-card__eyebrow,
html[data-ui="calm"] .checkout__eyebrow { display: none; }

/* ---- Breadcrumb ------------------------------------------------------------
   Third copy of the journal name, after the workspace tab and the page title.
   It stays on a phone, where the sidebar is behind a hamburger and the tab
   strip is the only other thing that says where you are. */
@media (min-width: 860px) {
    html[data-ui="calm"] .topbar .crumb { display: none; }
}

/* ---- One accent ------------------------------------------------------------
   Each journal tile paints a coloured rail across its top from --journal-color,
   so a grid of six journals is six competing headline colours. The same value
   already drives .jtile__dot, which identifies the journal at a size that does
   not shout. Rail off, dot kept. */
html[data-ui="calm"] .jtile::before { display: none; }
/* The tile is one block, not a body over a footer band: the stats line sits
   under the name in the same fill, and the description keeps no paragraph
   margin. A journal with no curve yet was mostly the gap between the two. */
html[data-ui="calm"] .jtile__desc { margin: 0; }
html[data-ui="calm"] .jtile__foot { padding-top: 0; border-top: 0; background: none; }

/* ---- Cards -----------------------------------------------------------------
   --shadow-card above covers everything that reads the token; these two set
   their own. */
html[data-ui="calm"] .card,
html[data-ui="calm"] .kpi-strip { box-shadow: none; }

/* ---- Section heads ---------------------------------------------------------
   A tinted band with a rule under it gave every settings block a letterhead,
   and the password box inside the account block a second one, icon and all.
   A heading starts a section by itself; space does the grouping. */
html[data-ui="calm"] .settings-section__head { background: none; border-bottom: 0; padding-bottom: 0; }
html[data-ui="calm"] .subcard { border: 0; background: none; }
html[data-ui="calm"] .subcard__head { padding-inline: 0; background: none; border-bottom: 0; }
html[data-ui="calm"] .subcard__head .ico { display: none; }
html[data-ui="calm"] .subcard__body { padding-inline: 0; }

/* ---- Phone -----------------------------------------------------------------
   The larger type is the point and stays. The extra gutter is not: on a 390px
   screen 32px of padding each side is a tenth of the viewport, so the two
   spacing tokens go back to their old values below the tablet breakpoint. */
@media (max-width: 640px) {
    html[data-ui="calm"] {
        --space-5: 20px;
        --space-6: 24px;
    }
}

/* ---- The primary button stops glowing ---------------------------------------
   Its own tinted shadow made every "New journal" and "See plans" a small lamp,
   and a page with two of them had two light sources. The fill already says
   "start here"; the inner highlight keeps its edge. */
html[data-ui="calm"] .btn--primary,
html[data-ui="calm"] .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html[data-ui="calm"] .btn--primary:active { box-shadow: none; }

/* ---- The corner radar, fainter ----------------------------------------------
   The owner wanted it kept (a corner says "radar"), but at 12-20% its rings
   ran straight through the page head and the first card's border on every
   page. Half that is still visible on an empty corner and gone behind a card. */
html[data-ui="calm"] .radar-bg__rings circle,
html[data-ui="calm"] .radar-bg__spokes line { stroke-opacity: 0.06; }
html[data-ui="calm"] .radar-bg__rings .is-major { stroke-opacity: 0.1; }
html[data-ui="calm"] .radar-bg__sweep { opacity: 0.6; }
html[data-ui="calm"] .radar-bg__blips i { box-shadow: none; }

/* ---- Journal hub: the money is the headline ---------------------------------
   The result sat in a tinted pill the same size as the market tag beside it,
   so the one number a trader opens the hub for read as a label. Same place,
   same text - as a figure: no pill, a size up, tabular digits. The trades /
   win line under it moves up from tertiary so it reads without leaning in. */
html[data-ui="calm"] .jtile__top .badge--pos,
html[data-ui="calm"] .jtile__top .badge--neg {
    padding: 0; background: none; border: 0;
    font-size: var(--text-md); font-weight: var(--weight-semibold);
    font-family: var(--font-display); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
html[data-ui="calm"] .jtile__foot { color: var(--color-text-secondary); font-size: var(--text-xs); }
html[data-ui="calm"] .jtile:hover { box-shadow: none; }

/* ---- Trades table ------------------------------------------------------------
   Every column was the same bright mono, so entry, stop and lot shouted as
   loud as the result. Prices step back to secondary; P&L and balance keep
   the primary ink. The symbol/date cell is two lines, which set every row's
   height - tighter leading there brings the rows down without touching
   density. */
html[data-ui="calm"] table.dt td.num { font-size: 0.93em; }
html[data-ui="calm"] .trades-page table.dt tbody td:is([data-k="entry"], [data-k="stop"], [data-k="tp"], [data-k="exit"], [data-k="lot"], [data-k="timeframe"], [data-k="time"]) { color: var(--color-text-secondary); }
html[data-ui="calm"] .trades-page table.dt tbody td[data-k="date"] { line-height: 1.35; }
html[data-ui="calm"] .trades-page table.dt tbody td { padding-block: 7px; }
html[data-ui="calm"] table.dt td.trade-rownum-td { color: var(--color-text-tertiary); }

/* ---- Expert page ---------------------------------------------------------------
   Two filled accent buttons side by side said "two first steps". The MT5 build
   is the one most traders want; the MT4 one beside it keeps its place and its
   label and takes the secondary look. And the two chart switches are a second
   group (what the expert does on the chart) after the first (getting it
   connected): a hairline and room say so, where they used to run on from the
   download row. */
html[data-ui="calm"] .ea-key-row .btn--primary ~ .btn--primary {
    background: var(--color-surface-1); color: var(--color-text-primary);
    border-color: var(--color-border-mid); box-shadow: none;
}
html[data-ui="calm"] .ea-key-row .btn--primary ~ .btn--primary:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
html[data-ui="calm"] .form-grid + .ea-switch-row {
    margin-top: var(--space-5); padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}