/* FORGE kit: the shared parts
   ─────────────────────────────
   One of each part every page needs, so a module stops drawing its own (the "One FORGE
   look" plan, Keith 2026-10-23). Built only from the tokens at the top of styles.css:
   no hex colours and no px text sizes here, which design-kit-guard.test.js enforces.

   Loaded after styles.css. Every class starts with fk- so nothing existing can collide.
   Arriving on its own changes no page: modules adopt these parts in later steps.
   tools/design/forge-kit.html shows every part, on light and on the dark band.

   The rules every page follows:
   - Normal case on buttons, tabs, table headings and chips. Uppercase is for the page
     title and its small module label only.
   - A status chip names a MEANING (attention, broken, done, moving, parked), never a
     hue, so "needs a person" is the same amber in every module.
   - One main (blue) button per area of a page.
   - Lists are for reading: no dropdowns inside list rows. */

/* ── Page header: the dark band every page opens under ───────── */
/* Always with .module-band (styles.css), which supplies the navy, the moving light frame,
   the bleed to the page's edges and the title's look. forge-page.js builds it for pages
   drawn in script; index.html pages write the same markup out. Titles on the left, the
   page's buttons on the right, its tabs along the bottom edge. */

.fk-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.fk-page-titles { flex: 1 1 320px; min-width: 0; }
/* A detail page's title is a customer or carrier name, which can be long: let it wrap. */
.fk-page-head .fk-page-title { white-space: normal; overflow-wrap: anywhere; }
.fk-page-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  color: rgba(255, 255, 255, 0.68);
}
.fk-page-sub:empty { display: none; }
/* margin-left: auto keeps the buttons on the right even when they wrap onto a line of their own
   under the title (a lone item on a space-between line would otherwise sit at its start). */
.fk-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.fk-page-actions:empty { display: none; }
.fk-page-head > .fk-page-tabs { flex: 1 0 100%; }
.fk-page-head > .fk-page-tabs[hidden] { display: none; }
.fk-page-head.has-tabs { padding-bottom: 0; }

/* A detail page's way back, in the module label's place above the title. */
.fk-band-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  cursor: pointer;
}
.fk-band-back:hover { color: var(--fk-white); }
.fk-band-back:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.fk-band-back[hidden] { display: none; }

/* ── Buttons ─────────────────────────────────────────────────── */

.fk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--fk-radius-md);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.fk-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.fk-btn:disabled, .fk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.fk-btn svg { width: 15px; height: 15px; flex: none; }
.fk-btn-sm { height: 30px; padding: 0 11px; font-size: var(--fk-type-sm); }

/* The main action. One per area of a page. */
.fk-btn-primary { background: var(--fk-blue-600); color: var(--fk-white); }
.fk-btn-primary:hover:not(:disabled) { background: var(--fk-blue-700); }

/* Every other action. */
.fk-btn-secondary { background: var(--fk-surface); color: var(--fk-ink); border-color: var(--fk-line); box-shadow: var(--fk-shadow-xs); }
.fk-btn-secondary:hover:not(:disabled) { background: var(--fk-canvas); }

/* A link-weight action: Clear filters, Change, Add stop. */
.fk-btn-quiet { background: transparent; color: var(--fk-link); }
.fk-btn-quiet:hover:not(:disabled) { background: var(--fk-blue-50); }

/* Destructive. Outlined so it never competes with the main action; filled red is
   kept for the confirm step of a pop-up. */
.fk-btn-danger { background: var(--fk-surface); color: var(--fk-broken); border-color: var(--fk-broken-line); }
.fk-btn-danger:hover:not(:disabled) { background: var(--fk-broken-bg); }

/* ── Status chips and counts ─────────────────────────────────── */

.fk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--fk-parked);
  background: var(--fk-parked-bg);
  box-shadow: inset 0 0 0 1px var(--fk-parked-line);
}
/* The dot says "this is a state". A plain chip (a label, an org) has none. */
.fk-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fk-chip-plain::before { display: none; }

/* Waiting on a person: Needs review, Needs customer, Identified (no rate yet), New. */
.fk-chip-attention { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
/* Something broke: TAI failed, AI parse failed, Not pass, Lost. */
.fk-chip-broken { color: var(--fk-broken); background: var(--fk-broken-bg); box-shadow: inset 0 0 0 1px var(--fk-broken-line); }
/* Done and good: Won, Built in TAI, Pass, Priced, Active. */
.fk-chip-done { color: var(--fk-done); background: var(--fk-done-bg); box-shadow: inset 0 0 0 1px var(--fk-done-line); }
/* Moving: Quoted, Parsing, Approved, Acknowledged, In progress. */
.fk-chip-moving { color: var(--fk-moving); background: var(--fk-moving-bg); box-shadow: inset 0 0 0 1px var(--fk-moving-line); }
/* Parked: Draft, Inactive, Expired, Ignored, Rejected, Won't fix. Also the default above. */
.fk-chip-parked { color: var(--fk-parked); background: var(--fk-parked-bg); box-shadow: inset 0 0 0 1px var(--fk-parked-line); }

/* A number beside a tab or a row label. */
.fk-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  line-height: 1;
  background: var(--fk-gray-150);
  color: var(--fk-ink);
}
/* A count of things that are broken. */
.fk-count-hot { background: var(--fk-red-600); color: var(--fk-white); }

/* The hidden attribute hides a part. Each part sets its own display (inline-flex,
   inline-grid), and that would otherwise win over the browser's own [hidden] rule. */
:is(.fk-btn, .fk-chip, .fk-count, .fk-filter, .fk-search)[hidden] { display: none; }

/* ── Tabs ────────────────────────────────────────────────────── */

.fk-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--fk-line); }
.fk-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  color: var(--fk-ink-2);
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
}
.fk-tab:hover { color: var(--fk-ink); }
.fk-tab:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.fk-tab.is-active, .fk-tab[aria-selected="true"] { color: var(--fk-ink); border-bottom-color: var(--fk-blue-600); }
.fk-tab.is-active .fk-count, .fk-tab[aria-selected="true"] .fk-count { background: var(--fk-blue-600); color: var(--fk-white); }

/* ── Filter bar ──────────────────────────────────────────────── */
/* Search on the left, one button per filter, a count or sort note on the right. A set
   filter fills in blue; an unset one is dashed. */

.fk-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fk-line); }
.fk-filterbar-end { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: var(--fk-type-sm); color: var(--fk-ink-3); }
.fk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-md);
  background: var(--fk-surface);
  color: var(--fk-ink-3);
}
.fk-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--fk-font-ui); font-size: var(--fk-type-md); color: var(--fk-ink); }
.fk-search:focus-within { border-color: var(--fk-blue-500); box-shadow: var(--fk-focus-ring); }
.fk-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--fk-line);
  border-radius: var(--fk-radius-md);
  background: var(--fk-surface);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
  font-weight: 600;
  color: var(--fk-ink-2);
  cursor: pointer;
}
.fk-filter.is-set { border-style: solid; border-color: var(--fk-blue-100); background: var(--fk-blue-50); color: var(--fk-blue-700); }
/* A filter can hold its own control: <label class="fk-filter"><span class="fk-filter-label">OC</span>
   <select>…</select></label>. The control loses its own box and takes the filter's, so a
   dropdown reads "OC  Anyone ▾" and fills in blue once it is set (the page toggles .is-set). */
.fk-filter-label { color: var(--fk-ink-3); white-space: nowrap; }
.fk-filter.is-set .fk-filter-label { color: var(--fk-blue-600); }
.fk-filter :is(select, input) {
  min-width: 0;
  max-width: 220px;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* A dropdown as wide as the choice it shows, not its longest option (Chrome and Edge;
   elsewhere it keeps the browser's own width, capped by max-width). */
.fk-filter select { field-sizing: content; }
.fk-filter input { cursor: text; }
.fk-filter input::placeholder { color: var(--fk-ink-3); font-weight: 400; }
.fk-filter:focus-within { border-color: var(--fk-blue-500); box-shadow: var(--fk-focus-ring); }
.fk-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fk-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.fk-search.is-set { border-color: var(--fk-blue-100); background: var(--fk-blue-50); }
/* More filters: the ones a list needs less often, in a small menu off the bar, so the bar
   stays one line. Its button is a filter, and fills in blue with a count once a filter in
   the menu is set. The page closes it on a click elsewhere and on Escape. */
.fk-filter-more { position: relative; }
.fk-filter-more > summary { list-style: none; user-select: none; }
.fk-filter-more > summary::-webkit-details-marker { display: none; }
.fk-filter-more > summary:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.fk-filter-more[open] > summary { border-style: solid; border-color: var(--fk-blue-500); }
/* It opens leftward from the button, which sits toward the bar's end; on a phone, where the
   bar wraps and the button starts a line, rightward, and never wider than the screen. */
.fk-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 12px;
  width: 260px;
  padding: 14px;
  background: var(--fk-surface);
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-md);
  box-shadow: var(--fk-shadow-lg);
  color: var(--fk-ink);
}
@media (max-width: 800px) {
  .fk-filter-menu { right: auto; left: 0; width: min(260px, calc(100vw - 48px)); }
}

/* ── Table ───────────────────────────────────────────────────── */
/* For reading. Numbers right-aligned in tabular figures; a second line (.fk-sub) holds
   detail instead of another column, which is what keeps lists inside 1280px. */

.fk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--fk-font-ui); font-size: var(--fk-type-md); }
.fk-table th {
  height: 38px;
  padding: 0 12px;
  text-align: left;
  font-size: var(--fk-type-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fk-ink-2);
  background: var(--fk-gray-50);
  border-bottom: 1px solid var(--fk-line);
  white-space: nowrap;
}
.fk-table td { height: 46px; padding: 6px 12px; border-bottom: 1px solid var(--fk-gray-150); color: var(--fk-ink); vertical-align: middle; }
.fk-table tbody tr:hover td { background: var(--fk-blue-50); }
.fk-table .fk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fk-table .fk-strong { font-weight: 600; }
/* A heading that sorts: a button, with an arrow on the one the list is sorted by (the page
   sets aria-sort on its <th> and .is-sorted on the button). */
.fk-sort-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fk-sort-btn:hover { color: var(--fk-link); }
.fk-sort-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.fk-sort-btn.is-sorted { color: var(--fk-ink); }
.fk-sub { display: block; margin-top: 2px; font-size: var(--fk-type-xs); font-weight: 400; color: var(--fk-ink-3); }

/* A person in a list: their initials in a round badge, then their name ("DL Dana Lee").
   One quiet colour for everyone: colour in a row is kept for meaning (the chips). */
.fk-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--fk-gray-150);
  color: var(--fk-ink-2);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* An icon from FORGE's one line-icon set, by name: <span class="fk-icon" data-icon="check">.
   scripts/gen-sidebar-icons.mjs draws the set and writes each name's rule into
   sidebar-icons.css. It takes the text's colour. A name the set lacks draws a dot. */
.fk-icon {
  --icon-mask: var(--sb-i-dot);
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

/* …in a round tinted by what it means, the way a chip is: a feed's "what happened". */
.fk-icon-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--fk-parked);
  background: var(--fk-parked-bg);
}
.fk-icon-round > .fk-icon { width: 15px; height: 15px; vertical-align: 0; }
.fk-icon-round.is-attention { color: var(--fk-attention); background: var(--fk-attention-bg); }
.fk-icon-round.is-broken { color: var(--fk-broken); background: var(--fk-broken-bg); }
.fk-icon-round.is-done { color: var(--fk-done); background: var(--fk-done-bg); }
.fk-icon-round.is-moving { color: var(--fk-moving); background: var(--fk-moving-bg); }

/* A wide table's own box. On a phone (800px and below: sidebar.js's MQ_OVERLAY, where the
   hamburger shows) the table scrolls sideways inside it, so the page stays as wide as the
   screen and its band and filters stay put. Above 800px it is a plain box that changes
   nothing: a box that scrolls would capture a header pinned to the page (position: sticky),
   so a table's pinned header must stop pinning inside it on a phone (Quote Tracker's do,
   styles.css "Pages on a phone"). */
@media (max-width: 800px) {
  .fk-table-scroll { overflow-x: auto; }
}

/* ── Cards and number tiles ──────────────────────────────────── */

.fk-card { background: var(--fk-surface); border: 1px solid var(--fk-line); border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-xs); }
.fk-card-pad { padding: 16px 18px; }
.fk-card-title { margin: 0 0 12px; font-family: var(--fk-font-ui); font-size: var(--fk-type-lg); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fk-ink); }

.fk-kpi { padding: 16px 18px; }
.fk-kpi-label { font-size: var(--fk-type-sm); font-weight: 600; color: var(--fk-ink-2); }
.fk-kpi-value { margin-top: 4px; font-family: var(--fk-font-ui); font-size: var(--fk-type-3xl); font-weight: 600; line-height: 1.1; color: var(--fk-ink); font-variant-numeric: tabular-nums; }
.fk-kpi-note { margin-top: 6px; font-size: var(--fk-type-sm); color: var(--fk-ink-2); }

/* ── Form fields ─────────────────────────────────────────────── */
/* Label above the field, field wide enough to show what is in it. */

.fk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fk-field > label { font-family: var(--fk-font-ui); font-size: var(--fk-type-xs); font-weight: 600; color: var(--fk-ink-2); }
.fk-req { color: var(--fk-red-600); }
.fk-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--fk-line);
  border-radius: var(--fk-radius-md);
  background: var(--fk-surface);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  color: var(--fk-ink);
}
textarea.fk-input { height: auto; min-height: 64px; padding: 8px 10px; line-height: 1.4; resize: vertical; }
.fk-input::placeholder { color: var(--fk-ink-3); }
.fk-input:focus { outline: none; border-color: var(--fk-blue-500); box-shadow: var(--fk-focus-ring); }
.fk-input:disabled { background: var(--fk-canvas); color: var(--fk-ink-2); }
.fk-field.is-invalid .fk-input { border-color: var(--fk-red-600); }
.fk-help { font-size: var(--fk-type-xs); color: var(--fk-ink-3); }
.fk-field.is-invalid .fk-help { color: var(--fk-broken); font-weight: 600; }

/* ── Messages ────────────────────────────────────────────────── */

/* A page or card with nothing in it: say so, and say what to do. */
.fk-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 18px; text-align: center; color: var(--fk-ink-2); font-size: var(--fk-type-md); }
.fk-empty-title { font-weight: 600; color: var(--fk-ink); }

/* A note above the work: an optional icon, then the message in ONE element (each child
   is laid out on its own, so loose text and a <b> would drift apart). */
.fk-callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--fk-radius-md); font-size: var(--fk-type-md); color: var(--fk-moving); background: var(--fk-moving-bg); box-shadow: inset 0 0 0 1px var(--fk-moving-line); }
.fk-callout-attention { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
.fk-callout-broken { color: var(--fk-broken); background: var(--fk-broken-bg); box-shadow: inset 0 0 0 1px var(--fk-broken-line); }

/* "How this is counted": the rules behind a number, folded away until asked for,
   instead of paragraphs above the table. */
details.fk-how { border: 1px solid var(--fk-line); border-radius: var(--fk-radius-md); background: var(--fk-surface); font-size: var(--fk-type-sm); color: var(--fk-ink-2); }
details.fk-how > summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-weight: 600; color: var(--fk-ink); }
details.fk-how > summary::-webkit-details-marker { display: none; }
details.fk-how > summary::before { content: 'i'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--fk-link); color: var(--fk-link); font-size: var(--fk-type-xs); font-weight: 700; font-style: italic; }
details.fk-how > :not(summary) { margin: 0; padding: 0 12px 12px 36px; }

/* ── Pop-up window ───────────────────────────────────────────── */
/* The shared pop-up. Pages that move to it also get Escape-to-close (a later step
   wires that up; today only Quote Tracker's and Carrier Procurement's pop-ups close
   with Escape). */

.fk-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(1, 10, 25, 0.55); }
.fk-modal { width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--fk-surface); border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-lg); overflow: hidden; }
.fk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fk-line); }
.fk-modal-title { margin: 0; font-family: var(--fk-font-ui); font-size: var(--fk-type-lg); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fk-ink); }
.fk-modal-body { padding: 18px 20px; overflow: auto; }
.fk-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--fk-line); background: var(--fk-gray-50); }

/* ── On the dark band ────────────────────────────────────────── */
/* The page header band (.module-band) and anything marked .fk-on-dark. The main
   button stays ARL blue; everything else turns to glass so it reads on navy. */

:is(.module-band, .fk-on-dark) .fk-btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--fk-white); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
:is(.module-band, .fk-on-dark) .fk-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
:is(.module-band, .fk-on-dark) .fk-btn-quiet { color: var(--fk-white); }
:is(.module-band, .fk-on-dark) .fk-btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
:is(.module-band, .fk-on-dark) .fk-btn-danger { background: rgba(225, 26, 34, 0.14); color: var(--fk-red-100); border-color: rgba(225, 26, 34, 0.5); }
:is(.module-band, .fk-on-dark) .fk-tabs { border-bottom-color: rgba(255, 255, 255, 0.1); }
:is(.module-band, .fk-on-dark) .fk-tab { color: rgba(255, 255, 255, 0.62); }
:is(.module-band, .fk-on-dark) .fk-tab:hover { color: var(--fk-white); }
:is(.module-band, .fk-on-dark) .fk-tab.is-active,
:is(.module-band, .fk-on-dark) .fk-tab[aria-selected="true"] { color: var(--fk-white); border-bottom-color: var(--fk-blue-400); }
:is(.module-band, .fk-on-dark) .fk-count { background: rgba(255, 255, 255, 0.14); color: var(--fk-white); }
:is(.module-band, .fk-on-dark) .fk-count-hot { background: var(--fk-red-600); }
:is(.module-band, .fk-on-dark) .fk-chip-plain { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }