/* FlowDesk workspace — native-element and shared-component paint.
 *
 * Loads after css/styles.css. Its job is narrow and worth keeping: give
 * native elements (inputs, tables, details, code, scrollbars) the desk's
 * look so no individual page needs private colour or shadow to belong.
 *
 * It is NOT a second design language. This file used to re-impose one —
 * 9px all-caps labels, drop shadows on every card, a blurred glass top
 * bar, hover lifts, its own 6/7/8/9px radii, and hardcoded hexes — all of
 * it landing after styles.css and therefore winning. That is why the
 * palette and type changes in styles.css appeared not to take. Every rule
 * below now reads from assets/tokens.css and matches the mockup: flat
 * surfaces, 1px borders, 10px radius, sentence case, and the spec's type
 * scale (body 14, secondary 12.5, label 11.5 — never 9px, which is not
 * legible type, it is texture).
 */

/* ---------- Document and typography ---------- */
html { color-scheme: dark; background: var(--fd-bg); scroll-behavior: smooth; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
body.desk {
  background: var(--fd-bg); color: var(--fd-text);
  font-family: var(--fd-sans); font-size: var(--fd-text-base);
}
::selection { color: var(--fd-on-accent); background: var(--fd-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--fd-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: var(--fd-border-strong); background-clip: padding-box; }
h1, h2, h3, h4, h5, h6 { color: var(--fd-text); text-wrap: balance; }
p { text-wrap: pretty; }
small, .small { font-size: var(--fd-text-sm); }
code, kbd, samp, pre { font-family: var(--fd-mono); }
code { padding: 1px 5px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-bg-subtle); color: var(--fd-text); font-size: var(--fd-text-sm); }
pre { overflow: auto; padding: 14px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm); background: var(--fd-bg-subtle); }
hr { height: 1px; margin: 18px 0; border: 0; background: var(--fd-border); }

/* ---------- Links, controls and forms ---------- */
a { text-underline-offset: 3px; }
a:not([class]):hover { color: var(--fd-accent); text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, [role="button"], input[type="submit"], input[type="button"] { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .48; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 38px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm);
  background: var(--fd-bg-subtle); color: var(--fd-text);
}
input:not([type="checkbox"]):not([type="radio"]), textarea { padding: 10px 12px; }
select { padding: 9px 32px 9px 12px; }
textarea { min-height: 100px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--fd-text-dim); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--fd-border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--fd-accent); outline: 0; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--fd-accent); }
/* Field labels name an input; they are not captions on a figure, so they
   are sentence case at readable size — the mockup's `.field span`. */
label, .fd-label { color: var(--fd-text-soft); font-size: var(--fd-text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
fieldset { padding: 14px; border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm); }
legend { padding: 0 7px; color: var(--fd-text-soft); font-size: var(--fd-text-sm); font-weight: 600; }

.fd-btn, .btn, a.btn, button.btn {
  display: inline-flex; min-height: 36px; align-items: center; justify-content: center;
  gap: 8px; padding: 0 13px; border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-sm); background: transparent; color: var(--fd-text);
  box-shadow: none; font-size: var(--fd-text-sm); font-weight: 500; text-decoration: none;
}
.fd-btn:hover, .btn:hover { border-color: var(--fd-text-dim); background: transparent; color: var(--fd-text); }
/* Gold is the only colour a primary action uses, and the ink on it is
   dark in both themes — white is 2.0:1 on the dark gold. */
.gold-btn, .fd-btn-primary, .btn-primary {
  border-color: var(--fd-accent); background: var(--fd-accent); color: var(--fd-on-accent); font-weight: 600;
}
.gold-btn:hover, .fd-btn-primary:hover, .btn-primary:hover { filter: brightness(1.08); }
.fd-btn--danger, .btn-danger { border-color: var(--fd-bear-dim); background: transparent; color: var(--fd-bear); }
.fd-btn--ghost, .fd-btn-ghost { border-color: transparent; background: transparent; }

/* ---------- Workspace chrome ---------- */
.fd-globalbar .search input { border-radius: var(--fd-radius-sm); }
.fd-sidebar-link, .fd-globalnav-link { font-weight: 500; }
.fd-sidebar-group-label { margin-top: 16px; }
.fd-market-state { background: transparent; }
.fd-page-sub { line-height: 1.45; color: var(--fd-text-soft); }

/* ---------- Surfaces and structural components ---------- */
:is(.panel, .card, .fd-card, .fd-panel, .ui-panel, .dash-card, .scor-card, .read, .empty, .yf-chip, .yf-hero-main) {
  border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface);
  box-shadow: var(--fd-shadow);
}
:is(.panel-head, .card-head, .fd-card-header, .fd-panel-head, .ui-panel-head) {
  min-height: 44px; border-bottom: 1px solid var(--fd-border-soft); background: transparent;
}
/* Section heading: 15px/600, sentence case. */
:is(.panel-title, .card-title, .fd-card-title, .fd-panel-title, .ui-panel-title) {
  color: var(--fd-text); font-size: var(--fd-text-lg); font-weight: 600;
  letter-spacing: -.01em; text-transform: none;
}
:is(.panel-body, .card-body, .fd-card-body, .fd-panel-body, .ui-panel-body) { color: var(--fd-text-soft); }
.fd-grid { gap: 12px; }
.fd-split { gap: 12px; }

/* ---------- Data, stats and direction ---------- */
/* Every price, score, percentage and timestamp is mono with tabular
   figures, so a column does not jitter between refreshes. */
:is(.fd-metric-value, .fd-stat-v, .fd-stat-num, .fd-composite-v, .fd-gauge-v, .read-comp, .detail-comp) {
  font-family: var(--fd-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
/* The one caps label the mockup keeps: the key above a figure. */
:is(.fd-metric-label, .fd-stat-k, .fd-stat-label, .fd-kv-k) {
  color: var(--fd-text-dim); font-size: var(--fd-text-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.bull, .text-bull, .score-bull { color: var(--fd-bull); }
.bear, .text-bear, .score-bear { color: var(--fd-bear); }
.flat, .text-dim, .fd-text-dim { color: var(--fd-text-dim); }
.fd-progress, .progress, .fd-read-bar, .fd-split-bar { height: 6px; border-radius: 4px; background: var(--fd-border-soft); }

.fd-badge, .badge, .tag, .ui-chip, .fd-pill, .fd-score {
  display: inline-flex; align-items: center; justify-content: center; min-height: 20px;
  border-radius: 4px; font-family: var(--fd-mono); font-size: var(--fd-text-xs); font-weight: 600;
  letter-spacing: 0; line-height: 1; text-transform: none;
}

/* ---------- Tables and list rows ---------- */
.table-wrap, .fd-table { overflow: auto; border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); }
table { width: 100%; border-spacing: 0; border-collapse: separate; }
th, .fd-th {
  height: 36px; padding: 0 11px; border-bottom: 1px solid var(--fd-border);
  background: transparent; color: var(--fd-text-dim); font-size: var(--fd-text-sm);
  font-weight: 500; letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap;
}
td, .fd-row-cell { padding: 10px 11px; border-bottom: 1px solid var(--fd-border-soft); }
tbody tr, .fd-row { transition: background-color .12s ease; }
tbody tr:hover, .fd-row:hover { background: var(--fd-bg-subtle); }
tbody tr:last-child td, .fd-table-body > :last-child .fd-row-cell { border-bottom: 0; }
.fd-table-head { background: transparent; }
.fd-row { color: var(--fd-text-soft); }
.td-sym, .fd-sym { color: var(--fd-text); font-family: var(--fd-mono); font-weight: 600; }

/* ---------- Tabs, filters, notices and disclosure ---------- */
.fd-tabs, .dash-tabs, .markets-tabs { border-bottom: 1px solid var(--fd-border); }
:is(.fd-tab, .dash-tab, .markets-tab, .fd-tabs .tab) {
  color: var(--fd-text-soft); font-size: var(--fd-text-sm); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
:is(.fd-tab--active, .fd-tab.on, .dash-tab.active, .markets-tab.active, .fd-tabs .tab.on) { color: var(--fd-text); }
.notice, .banner, .fd-callout {
  border: 1px solid var(--fd-border); border-left: 2px solid var(--fd-accent);
  border-radius: var(--fd-radius-sm); background: var(--fd-bg-subtle); box-shadow: none;
}
.notice.warn, .fd-callout { border-left-color: var(--fd-warn); }
.notice.error { border-left-color: var(--fd-bear); }
.notice.ok { border-left-color: var(--fd-bull); }
details { border: 1px solid var(--fd-border); border-radius: var(--fd-radius-sm); background: var(--fd-bg-subtle); }
summary { padding: 10px 12px; color: var(--fd-text-soft); cursor: pointer; font-weight: 500; }
details[open] > summary { border-bottom: 1px solid var(--fd-border-soft); color: var(--fd-text); }

/* ---------- Charts, calendars, heatmaps and feature cards ---------- */
.chart-host, .fd-chart-wrap { border-radius: var(--fd-radius-sm); background: transparent; }
.fd-legend { color: var(--fd-text-soft); }
.fd-week-day, .fd-heat > div, .fd-mover, .fd-duo-card {
  border-color: var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface);
}
/* Gold edge on hover marks a tile you can open. Nothing lifts — the
   desk is flat. */
.fd-mover:hover, .fd-duo-card:hover { border-color: var(--fd-accent); }
.fd-hero-card { overflow: hidden; border-radius: var(--fd-radius); }
.fd-hero-card::before { width: 2px; }

/* ---------- Overlays, authentication and footer ---------- */
/* Things that genuinely float over content keep a shadow: it is what
   separates them from the page, and a border alone does not. */
.modal, .dialog, [role="dialog"] { border: 1px solid var(--fd-border); border-radius: var(--fd-radius); background: var(--fd-surface); box-shadow: var(--fd-shadow-lg); }
.modal-backdrop, .overlay { background: rgba(0,0,0,.68); }
.auth-wrap { max-width: 460px; }
.site-foot { color: var(--fd-text-dim); font-size: var(--fd-text-sm); letter-spacing: 0; }
.tape { border-top-color: var(--fd-border); background: var(--fd-rail); }

/* ---------- Responsive and accessibility ---------- */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; }
@media (max-width: 880px) {
  .fd-page-header { min-height: 0; }
  .fd-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .fd-page-title { font-size: 24px; }
  .fd-grid--2, .fd-grid--3, .fd-grid--4 { grid-template-columns: 1fr; }
  .fd-btn, .btn { min-height: 38px; }
  :is(.panel-body, .card-body, .fd-card-body, .fd-panel-body, .ui-panel-body) { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .fd-sidebar, .fd-globalbar, .tape, .site-foot, .fd-page-actions { display: none !important; }
  .fd-workspace, .main, .fd-app { display: block; width: 100%; max-width: none; padding: 0; }
  :is(.panel, .card, .fd-card, .fd-panel, .ui-panel) { break-inside: avoid; box-shadow: none; }
}