/* #region zone:desk.style.tokens — โทเค็นดีไซน์กลาง (สี ระยะ รัศมี เงา การเคลื่อนไหว) */
/* Super_T Web Desk — single source of design tokens. Loaded first (index.html), before desk.css /
   desk-chat.css / desk-profile.css, so every later file can reference these custom properties.
   This is a refinement of the tokens that already lived at the top of desk.css (moved here
   unchanged) plus a few new tokens for values that were previously repeated as literals across
   the three stylesheets — see apps/desk/DESIGN.md for the full reference and do/don't rules.
   Palette (2026-10-12, owner-picked): light = "ขาวมินิมอล" (white, indigo accent), dark = "จอเทรดมืด"
   (terminal black, blue accent). Every text/background pair is checked by desk-tokens-contrast.test.mjs
   (WCAG AA); a few owner hexes were nudged darker/lighter only where they failed AA. */

:root {
  --bg: var(--u-page);
  --panel: var(--u-card);
  --panel2: var(--u-sheet);
  --line: var(--u-border);
  --hover: var(--u-card-2);
  --composer-menu-bg: var(--u-sheet);
  --header-bg: var(--u-page);
  --header-line: var(--u-border);
  --header-well-bg: var(--u-card);
  --header-well-line: var(--u-border);
  --header-well-hover: var(--u-card-2);
  --pop-shadow: var(--u-shadow-overlay);
  --tip-bg: var(--u-sheet);
  --tip-fg: var(--text);
  --shadow: var(--u-shadow-overlay);
  --r-card: var(--u-radius-card);
  --r-inner: var(--u-radius-inner);
  --r-control: var(--u-radius-inner);
  --r-button: var(--u-radius-inner);
  --r-input: var(--u-radius-inner);
  --seg-on: var(--u-sheet);
  --card-shadow: none;

  --menu-min-width: 200px;
  --menu-max-width: min(320px, calc(100vw - 16px));
  --menu-padding: 6px;
  --menu-gap: 2px;
  --menu-row-height: 36px;
  --menu-row-padding: 0 10px;
  --menu-row-radius: 8px;
  --menu-row-gap: 10px;
  --menu-font-size: 13px;
  --menu-line-height: 1.4;
  --menu-icon-size: 16px;

  --text: #111418;
  --muted: #5b636e;
  --faint: #666e79; /* ≥4.5:1 on --panel and --panel2 (was #8FA0A2, 2.6:1) */
  --up: #07784a;
  /* Up/down words on a tinted chip or a selected row (stamps, bias pills, change %): one step deeper than
     --up/--down so they stay ≥4.5:1 on those tints too (polish 2026-10-13). */
  --up-text: #066b42;
  --down-text: #b3202c;
  --down: #c4252f;
  --danger: #b3202c;
  --amber: #8a5a00;
  --accent: #3d5afe;
  /* Hovered accent fill: one step darker in both themes, so --on-accent text stays ≥4.5:1 (was a mix toward --text,
     which lightened it in dark mode to 4.09:1). */
  --accent-hover: #3249d6;
  --accent-text: #3049e0; /* ≥4.5:1 on the --acc-soft chips too */
  --on-accent: #ffffff;
  --mint: #3049e0;
  --ema20: #a85f00;
  --ema50: #0b72a8;
  --ema200: #8e44ad;
  --grid: rgba(17, 20, 24, 0.05);
  --chart-bg: #ffffff;
  --fund-bar-rev: #7a86b0;
  --fund-bar-np: #3d5afe;
  --fund-est: #0b72a8;
  --up-soft: #e3f4ec;
  --down-soft: rgba(203, 42, 53, 0.08);
  --amber-soft: rgba(138, 90, 0, 0.1);
  --acc-soft: #eceffe;
  --acc-ring: rgba(61, 90, 254, 0.35);
  /* Chart level-line axis tags (chart.js reads these): fill + text pairs, each ≥4.5:1. */
  --tag-accent-bg: #111418;
  --tag-accent-fg: #ffffff; /* TP / TP2 / เข้า */
  --tag-muted-bg: #5b636e;
  --tag-muted-fg: #ffffff; /* SL */
  --tag-up-bg: #07784a;
  --tag-up-fg: #ffffff; /* S1 / S2 */
  --tag-down-bg: #c4252f;
  --tag-down-fg: #ffffff; /* R1 / R2 */

  --header-text: #111418;

  /* Header "well" controls (market tabs, search box, AI chip, avatar, clock, tab bar): the header
     sits on --header-bg (the panel colour) in both themes, so the wells are one step off it. */

  --header-well-text: #5b636e;
  --header-well-placeholder: #666e79;
  /* Chart event markers (chart.js reads these): scan pick, news, bullish / bearish pattern.
     Deliberately not the up/down candle colours. */
  --ev-scan: #6d28d9;
  --ev-news: #b45309;
  --ev-bull: #0369a1;
  --ev-bear: #be185d;
  --ev-earn: #1d5fd6; /* earnings marker (E) */
  --ev-xd: #0a7a4b; /* ex-dividend marker (XD) */
  --vp-fill: rgba(91, 99, 110, 0.2); /* volume profile bins, value area, POC */
  --vp-value: rgba(91, 99, 110, 0.34);
  --vp-poc: #b45309;
  --rs-line: #0b6bcb; /* relative-strength line */
  /* Lines the chat drew on the chart (the AI layer): one violet hue, never used by the member's own tools; >=4.5:1 on --panel and --chart-bg. */
  --ai: #5b3fc4;
  --ai-soft: rgba(91, 63, 196, 0.1);
  --ai-line: rgba(91, 63, 196, 0.4);
  /* AI paper-trade sparkle marks: sky blue, so they never read as the violet scan "S" arrow (--ev-scan). */
  --chart-ai-mark: #0277bd;

  /* Signal chips (เข้าแผน / รอ): tone text on a faint tint with a 1px tone hairline; text ≥4.5:1. */
  --sig-buy-fg: #076a43;
  --sig-buy-bg: rgba(8, 128, 79, 0.07);
  --sig-buy-line: rgba(8, 128, 79, 0.34);
  --sig-wait-fg: #6e4a00;
  --sig-wait-bg: rgba(138, 90, 0, 0.06);
  --sig-wait-line: rgba(138, 90, 0, 0.3);
  /* Stage Analysis (2026-09-27 refinement, desaturated per-stage identity — codex second opinion):
     each stage keeps its own hue family (slate/teal/ochre/rose) at low saturation so 1-4 read calm
     side by side; used only for small dots/chips/hairlines, never a saturated fill. Each hex is
     >=4.5:1 on both --panel and --panel2 in its own theme (checked). */
  --stage-1: #5b6670;
  --stage-1-soft: rgba(91, 102, 112, 0.12);
  --stage-2: #276d5a;
  --stage-2-soft: rgba(44, 117, 97, 0.12);
  --stage-3: #80600f;
  --stage-3-soft: rgba(128, 96, 15, 0.12);
  --stage-4: #a03f58;
  --stage-4-soft: rgba(160, 63, 88, 0.12);

  --tip-kbd: rgba(255, 255, 255, 0.16);

  /* The lifted active-segment shadow (segmented controls, phone type-menu, model switch) — one
     value, was three identical literals. */
  --seg-shadow: 0 1px 2px rgba(17, 20, 24, 0.12), 0 0 0 1px var(--line);
  /* Modal/sheet scrims: two opacities already in use (toolbar sheets + logout sheet vs. the
     desk-dialog backdrop), named instead of repeated. */
  --scrim: rgba(17, 20, 24, 0.4);
  --scrim-strong: rgba(8, 10, 12, 0.45);
  /* Claude/GPT model-switch mark tints (was declared inline in desk-chat.css). */
  --claude-fg: #a64a2b;
  --claude-soft: rgba(201, 100, 66, 0.1);
  --claude-line: rgba(201, 100, 66, 0.34);

  --stock-row-inset: var(--sp-2);
  --stock-row-radius: calc(var(--r-card) - var(--stock-row-inset));

  --r-pill: var(--u-radius-pill, 999px);

  --r-logo: 12px;

  /* Company badges, one circle sized by role (owner round 2: smaller again): search results,
     collapsed rail, watchlist rows, stock header. */
  --logo-xs: 22px;
  --logo-sm: 24px;
  --logo-md: 26px;
  --logo-lg: 32px;
  --logo-well: #eef0f3;
  /* Badge depth: contact + ambient shadow, glass rim (light top → dark bottom), bottom curvature. */
  --logo-contact: rgba(17, 20, 24, 0.12);
  --logo-ambient: rgba(17, 20, 24, 0.1);
  --logo-ambient-lift: rgba(17, 20, 24, 0.16);
  --logo-halo: rgba(17, 20, 24, 0);
  --logo-rim-top: rgba(255, 255, 255, 0.85);
  --logo-rim-mid: rgba(17, 20, 24, 0.1);
  --logo-rim-bottom: rgba(17, 20, 24, 0.22);
  --logo-curve: rgba(17, 20, 24, 0.1);

  /* Type scale (Thai-first stacks) — the numbers below are the sizes already used across the
     Desk (11px caption … 24px price hero); named so new components (A/B/F) pick from this scale
     instead of a fresh magic number. Existing rules are not retrofitted (out of this batch's
     surgical scope, see the spec's "What it does not do"). */
  --font-sans: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace; /* exact literal it replaced (not .mono's ui-monospace stack) */
  --fs-2xs: var(--u-text-xs, 12px); /* floor: no Desk text under 12px (polish 2026-10-13) */
  --fs-xs: var(--u-text-xs, 12px);
  --fs-sm: var(--u-text-xs, 12px);
  --fs-md: var(--u-text-sm, 13px);
  --fs-lg: 14px;
  --fs-xl: 16px;
  --fs-2xl: 18px;
  --fs-3xl: 20px;
  --fs-4xl: 24px;

  /* Spacing scale (4px base, matches the gaps/paddings already used throughout). */
  --sp-1: var(--u-space-1, 4px);
  --sp-2: var(--u-space-2, 8px);
  --sp-3: var(--u-space-3, 12px);
  --sp-4: var(--u-space-4, 16px);
  --sp-5: 20px;
  --sp-6: var(--u-space-5, 24px);
  --sp-8: var(--u-space-6, 32px);
  /* Minimum hit box for a control on a phone (≤600px) or a coarse pointer — desk-touch.css applies it. */
  --tap-min: var(--u-tap, 44px);

  /* Motion scale: one easing curve (was six identical literals), plus named durations for the
     three speeds already in use. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme='dark'] {
  --ev-scan: #b79cff;
  --ev-news: #f1c35a;
  --ev-bull: #5cc3ff;
  --ev-bear: #ff7ac6;
  --ev-earn: #7fb0ff;
  --ev-xd: #4ade9b;
  --vp-fill: rgba(139, 152, 165, 0.16);
  --vp-value: rgba(139, 152, 165, 0.28);
  --vp-poc: #f0b429;
  --rs-line: #82c0ff;
  --ai: #b9a4ff;
  --ai-soft: rgba(185, 164, 255, 0.14);
  --ai-line: rgba(185, 164, 255, 0.45);
  --chart-ai-mark: #38bdf8;

  --text: #eef2f6;
  --muted: #b2bdc9;
  --faint: #adb9c6; /* ≥5:1 on --panel/--panel2 (was #5F7B7C, 3.3:1) */
  --up: #26a69a;
  --up-text: #38c2b4;
  --down-text: #ff7774;
  --down: #f25a57;
  --danger: #ff8a87;
  --amber: #f0b429;
  --accent: #1f68de;
  --accent-hover: #1a59c0;
  --accent-text: #82c0ff;
  --on-accent: #ffffff;
  --mint: #82c0ff;
  --ema20: #f0b429;
  --ema50: #4cc2ff;
  --ema200: #b392f0;
  --grid: rgba(230, 237, 243, 0.09);
  --chart-bg: #10151b;
  --fund-bar-rev: #5a6877;
  --fund-bar-np: #1f68de;
  --fund-est: #4cc2ff;
  --up-soft: rgba(38, 166, 154, 0.14);
  --down-soft: rgba(239, 83, 80, 0.14);
  --amber-soft: rgba(240, 180, 41, 0.14);
  --acc-soft: rgba(47, 129, 247, 0.16);
  --acc-ring: rgba(47, 129, 247, 0.45);
  --tag-accent-bg: #82c0ff;
  --tag-accent-fg: #0b0e11;
  --tag-muted-bg: #b2bdc9;
  --tag-muted-fg: #0b0e11;
  --tag-up-bg: #26a69a;
  --tag-up-fg: #0b0e11;
  --tag-down-bg: #f25a57;
  --tag-down-fg: #0b0e11;

  --header-text: #eef2f6;

  --header-well-text: #b2bdc9;
  --header-well-placeholder: #adb9c6;

  --sig-buy-fg: #5fd6ca;
  --sig-buy-bg: rgba(38, 166, 154, 0.1);
  --sig-buy-line: rgba(38, 166, 154, 0.38);
  --sig-wait-fg: #f4cc6e;
  --sig-wait-bg: rgba(240, 180, 41, 0.08);
  --sig-wait-line: rgba(240, 180, 41, 0.34);
  --stage-1: #a9b6c2;
  --stage-1-soft: rgba(154, 168, 181, 0.14);
  --stage-2: #7fd0c4;
  --stage-2-soft: rgba(111, 192, 181, 0.14);
  --stage-3: #d6b977;
  --stage-3-soft: rgba(201, 171, 104, 0.14);
  --stage-4: #e5a0ae;
  --stage-4-soft: rgba(217, 143, 158, 0.14);

  --tip-kbd: rgba(11, 14, 17, 0.12);

  --seg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--line);
  --claude-fg: #f0a07f;
  --claude-soft: rgba(240, 160, 127, 0.12);
  --claude-line: rgba(240, 160, 127, 0.36);
  --logo-well: #222a34;
  --logo-contact: rgba(0, 0, 0, 0.45);
  --logo-ambient: rgba(0, 0, 0, 0.45);
  --logo-ambient-lift: rgba(0, 0, 0, 0.6);
  --logo-halo: rgba(230, 237, 243, 0.07);
  --logo-rim-top: rgba(255, 255, 255, 0.32);
  --logo-rim-mid: rgba(234, 243, 239, 0.12);
  --logo-rim-bottom: rgba(0, 0, 0, 0.35);
  --logo-curve: rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}
@media (max-width: 899px) {
  :root {
    --menu-row-height: var(--tap-min);
  }
}
/* #endregion */

/* #region zone:desk.ui.dialog-scroll — กล่องโต้ตอบ: เปลือกไม่เลื่อน เลื่อนเฉพาะเนื้อหา แถบเลื่อนบางตามดีไซน์ */
/* One rule for every dialog of Desk, Account and Finance (Monitor and Disaster mirror it in their own
   sheets): the <dialog> shell never scrolls, only its body (.dialog-body, or .form-fields in Finance)
   between the fixed header and footer. The thin scrollbar sits inside the rounded card with a 6px gap,
   the fade at the top/bottom shows only while more content is hidden there, and touch devices keep the
   native overlay scrollbar. A dialog with no body element is left as it was. */
:root {
  --dlg-sb-size: 8px;
  --dlg-sb-gap: 6px;
  --dlg-sb-thumb: color-mix(in srgb, var(--muted) 42%, transparent);
  --dlg-sb-thumb-hover: color-mix(in srgb, var(--muted) 72%, transparent);
  --dlg-fade: 14px;
  --dlg-fade-shadow: rgba(17, 20, 24, 0.18);
}
:root[data-theme='dark'] {
  --dlg-fade-shadow: rgba(0, 0, 0, 0.5);
}
dialog:has(.dialog-body, .form-fields) {
  overflow: hidden;
}
dialog[open]:has(.dialog-body, .form-fields) {
  display: flex;
  flex-direction: column;
}
.dialog-body,
.form-fields {
  --dlg-bg: var(--panel);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* Fade + shadow only at an edge with hidden content: the "local" covers hide the shadows at the ends. */
  background:
    linear-gradient(var(--dlg-bg) 30%, transparent) top / 100% calc(var(--dlg-fade) * 2) no-repeat local,
    linear-gradient(transparent, var(--dlg-bg) 70%) bottom / 100% calc(var(--dlg-fade) * 2) no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--dlg-fade-shadow), transparent) top / 100% var(--dlg-fade)
      no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--dlg-fade-shadow), transparent) bottom / 100%
      var(--dlg-fade) no-repeat scroll;
}
@media (hover: hover) and (pointer: fine) {
  .dialog-body,
  .form-fields {
    margin-inline-end: var(--dlg-sb-gap);
  }
  /* Firefox only: Chromium would let these two override the ::-webkit-scrollbar look below
     (and bring back its arrow buttons), so they sit behind a feature test. */
  @supports not selector(::-webkit-scrollbar) {
    .dialog-body,
    .form-fields {
      scrollbar-width: thin;
      scrollbar-color: var(--dlg-sb-thumb) transparent;
    }
    .dialog-body:hover,
    .form-fields:hover {
      scrollbar-color: var(--dlg-sb-thumb-hover) transparent;
    }
  }
  .dialog-body::-webkit-scrollbar,
  .form-fields::-webkit-scrollbar {
    width: var(--dlg-sb-size);
  }
  .dialog-body::-webkit-scrollbar-track,
  .form-fields::-webkit-scrollbar-track {
    background: transparent;
  }
  .dialog-body::-webkit-scrollbar-button,
  .form-fields::-webkit-scrollbar-button {
    display: none;
  }
  .dialog-body::-webkit-scrollbar-thumb,
  .form-fields::-webkit-scrollbar-thumb {
    background: var(--dlg-sb-thumb);
    border: 1px solid transparent;
    border-radius: var(--u-radius-pill);
    background-clip: padding-box;
  }
  .dialog-body::-webkit-scrollbar-thumb:hover,
  .form-fields::-webkit-scrollbar-thumb:hover {
    background: var(--dlg-sb-thumb-hover);
    background-clip: padding-box;
  }
}
/* #endregion */

/* #region zone:desk.style.brand-tokens — แบรนด์และภาพเคลื่อนไหว */
:root {
  --brand-mark: var(--accent);
  --brand-on-panel: #a9c7ff;
  --brand-panel-start: #101c38;
  --brand-panel-end: #203c76;
}
:root[data-theme='dark'] {
  --brand-mark: #82aaff;
  --brand-on-panel: #a9c7ff;
}
/* #endregion */