/* ===========================================================================
   base.css — element defaults. No classes, no components.
   ---------------------------------------------------------------------------
   Everything here is either a reset, a browser-default correction, or a
   product-wide rule that must hold on every page (focus rings, number
   rendering, RTL behaviour).

   Direction policy
   ----------------
   The entire product uses CSS logical properties (margin-inline-start,
   padding-inline, inset-inline-end, border-start-*) so that [dir="rtl"] is a
   single attribute flip with no per-component RTL stylesheet. The exceptions
   are documented inline where they occur: things that must NOT mirror, such
   as prices, charts and Latin symbols.
   =========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* The `hidden` attribute must actually hide.
   The UA stylesheet declares [hidden] { display: none } at the lowest
   specificity, so ANY class that sets display wins over it — a
   `<section class="stat-grid" hidden>` stayed visible because .stat-grid
   declares display:grid. This bit the open-risk summary on the positions page:
   it kept showing open-position figures while the Closed tab was active.
   Declared early so a component can still override it deliberately. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Scroll padding keeps an anchor target clear of the sticky header. */
    scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Opt into the OpenType features we rely on: contextual alternates for
       Inter, and slashed zero so 0 is never read as O in an order id. */
    font-feature-settings: "cv05" 1, "zero" 1;
}

/* ---------------------------------------------------------------------------
   Headings. Sizes come from the scale; pages never restyle a heading level.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
    text-wrap: pretty;
}

/* Prose measure. Long legal text is unreadable at terminal width. */
p, li {
    max-width: 78ch;
}

/* ---------------------------------------------------------------------------
   Links
   --------------------------------------------------------------------------- */
a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--accent-hover);
}

/* Links inside prose keep an underline — colour alone is not an accessible
   affordance (WCAG 1.4.1). Navigation and buttons are exempt: their role is
   clear from position and shape. */
.prose a,
p a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------------------------
   Focus. One visible ring everywhere, keyboard-only.

   :focus-visible rather than :focus so a mouse click on a button does not
   leave a ring behind, while Tab always shows one. The ring uses outline
   (not box-shadow) so it survives overflow:hidden ancestors.
   --------------------------------------------------------------------------- */
:focus {
    outline: none;
}

:focus-visible {
    outline: var(--ring-width) solid var(--accent);
    outline-offset: var(--ring-offset);
    border-radius: var(--radius-xs);
}

/* Inside a scrolling table the offset ring gets clipped; inset it instead. */
td :focus-visible,
th :focus-visible {
    outline-offset: -1px;
}

/* ---------------------------------------------------------------------------
   Forms — inherit typography instead of the browser's 13px Arial.
   --------------------------------------------------------------------------- */
input,
button,
textarea,
select,
optgroup {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

textarea {
    resize: vertical;
    min-height: calc(var(--touch-target) * 2);
}

/* iOS zooms the viewport when a focused input is under 16px. Only lift the
   size on touch-capable pointers so desktop density is preserved. */
@media (pointer: coarse) {
    input,
    select,
    textarea {
        font-size: var(--text-md);
    }
}

/* ---------------------------------------------------------------------------
   Do not use <input type="number"> for money in this product.
   ---------------------------------------------------------------------------
   Chromium formats a number input's value with the BROWSER's locale, not the
   page's. On an Arabic-locale machine — the primary audience here — a fee of
   15 renders as ١٥ and 0.0004 as ٠.٠٠٠٤ while every label beside it stays
   Latin. Setting lang="en" on the input does NOT override it; verified side
   by side in Chromium with navigator.language = "ar".

   That contradicts the product's own numeral policy (core/format.js keeps
   Western digits in Arabic, because Arabic-Indic numerals break tabular
   alignment in a price column) and it lands on the fields that matter most:
   deposit amount, withdrawal amount, order size, fees.

   Use type="text" + inputmode="decimal" instead — ui_field() converts
   type="number" automatically. It keeps the numeric keypad on mobile and
   avoids two other long-standing type="number" problems: a scroll wheel over
   a focused field silently changing an order size, and the value reading back
   as "" when the control dislikes what was typed.

   The rules below remain for any legacy page still using a number input.
   --------------------------------------------------------------------------- */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

::placeholder {
    color: var(--text-faint);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Media
   --------------------------------------------------------------------------- */
img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

/* Only icons that do not say how they are filled. A CSS fill outranks the
   fill="none" attribute, so this rule used to paint every outline icon solid:
   the terminal's zoom buttons became two identical discs (their + and - drawn
   over in the same colour) and its history icon a blob. */
svg:not([fill]) {
    fill: currentColor;
}

svg {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Tables — structural only; table.css does the visual work.
   --------------------------------------------------------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th {
    text-align: start;
    font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------------------
   NUMBERS — the core of a trading interface.
   ---------------------------------------------------------------------------
   Three separate problems are solved here.

   1. Column jitter. Proportional digits change width as a price ticks
      (1 is narrower than 8), so a right-aligned column visibly shivers on
      every update. font-variant-numeric: tabular-nums fixes the advance
      width of every digit.

   2. Direction. A price, quantity or symbol must read left-to-right even
      inside an Arabic RTL page: "BTC/USDT 64,213.50" must never render as
      "50.213,46 TDSU/CTB". Latin-script financial data therefore carries
      an explicit dir="ltr" (see .num / [data-num] below), while its
      alignment still follows the reading direction of the column.

   3. Sign position. In RTL, a minus sign placed by the browser can end up
      on the wrong visual side of a figure. unicode-bidi: isolate treats each
      number as one atomic run so the sign always hugs its own digits.
   --------------------------------------------------------------------------- */
.num,
[data-num],
td.num,
input[type="number"],
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: 0;
    /* Financial figures stay LTR in every locale. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* A numeric column is aligned to its own end edge so decimal points line up.
   In RTL the column still mirrors as a column — only the glyphs inside stay
   LTR — which is the behaviour Gulf trading desks expect. */
td.num,
th.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Directional colouring. These three classes are the ONLY way the product
   expresses "moved up" / "moved down" / "unchanged". */
.is-up { color: var(--up); }
.is-down { color: var(--down); }
.is-flat { color: var(--flat); }

/* A tick flash tints the cell briefly when a value changes, so a trader
   watching one row notices the update without reading it. Driven by JS
   adding .tick-up / .tick-down (see core/format.js). */
@keyframes tick-flash-up {
    from { background-color: var(--up-dim); }
    to { background-color: transparent; }
}

@keyframes tick-flash-down {
    from { background-color: var(--down-dim); }
    to { background-color: transparent; }
}

.tick-up { animation: tick-flash-up var(--duration-tick-flash) var(--ease-out); }
.tick-down { animation: tick-flash-down var(--duration-tick-flash) var(--ease-out); }

/* Symbols (BTC/USDT, wallet addresses, tx hashes) are Latin identifiers and
   never mirror or translate. */
.symbol,
[data-symbol] {
    font-family: var(--font-mono);
    direction: ltr;
    unicode-bidi: isolate;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Truncating identifier — a tx hash in a fixed cell. */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   RTL corrections.

   Logical properties handle layout automatically. What remains is content
   that must NOT mirror: charts, code, and any inline Latin run.
   --------------------------------------------------------------------------- */
[dir="rtl"] .no-flip,
[dir="rtl"] .chart,
[dir="rtl"] canvas,
[dir="rtl"] pre,
[dir="rtl"] code {
    direction: ltr;
}

/* Icons that encode direction (chevrons, arrows, back buttons) must mirror.
   Icons that encode meaning (up-trend, down-trend, warning) must not — a
   rising-price arrow still points up-right in Arabic. */
[dir="rtl"] .icon-directional {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   Accessibility helpers
   --------------------------------------------------------------------------- */

/* Visible only to assistive tech. Used for table captions, live-region
   status text, and the label of an icon-only button. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — first tabbable element on every page. */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: calc(-1 * var(--space-16));
    z-index: var(--z-tooltip);
    padding: var(--space-3) var(--space-5);
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
    inset-block-start: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Reduced motion. A trading screen animates a lot; honour the OS setting
   fully rather than partially. The tick flash is reduced to a static tint
   rather than removed, because it carries information.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tick-up { background-color: var(--up-dim); }
    .tick-down { background-color: var(--down-dim); }
}

/* ---------------------------------------------------------------------------
   Forced colours (Windows high contrast). Direction must survive, so it is
   re-expressed with system colours rather than left to the palette.
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .is-up,
    .is-down,
    .is-flat {
        color: CanvasText;
    }

    .is-up::after { content: " ▲"; }
    .is-down::after { content: " ▼"; }
}

/* ---------------------------------------------------------------------------
   Scrollbars — thin and themed. Overlay scrollbars on macOS ignore this,
   which is fine.
   --------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   Print — legal pages and statements are printed; terminals are not.
   --------------------------------------------------------------------------- */
@media print {
    :root {
        --canvas: #fff;
        --surface-raised: #fff;
        --text: #000;
        --text-muted: #444;
        --border: #ccc;
    }

    .app-header,
    .app-nav,
    .bottom-nav,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}