/* ui2-controls.css — element-level primitives for the long tail.
 *
 * WHY ELEMENT-LEVEL: the app has 205 buttons, 20 selects and 11 checkboxes in the
 * view partials alone, plus more built in JS, spread across ~20 bespoke class
 * families. Restyling them class-by-class is endless and always leaves stragglers.
 * These rules style the ELEMENT inside .ui2, so anything not explicitly handled
 * elsewhere still lands on the right shape by default.
 *
 * SPECIFICITY, deliberately: ".ui2 button" is (0,1,1), which beats a bare
 * single-class rule like ".someBtn" (0,1,0) in styles.css but loses to any
 * two-class rule. That is the behaviour we want - a sane default that a specific
 * ui2 rule (or a third-party widget) can still override.
 *
 * THIRD-PARTY: AG Grid, daterangepicker and ECharts all style their own controls
 * with two-class selectors, so they naturally win. Leaflet uses single-class
 * selectors and would lose, so its controls are protected explicitly at the bottom.
 *
 * Loaded last, after ui2-modules.css.
 */

/* ============================ buttons ============================ */
.ui2 button{
  box-sizing:border-box;
  min-height:var(--u2-ctl);
  padding:0 12px;
  border:1px solid var(--u2-line);
  background:var(--u2-panel);
  color:var(--u2-ink-2);
  border-radius:var(--u2-radius);
  font:500 var(--u2-fs-sm)/1 inherit;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.ui2 button:hover{background:var(--u2-line-soft);color:var(--u2-ink);border-color:var(--u2-line);}
.ui2 button:disabled{opacity:.5;cursor:not-allowed;}
/* selected state, whichever convention a module uses */
.ui2 button.active,
.ui2 button.on,
.ui2 button.selected,
.ui2 button[aria-pressed="true"]{
  background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;font-weight:600;
}
.ui2 button.active:hover,
.ui2 button.on:hover,
.ui2 button.selected:hover{background:var(--u2-accent);filter:brightness(1.06);color:#fff;}
/* the one loud button per screen */
.ui2 button.primary,
.ui2 button.btn-primary{
  background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;font-weight:600;
}
/* icon-only buttons stay square */
.ui2 button.iconBtn,
.ui2 button.btn-icon{width:var(--u2-ctl);padding:0;}
/* text/link-style buttons keep no chrome */
.ui2 button.linkBtn,
.ui2 button.btn-link,
.ui2 button.plain{
  border-color:transparent;background:transparent;color:var(--u2-accent);
  min-height:auto;padding:0;
}
.ui2 button.linkBtn:hover,
.ui2 button.btn-link:hover{background:transparent;text-decoration:underline;}

/* adjacent buttons read as one group (Calls | Puts | All) */
.ui2 .btnGroup,
.ui2 .segGroup{display:inline-flex;}
.ui2 .btnGroup button + button,
.ui2 .segGroup button + button{margin-left:-1px;border-radius:0;}
.ui2 .btnGroup button:first-child,
.ui2 .segGroup button:first-child{border-radius:var(--u2-radius) 0 0 var(--u2-radius);}
.ui2 .btnGroup button:last-child,
.ui2 .segGroup button:last-child{border-radius:0 var(--u2-radius) var(--u2-radius) 0;}

/* ============================ fields ============================ */
.ui2 input:not([type]),
.ui2 input[type="text"],
.ui2 input[type="search"],
.ui2 input[type="number"],
.ui2 input[type="date"],
.ui2 input[type="email"],
.ui2 input[type="password"],
.ui2 textarea,
.ui2 select{
  box-sizing:border-box;
  min-height:var(--u2-ctl);
  padding:0 10px;
  border:1px solid var(--u2-line);
  background:var(--u2-panel);
  color:var(--u2-ink);
  border-radius:var(--u2-radius);
  font:400 var(--u2-fs-sm)/1 inherit;
  font-variant-numeric:tabular-nums;
}
.ui2 textarea{padding:8px 10px;line-height:1.5;min-height:70px;}
.ui2 input:focus,
.ui2 textarea:focus,
.ui2 select:focus{
  outline:none;border-color:var(--u2-accent);box-shadow:0 0 0 3px var(--u2-accent-soft);
}
.ui2 input::placeholder,
.ui2 textarea::placeholder{color:var(--u2-muted);}
.ui2 input:disabled,
.ui2 select:disabled{background:var(--u2-track);color:var(--u2-muted);}

/* ============================ checkbox / radio ============================ */
.ui2 input[type="checkbox"],
.ui2 input[type="radio"]{
  box-sizing:border-box;
  width:15px;height:15px;min-height:0;padding:0;
  accent-color:var(--u2-accent);
  border-radius:3px;
  vertical-align:middle;
  cursor:pointer;
  box-shadow:none;
}
.ui2 input[type="radio"]{border-radius:50%;}
.ui2 input[type="checkbox"]:focus,
.ui2 input[type="radio"]:focus{box-shadow:none;}
/* a checkbox and its label are one control, vertically centred */
.ui2 label:has(> input[type="checkbox"]),
.ui2 label:has(> input[type="radio"]){
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--u2-fs-sm);color:var(--u2-ink-2);
  text-transform:none;letter-spacing:normal;line-height:1;
  cursor:pointer;
}

/* ============================ tables ============================ */
.ui2 table{border-collapse:collapse;font-size:var(--u2-fs-sm);width:100%;}
.ui2 table th{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--u2-muted);
  border-bottom:1px solid var(--u2-line);
  padding:7px 9px;
  background:transparent;
  white-space:nowrap;
}
.ui2 table td{
  border-bottom:1px solid var(--u2-line-soft);
  padding:6px 9px;
  font-variant-numeric:tabular-nums;
  color:var(--u2-ink);
}
.ui2 table tbody tr:hover{background:var(--u2-line-soft);}
.ui2 table tbody tr:last-child td{border-bottom:0;}
/* numeric columns right-aligned, the way a terminal arranges a table */
.ui2 table th.num,
.ui2 table td.num,
.ui2 table th[data-num],
.ui2 table td[data-num]{text-align:right;}
/* up / down keep their meaning wherever they appear */
.ui2 .up,   .ui2 td.up,   .ui2 .pos{color:var(--u2-up);}
.ui2 .down, .ui2 td.down, .ui2 .neg{color:var(--u2-down);}

/* ============================ cards, generically ============================
   Any element whose class ends in "Card" gets the panel treatment, so a module
   nobody has hand-mapped still looks right. */
.ui2 [class$="Card"],
.ui2 [class*="Card "]{
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:none;
}

/* ============================ third-party protection ============================
   AG Grid, daterangepicker and ECharts style their controls with two-class
   selectors and therefore already beat the (0,1,1) rules above. Leaflet uses
   single-class selectors and would lose, so its controls are restored here. */
.ui2 .leaflet-container button,
.ui2 .leaflet-control button,
.ui2 .leaflet-control a{
  min-height:0;height:auto;padding:revert;border-radius:revert;
  font:revert;display:revert;gap:0;
}
.ui2 .leaflet-control-zoom a{width:30px;height:30px;line-height:30px;display:block;}
/* klinecharts draws to canvas but its toolbar is ours - leave that alone */
.ui2 .klHost button{min-height:0;}

/* mobile: every control clears the 36px touch floor */
html.mobileLayout .ui2 button{min-height:var(--u2-ctl);}
html.mobileLayout .ui2 input:not([type]),
html.mobileLayout .ui2 input[type="text"],
html.mobileLayout .ui2 input[type="search"],
html.mobileLayout .ui2 input[type="number"],
html.mobileLayout .ui2 input[type="date"],
html.mobileLayout .ui2 select,
html.mobileLayout .ui2 textarea{min-height:var(--u2-ctl);font-size:16px;}
html.mobileLayout .ui2 input[type="checkbox"],
html.mobileLayout .ui2 input[type="radio"]{width:18px;height:18px;}

/* ============================ card hover ============================
   Cards keep their hairline border at rest - the border is what defines the card,
   not the shadow. On hover they lift with a soft shade and a slightly darker edge.
   This replaces the earlier flat treatment, which removed the shadow entirely and
   left hover with nothing to say. */
.ui2 [class$="Card"],
.ui2 [class*="Card "],
.ui2 .zsxqCard,
.ui2 .mvCard,
.ui2 .kmmCard,
.ui2 .bkCard{
  border:1px solid var(--u2-line);
  box-shadow:none;
  transition:box-shadow .15s ease,border-color .15s ease;
}
.ui2 [class$="Card"]:hover,
.ui2 .zsxqCard:hover,
.ui2 .mvCard:hover,
.ui2 .kmmCard:hover,
.ui2 .bkCard:hover{
  border-color:#d6dbe3;
  box-shadow:0 4px 14px rgba(16,24,40,.09);
}
[data-bs-theme="dark"] .ui2 [class$="Card"]:hover,
[data-bs-theme="dark"] .ui2 .zsxqCard:hover,
[data-bs-theme="dark"] .ui2 .mvCard:hover,
[data-bs-theme="dark"] .ui2 .kmmCard:hover,
[data-bs-theme="dark"] .ui2 .bkCard:hover{
  border-color:#33404f;
  box-shadow:0 4px 16px rgba(0,0,0,.42);
}

/* ============================ menus / option lists ============================
   Any dropdown list - the user menu, a language picker, the sources filter tree -
   uses one shape: rounded rows, muted text, a light grey fill for hover, and the
   same grey (not an accent block) for the selected row. */
.ui2 .dropdown-menu,
.ui2 .srcDropdownPanel,
.ui2 .menuPanel{
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:0 12px 34px rgba(10,16,26,.18);
  padding:5px;
}
.ui2 .dropdown-item,
.ui2 .menuItem,
.ui2 .srcDropdownPanel [data-src-key],
.ui2 [role="menuitem"]{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-radius:4px;
  font-size:var(--u2-fs-sm);
  color:var(--u2-ink-2);
  cursor:pointer;
  text-decoration:none;
}
.ui2 .dropdown-item:hover,
.ui2 .menuItem:hover,
.ui2 [role="menuitem"]:hover{background:var(--u2-line-soft);color:var(--u2-ink);}
.ui2 .dropdown-item.active,
.ui2 .dropdown-item[aria-current="true"],
.ui2 .menuItem.active,
.ui2 .menuItem.selected,
.ui2 [role="menuitem"][aria-selected="true"]{
  background:var(--u2-line-soft);
  color:var(--u2-ink);
  font-weight:600;
}

/* ============================ .segmented ============================
   The app already wraps its button groups in .segmented (Calls|Puts|All,
   Signals|Intraday, and others) - it just was never styled here, so the group
   rendered as separate buttons with an accent-filled active one. Futu uses a grey
   track with a white active pill, which is the same shape as .u2Seg; this makes
   the existing markup adopt it without touching a single view partial. */
.ui2 .segmented{
  display:inline-flex;align-items:stretch;
  background:var(--u2-track);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  padding:2px;gap:2px;
  box-sizing:border-box;
  height:var(--u2-ctl);
}
.ui2 .segmented button{
  appearance:none;box-sizing:border-box;
  min-height:0;height:100%;
  border:1px solid transparent;background:transparent;
  color:var(--u2-ink-2);
  font:500 var(--u2-fs-sm)/1 inherit;
  padding:0 13px;border-radius:3px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
}
.ui2 .segmented button:hover{background:transparent;color:var(--u2-ink);border-color:transparent;}
/* active is a raised white pill, NOT an accent block */
.ui2 .segmented button.active,
.ui2 .segmented button.on,
.ui2 .segmented button[aria-pressed="true"]{
  background:var(--u2-panel);
  color:var(--u2-ink);
  font-weight:600;
  border-color:var(--u2-line);
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.ui2 .segmented button.active:hover,
.ui2 .segmented button.on:hover{background:var(--u2-panel);color:var(--u2-ink);filter:none;}
/* the joined-group rules must not fight the track */
.ui2 .segmented button + button{margin-left:0;}
html.mobileLayout .ui2 .segmented{height:var(--u2-ctl);}
html.mobileLayout .ui2 .segmented button{font-size:var(--u2-fs-md);padding:0 14px;}

/* every control in a panel header lines up on one baseline and one height */
.ui2 .panelHeader{align-items:center;}
.ui2 .panelHeader > label{align-self:center;}

/* ============================ resets that must win ============================
   A small set of declarations exist purely to REMOVE old chrome - the panel drop
   shadow, the tab chip and its shadow, the segmented button fill. Each is already
   both higher-specificity and later in the cascade than the styles.css rule it
   replaces, yet measurement showed the old value still winning, and I could not
   account for it. Rather than leave the UI wrong while chasing the mechanism,
   these few are marked explicitly.
   Deliberately narrow: only "turn the old thing off" properties, never colour,
   spacing or layout - so this cannot mask a future styling mistake. */
.ui2 .tablePanel,
.ui2 .chartPanel,
.ui2 .optionsUniverse,
.ui2 .koreaControls,
.ui2 .optionsControls,
.ui2 .watchlistControls{box-shadow:none !important;}

.ui2 .newsSubTabs,
.ui2 .nav-pills.newsSubTabs{background:transparent !important;border:0 !important;border-bottom:1px solid var(--u2-line) !important;border-radius:0 !important;padding:0 !important;}
.ui2 .newsSubTabs .nav-link,
.ui2 .nav-pills.newsSubTabs .nav-link{background:transparent !important;box-shadow:none !important;border-radius:0 !important;}
.ui2 .newsSubTabs .nav-link.active,
.ui2 .nav-pills.newsSubTabs .nav-link.active{
  background:transparent !important;box-shadow:none !important;
  border:0 !important;border-bottom:2px solid var(--u2-accent) !important;
  color:var(--u2-accent) !important;
}
.ui2 .segmented button{background:transparent !important;box-shadow:none !important;}
.ui2 .segmented button.active,
.ui2 .segmented button.on{
  background:var(--u2-panel) !important;color:var(--u2-ink) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.06) !important;
}

/* ============================ .btnSeg / .bkHeatSeg / .bkWeightSeg ============================
   More toggle groups the app already wraps (Cards|Table, All|RRG|Watchlist, and the
   basket heat/weight switches). Like .segmented they were never styled here, so they
   rendered as separate buttons with a solid blue active one. Same Futu shape: grey
   track, raised white pill. Listed alongside .segmented so every switch in the app
   is one component. */
.ui2 .btnSeg,
.ui2 .bkHeatSeg,
.ui2 .bkWeightSeg,
.ui2 .bkFwdToggle{
  display:inline-flex;align-items:stretch;
  box-sizing:border-box;height:var(--u2-ctl);
  background:var(--u2-track);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  padding:2px;gap:2px;
  overflow:visible;
}
.ui2 .btnSeg button,
.ui2 .bkHeatSeg button,
.ui2 .bkWeightSeg button,
.ui2 .bkFwdToggle button{
  appearance:none;box-sizing:border-box;
  min-height:0;height:100%;
  border:1px solid transparent;background:transparent !important;
  color:var(--u2-ink-2);
  font:500 var(--u2-fs-sm)/1 inherit;
  padding:0 13px;border-radius:3px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:none !important;
}
.ui2 .btnSeg button:hover,
.ui2 .bkHeatSeg button:hover,
.ui2 .bkWeightSeg button:hover{color:var(--u2-ink);}
.ui2 .btnSeg button.on,
.ui2 .btnSeg button.active,
.ui2 .bkHeatSeg button.on,
.ui2 .bkWeightSeg button.on,
.ui2 .bkFwdToggle button.on{
  background:var(--u2-panel) !important;
  color:var(--u2-ink) !important;
  font-weight:600;
  border-color:var(--u2-line);
  box-shadow:0 1px 2px rgba(16,24,40,.06) !important;
}

/* basket chips: square them off to match the 4px kit and quieten the selected state */
.ui2 .bkChip{
  box-sizing:border-box;
  border:1px solid var(--u2-line);
  background:var(--u2-panel);
  color:var(--u2-ink-2);
  border-radius:var(--u2-radius);
  padding:5px 11px;
  font-size:var(--u2-fs-sm);
  min-height:0;
}
.ui2 .bkChip:hover{background:var(--u2-line-soft);color:var(--u2-ink);}
.ui2 .bkChip.on{
  background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;font-weight:600;
}
.ui2 .bkChipN{opacity:.7;font-size:10.5px;font-variant-numeric:tabular-nums;}
/* the basket tab strip is an underline tab bar like every other */
.ui2 .bkTabs{gap:22px;border-bottom:1px solid var(--u2-line);}
.ui2 .bkTab{
  font:500 var(--u2-fs-md)/1 inherit;color:var(--u2-ink-2);
  padding:8px 0 10px;background:transparent;border:0;border-radius:0;min-height:0;
}
.ui2 .bkTab:hover{background:transparent;color:var(--u2-ink);}
.ui2 .bkTab.on,
.ui2 .bkTab.active{color:var(--u2-accent);font-weight:600;}
.ui2 .bkTab::after{background:var(--u2-accent);}

/* ============================ menus are not button stacks ============================
   The element-level ".ui2 button" primitive gives every button a border, a panel
   background, a 32px min-height and centred text. Inside a MENU that is wrong: the
   cashtag / stock-code context menu rendered as a stack of bordered boxes instead of
   a list of rows. Menu items are rows - full width, left aligned, no chrome until
   hover. This block sits in the last-loaded sheet so it beats the primitive. */
.ui2 .contextMenu,
.ui2.contextMenu{
  padding:4px;
  min-width:200px;
  background:var(--u2-panel);
  border:1px solid var(--u2-line);
  border-radius:var(--u2-radius);
  box-shadow:0 12px 34px rgba(10,16,26,.18);
}
.ui2 .contextMenu button,
.ui2.contextMenu button,
.ui2 .contextMenu a,
.ui2.contextMenu a{
  display:flex !important;
  width:100%;
  align-items:center;
  justify-content:flex-start !important;
  gap:8px;
  min-height:0 !important;
  padding:7px 10px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:3px;
  color:var(--u2-ink);
  font:400 var(--u2-fs-sm)/1.35 inherit;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}
.ui2 .contextMenu button:hover,
.ui2.contextMenu button:hover,
.ui2 .contextMenu a:hover,
.ui2.contextMenu a:hover{background:var(--u2-line-soft) !important;color:var(--u2-ink);}
.ui2 .contextMenu button:disabled,
.ui2.contextMenu button:disabled{color:var(--u2-muted);background:transparent !important;}
/* the ticker heading at the top of the menu */
.ui2 .contextMenu .contextMenuTitle,
.ui2.contextMenu .contextMenuTitle{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--u2-muted);
  padding:7px 10px 5px;
  white-space:nowrap;
}
.ui2 .contextMenu .contextMenuSeparator,
.ui2.contextMenu .contextMenuSeparator{
  height:1px;background:var(--u2-line);margin:4px 2px;border:0;
}
/* same treatment for any other popover that lists actions */
.ui2 .menuPanel button,
.ui2 .srcDropdownPanel button{
  display:flex;width:100%;justify-content:flex-start;
  min-height:0;padding:7px 10px;border:0;background:transparent;
  border-radius:3px;color:var(--u2-ink);font:400 var(--u2-fs-sm)/1.35 inherit;text-align:left;
}
.ui2 .menuPanel button:hover,
.ui2 .srcDropdownPanel button:hover{background:var(--u2-line-soft);}

/* ============================ RRG icon buttons: monochrome ============================
   rrg.html gives each button its own gradient palette BY ID - #langBtn indigo,
   #perfBtn green, #corrBtn teal - which is why the cluster read as three different
   colours. One neutral treatment; the inline SVGs inherit currentColor, so the icon
   follows the text colour rather than carrying its own. */
.ui2 #langBtn,
.ui2 #helpBtn,
.ui2 #perfBtn,
.ui2 #corrBtn{
  background:var(--u2-panel) !important;
  background-image:none !important;
  border-color:var(--u2-line) !important;
  color:var(--u2-ink-2) !important;
  font-size:11px !important;font-weight:600 !important;
  box-shadow:none !important;
}
.ui2 #langBtn:hover,
.ui2 #helpBtn:hover,
.ui2 #perfBtn:hover,
.ui2 #corrBtn:hover{
  background:var(--u2-line-soft) !important;background-image:none !important;
  border-color:var(--u2-line) !important;color:var(--u2-ink) !important;
}
.ui2 #perfBtn.on,
.ui2 #corrBtn.on,
.ui2 #perfBtn.active,
.ui2 #corrBtn.active{
  background:var(--u2-accent) !important;background-image:none !important;
  border-color:var(--u2-accent) !important;color:#fff !important;
}
.ui2 .helpBtn svg{display:block;width:15px;height:15px;stroke:currentColor;}

/* ============================ typography: lighter and smaller ============================
   The pass so far leaned heavy - 700-weight uppercase labels, 14px tabs, 15px panel
   titles - which reads as bold rather than dense. A terminal gets its density from
   SIZE and ALIGNMENT, not weight. Weights drop a step, sizes drop ~1px, and every
   control shares one line-height so labels sit on the same baseline. */

/* section + group labels: 600, not 700; less letter-spacing */
.ui2 .mvGroupTitle,
.ui2 .mvSubTitle,
.ui2 .kmmGroupHead,
.ui2 .sumGrp,
.ui2 .paneTag,
.ui2 .paneTagD,
.ui2 .pqTitle,
.ui2 .corrTitle,
.ui2 .srcAiResolHead,
.ui2 .soHead{
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
  line-height:1.4;
}
/* panel + card titles */
.ui2 .panelHeader h2,
.ui2 .mvCardTitle,
.ui2 .kmmCardTitle,
.ui2 .bkCardTitle,
.ui2 .sumHead{font-size:12.5px !important;font-weight:600 !important;line-height:1.35;}
.ui2 .koreaControls h2,
.ui2 .optionsControls h2,
.ui2 header h1{font-size:14px !important;font-weight:600 !important;letter-spacing:0;}
/* table headers: smaller, lighter, still legible */
.ui2 table th,
.ui2 .ag-theme-quartz .ag-header-cell-text{
  font-size:10px !important;font-weight:600 !important;letter-spacing:.04em !important;
}
/* body copy in tables and cards */
.ui2 table td{font-size:11.5px;line-height:1.45;}
.ui2 .ag-theme-quartz{--ag-font-size:11.5px;}

/* tabs: smaller and quieter - this is the "cleaner" version */
.ui2 .newsSubTabs .nav-link,
.ui2 .nav-pills.newsSubTabs .nav-link,
.ui2 .mvTab,
.ui2 .gtab,
.ui2 .bkTab,
.ui2 .u2Tabs button{
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  padding:7px 0 8px !important;
  line-height:1.2;
}
.ui2 .newsSubTabs .nav-link.active,
.ui2 .nav-pills.newsSubTabs .nav-link.active,
.ui2 .mvTab.active,
.ui2 .gtab.active,
.ui2 .bkTab.on,
.ui2 .bkTab.active{font-weight:600 !important;}
.ui2 .newsSubTabs,
.ui2 .mvTabs,
.ui2 .gtabs,
.ui2 .bkTabs{gap:20px;}
/* sub-tabs one step smaller again */
.ui2 .gsub,
.ui2 .u2TabsL2 button,
.ui2 .bkSubtabs button{font-size:11.5px !important;font-weight:500 !important;padding:5px 10px !important;}

/* ---- level-2 chip strip: the gap was INSIDE the chips ----------------------
   Measured under the real cascade: the strip's own gap is 5px, which is tight.
   What read as "too much space between tabs" was the dead width every chip
   carried on its right - the ".ui2 button" primitive gave it min-height 32px
   and a 6px inner gap, and the member count sat in its own 22px pill. Label to
   next label was ~50px for an 11px word. Here the chip shrinks to a filter
   chip: 24px tall, 8px sides, and the count becomes a plain muted number
   instead of a badge, so the label is most of the chip's width. */
.ui2 .bkSubtabs{gap:4px;padding-top:8px;}
.ui2 .bkSubtabs .bkSub,
.ui2 .bkSubtabs button{
  min-height:24px !important;height:24px;
  padding:0 8px !important;
  column-gap:4px;
  border-radius:var(--u2-radius);
  letter-spacing:0;
}
.ui2 .bkSubtabs .bkSub .bkChipN{
  padding:0 !important;background:transparent !important;border-radius:0;
  font-size:10px;font-weight:500;opacity:.62;font-variant-numeric:tabular-nums;
}
.ui2 .bkSubtabs .bkSub.active .bkChipN{background:transparent !important;color:#fff;opacity:.8;}
.ui2 .bkChipN:empty{display:none;}
/* the filter box is part of the same row, so it matches the chips */
.ui2 .bkSubtabs .bkNavFilter{
  height:24px;min-height:24px;padding:0 8px;border-radius:var(--u2-radius);
  font-size:11.5px;
  text-transform:uppercase;letter-spacing:.02em;
}

/* controls share one type size and line-height so they align on a row */
.ui2 button,
.ui2 .segmented button,
.ui2 .btnSeg button,
.ui2 .tfToggle .tfBtn,
.ui2 input,
.ui2 select{font-size:11.5px !important;line-height:1 !important;}
.ui2 .controls label,
.ui2 .legend label{font-size:9.5px !important;font-weight:600 !important;letter-spacing:.05em !important;}
/* big numbers stay big - density comes from the chrome shrinking, not the data */
.ui2 .statCardValue,
.ui2 .mvAiBig,
.ui2 .mvIdxBig,
.ui2 .kmmTileVal{font-size:var(--u2-fs-md);font-weight:600;}
/* 16px is the iOS "don't zoom the page on focus" threshold, so it belongs on text
   entry - not on every button. Buttons take the mobile type step instead; jumping
   them 11.5 -> 16px was most of why the phone chrome looked fat next to desktop. */
html.mobileLayout .ui2 input,
html.mobileLayout .ui2 select,
html.mobileLayout .ui2 textarea{font-size:16px !important;}
html.mobileLayout .ui2 button,
html.mobileLayout .ui2 .segmented button,
html.mobileLayout .ui2 .btnSeg button,
html.mobileLayout .ui2 .tfToggle .tfBtn{font-size:var(--u2-fs-md) !important;}

/* ============================ pane tags: readable on their own fill ============================
   .paneTag / .paneTagD are the weekly / daily chip labels on the RRG panes. Their
   background colour is MEANINGFUL - it keys the chip to the matching curve and to
   the tail-slider dot - so the fill stays. My earlier pass swept them into the muted
   section-label group, which put grey text on a saturated chip and made them
   unreadable. They get white text at a legible size instead. */
.ui2 .paneTag,
.ui2 .paneTagD{
  color:#fff !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  line-height:1.2;
  padding:3px 9px;
  border-radius:var(--u2-radius);
}
/* same trap anywhere a label sits on a coloured fill: badges and quadrant chips */
.ui2 .sumQuad,
.ui2 .sumBadge,
.ui2 .benchBadge,
.ui2 .mvRegBadge,
.ui2 .mvIdxBadge{text-transform:none !important;letter-spacing:.02em !important;font-size:10.5px !important;}

/* ============================ grid zebra striping ============================
   I had flattened odd and even rows to the same white, which removes the strongest
   aid to reading a wide row across. Adjacent rows alternate again - a very light
   tint, enough to track a line without turning the grid into stripes. */
.ui2 .ag-theme-quartz{
  --ag-odd-row-background-color:#fafbfc;
  --ag-row-hover-color:var(--u2-accent-soft);
}
[data-bs-theme="dark"] .ui2 .ag-theme-quartz{
  --ag-odd-row-background-color:#11171f;
}
/* HTML tables get the same treatment */
.ui2 table tbody tr:nth-child(odd){background:#fafbfc;}
.ui2 table tbody tr:hover{background:var(--u2-accent-soft);}
[data-bs-theme="dark"] .ui2 table tbody tr:nth-child(odd){background:#11171f;}

/* ============================ basket tab bugs ============================
   Two defects I introduced, both visible in the basket tab strip:

   1. .bkTab::after is the underline indicator and ships as transparent, coloured
      only on the active tab. I coloured the base rule, so EVERY tab was underlined.
   2. .bkTab is a <button>, so the element primitive ".ui2 button.on" filled the
      active tab with accent while ".ui2 .bkTab.on" set accent-coloured TEXT -
      blue text on a blue block, i.e. the label vanished. That is the solid blue
      rectangle in the strip. */
.ui2 .bkTab::after{background:transparent !important;}
.ui2 .bkTab.on::after,
.ui2 .bkTab.active::after{background:var(--u2-accent) !important;}
.ui2 .bkTab,
.ui2 .bkTab.on,
.ui2 .bkTab.active{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.ui2 .bkTab.on,
.ui2 .bkTab.active{color:var(--u2-accent) !important;font-weight:600 !important;}

/* ============================ tiny in-card toggles ============================
   Cards carry small caret / collapse buttons. The element primitive turned each
   into a 32px bordered box, which pushed the card title out of place - the
   overlapping heading on the basket forward-estimate cards. Inline toggles keep
   no chrome and no minimum height. */
.ui2 .bkFwdCard button,
.ui2 .bkFwdNm button,
.ui2 .bkCard .bkCaret,
.ui2 [class$="Card"] > button.caret,
.ui2 .mvCardResize,
.ui2 .kmmGroupCaret,
.ui2 .mvGroupChevron{
  min-height:0 !important;
  height:auto !important;
  padding:0 2px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:11px !important;
  line-height:1 !important;
  color:var(--u2-muted);
}

/* ============================ RRG: one corner radius ============================
   rrg.html carries its own <style> block written before ui2 existed, with radii of
   5, 6, 7, 8, 9, 10, 12 and 14px depending on which control it was. The earlier RRG
   pass caught the chart panes and most controls but missed the summary cards (12px)
   and a handful of small controls, so the page still had visibly rounder boxes than
   every other module. This sweeps the whole page onto --u2-radius in one place. */
.ui2 .chartBox,
.ui2 .chartBox2,
.ui2 .sumCard,
.ui2 .helpPanel,
.ui2 .perfWrap,
.ui2 .corrHeatWrap,
.ui2 .corrRollWrap,
.ui2 .zoomBar,
.ui2 .zoomBar .zbtn,
.ui2 .tfToggle,
.ui2 .tailCtl,
.ui2 .corrClose,
.ui2 .helpBtn,
.ui2 .helpClose,
.ui2 .gsub,
.ui2 .gfilter,
.ui2 .corrWinSeg,
.ui2 .sumRow,
.ui2 .paneTag,
.ui2 .paneTagD{border-radius:var(--u2-radius) !important;}
/* the segmented control keeps square inner joints; only its ends round */
.ui2 .corrWinSeg button{border-radius:0 !important;}
.ui2 .corrWinSeg button:first-child{border-radius:var(--u2-radius) 0 0 var(--u2-radius) !important;}
.ui2 .corrWinSeg button:last-child{border-radius:0 var(--u2-radius) var(--u2-radius) 0 !important;}
/* NB: .gtab.summaryTab is deliberately NOT touched here. ui2-modules.css already
   converts it from a purple gradient pill into a plain underline tab; filling it with
   the accent on top of that put accent text on an accent background. */

/* ---- RRG group chips: pack them ------------------------------------------
   The RRG universe has ~60 level-2 groups, so this strip is three rows deep. At
   6px container gap + 11px side padding each label sat 28px from the next, which
   spread 60 short labels over three full-width rows of mostly whitespace. Tightened
   to 3px + 6px so the labels themselves carry the rhythm. Touch devices keep the
   larger hit target from rrg.html's pointer:coarse block. */
.ui2 .gsubtabs{gap:3px !important;padding:7px 0 2px !important;}
.ui2 .gsubtabs2{padding-top:2px !important;}
.ui2 .gsub{
  padding:0 6px !important;
  height:22px;min-height:22px !important;
  display:inline-flex;align-items:center;
  letter-spacing:0 !important;
}
.ui2 input.gfilter,
.ui2 .gfilter{
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;
  padding:0 8px !important;
  height:22px !important;min-height:22px !important;
  font-size:11.5px !important;
  text-transform:uppercase;letter-spacing:.02em;
}
.ui2 .gfilter::-webkit-search-decoration,
.ui2 .gfilter::-webkit-search-cancel-button{-webkit-appearance:none;}
@media (pointer:coarse){
  .ui2 .gsubtabs{gap:5px !important;}
  .ui2 .gsub{padding:0 12px !important;height:var(--u2-ctl);min-height:var(--u2-ctl) !important;font-size:var(--u2-fs-sm) !important;}
  .ui2 input.gfilter,
  .ui2 .gfilter{padding:0 12px !important;height:var(--u2-ctl) !important;min-height:var(--u2-ctl) !important;}
}

/* ---- module container cards ---------------------------------------------
   .scFrame (the iframe that hosts rrg.html and the supply-chain map) and .mmWrap
   (macro map) are the outermost card around a whole embedded module, and were the
   last 12px corners left in the app. */
.ui2 .scFrame,
.ui2 .mmWrap{border-radius:var(--u2-radius) !important;}

/* ============================ mobile parity ============================
   Everything above sizes off var(--u2-ctl), which steps to 38px on a phone. What did
   NOT follow were the controls carrying their own explicit px size on desktop: the
   square icon buttons and the dense chip strips. The worst of these was .helpBtn,
   which set width:28px !important while the mobile primitive raised min-height to
   38px - a 28x38 squashed rectangle. Anything with a fixed square or a sub-token
   height is re-pinned to the token here so the phone reads like the desktop, one
   size larger. Kept in the last-loaded sheet so it beats the desktop !important. */

/* square icon buttons stay square */
html.mobileLayout .ui2 .helpBtn,
html.mobileLayout .ui2 .corrClose,
html.mobileLayout .ui2 .helpClose,
html.mobileLayout .ui2.mvModal .mvModalClose,
html.mobileLayout .ui2 .mvModalPanel .mvModalClose,
html.mobileLayout .ui2.mvModal .mvZoomBar .mvTfIco,
html.mobileLayout .ui2 .zoomBar .zbtn{
  width:var(--u2-ctl) !important;
  height:var(--u2-ctl) !important;
  min-height:var(--u2-ctl) !important;
  padding:0 !important;
}
html.mobileLayout .ui2 .helpBtn svg,
html.mobileLayout .ui2 .mvModalClose svg,
html.mobileLayout .ui2 .mvTfBtn svg{width:17px;height:17px;}

/* dense chip strips: same chips, one size up, with room to tap between them */
html.mobileLayout .ui2 .gsubtabs{gap:6px !important;}
html.mobileLayout .ui2 .gsub{
  height:var(--u2-ctl) !important;min-height:var(--u2-ctl) !important;
  padding:0 12px !important;font-size:var(--u2-fs-sm) !important;
}
html.mobileLayout .ui2 input.gfilter,
html.mobileLayout .ui2 .gfilter{
  height:var(--u2-ctl) !important;min-height:var(--u2-ctl) !important;padding:0 12px !important;
}
html.mobileLayout .ui2 .bkSubtabs{gap:6px;}
html.mobileLayout .ui2 .bkSubtabs .bkSub,
html.mobileLayout .ui2 .bkSubtabs button{
  height:var(--u2-ctl) !important;min-height:var(--u2-ctl) !important;padding:0 12px !important;
}
html.mobileLayout .ui2 .bkSubtabs .bkNavFilter{
  height:var(--u2-ctl);min-height:var(--u2-ctl);padding:0 12px;
}

/* the RRG timeframe toggle and tail control are rows of their own, not micro-chrome */
html.mobileLayout .ui2 .tfToggle{height:var(--u2-ctl);}
html.mobileLayout .ui2 .tfToggle .tfBtn{
  height:calc(var(--u2-ctl) - 2px) !important;min-height:0 !important;padding:0 16px !important;
}
html.mobileLayout .ui2 .tailCtl{min-height:var(--u2-ctl);}

/* the card sub-window toolbar: same cluster, tappable */
html.mobileLayout .ui2.mvModal .mvZoomBar{gap:4px;}
html.mobileLayout .ui2.mvModal .mvZoomBar .mvTfBtn{
  height:var(--u2-ctl);min-height:var(--u2-ctl);padding:0 12px;
}
html.mobileLayout .ui2.mvModal .mvModalTitle{max-width:100%;}

/* ============================================================================
   MOBILE REVIEW PASS - findings from /dev/ui2-mobile-review.html (18 views at
   375px) plus a real phone screenshot of the News module.

   Three classes of defect, in order of how much they hurt:
     1. horizontal overflow  - korea, quant, flow ran past the viewport
     2. stacked filter forms - .controls put a label ABOVE every control and let
        each one go full width, so News spent ~380px of vertical space on filters
        before a single article. Futu puts filters in a compact bar.
     3. leftovers the ui2 sweep never reached - corners of 5-12px, panel shadows
        and sub-11px text in the class families that were never mapped (qc*, ima*,
        insider*, mm*, wl*).
   ============================================================================ */

/* ---- 1. overflow ---------------------------------------------------------- */
html.mobileLayout .ui2 .flowTableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
html.mobileLayout .ui2 .quantFacChart{min-width:0 !important;flex-basis:100% !important;}
html.mobileLayout .ui2 .legend{flex-wrap:wrap;max-width:100%;}
html.mobileLayout .ui2 .fieldSelect{max-width:100%;min-width:0;}
html.mobileLayout .ui2 .fieldSelect select,
html.mobileLayout .ui2 .fieldPicker select{width:auto;min-width:0;max-width:100%;}
/* nothing in a view may set a min-width wider than the phone */
html.mobileLayout .ui2 .view table{max-width:100%;}

/* ---- 2. the filter bar ---------------------------------------------------- */
/* .controls is flex/wrap with each <label> a GRID (caption stacked over control).
   On a phone that reads as a column of full-width boxes with a shouty caption on
   top of each. Here the caption moves inline and shrinks to a prefix, and the
   controls size to their content, so the same filters occupy two dense rows. */
html.mobileLayout .ui2 .controls{
  gap:6px;
  align-items:center;
  row-gap:6px;
}
html.mobileLayout .ui2 .controls > label{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  flex:0 1 auto;
  min-width:0;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase;
  color:var(--u2-muted);
  white-space:nowrap;
}
html.mobileLayout .ui2 .controls > label > select,
html.mobileLayout .ui2 .controls > label > input{
  width:auto;
  min-width:0;
  max-width:52vw;
  flex:0 1 auto;
}
html.mobileLayout .ui2 .controls > input[type="search"]{flex:1 1 140px;min-width:0;}
html.mobileLayout .ui2 .controls > button{flex:0 0 auto;}
/* a segmented control is the one thing allowed to scroll rather than wrap: its
   options are a set and splitting them across rows loses that reading. */
html.mobileLayout .ui2 .controls .btnSeg,
html.mobileLayout .ui2 .controls .segmented{
  max-width:100%;overflow-x:auto;flex:0 1 auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
html.mobileLayout .ui2 .controls .btnSeg::-webkit-scrollbar,
html.mobileLayout .ui2 .controls .segmented::-webkit-scrollbar{display:none;}

/* filter chip walls (news countries, zsxq groups) go dense and wrap tight */
html.mobileLayout .ui2 .zsxqFilters{gap:6px;}
html.mobileLayout .ui2 .zsxqFilters button,
html.mobileLayout .ui2 .newsCountries button{
  height:var(--u2-ctl);min-height:var(--u2-ctl);padding:0 10px;
  font-size:var(--u2-fs-sm);
}

/* ---- 3. corners the sweep never reached ---------------------------------- */
.ui2 .qcPick,
.ui2 .qcSearch,
.ui2 .qcCompute,
.ui2 .qfBrowse,
.ui2 .imaChat,
.ui2 .imaList,
.ui2 .insiderStat,
.ui2 .wlScopeToggle,
.ui2 .watchlistTabs,
.ui2 .aiVerdict,
.ui2 .mvSubTitle,
.ui2 .mvMap,
.ui2 .mvMiniSel,
.ui2 .mmStat,
.ui2 .mmPanel,
.ui2 .fieldSelect,
.ui2 .inlineToggle,
.ui2 #lookbackBtn,
.ui2 #refreshBtn{border-radius:var(--u2-radius) !important;}
.ui2 .srcAiPanel,
.ui2 .mmPanel{box-shadow:none !important;}

/* ---- 4. the mobile type floor -------------------------------------------- */
/* The ui2 mobile contract is "no text under 12px". These families never got a
   mobile rule, so status lines and stat captions stayed at desktop 10-11.5px. */
html.mobileLayout .ui2 .miniNote,
html.mobileLayout .ui2 .insiderStatSub,
html.mobileLayout .ui2 .mvGroupTitle,
html.mobileLayout .ui2 .mmEyebrow,
html.mobileLayout .ui2 .imaUsage,
html.mobileLayout .ui2 .mvManualFlag,
html.mobileLayout .ui2 .srcDropdownCaret,
html.mobileLayout .ui2 .u2Seg span{font-size:12px !important;}
html.mobileLayout .ui2 .view th,
html.mobileLayout .ui2 .controls label,
html.mobileLayout .ui2 .legend label{font-size:11px !important;}

/* ---- 5. three-column stat grids do not fit a phone ----------------------- */
html.mobileLayout .ui2 .mmStats{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ---- mobile review, second pass ------------------------------------------
   What the first pass left: the 12px floor applied to the label families I had
   set to 11px, the last few sub-11px spans, and the corners in the qf, mm and options families
   that were not in the first sweep list. */
html.mobileLayout .ui2 .controls label,
html.mobileLayout .ui2 .legend label,
html.mobileLayout .ui2 .legend,
html.mobileLayout .ui2 .view th,
html.mobileLayout .ui2 .u2Seg span,
html.mobileLayout .ui2 .srcDropdown,
html.mobileLayout .ui2 .mvSubTitle,
html.mobileLayout .ui2 .mmStat span,
html.mobileLayout .ui2 .mvHiborNote,
html.mobileLayout .ui2 .view small{font-size:12px !important;}
/* the market-view rate footnotes are <i> elements with their own inline scale */
html.mobileLayout .ui2 .mvCard i,
html.mobileLayout .ui2 .mvIdxNote i{font-size:12px !important;}

.ui2 .qfLabel,
.ui2 .mmTableWrap,
.ui2 .mmSlider,
.ui2 input[type="range"],
.ui2 .controls label,
.ui2 .optionInputs label{border-radius:var(--u2-radius) !important;}
/* segmented end caps: square inside, token radius at the two ends */
.ui2 .btnSeg button,
.ui2 .langSeg button{border-radius:0 !important;}
.ui2 .btnSeg button:first-child,
.ui2 .langSeg button:first-child{border-radius:var(--u2-radius) 0 0 var(--u2-radius) !important;}
.ui2 .btnSeg button:last-child,
.ui2 .langSeg button:last-child{border-radius:0 var(--u2-radius) var(--u2-radius) 0 !important;}

/* ---- mobile review, final pass -------------------------------------------
   The last families the sweep had not named: standalone form labels outside a
   .controls row, the K-line toolbar captions, the insider/buyback stat captions,
   and the qcSeg segmented control (which follows the same end-cap rule as btnSeg). */
html.mobileLayout .ui2 .view label,
html.mobileLayout .ui2 .klBarLbl,
html.mobileLayout .ui2 .insiderStatLbl{font-size:12px !important;}
.ui2 .qcSeg button{border-radius:0 !important;}
.ui2 .qcSeg button:first-child{border-radius:var(--u2-radius) 0 0 var(--u2-radius) !important;}
.ui2 .qcSeg button:last-child{border-radius:0 var(--u2-radius) var(--u2-radius) 0 !important;}
.ui2 .optionInputs label,
.ui2 .view label{border-radius:var(--u2-radius) !important;}

/* ============================================================================
   MOBILE: ONE CONTROL
   Measured before writing this: 35 distinct control signatures across the 18
   views at 375px. Family and height were already uniform (Noto Sans, 38px); the
   spread was 2 font sizes, 4 weights, 13 different paddings, mixed borders and
   5 radii - so two buttons doing the same job looked like different widgets.

   The resting control is now one object. Only three things may differ, and each
   carries meaning rather than being an accident of which module wrote the rule:
     selected  - accent fill, weight 600
     tab       - no border, no fill, underline instead (a tab is not a control)
     icon-only - square, no label padding

   Size: 13.5px is desktop 11.5px scaled by the same 32 -> 38px step the control
   height takes, so the phone reads as the desktop one size up rather than as a
   different design.
   ============================================================================ */
html.mobileLayout .ui2 button:where(:not(.mvTab):not(.gtab):not(.bkTab):not(.nav-link):not(.tfBtn)),
html.mobileLayout .ui2 select,
html.mobileLayout .ui2 textarea,
html.mobileLayout .ui2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]){
  box-sizing:border-box;
  font-family:inherit !important;
  font-size:var(--u2-fs-md) !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  height:var(--u2-ctl);
  min-height:var(--u2-ctl) !important;
  padding:0 12px !important;
  border:1px solid var(--u2-line) !important;
  border-radius:var(--u2-radius) !important;
  background:var(--u2-panel) !important;
  color:var(--u2-ink) !important;
}
html.mobileLayout .ui2 select{padding-right:28px !important;}
html.mobileLayout .ui2 textarea{
  height:auto;min-height:calc(var(--u2-ctl) * 2) !important;
  padding:10px 12px !important;line-height:1.5 !important;
}
html.mobileLayout .ui2 input::placeholder,
html.mobileLayout .ui2 textarea::placeholder{color:var(--u2-muted);font-weight:400;}

/* a tab keeps its own chrome (no border, no fill, underline) but shares the type
   size, so the row does not mix two scales */
html.mobileLayout .ui2 .mvTab,
html.mobileLayout .ui2 .gtab,
html.mobileLayout .ui2 .bkTab,
html.mobileLayout .ui2 .newsSubTabs .nav-link{font-size:var(--u2-fs-md) !important;}

/* selected - the one state that changes the fill */
html.mobileLayout .ui2 button.active,
html.mobileLayout .ui2 button.on,
html.mobileLayout .ui2 button.selected,
html.mobileLayout .ui2 button[aria-pressed="true"]{
  background:var(--u2-accent) !important;
  border-color:var(--u2-accent) !important;
  color:#fff !important;
  font-weight:600 !important;
}
/* the one loud action per screen */
html.mobileLayout .ui2 button.primary,
html.mobileLayout .ui2 button.btn-primary{
  background:var(--u2-accent) !important;border-color:var(--u2-accent) !important;
  color:#fff !important;font-weight:600 !important;
}

/* segmented controls: square joints, token radius on the two ends only */
html.mobileLayout .ui2 .btnSeg button,
html.mobileLayout .ui2 .langSeg button,
html.mobileLayout .ui2 .qcSeg button,
html.mobileLayout .ui2 .corrWinSeg button,
html.mobileLayout .ui2 .segmented button{border-radius:0 !important;}
html.mobileLayout .ui2 .btnSeg button:first-child,
html.mobileLayout .ui2 .langSeg button:first-child,
html.mobileLayout .ui2 .qcSeg button:first-child,
html.mobileLayout .ui2 .corrWinSeg button:first-child,
html.mobileLayout .ui2 .segmented button:first-child{border-radius:var(--u2-radius) 0 0 var(--u2-radius) !important;}
html.mobileLayout .ui2 .btnSeg button:last-child,
html.mobileLayout .ui2 .langSeg button:last-child,
html.mobileLayout .ui2 .qcSeg button:last-child,
html.mobileLayout .ui2 .corrWinSeg button:last-child,
html.mobileLayout .ui2 .segmented button:last-child{border-radius:0 var(--u2-radius) var(--u2-radius) 0 !important;}
html.mobileLayout .ui2 .btnSeg button + button,
html.mobileLayout .ui2 .langSeg button + button,
html.mobileLayout .ui2 .qcSeg button + button,
html.mobileLayout .ui2 .segmented button + button{border-left-width:0 !important;}

/* icon-only: square, no label padding. Re-asserted AFTER the unify block, which
   would otherwise give every one of them 12px of side padding it has no label for. */
html.mobileLayout .ui2 .helpBtn,
html.mobileLayout .ui2 .corrClose,
html.mobileLayout .ui2 .helpClose,
html.mobileLayout .ui2 .zoomBar .zbtn,
html.mobileLayout .ui2.mvModal .mvModalClose,
html.mobileLayout .ui2 .mvModalPanel .mvModalClose,
html.mobileLayout .ui2.mvModal .mvZoomBar .mvTfIco{
  width:var(--u2-ctl) !important;
  padding:0 !important;
  justify-content:center;
}
/* inline affordances that live INSIDE another control keep no chrome of their own */
html.mobileLayout .ui2 .mvSearchClear,
html.mobileLayout .ui2 .qcClear,
html.mobileLayout .ui2 .srcDropdownCaret{
  border:0 !important;background:transparent !important;
  padding:0 8px !important;color:var(--u2-muted) !important;
}
html.mobileLayout .ui2 .mvSearchWrap input,
html.mobileLayout .ui2 .mvSearch{border:0 !important;background:transparent !important;}

/* iOS Safari zooms the page whenever a focused field is under 16px, and nothing in
   CSS stops that. It is the one place the phone cannot hold a single size, so the
   exception is scoped to iOS only - Android and desktop keep the uniform 13.5px. */
@supports (-webkit-touch-callout:none){
  html.mobileLayout .ui2 select,
  html.mobileLayout .ui2 textarea,
  html.mobileLayout .ui2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]){
    font-size:16px !important;
  }
}

/* ---- stat rows follow the app gate, not a viewport query -------------------
   .insiderStatRow (4 columns) and .strip (3) only collapsed inside
   @media (max-width:900px). The app decides mobile with the html.mobileLayout
   CLASS - width OR phone - so a phone in landscape kept the desktop column count
   and ran 34px past the screen. Gated on the class, they collapse whenever the
   rest of the mobile layout does. */
html.mobileLayout .ui2 .insiderStatRow{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
html.mobileLayout .ui2 .insiderStat{min-width:0;overflow:hidden;}
html.mobileLayout .ui2 .insiderStatVal,
html.mobileLayout .ui2 .insiderStatLbl{min-width:0;overflow:hidden;text-overflow:ellipsis;}
html.mobileLayout .ui2 .strip{grid-template-columns:1fr !important;flex-direction:column;}