/* ═════════════════════════════════════════════════════════════════════════
   ONE TOP STRIP (2026-11-02)
   Operator: "lets find a consistent height … margin for buttons and
   dropdowns in the top strip should be consistent … within pills there
   should be consistent padding left and right as well as top and bottom."

   Measured on the live site before this file: every top strip was already
   48px with 30px controls, centred. What varied was the gap between
   controls (6px / 8px), the side padding inside a pill (10 / 11 / 14px) and
   the label weight (400 / 500 / 600 / 700). This file settles all three and
   is loaded LAST (app.py), after dc-radius.css.

     strip      48px (--dc-strip-h), 8px side padding
     control    30px (--dc-strip-ctl-h), centred → 9px above and below
     gap        8px between controls (--dc-strip-gap)
     pill       14px each side (--dc-pill-px); a select keeps 14px of text
                inset and draws its chevron 14px in from the right edge
     label      11px, weight 500, line-height 1
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --dc-strip-gap: 8px;
  --dc-pill-px: 14px;
}

/* The strips. */
.ig-bar, .ig-canvas-head, .ig-rail__filters, .ig-rail__label {
  height: var(--dc-strip-h);
  padding-left: 8px; padding-right: 8px;
  gap: var(--dc-strip-gap);
  align-items: center;
}
.ig-bar__right { gap: var(--dc-strip-gap); }
/* A strip nested in a strip (Acquisitions' button bar inside its canvas
   head) takes no second side padding. */
:is(.ig-canvas-head, .ig-bar) .ig-bar { padding-left: 0; padding-right: 0; }

/* Every control in a strip: same height, same side padding, same label. */
:is(.ig-bar, .ig-canvas-head, .ig-rail__filters, .ig-rail__label)
  :is(.ig-sb, .ig-sb-select, .ig-sb-date, .dc-wtoggle, .lib-viewbtn) {
  height: var(--dc-strip-ctl-h);
  padding: 0 var(--dc-pill-px);
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: var(--dc-fw-medium); line-height: 1;
  align-self: center;
}
/* A select's chevron sits 14px in from the right, with 8px air before it. */
:is(.ig-bar, .ig-canvas-head, .ig-rail__filters, .ig-rail__label) .ig-sb-select {
  display: inline-block;
  padding-right: calc(var(--dc-pill-px) + 18px);
  background-position: right var(--dc-pill-px) center;
}
/* Segments and view pills: the same height and the same inner padding per
   button, so a segment button and a strip button read alike. */
:is(.ig-bar, .ig-canvas-head, .ig-rail__filters, .ig-rail__label) .ig-seg {
  height: var(--dc-strip-ctl-h); align-self: center;
}
:is(.ig-bar, .ig-canvas-head, .ig-rail__filters, .ig-rail__label) .ig-seg > button,
:is(.ig-bar, .ig-canvas-head) > .ig-tab {
  padding: 0 var(--dc-pill-px);
  font-size: 11px; font-weight: var(--dc-fw-medium); line-height: 1;
}

/* ═════════════════════════════════════════════════════════════════════════
   STRIP + COLUMN-HEADER ROW — ONE SYSTEM (option B, operator 2026-11-02)
   The header-row half lives in dc-table.css (--hdr-h, --hdr-ctl-h, filled
   pills, sort in the pill). The strip-level half is here:
   ═════════════════════════════════════════════════════════════════════════ */

/* No divider between a strip and the column-header row under it — they read
   as one block, told apart by two tones (--dc-panel-2 strip, --dc-hdr-bg
   header). Removed on every strip app-wide; the strip colour against the
   canvas below still separates it from non-table content. */
.ig-canvas-head, .ig-bar, .ig-rail__filters, .ig-rail__search, .ig-rail__label {
  border-bottom: 0;
}

/* The rail's search band joins the strip family: 48px band, 30px box, the
   strip's 14px pill padding, 11px / 500 text and icon. */
.ig-rail__search { height: var(--dc-strip-h); padding: 0 8px; }
.ig-rail__search-box { height: var(--dc-strip-ctl-h); padding: 0 var(--dc-pill-px); }
.ig-rail__search-box input { font-size: 11px; font-weight: var(--dc-fw-medium); }
.ig-rail__search-box i { font-size: 11px; }