/*
 * Entitlements console — the standalone operator skin.
 *
 * A plain stylesheet rather than styled-components or the MUI theme, and that
 * is the point: this console is not a page inside the product, it is a separate
 * operator tool that happens to be served by the same app. Carrying the design
 * across as CSS keeps it reviewable against the prototype it came from, one
 * rule at a time, instead of re-expressing 235 rules as component props.
 *
 * EVERY RULE IS SCOPED UNDER `.ec-root`. The prototype styled bare `body`,
 * `table`, `thead th` and `:focus-visible`; unscoped, those would repaint the
 * rest of the app the moment this chunk loaded. The custom properties live on
 * `.ec-root` too, so the app's own theme tokens are untouched.
 *
 * Theme: the prototype toggled `data-theme` on <html>. Here the tokens live on
 * `.ec-root`, so the toggle stamps the attribute on THAT element — the console
 * can be dark while the rest of the app is light, which is correct for a tool
 * that opens in its own tab.
 */
.ec-root {
  --ground: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #141a24;
  --ink-2: #5a6478;
  --ink-3: #8d95a6;
  --line: #dde1e9;
  --line-strong: #c3cad6;
  --accent: #1b2a4a;
  --accent-ink: #ffffff;
  --focus: #3f6fd8;
  --ok: #14795b;
  --ok-bg: #e4f4ee;
  --warn: #8a5c07;
  --warn-bg: #fbf0dc;
  --crit: #ad2a20;
  --crit-bg: #fbe8e6;
  /* "watching" — computing the answer, acting on nothing. Deliberately cool:
       it is not a warning, it is an observation. */
  --watch: #3a5f9e;
  --watch-bg: #e6edf9;
  --p-essential: #34875a;
  --p-essential-bg: #e6f4ea;
  --p-pro: #6249bf;
  --p-pro-bg: #ebe7fa;
  --p-enterprise: #b4467f;
  --p-enterprise-bg: #f9e5ef;
  --shadow:
    0 1px 2px rgba(20, 26, 36, 0.06), 0 8px 24px -12px rgba(20, 26, 36, 0.18);
  --radius: 6px;
  --mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
  --sans:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .ec-root {
    --ground: #0e1219;
    --surface: #161b25;
    --surface-2: #1c222e;
    --ink: #e7ebf3;
    --ink-2: #99a3b6;
    --ink-3: #6b7488;
    --line: #262d3b;
    --line-strong: #38414f;
    --accent: #cdd8ef;
    --accent-ink: #10141c;
    --focus: #7fa4f0;
    --ok: #4ecfa4;
    --ok-bg: #102c25;
    --warn: #e0ac4a;
    --warn-bg: #2f2413;
    --crit: #f2867c;
    --crit-bg: #331714;
    --watch: #8fb0ea;
    --watch-bg: #15203a;
    --p-essential: #6ecf8c;
    --p-essential-bg: #14301f;
    --p-pro: #a693f0;
    --p-pro-bg: #211b3a;
    --p-enterprise: #ee8abc;
    --p-enterprise-bg: #331426;
    --shadow:
      0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  }
}
.ec-root[data-theme="dark"] {
  --ground: #0e1219;
  --surface: #161b25;
  --surface-2: #1c222e;
  --ink: #e7ebf3;
  --ink-2: #99a3b6;
  --ink-3: #6b7488;
  --line: #262d3b;
  --line-strong: #38414f;
  --accent: #cdd8ef;
  --accent-ink: #10141c;
  --focus: #7fa4f0;
  --ok: #4ecfa4;
  --ok-bg: #102c25;
  --warn: #e0ac4a;
  --warn-bg: #2f2413;
  --crit: #f2867c;
  --crit-bg: #331714;
  --watch: #8fb0ea;
  --watch-bg: #15203a;
  --p-essential: #6ecf8c;
  --p-essential-bg: #14301f;
  --p-pro: #a693f0;
  --p-pro-bg: #211b3a;
  --p-enterprise: #ee8abc;
  --p-enterprise-bg: #331426;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}
.ec-root[data-theme="light"] {
  --ground: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #141a24;
  --ink-2: #5a6478;
  --ink-3: #8d95a6;
  --line: #dde1e9;
  --line-strong: #c3cad6;
  --accent: #1b2a4a;
  --accent-ink: #ffffff;
  --focus: #3f6fd8;
  --ok: #14795b;
  --ok-bg: #e4f4ee;
  --warn: #8a5c07;
  --warn-bg: #fbf0dc;
  --crit: #ad2a20;
  --crit-bg: #fbe8e6;
  --watch: #3a5f9e;
  --watch-bg: #e6edf9;
  --p-essential: #34875a;
  --p-essential-bg: #e6f4ea;
  --p-pro: #6249bf;
  --p-pro-bg: #ebe7fa;
  --p-enterprise: #b4467f;
  --p-enterprise-bg: #f9e5ef;
  --shadow:
    0 1px 2px rgba(20, 26, 36, 0.06), 0 8px 24px -12px rgba(20, 26, 36, 0.18);
}
.ec-root * {
  box-sizing: border-box;
}
.ec-root {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ec-root .wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px 96px;
}
.ec-root .proto {
  background: var(--warn-bg);
  color: var(--warn);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 24px;
  text-align: center;
}
/* ---------- masthead ---------- */
.ec-root .mast {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ec-root .mast-in {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ec-root .mast h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ec-root .mast p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  max-width: 62ch;
}
.ec-root .mast-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ec-root .mast-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
  white-space: nowrap;
}
.ec-root .bell {
  appearance: none;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 12px 7px 11px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ec-root .bell:hover {
  background: var(--surface-2);
}
.ec-root .bell-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  background: var(--line-strong);
  color: var(--ink-2);
  border-radius: 20px;
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}
.ec-root .bell-badge[data-sev="crit"] {
  background: var(--crit);
  color: var(--crit-bg);
}
.ec-root .bell-badge[data-sev="warn"] {
  background: var(--warn);
  color: var(--warn-bg);
}
/* ---------- flyout: anchored under the bell, fills remaining viewport ---------- */
.ec-root .flyout {
  position: fixed;
  z-index: 46;
  width: min(430px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ec-root .flyout[data-open="1"] {
  display: flex;
}
.ec-root .fly-hd {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ec-root .fly-t {
  font-size: 14px;
  font-weight: 600;
}
.ec-root .fly-bd {
  overflow-y: auto;
  flex: 1 1 auto;
}
.ec-root .note {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.ec-root .note:last-child {
  border-bottom: 0;
}
.ec-root .note-rail {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  flex: none;
  background: var(--line-strong);
}
.ec-root .note[data-sev="crit"] .note-rail {
  background: var(--crit);
}
.ec-root .note[data-sev="warn"] .note-rail {
  background: var(--warn);
}
.ec-root .note-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ec-root .note-t {
  font-size: 13px;
  font-weight: 550;
}
.ec-root .note-d {
  font-size: 12.5px;
  color: var(--ink-2);
}
.ec-root .note-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ec-root .fly-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
/* ---------- tiles ---------- */
.ec-root .tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 22px 0 0;
}
.ec-root .tile {
  background: var(--surface);
  padding: 13px 15px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ec-root .tile-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ec-root .tile-v {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ec-root .tile-n {
  font-size: 11.5px;
  color: var(--ink-2);
}
.ec-root .tile[data-sev="warn"] .tile-v,
.ec-root .tile[data-sev="warn"] .tile-n {
  color: var(--warn);
}
.ec-root .tile[data-sev="crit"] .tile-v,
.ec-root .tile[data-sev="crit"] .tile-n {
  color: var(--crit);
}
/* ---------- tabs ---------- */
.ec-root .tabs {
  display: flex;
  gap: 2px;
  margin: 26px 0 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ec-root .tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 9px 14px 10px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ec-root .tab:hover {
  color: var(--ink);
}
.ec-root .tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 550;
}
.ec-root .tab-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.ec-root .tab[data-tab="beta"][aria-selected="true"] {
  border-bottom-color: var(--warn);
}
/* ---------- toolbar ---------- */
/* No top margin: `main.wrap` already carries padding-top, and the toolbar is
   the first child of almost every tab. The prototype needed the 18px because
   it had no container padding to sit inside. */
.ec-root .ec-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.ec-root .bar-spacer {
  flex: 1 1 auto;
}
.ec-root input[type="search"],
.ec-root input[type="text"],
.ec-root input[type="date"],
.ec-root select,
.ec-root textarea {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
}
.ec-root input[type="search"] {
  min-width: 236px;
}
.ec-root textarea {
  resize: vertical;
  min-height: 62px;
  width: 100%;
}
.ec-root :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.ec-root .seg {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.ec-root .seg button {
  appearance: none;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 6px 11px;
  border-right: 1px solid var(--line);
}
.ec-root .seg button:last-child {
  border-right: 0;
}
.ec-root .seg button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
/* A state you are in but cannot choose — shown, not hidden, so the set of
     states is visibly complete and the reason it is unavailable is legible. */
.ec-root .seg button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ec-root .seg button[disabled][aria-pressed="true"] {
  opacity: 1;
  background: var(--surface-2);
  color: var(--ink-2);
  font-style: italic;
}
.ec-root .btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 7px 13px;
}
.ec-root .btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.ec-root .btn-ghost:hover {
  background: var(--surface-2);
}
.ec-root .ec-btn-danger {
  background: var(--crit);
  border-color: var(--crit);
  color: #fff;
}
.ec-root[data-theme="dark"] .ec-btn-danger {
  color: var(--crit-bg);
}
.ec-root .btn-sm {
  font-size: 12px;
  padding: 4px 9px;
}
.ec-root .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ---------- table ---------- */
.ec-root .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ec-root .scroll {
  overflow-x: auto;
}
.ec-root table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.ec-root thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ec-root tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ec-root tbody tr:last-child td {
  border-bottom: 0;
}
.ec-root tbody tr[data-clickable]:hover {
  background: var(--surface-2);
  cursor: pointer;
}
.ec-root .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.ec-root .empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.ec-root .right {
  text-align: right;
}
.ec-root .nowrap {
  white-space: nowrap;
}
.ec-root .fname {
  font-weight: 550;
}
.ec-root .fkey {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.ec-root .cname {
  font-weight: 500;
}
.ec-root .reason {
  color: var(--ink-2);
  font-size: 12.5px;
  max-width: 36ch;
}
.ec-root .muted {
  color: var(--ink-3);
}
/* ---------- plan pips ---------- */
.ec-root .rungs {
  display: inline-flex;
  gap: 4px;
}
.ec-root .rung {
  appearance: none;
  width: 38px;
  height: 24px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
}
.ec-root .rung[aria-pressed="true"] {
  border-style: solid;
}
.ec-root .rung[aria-pressed="true"][data-plan="essential"] {
  background: var(--p-essential-bg);
  border-color: color-mix(in srgb, var(--p-essential) 42%, transparent);
  color: var(--p-essential);
}
.ec-root .rung[aria-pressed="true"][data-plan="pro"] {
  background: var(--p-pro-bg);
  border-color: color-mix(in srgb, var(--p-pro) 42%, transparent);
  color: var(--p-pro);
}
.ec-root .rung[aria-pressed="true"][data-plan="enterprise"] {
  background: var(--p-enterprise-bg);
  border-color: color-mix(in srgb, var(--p-enterprise) 42%, transparent);
  color: var(--p-enterprise);
}
.ec-root .rung-live {
  cursor: pointer;
}
.ec-root .rung-live:hover {
  border-style: solid;
  color: var(--ink);
}
.ec-root .rung-changed {
  box-shadow: 0 0 0 2px var(--focus);
}
/* Legacy and the old ladder sit outside the new plans — separated by one
   divider element, not coloured in. */
.ec-root .rung-divider {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
  align-self: center;
  margin: 0 3px;
  flex: none;
}
.ec-root .rungs {
  position: relative;
}
.ec-root .rung[aria-pressed="true"][data-plan="legacy"] {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
/* ---------- chips ---------- */
.ec-root .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ec-root .chip-ga {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line);
}
.ec-root .chip-beta {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 26%, transparent);
}
.ec-root .chip-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 26%, transparent);
}
.ec-root .chip-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 26%, transparent);
}
.ec-root .chip-crit {
  background: var(--crit-bg);
  color: var(--crit);
  border-color: color-mix(in srgb, var(--crit) 26%, transparent);
}
.ec-root .chip-watch {
  background: var(--watch-bg);
  color: var(--watch);
  border-color: color-mix(in srgb, var(--watch) 30%, transparent);
}
.ec-root .chip-plan[data-plan="essential"] {
  background: var(--p-essential-bg);
  color: var(--p-essential);
  border-color: color-mix(in srgb, var(--p-essential) 30%, transparent);
}
.ec-root .chip-plan[data-plan="pro"] {
  background: var(--p-pro-bg);
  color: var(--p-pro);
  border-color: color-mix(in srgb, var(--p-pro) 30%, transparent);
}
.ec-root .chip-plan[data-plan="enterprise"] {
  background: var(--p-enterprise-bg);
  color: var(--p-enterprise);
  border-color: color-mix(in srgb, var(--p-enterprise) 30%, transparent);
}
.ec-root .chip-plan[data-plan="legacy"] {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line-strong);
}
.ec-root .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* ---------- rollout switch matrix ----------
   Two axes down, master / per-company across. The grid is the point: the two
   switches on an axis are ANDed, and putting them side by side is what stops
   the per-company count being read as the whole answer. Collapses to a stack
   below 900px, where the labels above each cell carry the structure instead. */
.ec-root .swpanel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin: 22px 0 0;
  overflow: hidden;
}
.ec-root .swpanel-hd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ec-root .swrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 150px;
  gap: 8px 20px;
  align-items: center;
  padding: 13px 16px;
  border-left: 3px solid var(--ink-3);
}
.ec-root .swrow + .swrow {
  border-top: 1px solid var(--line);
}
.ec-root .swrow[data-live="1"] {
  border-left-color: var(--ok);
}
.ec-root .swrow-id,
.ec-root .swrow-master,
.ec-root .swrow-cos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ec-root .swrow-state {
  text-align: right;
}
.ec-root .swrow-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-root .swrow-cos .sys-v {
  gap: 5px;
}
/* Both the blocked notice and the confirmation span the whole row: each is
   about the row as a whole, and neither should squeeze the cell it sits under
   into a column of two-word lines. */
.ec-root .swrow-full {
  grid-column: 1 / -1;
}
.ec-root .confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.ec-root .confirm-q {
  font-size: 13.5px;
  font-weight: 600;
}
.ec-root .confirm-d {
  font-size: 12.5px;
  color: var(--ink-2);
}
.ec-root .confirm-acts {
  display: flex;
  gap: 8px;
  margin-top: 3px;
}
.ec-root .switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
@media (max-width: 900px) {
  .ec-root .swrow {
    grid-template-columns: 1fr;
  }
  .ec-root .swrow-state {
    text-align: left;
  }
}
/* The company drawer's half of the same matrix: one row per axis, chip then
   control, right-aligned under the close button. */
.ec-root .cosw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  margin-top: 6px;
}
.ec-root .cosw-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-root .sys-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ec-root .sys-v {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-root .sys-d {
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 74ch;
}
.ec-root .sys-flag {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.ec-root .switch {
  appearance: none;
  cursor: pointer;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 20px;
  position: relative;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  padding: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.ec-root .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.ec-root .switch[aria-checked="true"] {
  background: var(--ok);
  border-color: var(--ok);
}
.ec-root .switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
/* ---------- rollout tab ---------- */
.ec-root .rollout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ec-root .rcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.ec-root .rcard h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
}
.ec-root .rcard p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 78ch;
}
.ec-root .rcard p:last-child {
  margin-bottom: 0;
}
.ec-root .gates {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin-top: 4px;
}
.ec-root .gate {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  background: var(--surface-2);
}
.ec-root .gate-t {
  font-size: 12.5px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.ec-root .gate-d {
  font-size: 12px;
  color: var(--ink-2);
}
.ec-root .gate-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ec-root .bar-track {
  height: 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
}
.ec-root .bar-seg {
  height: 100%;
}
.ec-root .bar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-size: 12px;
  color: var(--ink-2);
}
.ec-root .bar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ec-root .bar-key {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}
/* ---------- bulk selection ---------- */
.ec-root .bulkbar {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--watch-bg);
  border: 1px solid color-mix(in srgb, var(--watch) 30%, transparent);
  border-radius: var(--radius);
  padding: 9px 13px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--watch);
}
.ec-root .bulkbar[data-active="1"] {
  display: flex;
}
.ec-root .bulkbar .bulk-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ec-root .selcell {
  width: 34px;
}
.ec-root .selcell input {
  width: 15px;
  height: 15px;
  accent-color: var(--focus);
  cursor: pointer;
  display: block;
}
/* ---------- what the customer sees ---------- */
.ec-root .sees {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
}
.ec-root .sees svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.ec-root .sees-normal {
  color: var(--ok);
}
.ec-root .sees-locked {
  color: var(--crit);
}
.ec-root .sees-hidden {
  color: var(--ink-3);
}
.ec-root .exc-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--line-strong);
  cursor: pointer;
  padding: 0 0 1px;
}
.ec-root .exc-link:hover {
  border-bottom-style: solid;
}
.ec-root .exc-zero {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
/* ---------- plans grid ---------- */
.ec-root .plans {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.ec-root .plan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ec-root .plan-hd {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.ec-root .plan-card[data-plan="essential"] .plan-hd {
  background: var(--p-essential-bg);
}
.ec-root .plan-card[data-plan="pro"] .plan-hd {
  background: var(--p-pro-bg);
}
.ec-root .plan-card[data-plan="enterprise"] .plan-hd {
  background: var(--p-enterprise-bg);
}
.ec-root .plan-nm {
  font-size: 15px;
  font-weight: 600;
}
.ec-root .plan-card[data-plan="essential"] .plan-nm {
  color: var(--p-essential);
}
.ec-root .plan-card[data-plan="pro"] .plan-nm {
  color: var(--p-pro);
}
.ec-root .plan-card[data-plan="enterprise"] .plan-nm {
  color: var(--p-enterprise);
}
.ec-root .plan-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}
.ec-root .plan-body {
  padding: 12px 15px 15px;
}
.ec-root .plan-grp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 7px;
}
.ec-root .plan-li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 0;
  font-size: 12.5px;
}
/* ---------- company detail ---------- */
.ec-root .facts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 14px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ec-root .lk {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ec-root .lk-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ec-root .lk-v {
  font-size: 14px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.ec-root .lk-v.email {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
}
.ec-root .verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.ec-root .verdict-y {
  color: var(--ok);
}
.ec-root .verdict-n {
  color: var(--ink-3);
}
.ec-root .sec-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ec-root .sec-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.ec-root .crumb {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
}
.ec-root .crumb:hover {
  color: var(--ink);
  text-decoration: underline;
}
.ec-root .cols2 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.ec-root .subtabs {
  margin: 4px 0 0;
}
.ec-root .copyrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ec-root .copy-btn {
  appearance: none;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  line-height: 0;
  color: var(--ink-3);
}
.ec-root .copy-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}
.ec-root .copy-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}
.ec-root .copy-btn[data-done="1"] {
  color: var(--ok);
}
.ec-root .inv-doc {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
.ec-root .inv-doc .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.ec-root .inv-doc .rule {
  border-top: 1px solid var(--line-strong);
  margin: 8px 0;
}
.ec-root .inv-doc .tot {
  font-weight: 600;
}
/* ---------- drawer ---------- */
.ec-root .scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 40;
}
.ec-root .scrim[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
}
.ec-root .drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.ec-root .drawer[data-open="1"] {
  transform: translateX(0);
}
.ec-root .drawer-hd {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex: none;
}
.ec-root .drawer-bd {
  padding: 17px 20px 30px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.ec-root .drawer-ft {
  flex: none;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: none;
  align-items: center;
  gap: 9px;
}
.ec-root .drawer-ft[data-dirty="1"] {
  display: flex;
}
.ec-root .drawer-ft .ft-note {
  font-size: 12px;
  color: var(--warn);
  flex: 1 1 auto;
}
.ec-root .x {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-3);
  padding: 2px 5px;
}
.ec-root .x:hover {
  color: var(--ink);
}
.ec-root .dsec {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 20px 0 7px;
}
.ec-root .dsec:first-child {
  margin-top: 0;
}
.ec-root .drow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12.5px;
  align-items: center;
}
.ec-root .drow:last-child {
  border-bottom: 0;
}
.ec-root .drow > span:first-child {
  color: var(--ink-2);
}
/* ---------- modal ---------- */
.ec-root .modal {
  position: fixed;
  z-index: 42;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(560px, 94vw);
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  display: flex;
  flex-direction: column;
}
.ec-root .modal[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.ec-root .modal-hd {
  padding: 16px 19px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  flex: none;
}
.ec-root .modal-bd {
  padding: 17px 19px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
}
.ec-root .modal-ft {
  padding: 13px 19px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  align-items: center;
  flex: none;
}
.ec-root .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ec-root .field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ec-root .field-note {
  font-size: 11.5px;
  color: var(--ink-3);
}
.ec-root .hint {
  font-size: 12px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.ec-root .hint-warn {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  color: var(--warn);
}
.ec-root .hint-crit {
  background: var(--crit-bg);
  border-color: color-mix(in srgb, var(--crit) 28%, transparent);
  color: var(--crit);
}
.ec-root .hint-ok {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
  color: var(--ok);
}
.ec-root .err {
  color: var(--crit);
  font-size: 12px;
  margin-right: auto;
}
.ec-root .cbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 5px 0;
  cursor: pointer;
}
.ec-root .cbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--focus);
  flex: none;
}
.ec-root .cbox-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.ec-root .cbox-nm {
  font-size: 13px;
}
.ec-root .picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 6px 10px 8px;
}
.ec-root .picker-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ec-root .picker-empty {
  padding: 18px 4px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
.ec-root .picker-count {
  font-size: 11.5px;
  color: var(--ink-3);
}
.ec-root .name-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
}
.ec-root .name-list .nl-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
}
.ec-root .name-list .nl-row .fkey {
  font-size: 11px;
}
.ec-root .impact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ec-root .impact-line {
  font-size: 13.5px;
}
.ec-root .impact-list {
  font-size: 12.5px;
  color: var(--ink-2);
}
.ec-root .impact-list b {
  font-weight: 550;
  color: var(--ink);
}
/* ---------- toast ---------- */
.ec-root .toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  max-width: min(620px, 92vw);
  text-align: center;
}
.ec-root .toast[data-open="1"] {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ec-root .foot {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  max-width: 78ch;
}
.ec-root .foot code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .ec-root * {
    transition: none !important;
  }
}
/* --------------------------------------------------------------------------
 * Standalone-page additions. The prototype WAS the document, so it inherited
 * the viewport from `body`. Here `.ec-root` has to claim it explicitly, or the
 * console renders as a short box on the app's background.
 * ------------------------------------------------------------------------ */
.ec-root {
  min-height: 100vh;
  width: 100%;
}

/* The prototype's first child inside <main> was always a toolbar carrying
 * `margin: 18px 0 10px`. Tabs that render a bare .panel (Features, Flags) had
 * nothing to space them, so the table sat flush against the tab strip. */
.ec-root main.wrap {
  padding-top: 22px;
}

/* A company drawer holding five-column verdict tables cannot live at the
 * prototype's 460px. Widened rather than re-routed. */
.ec-root .drawer-wide {
  width: min(960px, 96vw);
}

/* --------------------------------------------------------------------------
 * THE ONE DELIBERATELY UNSCOPED RULE IN THIS FILE.
 *
 * The HelpScout support bubble is booted from application.html.erb into
 * #beacon-container, a direct child of <body>, so it survives dropping the
 * Navigation layout and floats over the console — a CUSTOMER support channel
 * on a page only TKC staff can open, sitting exactly where the toast appears.
 *
 * `body:has(.ec-root)` keeps it inert everywhere else: the rule only bites
 * while the console is actually mounted, and stops the moment it unmounts, so
 * Inertia navigation in either direction is handled with no JS and no cleanup.
 * An effect cannot do this — HelpScout injects the container asynchronously,
 * so on mount there is nothing to hide yet.
 * ------------------------------------------------------------------------ */
body:has(.ec-root) #beacon-container {
  display: none;
}

/* ---------------------------------------------------------- company header --
   The current-vs-target strip above the drawer's tabs.

   Laid out with flex + gap rather than per-item margins so the divider and the
   arrow sit in the flow instead of being positioned against it, and so the
   whole strip wraps intact on a narrow window — an operator reading a price
   comparison that has silently reflowed into two unlabelled halves is the one
   failure mode worth designing out. */
.ec-root .cohdr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 22px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.ec-root .cohdr-stat {
  min-width: 0;
}
.ec-root .cohdr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.ec-root .cohdr-value {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  /* Money and counts line up column-wise when the drawer is reopened on a
     different company. */
  font-variant-numeric: tabular-nums;
}
/* A figure we could not compute reads as prose, not as a number — the point is
   that it can never be mistaken for $0. */
.ec-root .cohdr-unknown {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  font-style: italic;
}
.ec-root .cohdr-warn {
  color: var(--warn);
}
.ec-root .cohdr-crit {
  color: var(--crit);
}
.ec-root .cohdr-split {
  align-self: stretch;
  width: 1px;
  background: var(--line);
}
.ec-root .cohdr-arrow {
  align-self: center;
  font-size: 16px;
  color: var(--ink-3);
}

.swiper.g-swiper-slider{width:100%;height:100%;touch-action:pan-y pinch-zoom}.swiper.g-swiper-slider .swiper-pagination{bottom:0}.g-slider{overflow-anchor:none}.g-slider.fullscreen,.g-slider:fullscreen{z-index:1100;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;display:flex;flex-direction:column}.g-slider.fullscreen .g-swiper-slider,.g-slider:fullscreen .g-swiper-slider{flex:1;display:flex;flex-direction:column;min-height:0;height:100% !important}.g-slider.fullscreen .g-swiper-slider .swiper-wrapper,.g-slider:fullscreen .g-swiper-slider .swiper-wrapper{flex:1;min-height:0;height:100% !important}.g-slider.fullscreen .g-swiper-slider .swiper-slide,.g-slider:fullscreen .g-swiper-slider .swiper-slide{height:100%;display:flex;align-items:center;justify-content:center}.g-slider.fullscreen .video-frame,.g-slider:fullscreen .video-frame{width:100%;height:100%}.g-slider.fullscreen .video-frame iframe,.g-slider:fullscreen .video-frame iframe{position:absolute;width:100%;height:100%}.g-swiper-container-end{position:relative;text-align:right;z-index:11}
.video-js .vjs-poster img:-moz-broken{opacity:0}.video-js .vjs-poster img:not([src]),.video-js .vjs-poster img[src=""]{opacity:0}.video-js .vjs-poster picture:has(img:-moz-broken),.video-js .vjs-poster picture:has(img:not([src])),.video-js .vjs-poster picture:has(img[src=""]){display:none}[data-vjs-player]{width:100%;aspect-ratio:16/9}[data-vjs-player]>div{width:100%}[data-vjs-player]>div:first-child{height:100%}.video-js:not(.vjs-has-started) .vjs-control-bar,.video-js.vjs-layout-tiny:not(.vjs-has-started) .vjs-control-bar,.video-js.vjs-layout-x-small:not(.vjs-has-started) .vjs-control-bar,.video-js.vjs-layout-small:not(.vjs-has-started) .vjs-control-bar{opacity:1 !important;visibility:visible !important;display:flex !important;pointer-events:auto !important}.video-js{touch-action:pan-y pinch-zoom}.video-js video{touch-action:pan-y pinch-zoom}.video-js .vjs-playback-rate{display:flex !important}.video-js .vjs-playback-rate .vjs-menu .vjs-menu-content{max-height:none !important;overflow:visible !important}.video-js .vjs-quality-menu-wrapper:not(.vjs-hidden){display:flex !important}.video-js .vjs-quality-menu-button.vjs-resolution-locked{min-width:62px}.video-js .vjs-quality-menu-button.vjs-resolution-locked::after{content:attr(data-resolution-label);font-size:10px;font-weight:600;margin-left:4px;line-height:1}.video-js .vjs-custom-fullscreen-exit.vjs-fullscreen-control .vjs-icon-placeholder::before{content:"" !important}.video-js .vjs-fullscreen-control{-webkit-tap-highlight-color:rgba(255,255,255,.3);touch-action:auto;cursor:pointer;min-width:44px;min-height:44px}.video-js .vjs-progress-control{touch-action:pan-y pinch-zoom}.g-slider.fullscreen [data-vjs-player]{height:100% !important;aspect-ratio:auto !important}.g-slider.fullscreen [data-vjs-player]>div{height:100% !important}.g-slider.fullscreen .video-js,.g-slider.fullscreen .video-js.vjs-fluid,.g-slider.fullscreen .video-js.vjs-16-9,.g-slider.fullscreen .video-js.vjs-4-3,.vjs-layout-full-screen{width:100% !important;height:100% !important;max-height:100% !important;padding-top:0 !important}.g-slider.fullscreen .video-js .vjs-tech{width:100% !important;height:100% !important;object-fit:contain !important}
.row{margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.row-middle{align-items:center}.col{flex-grow:1;flex-basis:0;max-width:100%}.col-start{justify-content:flex-start;text-align:left}.col-center{justify-content:center;text-align:center}.col-end{justify-content:flex-end;text-align:right}.calendar{display:block;position:relative;width:100%;background:var(--neutral-color);border:1px solid var(--border-color)}.calendar .header{text-transform:uppercase;font-weight:700;font-size:115%;padding:1.5em 0;border-bottom:1px solid var(--border-color)}.calendar .header .icon{cursor:pointer;transition:.15s ease-out}.calendar .header .icon:hover{transform:scale(1.75);transition:.25s ease-out;color:var(--main-color)}.calendar .header .icon:first-of-type{margin-left:1em}.calendar .header .icon:last-of-type{margin-right:1em}.calendar .days{text-transform:uppercase;font-weight:400;color:var(--text-color-light);font-size:70%;padding:.75em 0;border-bottom:1px solid var(--border-color)}.calendar .body .cell{position:relative;min-height:9em;border-right:1px solid var(--border-color);overflow:hidden;cursor:pointer;background:var(--neutral-color);transition:.25s ease-out}.calendar .body .cell:hover{background:var(--bg-color);transition:.5s ease-out}.calendar .body .row{border-bottom:1px solid var(--border-color)}.calendar .body .row:last-child{border-bottom:none}.calendar .body .cell:last-child{border-right:none}.calendar .body .cell .number{position:absolute;font-size:82.5%;line-height:1;top:.75em;right:.75em;font-weight:700}.first{border-left:1px solid var(--border-color)}.calendar .body .disabled{border-right:none;background-color:#eee;cursor:default}.calendar .body .disabled:hover{background-color:#eee}.calendar .body .cell .bg{font-weight:700;line-height:1;color:var(--main-color);opacity:0;font-size:8em;position:absolute;top:-0.2em;right:-0.05em;transition:.25s ease-out;letter-spacing:-0.07em}.calendar .body .cell:hover .bg,.calendar .body .selected .bg{opacity:.05;transition:.5s ease-in}.calendar .body .col{flex-grow:1}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.textLayer.selecting ~ .annotationLayer section {
  pointer-events: none;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--total-scale-factor));
  width: 100%;
  min-width: calc(180px * var(--total-scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--total-scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--total-scale-factor));
  padding: calc(6px * var(--total-scale-factor));
  margin-left: calc(5px * var(--total-scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--total-scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--total-scale-factor));
  padding-top: calc(2px * var(--total-scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}

.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}

/*
 * Stride Avatar placeholder.
 * Source: Figma "TKC Calendar 2026" node 1737:73.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: clip;
  box-sizing: border-box;
  padding: var(--stride-spacing-spc-0_5x);
  border-radius: var(--stride-radius-rad-full);
  background: var(--stride-bg-surface-secondary);
  color: var(--stride-ctn-tertiary);
  text-align: center;
}

[data-stride-theme] .stride-avatar-placeholder--large {
  width: 32px;
  height: 32px;
  font-family: var(--stride-font-family);
  font-size: 15px;
  font-weight: var(--stride-font-weight-semibold);
  line-height: 15px;
  letter-spacing: 0;
}

/* The list-page rows' person avatar (40px on the canvases). */
[data-stride-theme] .stride-avatar-placeholder--extra-large {
  width: 40px;
  height: 40px;
  font-family: var(--stride-font-family);
  font-size: 15px;
  font-weight: var(--stride-font-weight-semibold);
  line-height: 15px;
  letter-spacing: 0;
}

[data-stride-theme] .stride-avatar-placeholder--small {
  width: 24px;
  height: 24px;
}

/* Used for the small profile photo inside the thread entry point pills
 * (Figma "Profile image", 20px). No 10px font-size token exists yet, so the
 * initials size is set directly on this one-off label class instead of a
 * shared text utility. */
[data-stride-theme] .stride-avatar-placeholder--extra-small {
  width: 20px;
  height: 20px;
}

[data-stride-theme] .stride-avatar-placeholder-initials--extra-small {
  font-family: var(--stride-font-family);
  font-size: 10px;
  font-weight: var(--stride-font-weight-semibold);
  line-height: 10px;
  letter-spacing: 0;
}

[data-stride-theme] .stride-avatar-placeholder span {
  width: 100%;
}

[data-stride-theme] .stride-avatar-placeholder--photo {
  padding: 0;
}

[data-stride-theme] .stride-avatar-placeholder-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* colorFromName: the coach-label families, so a person's colour matches
 * the palette coaches already know. */

[data-stride-theme] .stride-avatar-placeholder[data-accent="brick"] {
  background: var(--stride-bg-brick-surface);
  color: var(--stride-ctn-brick-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="amber"] {
  background: var(--stride-bg-amber-surface);
  color: var(--stride-ctn-amber-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="yellow"] {
  background: var(--stride-bg-yellow-surface);
  color: var(--stride-ctn-yellow-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="purple"] {
  background: var(--stride-bg-purple-surface);
  color: var(--stride-ctn-purple-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="olive"] {
  background: var(--stride-bg-olive-surface);
  color: var(--stride-ctn-olive-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="cyan"] {
  background: var(--stride-bg-cyan-surface);
  color: var(--stride-ctn-cyan-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="indigo"] {
  background: var(--stride-bg-indigo-surface);
  color: var(--stride-ctn-indigo-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="slate"] {
  background: var(--stride-bg-slate-surface);
  color: var(--stride-ctn-slate-primary);
}

[data-stride-theme] .stride-avatar-placeholder[data-accent="pink"] {
  background: var(--stride-bg-pink-surface);
  color: var(--stride-ctn-pink-primary);
}

/*
 * Stride Medal.
 * Pending design review — no Figma frame yet; drawn from the dashboard's
 * design canvas ("Highlights").
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-medal {
  display: block;
  flex: none;
}

[data-stride-theme] .stride-medal-ribbon {
  fill: var(--stride-bg-brand-surface);
}

[data-stride-theme] .stride-medal-disc {
  fill: var(--stride-bg-brand-primary);
}

/* A fine inner rim, the disc's own colour lightened by white. */
[data-stride-theme] .stride-medal-rim {
  fill: none;
  stroke: var(--stride-ctn-inversed);
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

[data-stride-theme] .stride-medal-figure {
  fill: var(--stride-ctn-inversed);
  font-family: var(--stride-font-family);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* StrideGreetingCard. Pending design review: no Figma frame yet. Each
   template's colours hold white text at 4.5:1 or more (blue 700 5.4, yellow
   600 4.8, amber 700 5.4 to brick 700 6.8, olive 700 6.0). */

[data-stride-theme] .stride-greeting-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(340px, 100%);
  /* At least 4:5; taller when a long note needs it (nothing here clips,
     which would hold it at 4:5 and cut the note off). */
  aspect-ratio: 4 / 5;
  padding: 24px;
  border-radius: 24px;
  color: var(--stride-color-transparent-white-1000);
  /* Its own: it's drawn on V1's pages too, whose font isn't Stride's. */
  font-family: var(--stride-font-family);
  text-align: left;
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-greeting-card--confetti {
  background: linear-gradient(
    165deg,
    var(--stride-color-brand-blue-700),
    var(--stride-color-brand-blue-800)
  );
}

[data-stride-theme] .stride-greeting-card--trophy {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-yellow-600),
    var(--stride-color-accent-yellow-800)
  );
}

[data-stride-theme] .stride-greeting-card--on_fire {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-amber-700),
    var(--stride-color-accent-brick-700)
  );
}

[data-stride-theme] .stride-greeting-card--medal {
  background: linear-gradient(
    165deg,
    var(--stride-color-accent-olive-700),
    var(--stride-color-accent-olive-800)
  );
}

/* The picture: the top of the card, behind nothing. */
[data-stride-theme] .stride-greeting-card-motif {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

[data-stride-theme] .stride-greeting-card-glyph {
  width: 96px;
  height: 96px;
}

[data-stride-theme] .stride-greeting-card--trophy .stride-greeting-card-glyph {
  color: var(--stride-color-accent-yellow-300);
}

[data-stride-theme] .stride-greeting-card--on_fire .stride-greeting-card-glyph {
  color: var(--stride-color-accent-amber-300);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal {
  width: 96px;
  height: 114px;
}

/* Gold on the green card, not the timeline's brand blue. */
[data-stride-theme] .stride-greeting-card-medal .stride-medal-ribbon {
  fill: var(--stride-color-accent-brick-600);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-disc {
  fill: var(--stride-color-accent-yellow-400);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-rim {
  stroke: var(--stride-color-accent-yellow-700);
}

[data-stride-theme] .stride-greeting-card-medal .stride-medal-figure {
  fill: var(--stride-color-accent-yellow-800);
}

/* Confetti: pieces over the top of the card, as `CONFETTI` places them. */
[data-stride-theme] .stride-greeting-card-confetti {
  position: absolute;
  inset: -24px -24px 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

[data-stride-theme] .stride-greeting-card-confetti-piece {
  position: absolute;
  display: block;
}

[data-stride-theme] .stride-greeting-card-confetti-piece--a {
  width: 12px;
  height: 5px;
  border-radius: 1px;
  background: var(--stride-color-accent-yellow-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stride-color-accent-brick-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--c {
  width: 6px;
  height: 12px;
  border-radius: 1px;
  background: var(--stride-color-accent-olive-300);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--d {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--stride-color-transparent-white-1000);
}

[data-stride-theme] .stride-greeting-card-confetti-piece--e {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stride-color-accent-amber-300);
}

[data-stride-theme] .stride-greeting-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

[data-stride-theme] .stride-greeting-card-overline {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--stride-color-transparent-white-100);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-stride-theme] .stride-greeting-card-figure {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.02em;
}

[data-stride-theme] .stride-greeting-card-caption {
  font-size: 13px;
  line-height: 18px;
  opacity: 0.85;
}

[data-stride-theme] .stride-greeting-card-note {
  margin: 8px 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-line;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

[data-stride-theme] .stride-greeting-card-signature {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

[data-stride-theme] .stride-greeting-card-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* The initials, when there's no photo: the same on every card and in either
   theme (the placeholder's own surface follows the theme). */
[data-stride-theme] .stride-greeting-card-avatar.stride-avatar-placeholder {
  background: var(--stride-color-transparent-white-200);
  color: var(--stride-color-transparent-white-1000);
}

/* Compact: a chat message's card and the composer's picker. */
[data-stride-theme] .stride-greeting-card--compact {
  width: 160px;
  padding: 12px;
  border-radius: 14px;
  box-shadow: none;
}

[data-stride-theme] .stride-greeting-card--compact .stride-greeting-card-glyph {
  width: 44px;
  height: 44px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-medal
  .stride-medal {
  width: 44px;
  height: 52px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-confetti {
  inset: -12px -12px 0;
  transform: scale(0.6);
  transform-origin: top left;
  /* Edge to edge once scaled: the motif's width plus both paddings. */
  width: calc((100% + 24px) / 0.6);
}

[data-stride-theme] .stride-greeting-card--compact .stride-greeting-card-body {
  gap: 2px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-overline {
  padding: 2px 6px;
  font-size: 9px;
  line-height: 12px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-figure {
  font-size: 22px;
  line-height: 26px;
}

[data-stride-theme]
  .stride-greeting-card--compact
  .stride-greeting-card-caption {
  font-size: 10px;
  line-height: 13px;
}

/* The back (StrideGreetingReveal, before it's opened): the picture alone,
   larger, the confetti over the whole card. */
[data-stride-theme] .stride-greeting-card--back .stride-greeting-card-glyph {
  width: 144px;
  height: 144px;
}

[data-stride-theme]
  .stride-greeting-card--back
  .stride-greeting-card-medal
  .stride-medal {
  width: 144px;
  height: 171px;
}

[data-stride-theme] .stride-greeting-card--back .stride-greeting-card-confetti {
  inset: -24px;
  border-radius: 24px;
}

/* StrideGreetingReveal. Pending design review: no Figma frame yet.

   Portaled where Stride's overlays go at 20040, the top of the overlay
   ladder (the story viewer's), inside a dark StrideThemeProvider, so every
   selector here resolves under `[data-stride-theme]`. */

[data-stride-theme] .stride-greeting-reveal,
[data-stride-theme] .stride-greeting-reveal * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-greeting-reveal {
  position: fixed;
  inset: 0;
  z-index: 20040;
  display: flex;
  /* Centred when it fits, scrolled when it doesn't (a phone on its side);
     a swipe never moves the page behind it. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 64px 16px 32px;
  background: var(--stride-color-gray-1000);
  color: var(--stride-color-transparent-white-1000);
  /* Portaled outside the page: its text inherits from here. */
  font-family: var(--stride-font-family);
  /* Focused on open so keys land here; not a control, so no ring. */
  outline: none;
}

[data-stride-theme] .stride-greeting-reveal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stride-spacing-spc-5x);
  width: min(340px, 100%);
  margin: auto;
  /* Depth for the card's turn: without it, it narrows flat and widens
     mirrored. */
  perspective: 1200px;
}

[data-stride-theme] .stride-greeting-reveal-title {
  margin: 0;
  text-align: center;
  transition: opacity 300ms ease;
}

/* Open, the card is signed: the title fades but keeps its place (the card
   doesn't jump as it turns) and stays the dialog's name. */
[data-stride-theme] .stride-greeting-reveal-title--faded {
  opacity: 0;
}

/* The card turning over: its face (in the flow, so it sets the height) and
   its back over it, each hidden while it faces away. */
[data-stride-theme] .stride-greeting-reveal-turn {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-stride-theme] .stride-greeting-reveal-turn--open {
  transform: rotateY(180deg);
}

[data-stride-theme] .stride-greeting-reveal-turn--instant {
  transition: none;
}

[data-stride-theme] .stride-greeting-reveal-face,
[data-stride-theme] .stride-greeting-reveal-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-stride-theme] .stride-greeting-reveal-face {
  transform: rotateY(180deg);
  /* Focused as it opens so a screen reader reads it; not a control. */
  outline: none;
}

[data-stride-theme] .stride-greeting-reveal-face .stride-greeting-card {
  width: 100%;
}

[data-stride-theme] .stride-greeting-reveal-back {
  position: absolute;
  inset: 0;
  cursor: pointer;
  /* Its own 3D layer, so older WebKit hides it once it faces away. */
  transform: rotateY(0deg);
}

/* Turned away: the face under it takes the taps (and a note's selection). */
[data-stride-theme]
  .stride-greeting-reveal-turn--open
  .stride-greeting-reveal-back {
  pointer-events: none;
  cursor: default;
}

[data-stride-theme] .stride-greeting-reveal-back .stride-greeting-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

[data-stride-theme] .stride-greeting-reveal-actions {
  display: flex;
  justify-content: center;
  gap: var(--stride-spacing-spc-3x);
}

[data-stride-theme] .stride-greeting-reveal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--stride-radius-rad-full);
  background: var(--stride-color-transparent-white-100);
  color: var(--stride-color-transparent-white-1000);
  cursor: pointer;
}

[data-stride-theme] .stride-greeting-reveal-close:hover {
  background: var(--stride-color-transparent-white-200);
}

[data-stride-theme] .stride-greeting-reveal-close:focus-visible {
  outline: none;
  box-shadow: var(--stride-shadow-focus);
}

[data-stride-theme] .stride-greeting-reveal-close svg {
  width: 20px;
  height: 20px;
}

/*
 * Stride chart palette.
 * Pending design review — no Figma frame defines chart colours yet.
 *
 * Series colours for charts and sparklines, in a fixed order: a chart
 * assigns series 1, 2, 3 (then 4, 5, 6, below) to its entities in order and
 * never cycles. Every slot but series 4–6 aliases an existing primitive;
 * those three are the only chart-only values. The semantic token layer
 * (which the un-flagged Gym View also reads) is untouched.
 *
 * Why not the accent order the PR chart uses (brick, amber, yellow)? It
 * fails a colour-vision check: brick/amber and amber/yellow sit too close
 * for protan and deutan readers. Blue, amber, purple passes every pair at
 * three series in both modes (worst pair ΔE 7.5, so line charts that use
 * all three must also label lines directly, not by colour alone).
 *
 * Every series, muted included, keeps 3:1 against the card surface it sits
 * on (bg-surface-primary), which in dark mode is lighter than the canvas.
 * That is why dark keeps brand-blue 600 and purple 500 rather than the
 * darker steps: those drop under 3:1 on the dark card.
 *
 * Series 4–6 are for a chart that draws more than three series (the
 * dashboard's chart builder: up to six exercises; Divyam, 2026-10-26). They
 * follow 1–3, which stay as they are, and come from the brick, cyan and
 * pink families, tweaked for charts: no existing step of those families
 * clears the checks next to blue, amber and purple. They are the only raw
 * values here, chart-only until design adds them to the Figma primitives.
 * Checked with the dataviz validator across ALL pairs (any two lines can
 * cross in one panel): light passes every gate (worst full-colour-vision
 * ΔE 17.1; colour-vision 7.5, the shipped blue/purple pair). Dark cannot:
 * its lightness band is too narrow for six (even with 1–3 free, the best
 * is ΔE ~11). The dark steps are the best found (ΔE 12.5, colour-vision
 * 6.8), so a chart using 4–6 names every line (StridePanelChart
 * `nameEveryLine`), never colour alone (Divyam, 2026-10-26).
 *
 * Muted is "Other" in a stacked bar, where it sits on series 3. Gray 550 was
 * a hair too close to purple there for readers with full colour vision
 * (ΔE 14.9, under the 15 floor), so it is one step further from the card
 * surface in each mode: gray 600 in light (ΔE 17.8), gray 400 in dark
 * (19.8). Both pass next to every series.
 *
 * Sequential 1–4 is an ordered scale (one hue, light to dark), for bands
 * of one measure, such as reps by % of max: low to high is light to dark on
 * a light card, and dark to light on a dark one, so the high end always
 * stands out most. Adjacent steps differ in lightness by 0.06 or more, and
 * the faintest step keeps 2:1 against the card.
 *
 * Bands shade a stretch of time behind a line (a training block), in the
 * colour the coach gave it: the six block colours, each the mid (500) step
 * of its hue. Charts draw them at STRIDE_CHART_BAND_OPACITY (14%), which
 * keeps every band at least ΔE 6.8 from the card in both modes. A tint
 * lowers a line's contrast (brand blue drops under 3:1 on any dark band), so
 * a chart with bands draws each line over a card-coloured casing, which is
 * what the line is then seen against.
 *
 * Scoped under [data-stride-theme].
 */

[data-stride-theme="light"] {
  --stride-chart-series-1: var(--stride-color-brand-blue-600);
  --stride-chart-series-2: var(--stride-color-accent-amber-500);
  --stride-chart-series-3: var(--stride-color-accent-purple-500);
  /* Chart-only tweaks of brick, cyan and pink (see above). */
  --stride-chart-series-4: #973023;
  --stride-chart-series-5: #008d88;
  --stride-chart-series-6: #a21f8f;
  --stride-chart-series-muted: var(--stride-color-gray-600);
  /* A series that is none of the ones compared (a client's own measure under
     their lifts): opaque ink, so dots and rings never darken the line. */
  --stride-chart-series-ink: var(--stride-color-gray-800);
  --stride-chart-sequential-1: var(--stride-color-brand-blue-400);
  --stride-chart-sequential-2: var(--stride-color-brand-blue-600);
  --stride-chart-sequential-3: var(--stride-color-brand-blue-800);
  --stride-chart-sequential-4: var(--stride-color-brand-blue-950);
  --stride-chart-grid: var(--stride-color-transparent-gray-100);
  --stride-chart-band-blue: var(--stride-color-brand-blue-500);
  --stride-chart-band-purple: var(--stride-color-accent-purple-500);
  --stride-chart-band-teal: var(--stride-color-accent-cyan-500);
  --stride-chart-band-orange: var(--stride-color-accent-amber-500);
  --stride-chart-band-red: var(--stride-color-accent-brick-500);
  --stride-chart-band-green: var(--stride-color-accent-olive-500);
}

[data-stride-theme="dark"] {
  --stride-chart-series-1: var(--stride-color-brand-blue-600);
  --stride-chart-series-2: var(--stride-color-accent-amber-600);
  --stride-chart-series-3: var(--stride-color-accent-purple-500);
  /* Chart-only tweaks of brick, cyan and pink (see above). */
  --stride-chart-series-4: #eb5970;
  --stride-chart-series-5: #35a69c;
  --stride-chart-series-6: #be4496;
  --stride-chart-series-muted: var(--stride-color-gray-400);
  --stride-chart-series-ink: var(--stride-color-gray-200);
  --stride-chart-sequential-1: var(--stride-color-brand-blue-700);
  --stride-chart-sequential-2: var(--stride-color-brand-blue-500);
  --stride-chart-sequential-3: var(--stride-color-brand-blue-400);
  --stride-chart-sequential-4: var(--stride-color-brand-blue-200);
  --stride-chart-grid: var(--stride-color-transparent-white-50);
  --stride-chart-band-blue: var(--stride-color-brand-blue-500);
  --stride-chart-band-purple: var(--stride-color-accent-purple-500);
  --stride-chart-band-teal: var(--stride-color-accent-cyan-500);
  --stride-chart-band-orange: var(--stride-color-accent-amber-500);
  --stride-chart-band-red: var(--stride-color-accent-brick-500);
  --stride-chart-band-green: var(--stride-color-accent-olive-500);
}

/*
 * Stride Modal.
 * Source: Figma "TKC Calendar 2026" node 2651:194554.
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-modal-root,
[data-stride-theme] .stride-modal-root * {
  box-sizing: border-box;
}

/* 20019: above menus (20010), toolbars (20015) and floating panels (20018),
 * below the snackbar (20020). See STRIDE_MODAL_Z_INDEX for why it moved. */
[data-stride-theme] .stride-modal-root {
  position: fixed;
  inset: 0;
  z-index: 20019;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

[data-stride-theme] .stride-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--stride-bg-overlay);
}

[data-stride-theme] .stride-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: 100%;
  overflow: hidden;
  background: var(--stride-bg-surface-primary);
  color: var(--stride-ctn-primary);
  font-family: var(--stride-font-family);
  border-radius: var(--stride-radius-rad-3_5x);
  box-shadow: var(--stride-shadow-lg);
}

[data-stride-theme] .stride-modal-dialog[data-size="small"] {
  width: 460px;
}

[data-stride-theme] .stride-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

[data-stride-theme] .stride-modal-header {
  flex-shrink: 0;
  padding: 24px 52px 24px 24px;
}

/* Header actions sit flush left of Close (Figma 2797:94581: two 28px
 * buttons, no gap), so the title keeps clear of both. A child selector: a
 * modal opened inside this one renders inside its dialog, and must keep its
 * own header's padding. */
[data-stride-theme] .stride-modal-header-actions {
  position: absolute;
  top: 12px;
  right: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
}

[data-stride-theme]
  .stride-modal-dialog[data-header-actions="true"]
  > .stride-modal-header {
  padding-right: 80px;
}

[data-stride-theme] .stride-modal-title {
  margin: 0;
  color: var(--stride-ctn-primary);
}

[data-stride-theme] .stride-modal-description {
  margin: var(--stride-spacing-spc-1_5x) 0 0;
  color: var(--stride-ctn-tertiary);
}

[data-stride-theme] .stride-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 24px 24px;
}

[data-stride-theme] .stride-modal-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--stride-spacing-spc-2x);
  padding: 16px;
  background: var(--stride-bg-surface-primary);
  border-top: var(--stride-border-width-thic-1) solid var(--stride-bdr-divider);
}

[data-stride-theme] .stride-modal-footer-tertiary,
[data-stride-theme] .stride-modal-footer-main {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-modal-footer-main {
  margin-left: auto;
}

[data-stride-theme] .stride-modal-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stride-spacing-spc-2x);
}

[data-stride-theme] .stride-modal-docs-filler {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-2x);
  color: var(--stride-ctn-tertiary);
}

/* Opening: the scrim and the box fade in (stride_motion.css says why the box
 * doesn't scale); StrideSheet's box rises instead (stride_sheet.css). Closing
 * is StrideModalFrame's exit copy. */
@media (prefers-reduced-motion: no-preference) {
  [data-stride-theme] .stride-modal-overlay,
  [data-stride-theme] .stride-modal-root > [role="dialog"]:not(.stride-sheet) {
    animation: stride-motion-fade-in 160ms cubic-bezier(0.2, 0, 0, 1);
  }
}

/*
 * Stride chart readout: the bubble a chart's hover readout renders inside
 * StrideChartTooltip. A heading, then one row per series (swatch, name,
 * value), and an optional total row. Shared by the line and stacked bar
 * charts; each draws its own swatch shape (a line, a block).
 * Pending design review — no Figma frame yet.
 * Tokens only. Scoped under [data-stride-theme]; the tooltip stamps the mode
 * on its own root, since it portals out of the chart's subtree.
 */

/* The bubble's own root carries the theme mode, so a page-level theme rule
 * (StrideAppLayout's `[data-stride-theme] { min-height: 100vh; background }`
 * on the design-system pages) would stretch it to the window's height,
 * filled, and the placement then flips it off the top. It sizes to its
 * readout, and the readout draws the surface. */
[data-stride-theme].stride-chart-bubble {
  min-height: 0;
  background: none;
}

[data-stride-theme] .stride-chart-readout {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-1x);
  min-width: 160px;
  padding: var(--stride-spacing-spc-2x) var(--stride-spacing-spc-2_5x);
  color: var(--stride-ctn-primary);
  background: var(--stride-bg-surface-primary);
  border: var(--stride-border-width-thic-1) solid var(--stride-bdr-light);
  border-radius: var(--stride-radius-rad-2x);
  box-shadow: var(--stride-shadow-md);
}

[data-stride-theme] .stride-chart-readout p {
  margin: 0;
}

[data-stride-theme] .stride-chart-readout-row {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-1_5x);
}

[data-stride-theme] .stride-chart-readout-name {
  flex: 1;
  min-width: 0;
  color: var(--stride-ctn-secondary);
}

[data-stride-theme] .stride-chart-readout-value {
  font-variant-numeric: tabular-nums;
}

[data-stride-theme] .stride-chart-readout-total {
  padding-top: var(--stride-spacing-spc-1x);
  border-top: var(--stride-border-width-thic-1) solid var(--stride-bdr-light);
}

/* Opening: the bubble fades in; closing is its exit copy (stride_motion.ts). */
@media (prefers-reduced-motion: no-preference) {
  [data-stride-theme].stride-chart-bubble,
  [data-stride-theme] .stride-chart-bubble {
    animation: stride-motion-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
  }
}

/*
 * Stride Line Chart.
 * Pending design review — no Figma frame yet; follows the client dashboard
 * design canvas (Scoreboard, "Strength"; the exercise page's "e1RM by week"
 * for marks, bands and the goal). The lines and dots are coloured from props
 * (resolved palette tokens); this file styles the legend, the SVG text (visx
 * renders plain <text>, which doesn't inherit the page font) and the marks,
 * goal and "now" upright.
 * The tooltip's bubble is StrideChartTooltip's (stride_chart_tooltip.css).
 * Tokens only. Scoped under [data-stride-theme].
 */

[data-stride-theme] .stride-line-chart,
[data-stride-theme] .stride-line-chart * {
  box-sizing: border-box;
}

[data-stride-theme] .stride-line-chart {
  display: flex;
  flex-direction: column;
  gap: var(--stride-spacing-spc-2x);
  width: 100%;
  /* visx sizes the SVG from this box; without it a flex child can report a
   * wider "ideal" width than its row has and clip the last tick. */
  min-width: 0;
}

[data-stride-theme] .stride-line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stride-spacing-spc-1x) var(--stride-spacing-spc-3x);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-stride-theme] .stride-line-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--stride-spacing-spc-1_5x);
  min-width: 0;
  color: var(--stride-ctn-secondary);
}

/* A short line, not a dot: it reads as "this line". */
[data-stride-theme] .stride-line-chart-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 3px;
  border-radius: var(--stride-radius-rad-full);
}

/* A marked point (a PR): a dot ringed in the card's colour. */
[data-stride-theme] .stride-line-chart-swatch--mark {
  width: 8px;
  height: 8px;
}

/* The goal: a short dashed line. Its colour is the first series'. */
[data-stride-theme] .stride-line-chart-swatch--goal {
  /* Wide enough for two dashes, or it reads as a solid line. */
  width: 18px;
  height: 0;
  border-top: 2px dashed;
  border-radius: 0;
}

/* A reading (a daily weigh-in): a small dot, as on the plot. */
[data-stride-theme] .stride-line-chart-swatch--scatter {
  width: 6px;
  height: 6px;
}

/* Today: a short dashed upright, as on the plot. */
[data-stride-theme] .stride-line-chart-swatch--now {
  width: 0;
  height: 12px;
  border-left: 1px dashed var(--stride-ctn-tertiary);
  border-radius: 0;
}

/* A band, in the readout: a small square at full colour (square, so it
   never reads as the round mark). */
[data-stride-theme] .stride-line-chart-swatch--band {
  width: 8px;
  height: 8px;
  border-radius: 0;
}

[data-stride-theme] .stride-line-chart-mark {
  stroke: var(--stride-bg-surface-primary);
  stroke-width: 2px;
}

[data-stride-theme] .stride-line-chart-goal {
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 4 4;
}

[data-stride-theme] .stride-line-chart-goal-point {
  fill: var(--stride-bg-surface-primary);
  stroke-width: 2px;
}

[data-stride-theme] .stride-line-chart-now {
  stroke: var(--stride-ctn-tertiary);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

[data-stride-theme] .stride-line-chart-band-label {
  fill: var(--stride-ctn-secondary);
  font-family: var(--stride-font-family);
  font-size: var(--stride-font-size-12);
  font-weight: var(--stride-font-weight-medium);
}

[data-stride-theme] .stride-line-chart .visx-axis-tick text,
[data-stride-theme] .stride-line-chart-end-label {
  font-family: var(--stride-font-family);
  font-size: var(--stride-font-size-12);
}

[data-stride-theme] .stride-line-chart .visx-axis-tick text {
  font-weight: var(--stride-font-weight-regular);
}

[data-stride-theme] .stride-line-chart-end-label {
  font-weight: var(--stride-font-weight-semibold);
}

/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

/*# sourceMappingURL=7612-7a4a347e.css.map*/