/* OptionBan / FinView UI contract v3.2.0
 *
 * This file is deliberately loaded last. Earlier releases accumulated page-
 * specific fixes in app.css, hub.css, platform.css and pro.css. This layer is
 * the single authority for typography, spacing, filter geometry, table scroll
 * stability and chart containment without changing domain-specific colours or
 * data logic.
 */

@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --font: "Vazirmatn Variable", Vazirmatn, IRANSansX, IRANSans, Tahoma, Arial, sans-serif;
  --ui-page-x: clamp(14px, 1.45vw, 26px);
  --ui-section-gap: 16px;
  --ui-card-radius: 16px;
  --ui-control-h: 44px;
  --ui-table-row-h: 46px;
  --ui-table-head-h: 48px;
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  --platform-gap: var(--ui-section-gap);
  --platform-card-radius: var(--ui-card-radius);
  --platform-control-h: var(--ui-control-h);
  --platform-cell-x: 12px;
  --platform-cell-y: 7px;
}

html {
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea { font-family: inherit; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 58%, transparent);
  outline-offset: 2px;
}

:where(h1, h2, h3, h4, p) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { line-height: 1.45; }

.main-content {
  min-width: 0;
  padding-inline: var(--ui-page-x);
}

.section-stack,
.dashboard-stack { gap: var(--ui-section-gap); }

:where(.panel, .filter-panel, .special-card, .admin-card, .admin-section, .kpi-card) {
  border-radius: var(--ui-card-radius);
}

.panel,
.filter-panel,
.special-card,
.admin-card,
.admin-section {
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  box-shadow: 0 10px 30px rgba(8, 28, 63, .055);
}

.panel-header,
.special-card > header,
.admin-card > header,
.admin-section > header {
  min-width: 0;
  gap: 14px;
  padding: 16px 18px;
}

.panel-header > div,
.special-card > header > div { min-width: 0; }

.panel-header h2,
.panel-header h3,
.special-card > header h3 {
  margin-block: 0 4px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 780;
  letter-spacing: -.012em;
}

.panel-header p,
.special-card > header p {
  max-width: 90ch;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.8;
}

/* ---------------------------------------------------------------- header */

.topbar {
  min-width: 0;
  min-height: 72px;
  margin-block: 0 16px;
  padding-block: 10px 12px;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}

.title-wrap { min-width: 0; }
.title-wrap > div { min-width: 0; }
.title-wrap h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(21px, 1.7vw, 29px);
  font-weight: 820;
  line-height: 1.4;
  letter-spacing: -.025em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-wrap p {
  max-width: 72ch;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.topbar-actions > * { flex-shrink: 0; }

.topbar .icon-button,
.topbar-icon-link {
  width: var(--ui-control-h);
  min-width: var(--ui-control-h);
  height: var(--ui-control-h);
  min-height: var(--ui-control-h);
  padding: 0;
  border-radius: 12px;
}

.topbar .primary-button,
.topbar .secondary-button { min-height: var(--ui-control-h); }

.clock-box {
  min-width: 146px;
  min-height: var(--ui-control-h);
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}

.clock-box strong { font-size: 12.5px; font-weight: 760; }
.clock-box span { margin: 0; font-size: 10px; }

.account-chip-button {
  min-width: 190px;
  max-width: 258px;
  min-height: var(--ui-control-h);
  padding: 6px 9px;
  border-radius: 999px;
}
.account-chip-button .who { min-width: 72px; max-width: 146px; }
.account-chip-button .who strong { font-size: 11.5px; }
.account-chip-button .who span { font-size: 9px; }

/* SVG icons are the authority. A cached legacy rule used to hide both theme
   icons, leaving the empty square seen in the admin header. */
.theme-toggle-button :where(.theme-icon, .theme-sun, .theme-moon) {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html:not([data-theme="dark"]) .theme-toggle-button :where(.theme-icon-sun, .theme-sun),
html[data-theme="dark"] .theme-toggle-button :where(.theme-icon-moon, .theme-moon) { display: none !important; }
html:not([data-theme="dark"]) .theme-toggle-button :where(.theme-icon-moon, .theme-moon),
html[data-theme="dark"] .theme-toggle-button :where(.theme-icon-sun, .theme-sun) { display: block !important; }

body.hub-root .topbar,
body[data-initial-view="admin"] .topbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(280px, 500px) max-content;
  grid-template-areas: "title search actions";
  align-items: center;
}
body.hub-root .topbar > .title-wrap,
body[data-initial-view="admin"] .topbar > .title-wrap { grid-area: title; }
body.hub-root .topbar > .global-search,
body[data-initial-view="admin"] .topbar > .global-search {
  grid-area: search;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 500px !important;
  margin: 0 !important;
}
body.hub-root .topbar > .topbar-actions,
body[data-initial-view="admin"] .topbar > .topbar-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: auto;
}

.v2-topbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) max-content !important;
  grid-template-areas: "title actions" !important;
  align-items: center !important;
  min-height: 72px !important;
  padding-block: 10px 12px !important;
}
.v2-topbar .title-wrap { grid-area: title; width: auto !important; }
.v2-topbar .topbar-actions {
  grid-area: actions;
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}
.v2-topbar .workspace-controls { order: 0 !important; }

@media (min-width: 981px) and (max-width: 1180px) {
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar {
    grid-template-columns: minmax(170px, auto) minmax(170px, 1fr) max-content;
    grid-template-areas: "title search actions";
  }
  body.hub-root .topbar > .global-search,
  body[data-initial-view="admin"] .topbar > .global-search { max-width: 300px !important; }
  .account-chip-button .who span { display: none; }
}

@media (max-width: 980px) {
  .topbar,
  .v2-topbar,
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "title" "search" "actions" !important;
    align-items: stretch !important;
  }
  .v2-topbar { grid-template-areas: "title" "actions" !important; }
  .topbar-actions,
  .v2-topbar .topbar-actions,
  body.hub-root .topbar > .topbar-actions,
  body[data-initial-view="admin"] .topbar > .topbar-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .v2-topbar .workspace-controls { flex: 1 1 260px; }
}

@media (max-width: 620px) {
  .topbar { padding-top: 6px; }
  .clock-box { min-width: 136px; flex: 1 1 136px; }
  .account-chip-button { min-width: 0; flex: 1 1 180px; }
  .account-chip-button .who { max-width: 108px; }
  .topbar-actions .primary-button.compact { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------- filters */

.v2-filter-panel { overflow: visible; }
.v2-filter-panel .v2-filter-head {
  min-height: 64px;
  padding: 13px 16px;
  gap: 14px;
}
.v2-filter-head > div:first-child { min-width: 0; }
.v2-filter-head strong { font-size: 13px; font-weight: 790; }
.v2-filter-head > div:first-child > span { font-size: 9.5px; line-height: 1.75; }
.v2-filter-panel .v2-filter-body { padding: 14px 16px 16px !important; }

/* The rail sizes itself by how many controls fit, not by a fixed column count.
   A hard `repeat(3, 1fr)` kept three columns at every desktop width, so the
   controls -- not the grid -- absorbed the extra space: measured 310px each at
   1280, 363px at 1440, 523px at 1920 and 567px at 2560. A 567px-wide dropdown
   holding the word "خرید" is the bug this replaces.

   --ob-filter-track is the width a filter control actually wants. --ob-filter-cap
   is the point past which more columns stop helping and the rail starts reading
   as a wall of controls; the max() clamps the track up once the container is
   wide enough for more than that many, which is what stops auto-fit at the cap.
   Percentages resolve against the rail's own width, so this stays correct when
   the sidebar collapses and the rail widens without the viewport changing. */
#filterBody .filter-primary,
#filterBody .filter-advanced,
#filterBody .filter-group-grid {
  --ob-filter-track: 224px;
  --ob-filter-cap: 6;
  --ob-filter-gap: 13px;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(
    max(var(--ob-filter-track),
        (100% - (var(--ob-filter-cap) - 1) * var(--ob-filter-gap)) / var(--ob-filter-cap)),
    1fr)) !important;
  gap: var(--ob-filter-gap) !important;
  align-items: start !important;
}
/* A group is nested inside the rail, so it gets a lower cap: three across is
   already the most it is ever given room for. */
#filterBody .filter-group-grid { --ob-filter-cap: 3; }
#filterBody .filter-primary .filter-field.wide { grid-column: span 1 !important; }

#filterBody .filter-field {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: start;
  gap: 7px;
}
#filterBody .filter-label {
  min-height: 20px;
  align-items: center;
  font-size: 10.5px;
  font-weight: 690;
  line-height: 1.6;
}

#filterBody :where(input:not([type="checkbox"]):not([type="radio"]), select, .multiselect-button) {
  min-width: 0;
  min-height: 40px;
  max-width: 100%;
}

#filterBody .filter-actions {
  min-height: 46px;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
}
#filterBody .filter-more {
  min-height: 38px;
  padding-inline: 13px;
  font-size: 11px;
}
#filterBody .filter-reset { min-height: 38px; font-size: 10.5px; }

/* A group occupies as many of the three desktop columns as its controls need.
   Two liquidity controls therefore get two-thirds of the row instead of being
   squeezed into one third and overflowing each other. */
#filterBody .filter-advanced {
  /* columns, gap and alignment come from the shared rail rule above */
  margin-top: 12px !important;
}
#filterBody .filter-advanced[hidden] { display: none !important; }
#filterBody .filter-group {
  grid-column: span var(--filter-group-span, 1);
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 13px 14px 14px !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--panel-2) 92%, var(--panel) 8%);
}
#filterBody .filter-group legend {
  max-width: calc(100% - 10px);
  padding-inline: 6px;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 770;
  line-height: 1.5;
}
/* --filter-group-span still says how wide the group wants to be in the rail;
   inside it, the same auto-fit rule decides how the group's own controls sit. */

#filterBody .threshold-filter { min-width: 0; gap: 9px; }
#filterBody .threshold-slider {
  width: 100%;
  height: 22px;
  margin: 0;
  direction: rtl;
}
#filterBody .threshold-foot {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}
#filterBody .threshold-filter:not(.has-value) .threshold-foot { grid-template-columns: minmax(0, 1fr); }
#filterBody .filter-number-shell { width: 100%; min-width: 0; }
#filterBody .threshold-num { width: 100% !important; min-width: 0; }
#filterBody .threshold-readout {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}
#filterBody .threshold-readout:empty { display: none; }

#filterBody .range-filter { min-width: 0; gap: 8px; }
#filterBody .range-track { width: 100%; height: 22px; }
#filterBody .range-inputs {
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr) max-content;
  align-items: center;
  gap: 6px !important;
}
#filterBody .range-num { width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; }
#filterBody .range-sep { padding-inline: 1px; font-size: 9.5px; }
#filterBody .range-inputs .filter-number-unit {
  grid-column: auto !important;
  min-height: 38px;
  margin: 0;
  padding-inline: 8px;
  border-radius: 9px;
  font-size: 8.5px;
}
#filterBody .range-readout { min-height: 18px; font-size: 9.5px; line-height: 1.7; }

#filterBody .segmented-filter { min-height: 40px; }
#filterBody .segmented-filter button { min-width: 0; min-height: 34px; padding-inline: 9px; }
#filterBody .multi-filter { min-width: 0; }
#filterBody .multi-chips { min-height: 0; }

/* Column counts are no longer set per breakpoint -- auto-fit derives them from
   the rail's width. What still needs a breakpoint is the group span: a group
   asks for up to three columns, and below roughly 820px the rail no longer has
   three to give, so the span would push a phantom column off the edge. */
@media (max-width: 820px) {
  #filterBody .filter-group { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  #filterBody .filter-actions { justify-content: stretch; }
  #filterBody .filter-more { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 430px) {
  #filterBody .range-inputs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  #filterBody .range-inputs .filter-number-unit { grid-column: 1 / -1 !important; justify-self: start; }
}

/* ---------------------------------------------------------------- tables */

:where(.table-scroll, .special-table-scroll, .table-wrap, .option-nearest-scroll) {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto !important;
  scrollbar-gutter: stable;
  contain: paint !important;
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
}

/* pro.css used `both-edges`, which reserves a second phantom gutter and makes
   the visible table width change as overlay scrollbars appear. */
.v2-market-page .table-scroll { scrollbar-gutter: stable !important; }

:where(.table-scroll, .special-table-scroll, .table-wrap, .option-nearest-scroll)::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
:where(.table-scroll, .special-table-scroll, .table-wrap, .option-nearest-scroll)::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel-2) 74%, transparent);
}
:where(.table-scroll, .special-table-scroll, .table-wrap, .option-nearest-scroll)::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  background-clip: padding-box;
}

.v2-market-page .v2-market-table {
  table-layout: fixed !important;
  width: max(100%, var(--market-table-width, 1200px)) !important;
  min-width: var(--market-table-width, 1200px) !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.75px;
  font-variant-numeric: tabular-nums;
}
.v2-market-page .v2-market-table thead tr { height: var(--ui-table-head-h); }
.v2-market-page .v2-market-table tbody tr {
  height: var(--ui-table-row-h);
  transition: none !important;
}
.v2-market-page .v2-market-table th,
.v2-market-page .v2-market-table td {
  height: var(--ui-table-row-h);
  max-height: var(--ui-table-row-h);
  padding: 7px 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4 !important;
  vertical-align: middle;
  box-sizing: border-box;
}
.v2-market-page .v2-market-table th {
  position: sticky;
  top: 0;
  z-index: 8;
  height: var(--ui-table-head-h);
  max-height: var(--ui-table-head-h);
  background: var(--panel-2);
  box-shadow: inset 0 -1px var(--line);
}
.v2-market-page .v2-market-table .sort-head {
  min-height: 32px;
  line-height: 1.35;
  white-space: nowrap;
}
.v2-market-page .v2-market-table th.watch-column,
.v2-market-page .v2-market-table td.watch-column {
  position: sticky;
  inset-inline-start: 0;
  right: 0;
  z-index: 10;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  background: var(--panel);
}
.v2-market-page .v2-market-table th.watch-column { z-index: 13; background: var(--panel-2); }
.v2-market-page .v2-market-table th.symbol-column,
.v2-market-page .v2-market-table td.symbol-cell {
  position: sticky;
  inset-inline-start: 48px;
  right: 48px;
  z-index: 9;
  min-width: 132px;
  background: var(--panel);
  box-shadow: -1px 0 0 var(--line), -10px 0 16px -16px rgba(7, 24, 52, .7);
}
.v2-market-page .v2-market-table th.symbol-column { z-index: 12; background: var(--panel-2); }
.v2-market-page .v2-market-table .symbol-link {
  min-width: 0;
  max-width: 100%;
  gap: 1px;
  align-content: center;
  line-height: 1.25;
}
.v2-market-page .v2-market-table .symbol-link strong,
.v2-market-page .v2-market-table .symbol-link small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-market-page .v2-market-table .symbol-link strong { font-size: 10.75px; }
.v2-market-page .v2-market-table .symbol-link small { font-size: 7.5px; }
.v2-market-page .v2-market-table tbody tr:hover td { background: var(--panel-2); }
.v2-market-page .v2-market-table tbody tr:hover td:is(.watch-column, .symbol-cell) {
  background: color-mix(in srgb, var(--panel-2) 92%, var(--primary) 8%);
}
.v2-market-page .table-scroll.is-scrolling .v2-market-table tbody tr:hover td { background: var(--panel); }
.v2-market-page .table-scroll.is-scrolling .v2-market-table { pointer-events: none; }

.dense-table { --ui-table-row-h: 36px; --ui-table-head-h: 42px; }
.dense-table .v2-market-table .symbol-link small { display: none; }

.panel-footer {
  min-height: 54px;
  padding: 10px 16px;
  gap: 12px;
}
.pagination { gap: 6px; }
.pagination button { min-width: 34px; min-height: 34px; border-radius: 9px; }

.data-table .empty-cell,
.data-table .loading-cell { min-height: 110px; padding-block: 30px !important; }

/* --------------------------------------------------------------- charts */

:where(.chart-host, .chart-frame, .module-breakdown, .breadth-visual, .special-insight, .history-chart) {
  min-width: 0;
  max-width: 100%;
}
.chart-host,
.chart-frame { overflow: clip; }
.chart-svg {
  overflow: hidden !important;
  font-family: var(--font) !important;
}
.chart-svg text { font-family: var(--font) !important; }
.axis-label { font-size: 10.5px; }
.axis-label.bar-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 660;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.bar-value {
  font-size: 10.5px;
  font-weight: 720;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.bar-value.inside {
  fill: #fff;
  stroke: rgba(5, 18, 40, .34);
  stroke-width: 2px;
}
.chart-annotation + .annotation-label,
.annotation-label {
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart-tooltip { max-width: min(280px, calc(100vw - 20px)); }

.v2-insight-grid {
  gap: var(--ui-section-gap);
  align-items: start;
}
.v2-insight-grid > .panel { min-width: 0; overflow: hidden; }
.v2-insight-grid .module-breakdown,
.v2-insight-grid .breadth-visual,
.v2-insight-grid .special-insight { padding: 18px 20px 20px; }

body[data-module="options"] .v2-insight-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr);
}

.money-pair,
.value-with-unit,
.input-with-unit {
  gap: 6px;
  white-space: nowrap;
}
.money-number,
.value-number,
.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

@media (max-width: 1100px) {
  body[data-module="options"] .v2-insight-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .panel-header,
  .special-card > header { padding: 13px 14px; }
  .v2-insight-grid .module-breakdown,
  .v2-insight-grid .breadth-visual,
  .v2-insight-grid .special-insight { padding: 14px; }
  .v2-market-page .v2-market-table { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ========================================================================
   v3.5.1 — desktop header/search refinement
   Keep the home header on one desktop row. The input may stay compact; its
   results panel is allowed to grow left while its right edge stays aligned
   with the search box (RTL page: physical right = inline-start).
   ===================================================================== */
@media (min-width:1181px){
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar{
    grid-template-columns:minmax(190px,auto) minmax(210px,1fr) max-content!important;
    grid-template-areas:"title search actions"!important;
    column-gap:12px!important;
    align-items:center!important;
  }
  body.hub-root .topbar>.global-search,
  body[data-initial-view="admin"] .topbar>.global-search{
    min-width:210px!important;
    max-width:420px!important;
    justify-self:stretch!important;
  }
  body.hub-root .topbar>.topbar-actions,
  body[data-initial-view="admin"] .topbar>.topbar-actions{gap:7px!important;}
  body.hub-root .clock-box,
  body[data-initial-view="admin"] .clock-box{min-width:142px!important;padding-inline:12px!important;}
  body.hub-root .account-chip-button,
  body[data-initial-view="admin"] .account-chip-button{max-width:205px!important;}
  body.hub-root .global-search-panel,
  body[data-initial-view="admin"] .global-search-panel{
    right:0!important;left:auto!important;
    width:min(900px,calc(100vw - 390px))!important;
    min-width:min(640px,calc(100vw - 390px))!important;
  }
}
@media (min-width:981px) and (max-width:1180px){
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar{
    grid-template-columns:minmax(170px,auto) minmax(170px,1fr) max-content!important;
    grid-template-areas:"title search actions"!important;
    column-gap:8px!important;
    align-items:center!important;
  }
  body.hub-root .topbar>.global-search,
  body[data-initial-view="admin"] .topbar>.global-search{min-width:170px!important;max-width:300px!important;}
  body.hub-root .title-wrap p,
  body[data-initial-view="admin"] .title-wrap p,
  body.hub-root .title-wrap .connection-badge,
  body[data-initial-view="admin"] .title-wrap .connection-badge{display:none!important;}
  body.hub-root .account-chip-button .who span,
  body[data-initial-view="admin"] .account-chip-button .who span{display:none!important;}
  body.hub-root .global-search-panel,
  body[data-initial-view="admin"] .global-search-panel{right:0!important;left:auto!important;width:min(760px,calc(100vw - 300px))!important;}
}

/* v3.6.3 final visual authority for panel insets and theme icon visibility. */
:is(.panel,.admin-workspace-panel) > .panel-header{padding-inline:18px!important;}
.symbol-actions .theme-toggle-button{color:var(--accent)!important;}
html:not([data-theme="dark"]) .theme-toggle-button .theme-icon-moon{display:block!important;}
html:not([data-theme="dark"]) .theme-toggle-button .theme-icon-sun{display:none!important;}
html[data-theme="dark"] .theme-toggle-button .theme-icon-sun{display:block!important;}
html[data-theme="dark"] .theme-toggle-button .theme-icon-moon{display:none!important;}

/* ========================================================================
   FinView v1.0 — professional Persian typography and readable data density.

   Earlier layers optimized for fitting as many controls as possible and
   allowed 7.5–10px labels.  That density is not usable on a financial product,
   especially with Persian glyphs.  This final layer establishes one semantic
   scale across every route while preserving horizontal table scrolling.
   ====================================================================== */
:root {
  --type-2xs: 11px;
  --type-xs: 12px;
  --type-sm: 13px;
  --type-body: 14px;
  --type-md: 15px;
  --type-lg: 18px;
  --type-xl: clamp(22px, 1.7vw, 30px);
  --type-2xl: clamp(27px, 2.2vw, 38px);
  --leading-tight: 1.45;
  --leading-body: 1.85;
  --leading-copy: 1.95;
}

body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-weight: 430;
}

:where(h1, h2, h3, h4, strong, b) {
  letter-spacing: 0;
  font-synthesis: none;
}

.title-wrap h1 {
  font-size: var(--type-xl);
  font-weight: 820;
  line-height: var(--leading-tight);
  letter-spacing: -.018em;
}
.title-wrap p {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: var(--leading-copy);
}
.home-hero h2,
.site-hero h1 { font-size: var(--type-2xl); line-height: 1.4; font-weight: 840; }
.home-section-head h2,
.panel-header h2,
.panel-header h3,
.special-card > header h3 {
  font-size: var(--type-lg);
  font-weight: 790;
  line-height: 1.55;
}
.home-section-head p,
.panel-header p,
.special-card > header p,
.muted,
.modal-sub {
  font-size: var(--type-xs);
  line-height: var(--leading-copy);
}
.home-eyebrow,
.report-kicker {
  font-size: var(--type-2xs);
  font-weight: 760;
  line-height: 1.7;
  letter-spacing: 0;
}

:where(button, .primary-button, .secondary-button, .mini-button, .text-button) {
  font-size: var(--type-sm);
  font-weight: 660;
}
:where(.field > span, .inline-field > span, .small-select, label > span) {
  font-size: var(--type-xs);
  line-height: 1.65;
}
:where(input, select, textarea) {
  font-size: var(--type-sm);
  line-height: 1.6;
}
:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  opacity: 1;
}

.nav-item { font-size: var(--type-xs); font-weight: 620; }
.connection-badge,
.market-session-chip,
.special-badge,
.status-pill,
.role-pill { font-size: var(--type-xs); }
.clock-box strong { font-size: var(--type-sm); }
.clock-box span { font-size: var(--type-2xs); }
.account-chip-button .who strong { font-size: var(--type-sm); }
.account-chip-button .who span { font-size: var(--type-2xs); }

.kpi-card > div > span,
.special-kpi .label,
.market-kpi > span { font-size: var(--type-xs); line-height: 1.7; }
.kpi-card strong,
.special-kpi .value b { font-size: clamp(19px, 1.7vw, 27px); line-height: 1.35; }
.kpi-card small,
.special-kpi .note,
.market-kpi > small { font-size: var(--type-2xs); line-height: 1.75; }

:where(.data-table, .special-table, .chain-table, .strategy-legs-table) {
  font-size: 12.5px;
  line-height: 1.65;
}
:where(.data-table, .special-table, .chain-table, .strategy-legs-table) th {
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.65;
}
:where(.data-table, .special-table, .chain-table, .strategy-legs-table) td {
  min-height: var(--ui-table-row-h);
}
.v2-market-page .v2-market-table { font-size: 12.5px; }
.v2-market-page .v2-market-table .symbol-link strong { font-size: 12.5px; }
.v2-market-page .v2-market-table .symbol-link small { font-size: 10.5px; line-height: 1.55; }
.dense-table { --ui-table-row-h: 40px; }

:is(.num, .numeric, .money-number, .value-number, .kpi-value strong, .market-kpi > strong) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  unicode-bidi: isolate;
}

.empty-state,
.empty-cell,
.loading-cell,
.history-status,
.module-status-banner {
  font-size: var(--type-xs);
  line-height: var(--leading-copy);
}
.module-status-banner.fresh { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
.module-status-banner.delayed,
.module-status-banner.warn { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); }
.module-status-banner.stale,
.module-status-banner.error { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }
.freshness-fresh { color: var(--green); }
.freshness-delayed { color: var(--warning); }
.freshness-stale { color: var(--red); }

.axis-label { font-size: 11px; }
.axis-unit-label { font-size: 10.5px; }
.bar-value { font-size: 11px; }
.chart-svg { overflow: visible !important; }
.chart-frame { overflow: hidden; }
.bond-bubble-dot.is-clipped { stroke-width: 2.2 !important; stroke-dasharray: 3 2; }
.data-quality-invalid { opacity: .64; }
.data-quality-invalid td { background: color-mix(in srgb, var(--warning) 4%, var(--panel)); }

/* Component-level legibility floor. These selectors intentionally match the
   older high-specificity component rules so no route falls back to 7–10px
   Persian copy after the semantic scale above is applied. */
.report-card p { font-size: 13px; line-height: 2; }
.report-tags span,
.report-access,
.watchlist-report,
.status-pill,
.role-pill { font-size: 11px; }
.report-card-footer span,
.report-card-footer strong,
.report-card-footer small { font-size: 11px; line-height: 1.7; }
.freshness-copy strong,
.insight-item strong,
.watch-preview-item span > strong,
.personal-link-copy strong,
.search-result-copy strong { font-size: 12px; }
.freshness-copy small,
.freshness-time,
.insight-item small,
.watch-preview-item span > small,
.personal-link-copy small,
.personal-link-time,
.search-result-copy small,
.search-result-metrics small { font-size: 11px; line-height: 1.75; }
.search-result-report,
.search-result-metrics strong { font-size: 11px; }
.module-status-banner strong { font-size: 13px; line-height: 1.7; }
.module-status-banner span { font-size: 12px; line-height: 1.9; }
.v2-filter-head span,
.filter-toggle,
.v2-filter-head .filter-toggle,
.v2-filter-head .filter-toggle .filter-toggle-label,
.active-filter-count,
.filter-number-unit,
.history-metric-switch button { font-size: 11.5px; }
.symbol-link strong { font-size: 12.5px; }
.symbol-link small,
.special-table .symbol-link small { font-size: 11px; line-height: 1.55; }
.special-board-footer { font-size: 11.5px; line-height: 1.8; }
.special-chart-tooltip,
.special-unit-value small,
.special-mix + small { font-size: 11px; }
.mobile-bottom-nav small,
.hub-mobile-nav small { font-size: 10.5px; line-height: 1.35; }
.ticker-status,
.ticker-live,
.ticker-item b,
.ticker-item strong,
.ticker-item small { font-size: 10.5px; }
.market-radar-title span,
.market-radar-signals small,
.market-radar-score,
.watch-metric-cell small,
.watch-metric-unit { font-size: 10.5px; line-height: 1.55; }
.quality-key,
.quality-observed,
.field-state,
.profile-note,
.verification-method small,
.profile-meta-grid span { font-size: 10.5px; line-height: 1.7; }
.module-status-banner.freshness-fresh { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
.module-status-banner.freshness-delayed { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); }
.module-status-banner.freshness-stale { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }

/* Strategy, specialist boards and operational surfaces previously carried
   page-specific 8–10px rules. Keep dense tables horizontally scrollable, but
   never solve density by shrinking Persian text below a readable floor. */
.strategy-template-strip button small,
.strategy-kpi-card > span,
.strategy-kpi-card > small,
.strategy-greeks-pro span,
.strategy-position-summary > span,
.strategy-chain-stats > span,
.strategy-pro-page .field > small,
.strategy-ranker-note small,
.strategy-ranker-meta,
.strategy-ranked-legs span,
.strategy-rank-reasons,
.strategy-chart-tooltip span small,
.source-pill,
.strategy-source-inline > span,
.strategy-source-inline > small,
.switch-control span,
.member-login-audit strong,
.member-login-audit small { font-size: 11.5px; line-height: 1.7; }
.strategy-legs-table th,
.strategy-legs-table td,
.strategy-chain-panel .chain-table th,
.strategy-chain-panel .chain-table td { font-size: 12px; line-height: 1.65; }
.scenario-matrix-head,
.scenario-matrix-row,
.option-side-pill,
.chain-side-button { font-size: 11px; }
.special-pill,
.block-pill,
.type-pill,
.special-kpi .note,
.special-card > header p,
.specialized-page .column-count,
.panel-footer,
.page-footer,
.event-amount,
.movers-columns h3,
.mover-item,
.breakdown-item,
.chart-legend,
.chart-footnote,
.app-update-prompt small { font-size: 11.5px; line-height: 1.75; }
.special-table .symbol-link small,
.special-unit-value small,
.special-mix + small,
.unit-note { font-size: 11px; line-height: 1.65; }
.column-nudge { min-width: 28px; min-height: 24px; font-size: 11px !important; }

@media (max-width: 700px) {
  :root {
    --type-body: 14px;
    --type-lg: 17px;
    --ui-control-h: 46px;
  }
  .main-content { padding-inline: 12px; }
  .title-wrap h1 { font-size: clamp(21px, 6.4vw, 27px); white-space: normal; }
  .title-wrap p { font-size: 12px; white-space: normal; overflow: visible; }
  .panel-header h2,
  .panel-header h3,
  .special-card > header h3 { font-size: 16.5px; }
  .v2-market-page .v2-market-table,
  :where(.data-table, .special-table, .chain-table, .strategy-legs-table) { font-size: 12px; }
  :where(.data-table, .special-table, .chain-table, .strategy-legs-table) th { font-size: 11px; }
  .v2-market-page .v2-market-table .symbol-link strong { font-size: 12px; }
  .v2-market-page .v2-market-table .symbol-link small { font-size: 10px; }
}

/* v1.0.9 — compact per-dashboard visual visibility manager. */
.optionban-visual-hidden { display: none !important; }
.visual-manager { position: relative; display: inline-grid; place-items: center; z-index: 45; }
.visual-manager-button {
  position: relative; display: inline-grid; place-items: center; width: var(--ui-control-h) !important;
  min-width: var(--ui-control-h) !important; height: var(--ui-control-h); padding: 0 !important;
  color: var(--navy); background: var(--panel); border: 1px solid var(--line);
}
.visual-manager-icon { width: 20px; height: 20px; }
.visual-manager-button.has-hidden { border-color: color-mix(in srgb, var(--accent) 54%, var(--line)); color: var(--accent); }
.visual-manager-count {
  position: absolute; inset-inline-start: -5px; inset-block-start: -5px; display: none; min-width: 17px; height: 17px;
  padding-inline: 4px; place-items: center; border: 2px solid var(--panel); border-radius: 999px;
  background: var(--accent); color: var(--on-accent) !important; font-size: 9px !important; font-weight: 800; line-height: 1;
}
.visual-manager-button.has-hidden .visual-manager-count { display: inline-grid; }
.visual-manager-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 9px); width: min(356px, calc(100vw - 28px));
  max-height: min(72vh, 580px); overflow: auto; padding: 10px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel); box-shadow: 0 20px 50px rgba(15, 23, 42, .18); direction: rtl;
}
.visual-manager-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 3px 3px 10px;
  border-bottom: 1px solid var(--line);
}
.visual-manager-head > div { min-width: 0; display: grid; gap: 2px; }
.visual-manager-head strong { font-size: 13px; line-height: 1.7; }
.visual-manager-head span { color: var(--muted); font-size: 10.5px; line-height: 1.65; }
.visual-manager-close {
  width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.visual-manager-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.visual-manager-items { display: grid; gap: 3px; padding-block: 8px; }
.visual-manager-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 7px 8px;
  border-radius: 10px; cursor: pointer; user-select: none;
}
.visual-manager-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.visual-manager-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.visual-manager-switch { position: relative; width: 34px; height: 20px; flex: 0 0 34px; }
.visual-manager-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.visual-manager-switch i {
  position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 26%, var(--line));
  transition: background .16s ease;
}
.visual-manager-switch i::after {
  content: ''; position: absolute; width: 14px; height: 14px; inset-block-start: 3px; inset-inline-start: 3px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .24); transition: transform .16s ease;
}
.visual-manager-switch input:checked + i { background: var(--accent); }
.visual-manager-switch input:checked + i::after { transform: translateX(-14px); }
.visual-manager-switch input:focus-visible + i { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.visual-manager-actions { display: flex; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); }
.visual-manager-actions button {
  min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 11px; cursor: pointer;
}
.visual-manager-actions button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) {
  .visual-manager-menu {
    position: fixed; top: auto; inset-inline: 12px; bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: 64vh; border-radius: 18px;
  }
}


/* ========================================================================
   v3.7 — responsive + bidi pass
   Measured with scripts/qa_responsive_audit.mjs across 17 routes x 8 widths
   (360 / 390 / 768 / 1024 / 1280 / 1440 / 1920 / 2560). Every rule below
   closes a finding that harness reported; re-run it after editing.
   ===================================================================== */

/* ---------------------------------------------------------- 981-1180px --
   The worst band by a wide margin: 28 elements left the viewport at 1024
   against 13 at 1280 and none at 1920. The topbar keeps a three-column grid
   here, and .workspace-controls sits in a nowrap flex row as `flex: 0 0 auto`,
   so when the row runs over budget nothing yields -- it was measured 560px
   wide ending 74px past the edge, with its own 130px of elastic select never
   consulted. Letting the cluster shrink is enough; it does not need to wrap. */
.topbar .workspace-controls,
.v2-topbar .workspace-controls,
body.platform-v270 .topbar-actions .workspace-controls {
  flex: 0 1 auto;
  min-width: 0;
}
/* The select is what gives way, down to a width that still shows a view name. */
@media (max-width: 1180px) {
  .workspace-controls .workspace-select { min-width: 104px; }
}
/* The actions column was sized `max-content` -- a track that cannot shrink. At
   1024 it measured 843px next to a 220px title inside a 1009px viewport, so the
   grid overflowed by 137px while the flex row inside it, being exactly as wide
   as its own content, never had a reason to wrap. Allowing the track to shrink
   is what lets wrapping happen at all; the two rules only work together.
   Guarded to 981px and up because below that the header stacks into one
   column and must keep the areas the earlier block gives it. */
@media (min-width: 981px) {
  .v2-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) !important;
  }
  .topbar-actions,
  .v2-topbar .topbar-actions,
  body.hub-root .topbar > .topbar-actions,
  body[data-initial-view="admin"] .topbar > .topbar-actions {
    flex-wrap: wrap !important;
    row-gap: 7px;
    min-width: 0;
    justify-content: flex-end;
  }
  .topbar .title-wrap,
  .v2-topbar .title-wrap { min-width: 0; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, max-content) !important;
  }
}
@media (min-width: 1181px) {
  body.hub-root .topbar,
  body[data-initial-view="admin"] .topbar {
    grid-template-columns: minmax(190px, auto) minmax(210px, 1fr) minmax(0, max-content) !important;
  }
}

/* ------------------------------------------------------- full bleed ----
   .topbar bleeds out of .main-content's inline padding with a negative margin
   so its underline can run edge to edge. app.css set that pair as -24px against
   a fixed 24px padding, and they matched. This file later replaced the padding
   with the fluid --ui-page-x and left the -24px behind, so the bleed stopped
   agreeing with the padding it was cancelling:

       width   --ui-page-x   bleed   header sits past the edge by
       768        14.00px    24px    10px
       1024       14.63px    24px     9px
       1280       18.55px    24px     6px
       1440       20.66px    24px     3px
       1920       26.00px    24px     0  (padding finally exceeds the bleed)

   Every one of those was measured, and the residual overflow on home, trends
   and shareholders is exactly this number. Tying the bleed to the same token
   makes the pair self-maintaining at any width. */
.topbar {
  margin-inline: calc(-1 * var(--ui-page-x));
  padding-inline: var(--ui-page-x);
}
/* Both sides of that cancellation now read the same token. hub.css was setting
   .v2-main to 12px and 9px at phone widths while --ui-page-x floors at 14px,
   and that 2px disagreement was the whole of the residual overflow left at 360
   and 390. The token drops to 12px on phones so unifying them costs no content
   width -- it keeps the density hub.css was reaching for. */
@media (max-width: 700px) {
  :root { --ui-page-x: 12px; }
}
.main-content,
.v2-main { padding-inline: var(--ui-page-x); }

/* ------------------------------------------------- mobile bottom nav ----
   Below 760px the sidebar becomes a fixed 68px bottom bar laid out as a flex
   row. It never got a way to reach items past the fold: on admin at 360px the
   back-to-dashboard item measured 162px beyond the edge, unreachable rather
   than merely cramped. It scrolls now, and the items stop being squeezed. */
@media (max-width: 760px) {
  .sidebar {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar .nav-item { flex: 0 0 auto; }
}

/* ------------------------------------------------------- touch targets --
   Phones only. The audit found column-resize grips 9px wide exposed to touch,
   a strategy link 10px tall, and bare checkboxes at 16px -- below the 24px
   WCAG 2.5.8 floor. The 27-30px controls already clear that floor and are
   lifted to 32px for comfort rather than compliance. */
@media (max-width: 700px) {
  /* A drag grip needs a pointer; on touch it is a 9px-wide mis-tap risk. */
  .platform-col-resize,
  .col-resize { display: none !important; }
}
@media (max-width: 430px) {
  .input-clear,
  .watch-button,
  .date-picker-trigger { min-width: 32px; min-height: 32px; }
  .market-strategy-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-block: 4px;
  }
  /* A 16px checkbox is below the 24px floor on its own. The box stays 16px --
     resizing a native control is its own trouble -- and the label it already
     sits inside carries the target instead. These are the wrappers actually
     used in the markup: .switch-control on the strategy and shareholder
     toggles, .check-label in the admin announcement editor. */
  label.switch-control,
  label.check-label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* 17px tall, and the only way back to the board from a symbol page. */
  .breadcrumb a,
  #marketBreadcrumb { display: inline-flex; align-items: center; min-height: 32px; }
  .pill-status { min-height: 28px; min-width: 28px; }
  .symbol-link { min-height: 34px; }
}

/* v3.8 — form controls follow the theme, including the parts CSS cannot paint.
 *
 * Inputs rendered white on the dark theme, and the cause was not a missing
 * background: it was a missing `color-scheme`. Until a document declares one,
 * the browser draws every NATIVE part of a control in light mode no matter what
 * the stylesheet says -- the popup list a <select> opens, the calendar behind
 * <input type="date">, number spinners, the autofill wash Chrome paints over a
 * remembered field, and the scrollbars. Those are rendered by the browser, not
 * by us, and `color-scheme` is the only thing they read.
 *
 * The rest of this block covers the other half: control styling here was
 * per-component (.field input, .inline-search input, .small-select select), so
 * any control outside one of those wrappers kept the user-agent default. Styled
 * by element instead, from the same tokens .field already uses, so a control
 * looks the same wherever it happens to sit.
 */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* `font-family: inherit` is set further up, but size and letter-spacing are NOT
   inherited by native controls either -- which is why the text in them still
   looked like the user-agent font at the user-agent size. */
/* Buttons are deliberately absent: they already inherit font-family further
   up, and forcing font-size onto them would resize every button in the app
   that was sized deliberately. The ask was the inputs. */
input,
select,
textarea,
option,
optgroup {
  font-family: var(--font, inherit);
  font-size: inherit;
  letter-spacing: inherit;
}

/* Text-entry controls. Checkboxes and radios are deliberately excluded: they
   are painted via accent-color below, and giving them a background turns them
   into grey squares in several browsers. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;   /* Firefox dims placeholders again on top of the colour. */
}

/* The option list is a native popup: it takes the colours from color-scheme
   above, but naming them keeps Windows/Chrome from falling back to system grey
   on the individual rows. */
select option,
select optgroup {
  background-color: var(--panel);
  color: var(--text);
}

/* Chrome paints autofilled fields with its own background and ignores
   `background-color`. An inset shadow the size of the field is the one thing it
   does honour, and -webkit-text-fill-color is what carries the text colour. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  box-shadow: 0 0 0 1000px var(--panel-2) inset;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;   /* outlast the repaint */
}

/* Checkboxes, radios, ranges and the picker glyphs the browser draws. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--primary);
}

/* A disabled control should read as unavailable, not as broken. */
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  background-color: var(--surface-3, var(--panel));
  cursor: not-allowed;
}

/* The auth field's label rule was also landing on the password wrapper.
 *
 * hub.css styles the label as `.auth-field > span:first-child` -- 12px, muted,
 * with a 7px bottom margin. On a password field the first child is not the
 * label but `<span class="password-input-wrap">`, the flex box holding the
 * field and its show/hide toggle, so the wrapper inherited label typography and
 * a margin meant to sit under a caption. It was invisible while controls used
 * the user-agent font size and became visible the moment they inherited their
 * container's, which is how it surfaced: password fields rendered at 12px
 * beside 14px text fields in the same form.
 *
 * Excluding the wrapper fixes the size, the muted colour and the stray margin
 * together, and leaves real labels alone.
 */
.auth-field > span.password-input-wrap {
  display: flex;
  font-size: inherit;
  color: inherit;
  margin-bottom: 0;
}

/* Dropdowns in the site's own font.
 *
 * Two different things are called a dropdown here and they need different
 * treatment. A native <select> opens a list the BROWSER draws: `option` has to
 * name the font itself, because it does not inherit from the <select> the way
 * an ordinary child would. The rest -- the account menu, alerts, the symbol
 * autocomplete -- are ordinary elements, and they are named here because a
 * couple of them sit in stacking contexts where an earlier reset had already
 * put the user-agent font back.
 */
option,
optgroup {
  font-family: var(--font, inherit);
  background-color: var(--panel);
  color: var(--text);
}

.account-dropdown,
.account-menu,
.masthead-menu,
.alert-dropdown,
.autocomplete-list,
.autocomplete-item,
.column-panel,
.filter-menu,
.saved-view-menu {
  font-family: var(--font, inherit);
}