/* Console: tokens, shared components and the two console shells. Light theme only. */
html.i18n-pending body { visibility: hidden; animation: i18n-reveal 0s 3s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }

/* Console tokens, after the measured tone of the reference console: ink
   text on a light grey page, near-white panels split by ink hairlines, one
   purple for the single primary action of an area and for links, solid ink
   as the second tier, a 4px radius and a 32px control.
   This is the first multi-line rule of the file: the pinned floor test reads
   --paper and --ink here, as six-digit hex. Every older name (--indigo,
   --surface, --secondary ...) stays so each page CSS keeps working.
   This file must not contain a double slash, a web address, the url function
   or Han characters, so keep these comments plain. Pages add shared pieces
   only in the additions section at the end of this file. */
:root {
  color-scheme: light;
  --paper: #f3f3f3;
  --ink: #1a2330;

  /* Surfaces and lines: hairlines are the ink at 10 and 20 percent */
  --surface: #fdfdfd;
  --surface-hover: #f5f5f5;
  --canvas: #f5f5f5;
  --inset: #f3f3f3;
  --field: #fdfdfd;
  --line: #1a23301a;
  --line-strong: #1a233033;
  --line-hover: #1a233066;
  --line-soft: #1a23300f;
  --hover-wash: #1a23300d;
  --press-wash: #1a23301a;
  --tint: var(--hover-wash);
  --tint-hover: var(--press-wash);
  --side-hover: #1a23300f;
  --backdrop: rgba(0, 0, 0, .45);
  --scrim: rgba(26, 35, 48, .72);

  /* Text: the ink and lighter steps of it, kept opaque for contrast */
  --ink-hover: #2d3748;
  --secondary: #3c444f;
  --muted: #5e646d;
  --faint: #686e76;
  --on-ink: #fdfdfd;

  /* Accent (purple): the primary action, links and the active state.
     --indigo* are compatibility aliases. */
  --accent: #7036f0;
  --accent-hover: #5326b5;
  --accent-ink: #5f41cf;
  --accent-pressed: #4a1fa8;
  --accent-soft: #f2edfc;
  --accent-line: #d3c1f9;
  --on-accent: #ffffff;
  --focus-ring: 0 0 0 3px rgba(112, 54, 240, .16);
  --indigo: var(--accent);
  --indigo-hover: var(--accent-hover);
  --indigo-soft: var(--accent-soft);
  --eyebrow: #f38236;

  /* Status pairs: text color, soft background, border */
  --success: #0e7d57; --success-soft: #e9f7f1; --success-line: #0e9f6e40;
  --warning: #b45309; --warning-soft: #fff4e0; --warning-line: #b4530940;
  --warning-icon: #c45c0c;
  --neutral: #3c444f; --neutral-soft: #ebeced;
  --danger: #c23a1a; --danger-soft: #fcf0ed; --danger-line: #c23a1a33;
  --muted-ink: #5e646d; --muted-soft: #f2f2f3;
  --info: #0b679e; --info-soft: #eef6fa; --info-line: #0186ce33;

  /* Design v8 task states (text, fill) and the warning notice */
  --status-ok-ink: #0f6b30; --status-ok-fill: rgba(1, 206, 15, .1);
  --status-run-ink: #1f5f9e; --status-run-fill: rgba(1, 134, 206, .1);
  --status-idle-ink: #5e646d; --status-idle-fill: rgba(26, 35, 48, .05);
  --status-fail-ink: #a83015; --status-fail-fill: rgba(194, 58, 26, .08);
  --notice-warn-fill: rgba(243, 130, 54, .08); --notice-warn-line: rgba(243, 130, 54, .35);

  /* Model type tags: one hue per type; the border is the hue, the text and
     the ground mix from it */
  --cat-video: #e271ca; --cat-video-soft: #fcf1fa;
  --cat-image: #00c9c6; --cat-image-soft: #e6f9f9;
  --cat-chat: #34cba0; --cat-chat-soft: #ebf9f5;
  --cat-audio: #d41bff; --cat-audio-soft: #fae8ff;
  --cat-voice: #48b9ff; --cat-voice-soft: #edf8ff;
  --cat-3d: #1966ff; --cat-3d-soft: #e8f0ff;
  /* Design v8 type tags: text, border and fill per type */
  --tag-video-ink: #7e4a7d; --tag-video-line: rgba(226, 113, 202, .5); --tag-video-fill: rgba(226, 113, 202, .1);
  --tag-image-ink: #0d767b; --tag-image-line: rgba(0, 201, 198, .5); --tag-image-fill: rgba(0, 201, 198, .1);
  --tag-chat-ink: #277768; --tag-chat-line: rgba(52, 203, 160, .5); --tag-chat-fill: rgba(52, 203, 160, .1);
  --tag-voice-ink: #316e97; --tag-voice-line: rgba(72, 185, 255, .5); --tag-voice-fill: rgba(72, 185, 255, .1);

  /* Dark navy band: the sign-in wall, public heads, the admin bar */
  --band-bg: #1a2330;
  --band-ink: #ebf4fb;
  --band-muted: #b6c0cb;
  --band-faint: #8e99a6;
  --band-line: #2e3846;
  --band-danger: #ff9c87;
  --band-secondary: rgba(235, 244, 251, .62);
  --band-separator: rgba(235, 244, 251, .2);

  /* Brand mark, drawn in CSS on .brand: an ink rounded square, a light arc
     and a purple dot. Dark grounds swap the square and the arc (see .brand). */
  --brand-mark: #1a2330;
  --brand-arc: #fdfdfd;
  --brand-dot: #a585f7;
  --avatar-bg: #1a2330;
  --avatar-ink: #fdfdfd;

  /* Admin top bar and environment marks */
  --bar-bg: #1a2330;
  --bar-ink: #ebf4fb;
  --bar-muted: #a7b1bd;
  --bar-line: #2e3846;
  --bar-hover: rgba(235, 244, 251, .08);
  --env-uat: #f38236;
  --env-uat-badge: #fff4e0; --env-uat-badge-ink: #b45309;
  --env-production: #c23a1a;
  --env-production-badge: #c23a1a; --env-production-badge-ink: #ffffff;
  --env-development-badge: #1a23300d; --env-development-badge-ink: #5e646d;

  /* Media tiles: light grounds and one thin wave, under an image when there is one */
  --tile-1: #eee8fd; --tile-wave-1: #7036f0;
  --tile-2: #fcf1fa; --tile-wave-2: #e271ca;
  --tile-3: #e6f9f9; --tile-wave-3: #00a9a6;
  --tile-4: #fff4e0; --tile-wave-4: #f38236;
  --tile-5: #ebf9f5; --tile-wave-5: #2fb58f;
  --tile-6: #edf8ff; --tile-wave-6: #48b9ff;

  /* Code blocks are always dark */
  --code-bg: #1e1e1e;
  --code-head: #2d2d2d;
  --code-ink: #e8e8e8;
  --code-string: #9fe3c1;
  --code-key: #c4b2ff;
  --code-muted: #a3a3a3;
  --code-line: rgba(255, 255, 255, .08);

  /* Type: small and dense, 14 body, 13 tables, 12 small, 16 titles */
  --font: Inter, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;
  --text-display: 36px; --line-display: 44px;
  --text-page: 20px; --line-page: 28px;
  --text-number: 28px; --line-number: 32px;
  --text-title: 16px; --line-title: 22px;
  --text-section: 16px; --line-section: 22px;
  --text-body: 14px; --line-body: 20px;
  --text-table: 13px; --line-table: 18px;
  --text-small: 12px; --line-small: 16px;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;

  /* Space, shape, depth, motion: one 4px radius, 2px for small tags, flat
     surfaces with only tiny neutral shadows on floating layers */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-small: 2px; --radius-control: 4px; --radius-card: 4px; --radius-overlay: 4px; --radius-pill: 999px; --radius-play: 8px;
  --shadow-raised: 0 0 4px rgba(0, 0, 0, .05);
  --shadow-soft: 0 0 4px rgba(0, 0, 0, .05);
  --shadow-popover: 0 0 4px rgba(0, 0, 0, .18);
  --shadow-menu: 0 0 4px rgba(0, 0, 0, .25);
  --shadow-overlay: 0 6px 16px rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration: 150ms;

  /* Layout: a 48px top bar, a 240px sidebar and a 1380px shell */
  --topbar-height: 48px;
  --site-bar-height: 48px;
  --container: 1380px;
  --sidebar-width: 240px;
  --shell-gap: 32px;
  --control-height: 32px;
  --control-height-sm: 24px;
  --control-height-lg: 40px;
  --control-height-tab: 28px;
  --control-height-cta: 36px;
  --row-height: 44px;
  --drawer-width: 560px;
  --chart-height: 220px;
  --shell-left: max(24px, calc((100vw - var(--container)) / 2));
}

/* Per-console layout values. --shell-left is declared again here so it is
   computed from this console's own --container; public pages use the root
   value. Both consoles share the 1380px shell and the 240px sidebar; the
   admin collapse button narrows the sidebar with .sidebar-collapsed. */
.admin-console {
  --topbar-height: 48px;
  --row-height: 36px;
  --drawer-width: 720px;
}
.customer-console, .admin-console {
  --shell-left: max(24px, calc((100vw - var(--container)) / 2));
}

/* Base. Neither main nor any of its ancestors may set transform, filter,
   contain, backdrop-filter or perspective: the admin top bar and sidebar
   are fixed boxes inside main and would stop following the viewport. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--text-body)/var(--line-body) var(--font); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
main { max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--space-4); min-width: 0; }
h1 { font-size: var(--text-page); line-height: var(--line-page); font-weight: var(--weight-bold); letter-spacing: -.01em; margin: 0 0 var(--space-4); }
h2, legend { font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-body); line-height: var(--line-body); font-weight: 600; }
p { margin: var(--space-3) 0; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
p a, li a, dd a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.code-block :focus-visible, .hero-band :focus-visible { outline-color: var(--bar-ink); }
:target { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
small, .muted { color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.weak { color: var(--faint); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
::selection { background: var(--accent-line); color: var(--ink); }

/* Numbers, identifiers and money. Amounts keep the text face with tabular
   figures; identifiers and code use the monospace face. */
code, pre, .identifier, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.money, .numeric, time { font-variant-numeric: tabular-nums; }
code { font-size: .92em; }
pre { background: var(--inset); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); overflow: auto; white-space: pre-wrap; }
.money, .identifier { white-space: nowrap; }
.money-tail { color: var(--muted); }
.negative, .negative .money-tail { color: var(--danger); }
.money-sign { font: 400 var(--text-small)/var(--line-small) var(--font); }
.copy-button { font-size: var(--text-small); margin-left: var(--space-1); }

/* Fields: inputs, selects, text areas, switches and affixes. A focused field
   shows the accent border and a light ring; the transparent outline keeps a
   mark in forced-colors mode. */
button, input, select, textarea { font: inherit; color: inherit; max-width: 100%; }
input, select, textarea { min-height: var(--control-height); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background-color: var(--field); color: var(--ink); line-height: 20px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 0; box-shadow: var(--focus-ring); }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], [aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { outline: 2px solid var(--danger); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input[type="checkbox"], input[type="radio"] { min-height: auto; padding: 0; accent-color: var(--accent); }
select:not([multiple]):not([size]) { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; vertical-align: top; }
label { font-weight: 500; }
form > div, form > p { margin-bottom: var(--space-4); }
form > label { display: block; margin-top: var(--space-3); margin-bottom: 6px; }
form > input, form > textarea { display: block; width: min(100%, 560px); }
.field-error, [id$="-hint"] { color: var(--danger); font-size: var(--text-small); line-height: var(--line-small); margin: var(--space-1) 0; }
.field-help { color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); margin: var(--space-1) 0; }
.field-count { display: block; text-align: right; color: var(--faint); font-size: var(--text-small); line-height: var(--line-small); }
input[autocomplete="one-time-code"], .otp-input { width: 180px; font-family: var(--mono); font-size: 20px; letter-spacing: .35em; text-align: center; }
input[type="checkbox"].switch { appearance: none; position: relative; flex: none; width: 36px; height: 20px; min-height: 20px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background-color: var(--inset); box-shadow: inset 0 0 0 1px var(--line); vertical-align: middle; cursor: pointer; }
input[type="checkbox"].switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
input[type="checkbox"].switch:checked { background-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
input[type="checkbox"].switch:checked::before { background: var(--band-ink); transform: translateX(16px); }
input[type="checkbox"].switch:disabled { opacity: .3; cursor: not-allowed; }
label:has(> input.switch) { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.input-affix { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-height); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background-color: var(--field); }
.input-affix:hover { border-color: var(--line-hover); }
.input-affix:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.input-affix > span { color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
.input-affix > input { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 5px 0; border: 0; background: transparent; }
.input-affix > input:focus, .input-affix > input:focus-visible { box-shadow: none; }

/* Buttons, in cascade order: outline (the default), purple primary, solid
   ink, ghost, danger, solid danger; disabled comes last, after the
   components. Purple is kept for the one primary action of an area; solid
   ink is the second tier; everything else is an outline on the ink hairline. */
button, .button, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-height); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent; color: var(--ink); font-weight: 500; line-height: 20px; text-align: center; text-decoration: none; cursor: pointer; }
button:hover, .button:hover, .button-secondary:hover { background: var(--hover-wash); border-color: var(--line-hover); color: var(--ink); text-decoration: none; }
button:active, .button:active, .button-secondary:active { background: var(--press-wash); }
button[type="submit"], .button-primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
button[type="submit"]:hover, .button-primary:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); }
button[type="submit"]:active, .button-primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
button.button-accent, .button-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
button.button-accent:hover, .button-accent:hover { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); }
button.button-accent:active, .button-accent:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
button.button-dark, .button-dark { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
button.button-dark:hover, .button-dark:hover { color: var(--on-ink); background: var(--ink-hover); border-color: var(--ink-hover); }
button.button-ghost, .button-ghost { color: var(--secondary); background: transparent; border-color: transparent; }
button.button-ghost:hover, .button-ghost:hover { color: var(--ink); background: var(--hover-wash); border-color: transparent; }
button.button-danger, .button-danger { color: var(--danger); background: transparent; border-color: var(--danger-line); }
button.button-danger:hover, .button-danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
button.button-danger-solid, .button-danger-solid { color: var(--on-accent); background: var(--danger); border-color: var(--danger); }
button.button-danger-solid:hover, .button-danger-solid:hover { color: var(--on-accent); background: var(--danger); border-color: var(--danger); opacity: .88; }
.button-sm { min-height: var(--control-height-sm); padding: 0 8px; font-size: var(--text-small); line-height: var(--line-small); }
.button-lg { min-height: var(--control-height-lg); padding: 0 16px; font-weight: 600; }
.button-block { display: flex; width: 100%; }
button[aria-busy="true"], .button[aria-busy="true"] { opacity: .7; }

/* Segmented control (an ink active segment) and underline tabs */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.segmented > button, .segmented > a { min-height: 26px; padding: 0 10px; border: 0; border-radius: 3px; background: transparent; color: var(--secondary); font-size: var(--text-table); font-weight: 500; text-decoration: none; }
.segmented > button:hover, .segmented > a:hover { background: var(--hover-wash); color: var(--ink); text-decoration: none; }
.segmented > [aria-pressed="true"], .segmented > [aria-current="page"] { background: var(--ink); color: var(--on-ink); font-weight: 500; }
[role="tablist"], .tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); border-bottom: 1px solid var(--line); }
[role="tab"], .tabs a { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; text-decoration: none; }
[role="tab"]:hover, .tabs a:hover { background: transparent; color: var(--ink); text-decoration: none; }
[role="tab"][aria-selected="true"], .tabs [aria-current="page"] { color: var(--ink); font-weight: var(--weight-bold); border-bottom-color: var(--ink); }

/* Status badges and model type tags (the filter chip is the design v9
   chip, at the end of this file). Task states map to the status pairs:
   queued neutral, processing warning, succeeded success, failed danger,
   cancelled muted, reserved (the hold) info. */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 2px 8px; border-radius: var(--radius-control); color: var(--neutral); background: var(--neutral-soft); font-size: var(--text-small); line-height: var(--line-small); font-weight: 500; white-space: nowrap; }
.badge-neutral, .badge-queued { color: var(--neutral); background: var(--neutral-soft); }
.badge-success, .badge-succeeded { color: var(--success); background: var(--success-soft); }
.badge-info, .badge-reserved { color: var(--info); background: var(--info-soft); }
.badge-warning, .badge-processing { color: var(--warning); background: var(--warning-soft); }
.badge-danger, .badge-failed { color: var(--danger); background: var(--danger-soft); }
.badge-muted, .badge-cancelled { color: var(--muted-ink); background: var(--muted-soft); }
.badge-dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag { --tag: var(--faint); display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid var(--tag); border-radius: var(--radius-small); color: color-mix(in srgb, var(--tag) 50%, var(--ink)); background: color-mix(in srgb, var(--tag) 14%, transparent); font-family: var(--mono); font-size: var(--text-small); line-height: 15px; font-weight: 400; white-space: nowrap; }
.tag-video { --tag: var(--cat-video); }
.tag-image { --tag: var(--cat-image); }
.tag-chat { --tag: var(--cat-chat); }
.tag-audio { --tag: var(--cat-audio); }
.tag-voice { --tag: var(--cat-voice); }
.tag-3d { --tag: var(--cat-3d); }

/* Notices. The marks are drawn in CSS; their text is Latin or escapes. */
.notice { position: relative; margin: 0 0 var(--space-4); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--secondary); font-size: var(--text-table); line-height: var(--line-table); }
.notice p { margin: 0; }
.notice-title { display: block; margin: 0 0 2px; color: var(--ink); font-size: var(--text-body); line-height: var(--line-body); font-weight: 600; }
.notice-info, .notice-warning, .notice-danger, .notice-success { padding-left: 42px; }
.notice-info::before, .notice-warning::before, .notice-danger::before, .notice-success::before { position: absolute; top: 13px; left: 16px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--on-accent); font-size: 10px; line-height: 1; font-weight: var(--weight-bold); }
.notice-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.notice-info::before { content: "i"; background: var(--info); }
.notice-warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.notice-warning::before { content: "!"; padding-top: 4px; border-radius: 0; background: var(--warning-icon); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.notice-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.notice-danger::before { content: "!"; background: var(--danger); }
.notice-success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.notice-success::before { content: "\2713"; background: var(--success); }

/* Empty states, cards, stats, the balance card and the checklist. main is a
   transparent container: its sections, .card and fieldsets are the panels,
   each a 1px hairline box with a 4px radius and no shadow. */
.empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.empty-icon { display: none; }
.empty-title { margin: 0 0 var(--space-1); color: var(--ink); font-size: var(--text-section); line-height: var(--line-section); font-weight: 600; }
.empty-text { margin: 0 auto var(--space-4); max-width: 40em; color: var(--muted); font-size: var(--text-body); line-height: var(--line-body); }
.card, main > section, fieldset { min-width: 0; margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
fieldset { margin-top: var(--space-4); }
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-4); }
.card-header h2, .card-header h3 { margin: 0; font-size: var(--text-title); line-height: var(--line-title); font-weight: var(--weight-bold); }
.card-header p { margin: 0; color: var(--muted); font-size: var(--text-table); line-height: var(--line-table); }
.stat { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4) 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.stat-label, .stat-note { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.stat-label { font-size: var(--text-table); font-weight: 400; }
.stat-value { margin: 0; font-size: var(--text-number); line-height: var(--line-number); font-weight: var(--weight-bold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-success .stat-value { color: var(--success); }
.stat-info .stat-value { color: var(--info); }
.stat-warning .stat-value { color: var(--warning); }
.stat-danger .stat-value { color: var(--danger); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); }
.stat-grid > .stat, .stat-grid > .card { margin: 0; }
.hero-balance { position: relative; overflow: hidden; }
.hero-balance::after { content: none; }
.hero-balance > * { position: relative; }
.hero-balance .money { font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--weight-bold); letter-spacing: -.02em; }
.hero-balance .money-tail { font-size: .6em; color: var(--faint); }
.hero-balance-negative .money, .hero-balance-negative .money .money-tail { color: var(--danger); }
.checklist { margin: 0; padding: 0; list-style: none; }
.checklist > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.checklist > li:first-child { border-top: 0; }
.checklist > li::before { content: ""; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-hover); border-radius: 50%; color: var(--on-accent); font-size: 10px; line-height: 1; font-weight: var(--weight-bold); }
.checklist > li.is-done::before { content: "\2713"; background: var(--success); border-color: var(--success); }
.checklist > li.is-unknown::before { border-style: dashed; }
.checklist-name { font-weight: var(--weight-bold); }
.checklist > li.is-done .checklist-name { color: var(--muted); }
.checklist-note { flex: 1 1 12em; min-width: 0; margin: 0; color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.checklist-action { margin-left: auto; }

/* Tables with hairline rows. A bare table scrolls by itself; inside
   .table-scroll it is a real full-width table and the container scrolls.
   Tables keep the panel ground, so rows stay legible on the page grey. */
.table-scroll { max-width: 100%; overflow-x: auto; }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; background: var(--surface); text-align: left; }
.table-scroll > table { display: table; overflow: visible; }
th, td { height: var(--row-height); padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th { color: var(--muted); background: transparent; border-bottom-color: var(--line); font-size: var(--text-small); line-height: var(--line-small); font-weight: 500; }
td { font-size: var(--text-body); }
tbody tr:last-child > td { border-bottom: 0; }
td.numeric, th.numeric { text-align: right; }
:where(tbody tr:hover) > td { background: var(--surface-hover); }
tr[tabindex="0"] { cursor: pointer; }
tr[tabindex="0"]:hover { background: var(--surface-hover); }
.admin-console th, .admin-console td { padding: 8px 12px; }
.admin-console td { font-size: var(--text-table); line-height: var(--line-table); }
dl.data-list { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
dl.data-list.cols-2 { grid-template-columns: minmax(120px, 15%) minmax(0, 1fr) minmax(120px, 15%) minmax(0, 1fr); }
dl.data-list dt { color: var(--muted); font-size: var(--text-table); line-height: var(--line-body); }
dl.data-list dd { min-width: 0; margin: 0; font-size: var(--text-body); }
.admin-console dl.data-list dd { font-size: var(--text-table); }

/* Drawer and dialog (the toast is the design v9 toast, at the end of this file) */
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(var(--drawer-width), 100%); padding: var(--space-6); overflow: auto; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow-overlay); }
.drawer:has(> .drawer-body) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.drawer-header { display: flex; flex: none; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-6); border-bottom: 1px solid var(--line); }
.drawer-header h2, .drawer-header h3 { margin: 0; font-size: var(--text-title); line-height: var(--line-title); font-weight: 600; }
.drawer-header > .button-ghost:last-child { margin-left: auto; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-5) var(--space-6); }
.drawer-footer { display: flex; flex: none; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: var(--backdrop); }
dialog, .dialog { width: min(480px, calc(100% - 32px)); max-width: none; padding: var(--space-6); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); }
dialog::backdrop { background: var(--backdrop, rgba(0, 0, 0, .45)); }
dialog h2, .dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-title); line-height: var(--line-title); font-weight: 600; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

/* Code blocks are always dark; the token classes color keys, strings and
   comments. */
.code-block { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--code-bg); color: var(--code-ink); }
.code-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3) 0 var(--space-4); background: var(--code-head); border-bottom: 1px solid var(--code-line); }
.code-toolbar .spacer { flex: 1 1 auto; }
.code-block pre { margin: 0; padding: var(--space-4); overflow-x: auto; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: var(--text-table); line-height: 20px; white-space: pre; }
.code-block .button-ghost { color: var(--code-muted); border-color: transparent; }
.code-block .button-ghost:hover { color: var(--code-ink); background: var(--code-line); }
.code-block [role="tablist"] { gap: 0 var(--space-4); border-bottom: 0; }
.code-block [role="tab"] { color: var(--code-muted); font-size: var(--text-table); font-weight: 400; }
.code-block [role="tab"]:hover { color: var(--code-ink); }
.code-block [role="tab"][aria-selected="true"] { color: var(--code-ink); border-bottom-color: var(--accent); }
.code-comment, .tok-comment { color: var(--code-muted); }
.tok-key { color: var(--code-key); }
.tok-string { color: var(--code-string); }

/* Write confirmation, origin tag, steps and skeletons */
.confirm-block { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-control); }
.confirm-block > :first-child { margin-top: 0; color: var(--ink); font-weight: 600; }
.admin-console .origin-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--warning-line); border-radius: var(--radius-small); color: var(--warning); font-size: var(--text-small); line-height: 18px; white-space: nowrap; }
.steps:has(> .step) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.step::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-hover); }
.step + .step { padding-left: 24px; background: linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 16px 1px no-repeat; }
.step-done::before { background: var(--success); }
.step-current { color: var(--ink); font-weight: 600; }
.step-current::before { background: var(--accent); }
.step-failed::before { background: var(--danger); }
.step-confirming::before { background: var(--warning-icon); }
.skeleton { display: block; height: 12px; margin: var(--space-2) 0; border-radius: var(--radius-small); background: var(--hover-wash); }
.skeleton-lg { height: 20px; }

/* Dark navy band: the public page heads and other hero strips */
.hero-band { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: 48px; background: var(--band-bg); color: var(--band-ink); border: 0; border-radius: var(--radius-card); }
.hero-band h1, .hero-band h2 { margin: 0; color: var(--band-ink); font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--weight-bold); letter-spacing: -.02em; }
.hero-band p { margin: 0; max-width: 720px; color: var(--band-muted); font-size: 16px; line-height: 1.6; }
.hero-band small, .hero-band .weak, .hero-band .muted { color: var(--band-faint); }
.hero-band a:not([class]) { color: var(--band-muted); }
.hero-band a:not([class]):hover { color: var(--band-ink); }
.hero-pill { align-self: flex-start; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--eyebrow) 50%, transparent); border-radius: var(--radius-small); background: color-mix(in srgb, var(--eyebrow) 10%, transparent); color: var(--eyebrow); font-family: var(--mono); font-size: var(--text-small); line-height: var(--line-small); text-transform: uppercase; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-4) 28px; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat strong { font-size: 28px; line-height: 36px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.hero-stat span { color: var(--band-faint); font-size: var(--text-table); }

/* Media tiles stand in for generated media: a light ground with one thin
   wave, covered by the image when there is one. */
.media-tile { --tile-wave: var(--tile-wave-1); position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; margin: 0; background: var(--tile-1); color: var(--ink); }
.media-tile::before { content: ""; position: absolute; top: 46%; left: -20%; right: -20%; height: 80%; border: 2px solid transparent; border-top-color: var(--tile-wave); border-radius: 50%; opacity: .45; pointer-events: none; }
.media-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-tile > .badge { position: absolute; top: 12px; left: 12px; }
.media-tile-kind { position: absolute; left: 10px; bottom: 10px; padding: 2px 6px; border-radius: var(--radius-small); background: var(--scrim); color: var(--on-ink); font-size: var(--text-small); line-height: var(--line-small); }
.media-tile > figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--scrim); color: var(--on-ink); font-size: var(--text-table); line-height: var(--line-table); font-weight: 600; }
.media-tile > figcaption small { color: var(--band-muted); font-weight: 400; }
.media-tile-2 { --tile-wave: var(--tile-wave-2); background: var(--tile-2); }
.media-tile-3 { --tile-wave: var(--tile-wave-3); background: var(--tile-3); }
.media-tile-4 { --tile-wave: var(--tile-wave-4); background: var(--tile-4); }
.media-tile-5 { --tile-wave: var(--tile-wave-5); background: var(--tile-5); }
.media-tile-6 { --tile-wave: var(--tile-wave-6); background: var(--tile-6); }
.media-tile-wide { aspect-ratio: 16 / 9; }
.media-tile-photo { aspect-ratio: 4 / 3; }
.media-tile-square { aspect-ratio: 1 / 1; }
.media-tile-rounded { border-radius: var(--radius-card); }

/* Model cards: a media tile on top, then type tags, name, model id, text
   and price. They do not lift on hover; the hairline darkens instead. */
.model-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); }
a.model-card:hover { border-color: var(--line-hover); color: var(--ink); text-decoration: none; }
.model-card > .media-tile { flex: none; }
.model-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.model-card h3 { margin: 0; font-size: var(--text-body); line-height: var(--line-body); font-weight: 600; }
.model-card code, .model-id { align-self: flex-start; max-width: 100%; overflow: hidden; padding: 2px 6px; border-radius: var(--radius-small); background: var(--inset); color: var(--muted-ink); font-size: var(--text-small); line-height: var(--line-small); text-overflow: ellipsis; white-space: nowrap; }
.model-card p { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.model-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.model-card-price { display: flex; flex-direction: column; font-size: 15px; line-height: 20px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.model-card-price small { font-weight: 400; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }

/* Filter panel: a panel of option groups; the chosen option is marked by
   aria-pressed or the is-active class. */
.filter-panel { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.filter-panel h2 { margin: 0; font-size: var(--text-section); line-height: var(--line-section); }
.filter-panel fieldset { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.filter-panel legend { margin-bottom: var(--space-2); padding: 0; color: var(--faint); font-size: var(--text-small); line-height: var(--line-small); font-weight: var(--weight-bold); }
.filter-option, .filter-panel fieldset > button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--control-height); padding: 0 8px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); font-weight: 400; text-align: left; }
.filter-option:hover, .filter-panel fieldset > button:hover { background: var(--hover-wash); color: var(--ink); }
.filter-option[aria-pressed="true"], .filter-option.is-active, .filter-panel fieldset > button[aria-pressed="true"], .filter-panel fieldset > button.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.filter-count { color: var(--faint); font-family: var(--mono); font-size: var(--text-small); }

/* Key caps (the table toolbar is the design v9 toolbar, at the end of this file) */
kbd, .kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--muted); font-size: 11px; line-height: 16px; white-space: nowrap; }

/* Bar chart: bars sit on a base line; the class buckets .bar-h-0 to
   .bar-h-20 set the height in steps of five percent. Bars are a neutral
   ink tint, ink on hover; only the chosen bar is purple. */
.bar-chart { display: flex; align-items: flex-end; gap: var(--space-1); height: var(--chart-height); margin: 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.bar-chart > .bar { flex: 1 1 0; }
.bar-chart .bar { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 2px 2px 0 0; background: var(--line-hover); }
.bar-chart .bar:hover { background: var(--ink); }
.bar-chart .bar[aria-pressed="true"], .bar-chart .bar.is-active { background: var(--accent); }
.bar-chart .bar-muted { background: var(--line-strong); }
.bar-h-0 { height: 0; }
.bar-h-1 { height: 5%; }
.bar-h-2 { height: 10%; }
.bar-h-3 { height: 15%; }
.bar-h-4 { height: 20%; }
.bar-h-5 { height: 25%; }
.bar-h-6 { height: 30%; }
.bar-h-7 { height: 35%; }
.bar-h-8 { height: 40%; }
.bar-h-9 { height: 45%; }
.bar-h-10 { height: 50%; }
.bar-h-11 { height: 55%; }
.bar-h-12 { height: 60%; }
.bar-h-13 { height: 65%; }
.bar-h-14 { height: 70%; }
.bar-h-15 { height: 75%; }
.bar-h-16 { height: 80%; }
.bar-h-17 { height: 85%; }
.bar-h-18 { height: 90%; }
.bar-h-19 { height: 95%; }
.bar-h-20 { height: 100%; }

/* Icons: span.icon.icon-NAME with aria-hidden, drawn in currentColor with
   borders and the two pseudo-elements. */
.icon { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; color: inherit; vertical-align: -3px; }
.icon::before, .icon::after { content: ""; position: absolute; box-sizing: border-box; }
.icon.icon-search::before { top: 1px; left: 1px; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; }
.icon.icon-search::after { top: 10px; left: 11px; width: 2px; height: 6px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }
.icon.icon-plus::before, .icon.icon-close::before { top: 7px; left: 2px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.icon.icon-plus::after, .icon.icon-close::after { top: 2px; left: 7px; width: 2px; height: 12px; border-radius: 1px; background: currentColor; }
.icon.icon-close::before, .icon.icon-close::after { transform: rotate(45deg); }
.icon.icon-chevron::before { top: 4px; left: 3px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(1px, 1px) rotate(-45deg); }
.icon.icon-menu::before { top: 3px; left: 1px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.icon.icon-arrow::before { top: 7px; left: 2px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.icon.icon-arrow::after { top: 4px; left: 7px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-1px) rotate(45deg); }
.icon.icon-check::before { top: 1px; left: 5px; width: 6px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.icon.icon-external::before { top: 4px; left: 1px; width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-right-color: transparent; border-radius: 2px; }
.icon.icon-external::after { top: 1px; left: 6px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)); }

/* Shared access-page layout: the sign-in, enrollment, password and disposal
   pages without the console frame. It comes before .page-body, which wins
   where a section is both. */
.access-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: calc(var(--site-bar-height) + 1px); padding: 0 40px; background: var(--paper); border-bottom: 1px solid var(--line); }
.access-header .brand { flex-shrink: 0; min-width: 0; margin-right: 0; color: var(--ink); text-decoration: none; }
.access-header .brand:hover { color: var(--ink); text-decoration: none; }
.access-header .brand small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.access-header .environment-badge { display: block; flex-shrink: 1; min-width: 0; overflow: hidden; line-height: 22px; text-overflow: ellipsis; }
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: var(--space-12); max-width: 960px; margin: var(--space-12) auto; padding: 0 var(--space-4); }
.access-intro { min-width: 0; padding-top: var(--space-6); }
.access-intro h2 { max-width: 420px; margin: 0 0 var(--space-3); font-size: 24px; line-height: 32px; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.access-intro p { max-width: 420px; margin: 0; color: var(--muted); }
.access-card { min-width: 0; padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.access-card h1 { margin: 0 0 var(--space-5); font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.access-card h2 { margin: 0 0 var(--space-2); }

/* The split sign-in: a full-bleed wall of bright stills on the left (58
   percent, half under 1280px) and the form centred on the page grey at the
   right, under the page's bar. Under 1024px only the form remains. The
   stills carry no overlay except a short navy fade under the intro copy. */
.access-split { display: flex; align-items: stretch; gap: 0; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
.access-split > .access-intro { position: relative; display: flex; flex: 0 0 58%; flex-direction: column; justify-content: flex-end; min-height: 100vh; padding: 0; overflow: hidden; background: var(--band-bg); color: var(--band-ink); }
.access-art { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2px; }
.access-art > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.access-split > .access-intro::after { content: ""; position: absolute; inset: auto 0 0 0; height: 240px; background: linear-gradient(to top, rgba(26, 35, 48, .86), rgba(26, 35, 48, .7) 40%, rgba(26, 35, 48, 0)); pointer-events: none; }
.access-intro-copy { position: relative; z-index: 1; padding: 0 40px 40px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.access-split .access-intro h2 { max-width: 520px; margin: 0 0 var(--space-2); color: var(--band-ink); font-size: 28px; line-height: 36px; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.access-split .access-intro p { max-width: 520px; margin: 0; color: var(--band-ink); font-size: var(--text-body); line-height: var(--line-body); }
.access-split > .access-card { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; align-self: stretch; width: auto; min-height: 100vh; margin: 0; padding: 96px 40px 60px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.access-split > .access-card > * { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.access-split > .access-card h1 { margin-bottom: var(--space-5); text-align: center; }

/* Glyphs: the design's 1.5px line icons as filled outlines. An empty span
   or a pseudo-element is painted in currentColor and clipped to the outline,
   so a glyph follows the text color as the stroke did. */
.glyph { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; }
.glyph-menu { clip-path: path("M3.5 5.25L16.5 5.25A0.75 0.75 0 0 1 17.25 6A0.75 0.75 0 0 1 16.5 6.75L3.5 6.75A0.75 0.75 0 0 1 2.75 6A0.75 0.75 0 0 1 3.5 5.25ZM3.5 9.25L16.5 9.25A0.75 0.75 0 0 1 17.25 10A0.75 0.75 0 0 1 16.5 10.75L3.5 10.75A0.75 0.75 0 0 1 2.75 10A0.75 0.75 0 0 1 3.5 9.25ZM3.5 13.25L16.5 13.25A0.75 0.75 0 0 1 17.25 14A0.75 0.75 0 0 1 16.5 14.75L3.5 14.75A0.75 0.75 0 0 1 2.75 14A0.75 0.75 0 0 1 3.5 13.25Z"); }
.glyph-globe { clip-path: path("M18 10A8 8 0 0 1 2 10A8 8 0 0 1 18 10ZM16.5 10A6.5 6.5 0 0 0 3.5 10A6.5 6.5 0 0 0 16.5 10ZM2.75 9.25L17.25 9.25L17.25 10.75L2.75 10.75L2.75 9.25ZM10 1.62L11.15 2.91L11.69 3.61L12.17 4.33L12.59 5.08L12.94 5.84L13.23 6.63L13.46 7.45L13.62 8.28L13.72 9.13L13.75 10L13.72 10.87L13.62 11.72L13.46 12.55L13.23 13.37L12.94 14.16L12.59 14.92L12.17 15.67L11.69 16.39L11.15 17.09L10 18.38L8.85 17.09L8.31 16.39L7.83 15.67L7.41 14.92L7.06 14.16L6.77 13.37L6.54 12.55L6.38 11.72L6.28 10.87L6.25 10L6.28 9.13L6.38 8.28L6.54 7.45L6.77 6.63L7.06 5.84L7.41 5.08L7.83 4.33L8.31 3.61L8.85 2.91ZM10.01 3.87L9.53 4.48L9.11 5.11L8.75 5.76L8.44 6.42L8.19 7.1L8 7.79L7.86 8.51L7.78 9.24L7.75 10L7.78 10.76L7.86 11.49L8 12.21L8.19 12.9L8.44 13.58L8.75 14.24L9.11 14.89L9.53 15.52L10.01 16.13L10 16.12L9.99 16.13L10.47 15.52L10.89 14.89L11.25 14.24L11.56 13.58L11.81 12.9L12 12.21L12.14 11.49L12.22 10.76L12.25 10L12.22 9.24L12.14 8.51L12 7.79L11.81 7.1L11.56 6.42L11.25 5.76L10.89 5.11L10.47 4.48L9.99 3.87L10 3.88Z"); }
/* The console glyphs: the person of the account button (18px), the plus
   of the balance button (14px) and the 20px sidebar shapes. Shape names
   are geometric; each console maps its pages to them. */
.glyph.glyph-person { width: 18px; height: 18px; clip-path: path("M12.38 6.3A3.38 3.38 0 0 1 5.62 6.3A3.38 3.38 0 0 1 12.38 6.3ZM11.03 6.3A2.02 2.02 0 0 0 6.98 6.3A2.02 2.02 0 0 0 11.03 6.3ZM2.93 14.79L3 13.9L3.24 13.04L3.63 12.25L4.14 11.57L4.77 10.99L5.49 10.51L6.28 10.15L7.14 9.88L8.05 9.73L9 9.67L9.95 9.73L10.86 9.88L11.72 10.15L12.51 10.51L13.23 10.99L13.86 11.57L14.37 12.25L14.76 13.04L15 13.9L15.07 14.79A0.68 0.68 0 0 1 14.46 15.52A0.68 0.68 0 0 1 13.73 14.91L13.66 14.14L13.49 13.52L13.22 12.96L12.85 12.48L12.4 12.05L11.85 11.7L11.24 11.41L10.55 11.2L9.8 11.07L9 11.03L8.2 11.07L7.45 11.2L6.76 11.41L6.15 11.7L5.6 12.05L5.15 12.48L4.78 12.96L4.51 13.52L4.34 14.14L4.27 14.91A0.68 0.68 0 0 1 3.54 15.52A0.68 0.68 0 0 1 2.93 14.79Z"); }
.glyph.glyph-plus { width: 14px; height: 14px; clip-path: path("M7.75 3L7.75 11A0.75 0.75 0 0 1 7 11.75A0.75 0.75 0 0 1 6.25 11L6.25 3A0.75 0.75 0 0 1 7 2.25A0.75 0.75 0 0 1 7.75 3ZM3 6.25L11 6.25A0.75 0.75 0 0 1 11.75 7A0.75 0.75 0 0 1 11 7.75L3 7.75A0.75 0.75 0 0 1 2.25 7A0.75 0.75 0 0 1 3 6.25Z"); }
.glyph-grid { clip-path: path("M4 2.25L8 2.25A1.75 1.75 0 0 1 9.75 4L9.75 8A1.75 1.75 0 0 1 8 9.75L4 9.75A1.75 1.75 0 0 1 2.25 8L2.25 4A1.75 1.75 0 0 1 4 2.25ZM4 3.75A0.25 0.25 0 0 0 3.75 4L3.75 8A0.25 0.25 0 0 0 4 8.25L8 8.25A0.25 0.25 0 0 0 8.25 8L8.25 4A0.25 0.25 0 0 0 8 3.75L4 3.75ZM12 2.25L16 2.25A1.75 1.75 0 0 1 17.75 4L17.75 8A1.75 1.75 0 0 1 16 9.75L12 9.75A1.75 1.75 0 0 1 10.25 8L10.25 4A1.75 1.75 0 0 1 12 2.25ZM12 3.75A0.25 0.25 0 0 0 11.75 4L11.75 8A0.25 0.25 0 0 0 12 8.25L16 8.25A0.25 0.25 0 0 0 16.25 8L16.25 4A0.25 0.25 0 0 0 16 3.75L12 3.75ZM4 10.25L8 10.25A1.75 1.75 0 0 1 9.75 12L9.75 16A1.75 1.75 0 0 1 8 17.75L4 17.75A1.75 1.75 0 0 1 2.25 16L2.25 12A1.75 1.75 0 0 1 4 10.25ZM4 11.75A0.25 0.25 0 0 0 3.75 12L3.75 16A0.25 0.25 0 0 0 4 16.25L8 16.25A0.25 0.25 0 0 0 8.25 16L8.25 12A0.25 0.25 0 0 0 8 11.75L4 11.75ZM12 10.25L16 10.25A1.75 1.75 0 0 1 17.75 12L17.75 16A1.75 1.75 0 0 1 16 17.75L12 17.75A1.75 1.75 0 0 1 10.25 16L10.25 12A1.75 1.75 0 0 1 12 10.25ZM12 11.75A0.25 0.25 0 0 0 11.75 12L11.75 16A0.25 0.25 0 0 0 12 16.25L16 16.25A0.25 0.25 0 0 0 16.25 16L16.25 12A0.25 0.25 0 0 0 16 11.75L12 11.75Z"); }
.glyph-play { clip-path: path("M4 3.25L16 3.25A2.25 2.25 0 0 1 18.25 5.5L18.25 14.5A2.25 2.25 0 0 1 16 16.75L4 16.75A2.25 2.25 0 0 1 1.75 14.5L1.75 5.5A2.25 2.25 0 0 1 4 3.25ZM4 4.75A0.75 0.75 0 0 0 3.25 5.5L3.25 14.5A0.75 0.75 0 0 0 4 15.25L16 15.25A0.75 0.75 0 0 0 16.75 14.5L16.75 5.5A0.75 0.75 0 0 0 16 4.75L4 4.75ZM12.9 9.36A0.75 0.75 0 0 1 12.9 10.64L8.9 13.14A0.75 0.75 0 0 1 7.75 12.5L7.75 7.5A0.75 0.75 0 0 1 8.9 6.86ZM9.25 8.85L9.25 11.15L11.08 10Z"); }
.glyph-list { clip-path: path("M7.5 4.75L16.5 4.75A0.75 0.75 0 0 1 17.25 5.5A0.75 0.75 0 0 1 16.5 6.25L7.5 6.25A0.75 0.75 0 0 1 6.75 5.5A0.75 0.75 0 0 1 7.5 4.75ZM7.5 9.25L16.5 9.25A0.75 0.75 0 0 1 17.25 10A0.75 0.75 0 0 1 16.5 10.75L7.5 10.75A0.75 0.75 0 0 1 6.75 10A0.75 0.75 0 0 1 7.5 9.25ZM7.5 13.75L16.5 13.75A0.75 0.75 0 0 1 17.25 14.5A0.75 0.75 0 0 1 16.5 15.25L7.5 15.25A0.75 0.75 0 0 1 6.75 14.5A0.75 0.75 0 0 1 7.5 13.75ZM3.5 4.75L4 4.75A0.75 0.75 0 0 1 4.75 5.5A0.75 0.75 0 0 1 4 6.25L3.5 6.25A0.75 0.75 0 0 1 2.75 5.5A0.75 0.75 0 0 1 3.5 4.75ZM3.5 9.25L4 9.25A0.75 0.75 0 0 1 4.75 10A0.75 0.75 0 0 1 4 10.75L3.5 10.75A0.75 0.75 0 0 1 2.75 10A0.75 0.75 0 0 1 3.5 9.25ZM3.5 13.75L4 13.75A0.75 0.75 0 0 1 4.75 14.5A0.75 0.75 0 0 1 4 15.25L3.5 15.25A0.75 0.75 0 0 1 2.75 14.5A0.75 0.75 0 0 1 3.5 13.75Z"); }
.glyph-card { clip-path: path("M4 4.25L16 4.25A2.25 2.25 0 0 1 18.25 6.5L18.25 14.5A2.25 2.25 0 0 1 16 16.75L4 16.75A2.25 2.25 0 0 1 1.75 14.5L1.75 6.5A2.25 2.25 0 0 1 4 4.25ZM4 5.75A0.75 0.75 0 0 0 3.25 6.5L3.25 14.5A0.75 0.75 0 0 0 4 15.25L16 15.25A0.75 0.75 0 0 0 16.75 14.5L16.75 6.5A0.75 0.75 0 0 0 16 5.75L4 5.75ZM2.5 7.75L17.5 7.75A0.75 0.75 0 0 1 18.25 8.5A0.75 0.75 0 0 1 17.5 9.25L2.5 9.25A0.75 0.75 0 0 1 1.75 8.5A0.75 0.75 0 0 1 2.5 7.75ZM12.5 11.75L14.5 11.75A0.75 0.75 0 0 1 15.25 12.5A0.75 0.75 0 0 1 14.5 13.25L12.5 13.25A0.75 0.75 0 0 1 11.75 12.5A0.75 0.75 0 0 1 12.5 11.75Z"); }
.glyph-tag { clip-path: path("M2.25 3A0.75 0.75 0 0 1 3 2.25L9.5 2.25A0.75 0.75 0 0 1 10.03 2.47L17.53 9.97A0.75 0.75 0 0 1 17.53 11.03L11.03 17.53A0.75 0.75 0 0 1 9.97 17.53L2.47 10.03A0.75 0.75 0 0 1 2.25 9.5ZM3.75 9.19L10.5 15.94L15.94 10.5L9.19 3.75L3.75 3.75ZM8.25 6.5A1.75 1.75 0 0 1 4.75 6.5A1.75 1.75 0 0 1 8.25 6.5ZM6.75 6.5A0.25 0.25 0 0 0 6.25 6.5A0.25 0.25 0 0 0 6.75 6.5Z"); }
.glyph-key { clip-path: path("M11.25 12.5A4.25 4.25 0 0 1 2.75 12.5A4.25 4.25 0 0 1 11.25 12.5ZM9.75 12.5A2.75 2.75 0 0 0 4.25 12.5A2.75 2.75 0 0 0 9.75 12.5ZM8.97 9.47L15.47 2.97A0.75 0.75 0 0 1 16.53 2.97A0.75 0.75 0 0 1 16.53 4.03L10.03 10.53A0.75 0.75 0 0 1 8.97 10.53A0.75 0.75 0 0 1 8.97 9.47ZM14.03 5.47L16.03 7.47A0.75 0.75 0 0 1 16.03 8.53A0.75 0.75 0 0 1 14.97 8.53L12.97 6.53A0.75 0.75 0 0 1 12.97 5.47A0.75 0.75 0 0 1 14.03 5.47Z"); }
.glyph-swap { clip-path: path("M3.5 6.25L12.69 6.25L10.97 4.53A0.75 0.75 0 0 1 10.97 3.47A0.75 0.75 0 0 1 12.03 3.47L15.03 6.47A0.75 0.75 0 0 1 14.5 7.75L3.5 7.75A0.75 0.75 0 0 1 2.75 7A0.75 0.75 0 0 1 3.5 6.25ZM16.5 13.75L7.31 13.75L9.03 15.47A0.75 0.75 0 0 1 9.03 16.53A0.75 0.75 0 0 1 7.97 16.53L4.97 13.53A0.75 0.75 0 0 1 5.5 12.25L16.5 12.25A0.75 0.75 0 0 1 17.25 13A0.75 0.75 0 0 1 16.5 13.75Z"); }
.glyph-doc { clip-path: path("M4.25 2.5A0.75 0.75 0 0 1 5 1.75L11.5 1.75A0.75 0.75 0 0 1 12.03 1.97L15.53 5.47A0.75 0.75 0 0 1 15.75 6L15.75 17.5A0.75 0.75 0 0 1 15 18.25L5 18.25A0.75 0.75 0 0 1 4.25 17.5ZM5.75 16.75L14.25 16.75L14.25 6.31L11.19 3.25L5.75 3.25ZM12.25 2.5L12.25 5.25L15 5.25A0.75 0.75 0 0 1 15.75 6A0.75 0.75 0 0 1 15 6.75L11.5 6.75A0.75 0.75 0 0 1 10.75 6L10.75 2.5A0.75 0.75 0 0 1 11.5 1.75A0.75 0.75 0 0 1 12.25 2.5ZM7.5 9.25L12.5 9.25A0.75 0.75 0 0 1 13.25 10A0.75 0.75 0 0 1 12.5 10.75L7.5 10.75A0.75 0.75 0 0 1 6.75 10A0.75 0.75 0 0 1 7.5 9.25ZM7.5 12.25L12.5 12.25A0.75 0.75 0 0 1 13.25 13A0.75 0.75 0 0 1 12.5 13.75L7.5 13.75A0.75 0.75 0 0 1 6.75 13A0.75 0.75 0 0 1 7.5 12.25Z"); }
.glyph-shield { clip-path: path("M9.71 1.81A0.75 0.75 0 0 1 10.29 1.81L16.29 4.31A0.75 0.75 0 0 1 16.75 5L16.75 9.5A0.75 0.75 0 0 1 16.75 9.55L16.67 10.76L16.43 11.94L16.04 13.03L15.51 14.03L14.86 14.95L14.1 15.77L13.26 16.5L12.33 17.15L11.34 17.71L10.31 18.18A0.75 0.75 0 0 1 9.69 18.18L8.66 17.71L7.67 17.15L6.74 16.5L5.9 15.77L5.14 14.95L4.49 14.03L3.96 13.03L3.57 11.94L3.33 10.76L3.25 9.55A0.75 0.75 0 0 1 3.25 9.5L3.25 5A0.75 0.75 0 0 1 3.71 4.31ZM4.75 5.5L4.75 9.48L4.82 10.56L5.02 11.53L5.34 12.43L5.77 13.25L6.31 14L6.94 14.69L7.67 15.32L8.47 15.88L9.35 16.38L10 16.67L10.65 16.38L11.53 15.88L12.33 15.32L13.06 14.69L13.69 14L14.23 13.25L14.66 12.43L14.98 11.53L15.18 10.56L15.25 9.48L15.25 5.5L10 3.31Z"); }
.glyph-clock { clip-path: path("M17.75 10A7.75 7.75 0 0 1 2.25 10A7.75 7.75 0 0 1 17.75 10ZM16.25 10A6.25 6.25 0 0 0 3.75 10A6.25 6.25 0 0 0 16.25 10ZM10.75 6L10.75 9.64L12.97 11.41A0.75 0.75 0 0 1 13.09 12.47A0.75 0.75 0 0 1 12.03 12.59L9.53 10.59A0.75 0.75 0 0 1 9.25 10L9.25 6A0.75 0.75 0 0 1 10 5.25A0.75 0.75 0 0 1 10.75 6Z"); }
/* The administration sidebar shapes. */
.glyph-people { clip-path: path("M11 7A3.5 3.5 0 0 1 4 7A3.5 3.5 0 0 1 11 7ZM9.5 7A2 2 0 0 0 5.5 7A2 2 0 0 0 9.5 7ZM1.75 15.94L1.82 15.07L2.04 14.21L2.39 13.42L2.87 12.73L3.46 12.13L4.14 11.64L4.89 11.25L5.71 10.97L6.59 10.8L7.45 10.75A0.75 0.75 0 0 1 7.55 10.75L8.41 10.8L9.29 10.97L10.11 11.25L10.86 11.64L11.54 12.13L12.13 12.73L12.61 13.42L12.96 14.21L13.18 15.07L13.25 15.94A0.75 0.75 0 0 1 12.56 16.75A0.75 0.75 0 0 1 11.75 16.06L11.69 15.32L11.54 14.71L11.29 14.16L10.97 13.68L10.56 13.27L10.08 12.92L9.52 12.64L8.9 12.43L8.23 12.3L7.5 12.25L6.77 12.3L6.1 12.43L5.48 12.64L4.92 12.92L4.44 13.27L4.03 13.68L3.71 14.16L3.46 14.71L3.31 15.32L3.25 16.06A0.75 0.75 0 0 1 2.44 16.75A0.75 0.75 0 0 1 1.75 15.94ZM13.25 3.79L13.61 3.92L14 4.12L14.36 4.36L14.68 4.65L14.96 4.98L15.2 5.34L15.39 5.73L15.53 6.14L15.61 6.57L15.64 7L15.61 7.43L15.53 7.86L15.39 8.27L15.2 8.66L14.96 9.02L14.68 9.35L14.36 9.64L14 9.88L13.61 10.08L13.25 10.21A0.75 0.75 0 0 1 12.29 9.75A0.75 0.75 0 0 1 12.75 8.79L13.02 8.7L13.23 8.59L13.43 8.45L13.61 8.29L13.76 8.11L13.89 7.91L14 7.7L14.07 7.47L14.12 7.24L14.13 7L14.12 6.76L14.07 6.53L14 6.3L13.89 6.09L13.76 5.89L13.61 5.71L13.43 5.55L13.23 5.41L13.02 5.3L12.75 5.21A0.75 0.75 0 0 1 12.29 4.25A0.75 0.75 0 0 1 13.25 3.79ZM15.32 11.12L15.79 11.34L16.28 11.65L16.72 12.01L17.11 12.43L17.45 12.9L17.73 13.43L17.96 14L18.12 14.63L18.22 15.29L18.25 15.97A0.75 0.75 0 0 1 17.53 16.75A0.75 0.75 0 0 1 16.75 16.03L16.72 15.44L16.65 14.93L16.53 14.47L16.37 14.06L16.18 13.7L15.95 13.38L15.69 13.1L15.4 12.87L15.07 12.66L14.68 12.48A0.75 0.75 0 0 1 14.32 11.48A0.75 0.75 0 0 1 15.32 11.12Z"); }
.glyph-person-add { clip-path: path("M11.75 7A3.75 3.75 0 0 1 4.25 7A3.75 3.75 0 0 1 11.75 7ZM10.25 7A2.25 2.25 0 0 0 5.75 7A2.25 2.25 0 0 0 10.25 7ZM1.75 16.44L1.83 15.51L2.06 14.58L2.44 13.73L2.96 12.97L3.59 12.31L4.32 11.76L5.14 11.32L6.04 11.01L6.99 10.81L7.95 10.75A0.75 0.75 0 0 1 8.05 10.75L9.01 10.81L9.96 11.01L10.86 11.32L11.68 11.76L12.41 12.31L13.04 12.97L13.56 13.73L13.94 14.58L14.17 15.51L14.25 16.44A0.75 0.75 0 0 1 13.56 17.25A0.75 0.75 0 0 1 12.75 16.56L12.69 15.75L12.51 15.08L12.24 14.46L11.87 13.92L11.41 13.44L10.87 13.03L10.25 12.7L9.56 12.46L8.81 12.3L8 12.25L7.19 12.3L6.44 12.46L5.75 12.7L5.13 13.03L4.59 13.44L4.13 13.92L3.76 14.46L3.49 15.08L3.31 15.75L3.25 16.56A0.75 0.75 0 0 1 2.44 17.25A0.75 0.75 0 0 1 1.75 16.44ZM16.25 6L16.25 11A0.75 0.75 0 0 1 15.5 11.75A0.75 0.75 0 0 1 14.75 11L14.75 6A0.75 0.75 0 0 1 15.5 5.25A0.75 0.75 0 0 1 16.25 6ZM13 7.75L18 7.75A0.75 0.75 0 0 1 18.75 8.5A0.75 0.75 0 0 1 18 9.25L13 9.25A0.75 0.75 0 0 1 12.25 8.5A0.75 0.75 0 0 1 13 7.75Z"); }
.glyph-database { clip-path: path("M3.32 4.97L3.54 4.49L3.87 4.06L4.29 3.7L4.77 3.38L5.32 3.1L5.93 2.86L6.59 2.66L7.3 2.5L8.04 2.38L8.82 2.3L9.6 2.25L10.4 2.25L11.18 2.3L11.96 2.38L12.7 2.5L13.41 2.66L14.07 2.86L14.68 3.1L15.23 3.38L15.71 3.7L16.13 4.06L16.46 4.49L16.68 4.97L16.74 5.39A0.75 0.75 0 0 1 16.74 5.61L16.68 6.03L16.46 6.51L16.13 6.94L15.71 7.3L15.23 7.62L14.68 7.9L14.07 8.14L13.41 8.34L12.7 8.5L11.96 8.62L11.18 8.7L10.4 8.75L9.6 8.75L8.82 8.7L8.04 8.62L7.3 8.5L6.59 8.34L5.93 8.14L5.32 7.9L4.77 7.62L4.29 7.3L3.87 6.94L3.54 6.51L3.32 6.03L3.26 5.61A0.75 0.75 0 0 1 3.26 5.39ZM4.76 5.5L4.77 5.6L4.83 5.73L4.97 5.9L5.2 6.11L5.52 6.32L5.93 6.53L6.42 6.72L6.98 6.89L7.59 7.03L8.25 7.13L8.94 7.21L9.64 7.25L10.36 7.25L11.06 7.21L11.75 7.13L12.41 7.03L13.02 6.89L13.58 6.72L14.07 6.53L14.48 6.32L14.8 6.11L15.03 5.9L15.17 5.73L15.23 5.6L15.24 5.5L15.23 5.4L15.17 5.27L15.03 5.1L14.8 4.89L14.48 4.68L14.07 4.47L13.58 4.28L13.02 4.11L12.41 3.97L11.75 3.87L11.06 3.79L10.36 3.75L9.64 3.75L8.94 3.79L8.25 3.87L7.59 3.97L6.98 4.11L6.42 4.28L5.93 4.47L5.52 4.68L5.2 4.89L4.97 5.1L4.83 5.27L4.77 5.4ZM4.75 5.5L4.75 9.93L4.79 10.14L4.9 10.33L5.15 10.57L5.54 10.83L6.05 11.08L6.68 11.31L7.41 11.49L8.21 11.63L9.08 11.72L10 11.75L10.92 11.72L11.79 11.63L12.59 11.49L13.32 11.31L13.95 11.08L14.46 10.83L14.85 10.57L15.1 10.33L15.21 10.14L15.25 9.93L15.25 5.5A0.75 0.75 0 0 1 16 4.75A0.75 0.75 0 0 1 16.75 5.5L16.75 10A0.75 0.75 0 0 1 16.74 10.14L16.63 10.68L16.29 11.26L15.8 11.74L15.21 12.14L14.53 12.47L13.76 12.74L12.91 12.96L11.99 13.12L11.02 13.22L10.02 13.25A0.75 0.75 0 0 1 9.98 13.25L8.98 13.22L8.01 13.12L7.09 12.96L6.24 12.74L5.47 12.47L4.79 12.14L4.2 11.74L3.71 11.26L3.37 10.68L3.26 10.14A0.75 0.75 0 0 1 3.25 10L3.25 5.5A0.75 0.75 0 0 1 4 4.75A0.75 0.75 0 0 1 4.75 5.5ZM4.75 10L4.75 14.43L4.79 14.64L4.9 14.83L5.15 15.07L5.54 15.33L6.05 15.58L6.68 15.81L7.41 15.99L8.21 16.13L9.08 16.22L10 16.25L10.92 16.22L11.79 16.13L12.59 15.99L13.32 15.81L13.95 15.58L14.46 15.33L14.85 15.07L15.1 14.83L15.21 14.64L15.25 14.43L15.25 10A0.75 0.75 0 0 1 16 9.25A0.75 0.75 0 0 1 16.75 10L16.75 14.5A0.75 0.75 0 0 1 16.74 14.64L16.63 15.18L16.29 15.76L15.8 16.24L15.21 16.64L14.53 16.97L13.76 17.24L12.91 17.46L11.99 17.62L11.02 17.72L10.02 17.75A0.75 0.75 0 0 1 9.98 17.75L8.98 17.72L8.01 17.62L7.09 17.46L6.24 17.24L5.47 16.97L4.79 16.64L4.2 16.24L3.71 15.76L3.37 15.18L3.26 14.64A0.75 0.75 0 0 1 3.25 14.5L3.25 10A0.75 0.75 0 0 1 4 9.25A0.75 0.75 0 0 1 4.75 10Z"); }
.glyph-bank { clip-path: path("M2.11 6.86L9.61 2.36A0.75 0.75 0 0 1 10.39 2.36L17.89 6.86A0.75 0.75 0 0 1 18.14 7.89A0.75 0.75 0 0 1 17.11 8.14L10 3.87L2.89 8.14A0.75 0.75 0 0 1 1.86 7.89A0.75 0.75 0 0 1 2.11 6.86ZM5.25 9L5.25 14.5A0.75 0.75 0 0 1 4.5 15.25A0.75 0.75 0 0 1 3.75 14.5L3.75 9A0.75 0.75 0 0 1 4.5 8.25A0.75 0.75 0 0 1 5.25 9ZM9.25 9L9.25 14.5A0.75 0.75 0 0 1 8.5 15.25A0.75 0.75 0 0 1 7.75 14.5L7.75 9A0.75 0.75 0 0 1 8.5 8.25A0.75 0.75 0 0 1 9.25 9ZM12.25 9L12.25 14.5A0.75 0.75 0 0 1 11.5 15.25A0.75 0.75 0 0 1 10.75 14.5L10.75 9A0.75 0.75 0 0 1 11.5 8.25A0.75 0.75 0 0 1 12.25 9ZM16.25 9L16.25 14.5A0.75 0.75 0 0 1 15.5 15.25A0.75 0.75 0 0 1 14.75 14.5L14.75 9A0.75 0.75 0 0 1 15.5 8.25A0.75 0.75 0 0 1 16.25 9ZM2.5 16.25L17.5 16.25A0.75 0.75 0 0 1 18.25 17A0.75 0.75 0 0 1 17.5 17.75L2.5 17.75A0.75 0.75 0 0 1 1.75 17A0.75 0.75 0 0 1 2.5 16.25Z"); }
.glyph-search { clip-path: path("M15.25 9A6.25 6.25 0 0 1 2.75 9A6.25 6.25 0 0 1 15.25 9ZM13.75 9A4.75 4.75 0 0 0 4.25 9A4.75 4.75 0 0 0 13.75 9ZM13.53 12.47L17.53 16.47A0.75 0.75 0 0 1 17.53 17.53A0.75 0.75 0 0 1 16.47 17.53L12.47 13.53A0.75 0.75 0 0 1 12.47 12.47A0.75 0.75 0 0 1 13.53 12.47Z"); }
.glyph-receipt { clip-path: path("M4.25 2.5A0.75 0.75 0 0 1 5 1.75L15 1.75A0.75 0.75 0 0 1 15.75 2.5L15.75 17.5A0.75 0.75 0 0 1 14.61 18.14L12.5 16.87L10.39 18.14A0.75 0.75 0 0 1 9.61 18.14L7.5 16.87L5.39 18.14A0.75 0.75 0 0 1 4.25 17.5ZM5.75 16.18L7.11 15.36A0.75 0.75 0 0 1 7.89 15.36L10 16.63L12.11 15.36A0.75 0.75 0 0 1 12.89 15.36L14.25 16.18L14.25 3.25L5.75 3.25ZM7.5 6.25L12.5 6.25A0.75 0.75 0 0 1 13.25 7A0.75 0.75 0 0 1 12.5 7.75L7.5 7.75A0.75 0.75 0 0 1 6.75 7A0.75 0.75 0 0 1 7.5 6.25ZM7.5 9.75L12.5 9.75A0.75 0.75 0 0 1 13.25 10.5A0.75 0.75 0 0 1 12.5 11.25L7.5 11.25A0.75 0.75 0 0 1 6.75 10.5A0.75 0.75 0 0 1 7.5 9.75Z"); }
.glyph-hourglass { clip-path: path("M5.5 1.75L14.5 1.75A0.75 0.75 0 0 1 15.25 2.5A0.75 0.75 0 0 1 14.5 3.25L5.5 3.25A0.75 0.75 0 0 1 4.75 2.5A0.75 0.75 0 0 1 5.5 1.75ZM5.5 16.75L14.5 16.75A0.75 0.75 0 0 1 15.25 17.5A0.75 0.75 0 0 1 14.5 18.25L5.5 18.25A0.75 0.75 0 0 1 4.75 17.5A0.75 0.75 0 0 1 5.5 16.75ZM7.25 2.5L7.25 4.98L7.27 5.34L7.34 5.68L7.44 6.01L7.59 6.32L7.78 6.62L8 6.88L8.25 7.12L8.53 7.32L8.83 7.49L9.15 7.61L9.48 7.7L9.83 7.74L10.17 7.74L10.52 7.7L10.85 7.61L11.17 7.49L11.47 7.32L11.75 7.12L12 6.88L12.22 6.62L12.41 6.32L12.56 6.01L12.66 5.68L12.73 5.34L12.75 4.98L12.75 2.5A0.75 0.75 0 0 1 13.5 1.75A0.75 0.75 0 0 1 14.25 2.5L14.25 5A0.75 0.75 0 0 1 14.25 5.05L14.22 5.53L14.12 6.06L13.95 6.57L13.73 7.05L13.44 7.5L13.1 7.91L12.71 8.28L12.28 8.59L11.81 8.85L11.31 9.04L10.8 9.18L10.27 9.24L9.73 9.24L9.2 9.18L8.69 9.04L8.19 8.85L7.72 8.59L7.29 8.28L6.9 7.91L6.56 7.5L6.27 7.05L6.05 6.57L5.88 6.06L5.78 5.53L5.75 5.05A0.75 0.75 0 0 1 5.75 5L5.75 2.5A0.75 0.75 0 0 1 6.5 1.75A0.75 0.75 0 0 1 7.25 2.5ZM5.75 17.5L5.75 15A0.75 0.75 0 0 1 5.75 14.95L5.78 14.47L5.88 13.94L6.05 13.43L6.27 12.95L6.56 12.5L6.9 12.09L7.29 11.72L7.72 11.41L8.19 11.15L8.69 10.96L9.2 10.82L9.73 10.76L10.27 10.76L10.8 10.82L11.31 10.96L11.81 11.15L12.28 11.41L12.71 11.72L13.1 12.09L13.44 12.5L13.73 12.95L13.95 13.43L14.12 13.94L14.22 14.47L14.25 14.95A0.75 0.75 0 0 1 14.25 15L14.25 17.5A0.75 0.75 0 0 1 13.5 18.25A0.75 0.75 0 0 1 12.75 17.5L12.75 15.02L12.73 14.66L12.66 14.32L12.56 13.99L12.41 13.68L12.22 13.38L12 13.12L11.75 12.88L11.47 12.68L11.17 12.51L10.85 12.39L10.52 12.3L10.17 12.26L9.83 12.26L9.48 12.3L9.15 12.39L8.83 12.51L8.53 12.68L8.25 12.88L8 13.12L7.78 13.38L7.59 13.68L7.44 13.99L7.34 14.32L7.27 14.66L7.25 15.02L7.25 17.5A0.75 0.75 0 0 1 6.5 18.25A0.75 0.75 0 0 1 5.75 17.5Z"); }
.glyph-lock { clip-path: path("M5.5 8.25L14.5 8.25A2.25 2.25 0 0 1 16.75 10.5L16.75 16A2.25 2.25 0 0 1 14.5 18.25L5.5 18.25A2.25 2.25 0 0 1 3.25 16L3.25 10.5A2.25 2.25 0 0 1 5.5 8.25ZM5.5 9.75A0.75 0.75 0 0 0 4.75 10.5L4.75 16A0.75 0.75 0 0 0 5.5 16.75L14.5 16.75A0.75 0.75 0 0 0 15.25 16L15.25 10.5A0.75 0.75 0 0 0 14.5 9.75L5.5 9.75ZM5.75 9L5.75 6.5A0.75 0.75 0 0 1 5.75 6.45L5.78 5.97L5.88 5.44L6.05 4.93L6.27 4.45L6.56 4L6.9 3.59L7.29 3.22L7.72 2.91L8.19 2.65L8.69 2.46L9.2 2.32L9.73 2.26L10.27 2.26L10.8 2.32L11.31 2.46L11.81 2.65L12.28 2.91L12.71 3.22L13.1 3.59L13.44 4L13.73 4.45L13.95 4.93L14.12 5.44L14.22 5.97L14.25 6.45A0.75 0.75 0 0 1 14.25 6.5L14.25 9A0.75 0.75 0 0 1 13.5 9.75A0.75 0.75 0 0 1 12.75 9L12.75 6.52L12.73 6.16L12.66 5.82L12.56 5.49L12.41 5.18L12.22 4.88L12 4.62L11.75 4.38L11.47 4.18L11.17 4.01L10.85 3.89L10.52 3.8L10.17 3.76L9.83 3.76L9.48 3.8L9.15 3.89L8.83 4.01L8.53 4.18L8.25 4.38L8 4.62L7.78 4.88L7.59 5.18L7.44 5.49L7.34 5.82L7.27 6.16L7.25 6.52L7.25 9A0.75 0.75 0 0 1 6.5 9.75A0.75 0.75 0 0 1 5.75 9Z"); }
.glyph-servers { clip-path: path("M4 2.25L16 2.25A1.75 1.75 0 0 1 17.75 4L17.75 7.5A1.75 1.75 0 0 1 16 9.25L4 9.25A1.75 1.75 0 0 1 2.25 7.5L2.25 4A1.75 1.75 0 0 1 4 2.25ZM4 3.75A0.25 0.25 0 0 0 3.75 4L3.75 7.5A0.25 0.25 0 0 0 4 7.75L16 7.75A0.25 0.25 0 0 0 16.25 7.5L16.25 4A0.25 0.25 0 0 0 16 3.75L4 3.75ZM4 10.75L16 10.75A1.75 1.75 0 0 1 17.75 12.5L17.75 16A1.75 1.75 0 0 1 16 17.75L4 17.75A1.75 1.75 0 0 1 2.25 16L2.25 12.5A1.75 1.75 0 0 1 4 10.75ZM4 12.25A0.25 0.25 0 0 0 3.75 12.5L3.75 16A0.25 0.25 0 0 0 4 16.25L16 16.25A0.25 0.25 0 0 0 16.25 16L16.25 12.5A0.25 0.25 0 0 0 16 12.25L4 12.25ZM6 5L6.5 5A0.75 0.75 0 0 1 7.25 5.75A0.75 0.75 0 0 1 6.5 6.5L6 6.5A0.75 0.75 0 0 1 5.25 5.75A0.75 0.75 0 0 1 6 5ZM6 13.5L6.5 13.5A0.75 0.75 0 0 1 7.25 14.25A0.75 0.75 0 0 1 6.5 15L6 15A0.75 0.75 0 0 1 5.25 14.25A0.75 0.75 0 0 1 6 13.5Z"); }
.glyph-layers { clip-path: path("M9.65 1.84A0.75 0.75 0 0 1 10.35 1.84L17.85 5.84A0.75 0.75 0 0 1 17.85 7.16L10.35 11.16A0.75 0.75 0 0 1 9.65 11.16L2.15 7.16A0.75 0.75 0 0 1 2.15 5.84ZM4.09 6.5L10 9.65L15.91 6.5L10 3.35ZM2.85 9.34L10 13.15L17.15 9.34A0.75 0.75 0 0 1 18.16 9.65A0.75 0.75 0 0 1 17.85 10.66L10.35 14.66A0.75 0.75 0 0 1 9.65 14.66L2.15 10.66A0.75 0.75 0 0 1 1.84 9.65A0.75 0.75 0 0 1 2.85 9.34ZM2.85 12.84L10 16.65L17.15 12.84A0.75 0.75 0 0 1 18.16 13.15A0.75 0.75 0 0 1 17.85 14.16L10.35 18.16A0.75 0.75 0 0 1 9.65 18.16L2.15 14.16A0.75 0.75 0 0 1 1.84 13.15A0.75 0.75 0 0 1 2.85 12.84Z"); }
.glyph-coin { clip-path: path("M17.75 10A7.75 7.75 0 0 1 2.25 10A7.75 7.75 0 0 1 17.75 10ZM16.25 10A6.25 6.25 0 0 0 3.75 10A6.25 6.25 0 0 0 16.25 10ZM12.5 8.25L9.27 8.25L9.16 8.26L9.06 8.27L8.97 8.3L8.89 8.34L8.81 8.39L8.74 8.45L8.67 8.52L8.62 8.6L8.57 8.68L8.54 8.77L8.51 8.86L8.5 8.95L8.5 9.05L8.51 9.14L8.54 9.23L8.57 9.32L8.62 9.4L8.67 9.48L8.74 9.55L8.81 9.61L8.89 9.66L8.97 9.7L9.06 9.73L9.16 9.74L9.27 9.75L10.75 9.75A0.75 0.75 0 0 1 10.8 9.75L11.03 9.77L11.31 9.82L11.58 9.91L11.83 10.03L12.07 10.18L12.29 10.36L12.48 10.56L12.65 10.79L12.79 11.04L12.89 11.3L12.96 11.58L13 11.86L13 12.14L12.96 12.42L12.89 12.7L12.79 12.96L12.65 13.21L12.48 13.44L12.29 13.64L12.07 13.82L11.83 13.97L11.58 14.09L11.31 14.18L11.03 14.23L10.8 14.25A0.75 0.75 0 0 1 10.75 14.25L7.5 14.25A0.75 0.75 0 0 1 6.75 13.5A0.75 0.75 0 0 1 7.5 12.75L10.73 12.75L10.84 12.74L10.94 12.73L11.03 12.7L11.11 12.66L11.19 12.61L11.26 12.55L11.33 12.48L11.38 12.4L11.43 12.32L11.46 12.23L11.49 12.14L11.5 12.05L11.5 11.95L11.49 11.86L11.46 11.77L11.43 11.68L11.38 11.6L11.33 11.52L11.26 11.45L11.19 11.39L11.11 11.34L11.03 11.3L10.94 11.27L10.84 11.26L10.73 11.25L9.25 11.25A0.75 0.75 0 0 1 9.2 11.25L8.97 11.23L8.69 11.18L8.42 11.09L8.17 10.97L7.93 10.82L7.71 10.64L7.52 10.44L7.35 10.21L7.21 9.96L7.11 9.7L7.04 9.42L7 9.14L7 8.86L7.04 8.58L7.11 8.3L7.21 8.04L7.35 7.79L7.52 7.56L7.71 7.36L7.93 7.18L8.17 7.03L8.42 6.91L8.69 6.82L8.97 6.77L9.2 6.75A0.75 0.75 0 0 1 9.25 6.75L12.5 6.75A0.75 0.75 0 0 1 13.25 7.5A0.75 0.75 0 0 1 12.5 8.25ZM10.75 5.5L10.75 7A0.75 0.75 0 0 1 10 7.75A0.75 0.75 0 0 1 9.25 7L9.25 5.5A0.75 0.75 0 0 1 10 4.75A0.75 0.75 0 0 1 10.75 5.5ZM10.75 13.5L10.75 15A0.75 0.75 0 0 1 10 15.75A0.75 0.75 0 0 1 9.25 15L9.25 13.5A0.75 0.75 0 0 1 10 12.75A0.75 0.75 0 0 1 10.75 13.5Z"); }
.glyph-path { clip-path: path("M7.75 5A2.75 2.75 0 0 1 2.25 5A2.75 2.75 0 0 1 7.75 5ZM6.25 5A1.25 1.25 0 0 0 3.75 5A1.25 1.25 0 0 0 6.25 5ZM17.75 15A2.75 2.75 0 0 1 12.25 15A2.75 2.75 0 0 1 17.75 15ZM16.25 15A1.25 1.25 0 0 0 13.75 15A1.25 1.25 0 0 0 16.25 15ZM7 4.25L12.5 4.25A0.75 0.75 0 0 1 12.55 4.25L12.91 4.27L13.31 4.35L13.7 4.48L14.07 4.65L14.41 4.87L14.73 5.13L15.01 5.43L15.25 5.76L15.44 6.12L15.59 6.5L15.69 6.89L15.75 7.3L15.75 7.7L15.69 8.11L15.59 8.5L15.44 8.88L15.25 9.24L15.01 9.57L14.73 9.87L14.41 10.13L14.07 10.35L13.7 10.52L13.31 10.65L12.91 10.73L12.55 10.75A0.75 0.75 0 0 1 12.5 10.75L7.52 10.75L7.28 10.77L7.07 10.81L6.86 10.87L6.66 10.97L6.47 11.09L6.3 11.23L6.15 11.39L6.02 11.56L5.92 11.76L5.84 11.96L5.78 12.17L5.75 12.39L5.75 12.61L5.78 12.83L5.84 13.04L5.92 13.24L6.02 13.44L6.15 13.61L6.3 13.77L6.47 13.91L6.66 14.03L6.86 14.13L7.07 14.19L7.28 14.23L7.52 14.25L13 14.25A0.75 0.75 0 0 1 13.75 15A0.75 0.75 0 0 1 13 15.75L7.5 15.75A0.75 0.75 0 0 1 7.45 15.75L7.09 15.73L6.69 15.65L6.3 15.52L5.93 15.35L5.59 15.13L5.27 14.87L4.99 14.57L4.75 14.24L4.56 13.88L4.41 13.5L4.31 13.11L4.25 12.7L4.25 12.3L4.31 11.89L4.41 11.5L4.56 11.12L4.75 10.76L4.99 10.43L5.27 10.13L5.59 9.87L5.93 9.65L6.3 9.48L6.69 9.35L7.09 9.27L7.45 9.25A0.75 0.75 0 0 1 7.5 9.25L12.48 9.25L12.72 9.23L12.93 9.19L13.14 9.13L13.34 9.03L13.53 8.91L13.7 8.77L13.85 8.61L13.98 8.44L14.08 8.24L14.16 8.04L14.22 7.83L14.25 7.61L14.25 7.39L14.22 7.17L14.16 6.96L14.08 6.76L13.98 6.56L13.85 6.39L13.7 6.23L13.53 6.09L13.34 5.97L13.14 5.87L12.93 5.81L12.72 5.77L12.48 5.75L7 5.75A0.75 0.75 0 0 1 6.25 5A0.75 0.75 0 0 1 7 4.25Z"); }
.glyph-table { clip-path: path("M3.5 2.75L16.5 2.75A1.75 1.75 0 0 1 18.25 4.5L18.25 15.5A1.75 1.75 0 0 1 16.5 17.25L3.5 17.25A1.75 1.75 0 0 1 1.75 15.5L1.75 4.5A1.75 1.75 0 0 1 3.5 2.75ZM3.5 4.25A0.25 0.25 0 0 0 3.25 4.5L3.25 15.5A0.25 0.25 0 0 0 3.5 15.75L16.5 15.75A0.25 0.25 0 0 0 16.75 15.5L16.75 4.5A0.25 0.25 0 0 0 16.5 4.25L3.5 4.25ZM2.5 7.25L17.5 7.25A0.75 0.75 0 0 1 18.25 8A0.75 0.75 0 0 1 17.5 8.75L2.5 8.75A0.75 0.75 0 0 1 1.75 8A0.75 0.75 0 0 1 2.5 7.25ZM2.5 11.5L17.5 11.5A0.75 0.75 0 0 1 18.25 12.25A0.75 0.75 0 0 1 17.5 13L2.5 13A0.75 0.75 0 0 1 1.75 12.25A0.75 0.75 0 0 1 2.5 11.5ZM8.75 8L8.75 16.5A0.75 0.75 0 0 1 8 17.25A0.75 0.75 0 0 1 7.25 16.5L7.25 8A0.75 0.75 0 0 1 8 7.25A0.75 0.75 0 0 1 8.75 8Z"); }
.glyph-folder { clip-path: path("M1.75 5.5A0.75 0.75 0 0 1 1.75 5.45L1.76 5.29L1.8 5.08L1.86 4.88L1.95 4.69L2.06 4.51L2.19 4.34L2.34 4.19L2.51 4.06L2.69 3.95L2.88 3.86L3.08 3.8L3.29 3.76L3.45 3.75A0.75 0.75 0 0 1 3.5 3.75L7.5 3.75A0.75 0.75 0 0 1 8.1 4.05L9.38 5.75L16.5 5.75A0.75 0.75 0 0 1 16.55 5.75L16.71 5.76L16.92 5.8L17.12 5.86L17.31 5.95L17.49 6.06L17.66 6.19L17.81 6.34L17.94 6.51L18.05 6.69L18.14 6.88L18.2 7.08L18.24 7.29L18.25 7.45A0.75 0.75 0 0 1 18.25 7.5L18.25 15.5A0.75 0.75 0 0 1 18.25 15.55L18.24 15.71L18.2 15.92L18.14 16.12L18.05 16.31L17.94 16.49L17.81 16.66L17.66 16.81L17.49 16.94L17.31 17.05L17.12 17.14L16.92 17.2L16.71 17.24L16.55 17.25A0.75 0.75 0 0 1 16.5 17.25L3.5 17.25A0.75 0.75 0 0 1 3.45 17.25L3.29 17.24L3.08 17.2L2.88 17.14L2.69 17.05L2.51 16.94L2.34 16.81L2.19 16.66L2.06 16.49L1.95 16.31L1.86 16.12L1.8 15.92L1.76 15.71L1.75 15.55A0.75 0.75 0 0 1 1.75 15.5ZM3.25 15.48L3.25 15.53L3.26 15.56L3.27 15.59L3.28 15.62L3.3 15.64L3.31 15.66L3.34 15.69L3.36 15.7L3.38 15.72L3.41 15.73L3.44 15.74L3.47 15.75L3.52 15.75L16.48 15.75L16.53 15.75L16.56 15.74L16.59 15.73L16.62 15.72L16.64 15.7L16.66 15.69L16.69 15.66L16.7 15.64L16.72 15.62L16.73 15.59L16.74 15.56L16.75 15.53L16.75 15.48L16.75 7.52L16.75 7.47L16.74 7.44L16.73 7.41L16.72 7.38L16.7 7.36L16.69 7.34L16.66 7.31L16.64 7.3L16.62 7.28L16.59 7.27L16.56 7.26L16.53 7.25L16.48 7.25L9 7.25A0.75 0.75 0 0 1 8.4 6.95L7.12 5.25L3.52 5.25L3.47 5.25L3.44 5.26L3.41 5.27L3.38 5.28L3.36 5.3L3.34 5.31L3.31 5.34L3.3 5.36L3.28 5.38L3.27 5.41L3.26 5.44L3.25 5.47L3.25 5.52Z"); }
.glyph-link { clip-path: path("M8.99 10.93L9.25 11.15L9.49 11.31L9.75 11.44L10.03 11.53L10.31 11.59L10.6 11.61L10.89 11.59L11.17 11.53L11.45 11.44L11.71 11.31L11.95 11.15L12.19 10.95L14.71 8.42L14.86 8.2L14.98 7.94L15.08 7.66L15.13 7.38L15.15 7.09L15.13 6.8L15.07 6.51L14.97 6.23L14.84 5.97L14.68 5.73L14.49 5.51L14.27 5.32L14.03 5.16L13.77 5.03L13.49 4.93L13.2 4.87L12.91 4.85L12.62 4.87L12.34 4.92L12.06 5.02L11.8 5.14L11.58 5.29L10.73 6.13A0.75 0.75 0 0 1 9.67 6.13A0.75 0.75 0 0 1 9.67 5.07L10.57 4.17A0.75 0.75 0 0 1 10.69 4.07L11.06 3.83L11.5 3.62L11.96 3.47L12.44 3.38L12.92 3.35L13.41 3.38L13.89 3.48L14.35 3.64L14.78 3.85L15.19 4.13L15.55 4.45L15.87 4.81L16.15 5.22L16.36 5.65L16.52 6.11L16.62 6.59L16.65 7.08L16.62 7.56L16.53 8.04L16.38 8.5L16.17 8.94L15.93 9.31A0.75 0.75 0 0 1 15.83 9.43L13.23 12.03A0.75 0.75 0 0 1 13.19 12.07L12.86 12.35L12.45 12.62L12.02 12.83L11.56 12.98L11.08 13.08L10.6 13.11L10.12 13.08L9.64 12.98L9.18 12.83L8.75 12.62L8.34 12.35L8.01 12.07A0.75 0.75 0 0 1 7.93 11.01A0.75 0.75 0 0 1 8.99 10.93ZM11.01 9.07L10.75 8.85L10.51 8.69L10.25 8.56L9.97 8.47L9.69 8.41L9.4 8.39L9.11 8.41L8.83 8.47L8.55 8.56L8.29 8.69L8.05 8.85L7.81 9.05L5.29 11.58L5.14 11.8L5.02 12.06L4.92 12.34L4.87 12.62L4.85 12.91L4.87 13.2L4.93 13.49L5.03 13.77L5.16 14.03L5.32 14.27L5.51 14.49L5.73 14.68L5.97 14.84L6.23 14.97L6.51 15.07L6.8 15.13L7.09 15.15L7.38 15.13L7.66 15.08L7.94 14.98L8.2 14.86L8.42 14.71L9.27 13.87A0.75 0.75 0 0 1 10.33 13.87A0.75 0.75 0 0 1 10.33 14.93L9.43 15.83A0.75 0.75 0 0 1 9.31 15.93L8.94 16.17L8.5 16.38L8.04 16.53L7.56 16.62L7.08 16.65L6.59 16.62L6.11 16.52L5.65 16.36L5.22 16.15L4.81 15.87L4.45 15.55L4.13 15.19L3.85 14.78L3.64 14.35L3.48 13.89L3.38 13.41L3.35 12.92L3.38 12.44L3.47 11.96L3.62 11.5L3.83 11.06L4.07 10.69A0.75 0.75 0 0 1 4.17 10.57L6.77 7.97A0.75 0.75 0 0 1 6.81 7.93L7.14 7.65L7.55 7.38L7.98 7.17L8.44 7.02L8.92 6.92L9.4 6.89L9.88 6.92L10.36 7.02L10.82 7.17L11.25 7.38L11.66 7.65L11.99 7.93A0.75 0.75 0 0 1 12.07 8.99A0.75 0.75 0 0 1 11.01 9.07Z"); }
.glyph-sliders { clip-path: path("M3.5 4.25L7 4.25A0.75 0.75 0 0 1 7.75 5A0.75 0.75 0 0 1 7 5.75L3.5 5.75A0.75 0.75 0 0 1 2.75 5A0.75 0.75 0 0 1 3.5 4.25ZM10 4.25L16.5 4.25A0.75 0.75 0 0 1 17.25 5A0.75 0.75 0 0 1 16.5 5.75L10 5.75A0.75 0.75 0 0 1 9.25 5A0.75 0.75 0 0 1 10 4.25ZM3.5 9.25L11 9.25A0.75 0.75 0 0 1 11.75 10A0.75 0.75 0 0 1 11 10.75L3.5 10.75A0.75 0.75 0 0 1 2.75 10A0.75 0.75 0 0 1 3.5 9.25ZM14 9.25L16.5 9.25A0.75 0.75 0 0 1 17.25 10A0.75 0.75 0 0 1 16.5 10.75L14 10.75A0.75 0.75 0 0 1 13.25 10A0.75 0.75 0 0 1 14 9.25ZM3.5 14.25L6 14.25A0.75 0.75 0 0 1 6.75 15A0.75 0.75 0 0 1 6 15.75L3.5 15.75A0.75 0.75 0 0 1 2.75 15A0.75 0.75 0 0 1 3.5 14.25ZM9 14.25L16.5 14.25A0.75 0.75 0 0 1 17.25 15A0.75 0.75 0 0 1 16.5 15.75L9 15.75A0.75 0.75 0 0 1 8.25 15A0.75 0.75 0 0 1 9 14.25ZM10.75 5A2.25 2.25 0 0 1 6.25 5A2.25 2.25 0 0 1 10.75 5ZM9.25 5A0.75 0.75 0 0 0 7.75 5A0.75 0.75 0 0 0 9.25 5ZM14.75 10A2.25 2.25 0 0 1 10.25 10A2.25 2.25 0 0 1 14.75 10ZM13.25 10A0.75 0.75 0 0 0 11.75 10A0.75 0.75 0 0 0 13.25 10ZM9.75 15A2.25 2.25 0 0 1 5.25 15A2.25 2.25 0 0 1 9.75 15ZM8.25 15A0.75 0.75 0 0 0 6.75 15A0.75 0.75 0 0 0 8.25 15Z"); }
.glyph-book { clip-path: path("M3.25 3.5A0.75 0.75 0 0 1 4 2.75L13.5 2.75A0.75 0.75 0 0 1 13.55 2.75L13.83 2.77L14.16 2.83L14.48 2.93L14.78 3.06L15.06 3.24L15.32 3.44L15.56 3.68L15.76 3.94L15.94 4.22L16.07 4.52L16.17 4.84L16.23 5.17L16.25 5.45A0.75 0.75 0 0 1 16.25 5.5L16.25 17A0.75 0.75 0 0 1 15.5 17.75L6 17.75A0.75 0.75 0 0 1 5.95 17.75L5.67 17.73L5.34 17.67L5.02 17.57L4.72 17.44L4.44 17.26L4.18 17.06L3.94 16.82L3.74 16.56L3.56 16.28L3.43 15.98L3.33 15.66L3.27 15.33L3.25 15.05A0.75 0.75 0 0 1 3.25 15ZM4.75 14.98L4.76 15.15L4.79 15.3L4.83 15.44L4.89 15.58L4.97 15.71L5.07 15.83L5.17 15.93L5.29 16.03L5.42 16.11L5.56 16.17L5.7 16.21L5.85 16.24L6.02 16.25L14.75 16.25L14.75 5.52L14.74 5.35L14.71 5.2L14.67 5.06L14.61 4.92L14.53 4.79L14.43 4.67L14.33 4.57L14.21 4.47L14.08 4.39L13.94 4.33L13.8 4.29L13.65 4.26L13.48 4.25L4.75 4.25ZM3.25 14.95L3.27 14.67L3.33 14.34L3.43 14.02L3.56 13.72L3.74 13.44L3.94 13.18L4.18 12.94L4.44 12.74L4.72 12.56L5.02 12.43L5.34 12.33L5.67 12.27L5.95 12.25A0.75 0.75 0 0 1 6 12.25L15.5 12.25A0.75 0.75 0 0 1 16.25 13A0.75 0.75 0 0 1 15.5 13.75L6.02 13.75L5.85 13.76L5.7 13.79L5.56 13.83L5.42 13.89L5.29 13.97L5.17 14.07L5.07 14.17L4.97 14.29L4.89 14.42L4.83 14.56L4.79 14.7L4.76 14.85L4.75 15.05A0.75 0.75 0 0 1 3.95 15.75A0.75 0.75 0 0 1 3.25 14.95ZM7.5 6.25L12.5 6.25A0.75 0.75 0 0 1 13.25 7A0.75 0.75 0 0 1 12.5 7.75L7.5 7.75A0.75 0.75 0 0 1 6.75 7A0.75 0.75 0 0 1 7.5 6.25Z"); }
.glyph-doc-check { clip-path: path("M4.25 2.5A0.75 0.75 0 0 1 5 1.75L11.5 1.75A0.75 0.75 0 0 1 12.03 1.97L15.53 5.47A0.75 0.75 0 0 1 15.75 6L15.75 17.5A0.75 0.75 0 0 1 15 18.25L5 18.25A0.75 0.75 0 0 1 4.25 17.5ZM5.75 16.75L14.25 16.75L14.25 6.31L11.19 3.25L5.75 3.25ZM12.25 2.5L12.25 5.25L15 5.25A0.75 0.75 0 0 1 15.75 6A0.75 0.75 0 0 1 15 6.75L11.5 6.75A0.75 0.75 0 0 1 10.75 6L10.75 2.5A0.75 0.75 0 0 1 11.5 1.75A0.75 0.75 0 0 1 12.25 2.5ZM8.03 10.97L9.46 12.4L12.44 9.01A0.75 0.75 0 0 1 13.49 8.94A0.75 0.75 0 0 1 13.56 9.99L10.06 13.99A0.75 0.75 0 0 1 8.97 14.03L6.97 12.03A0.75 0.75 0 0 1 6.97 10.97A0.75 0.75 0 0 1 8.03 10.97Z"); }
.glyph-check-circle { clip-path: path("M17.75 10A7.75 7.75 0 0 1 2.25 10A7.75 7.75 0 0 1 17.75 10ZM16.25 10A6.25 6.25 0 0 0 3.75 10A6.25 6.25 0 0 0 16.25 10ZM7.53 9.47L9 10.94L12.47 7.47A0.75 0.75 0 0 1 13.53 7.47A0.75 0.75 0 0 1 13.53 8.53L9.53 12.53A0.75 0.75 0 0 1 8.47 12.53L6.47 10.53A0.75 0.75 0 0 1 6.47 9.47A0.75 0.75 0 0 1 7.53 9.47Z"); }
.glyph-gear { clip-path: path("M13.25 10A3.25 3.25 0 0 1 6.75 10A3.25 3.25 0 0 1 13.25 10ZM11.75 10A1.75 1.75 0 0 0 8.25 10A1.75 1.75 0 0 0 11.75 10ZM10.75 2.5L10.75 4.5A0.75 0.75 0 0 1 10 5.25A0.75 0.75 0 0 1 9.25 4.5L9.25 2.5A0.75 0.75 0 0 1 10 1.75A0.75 0.75 0 0 1 10.75 2.5ZM10.75 15.5L10.75 17.5A0.75 0.75 0 0 1 10 18.25A0.75 0.75 0 0 1 9.25 17.5L9.25 15.5A0.75 0.75 0 0 1 10 14.75A0.75 0.75 0 0 1 10.75 15.5ZM2.5 9.25L4.5 9.25A0.75 0.75 0 0 1 5.25 10A0.75 0.75 0 0 1 4.5 10.75L2.5 10.75A0.75 0.75 0 0 1 1.75 10A0.75 0.75 0 0 1 2.5 9.25ZM15.5 9.25L17.5 9.25A0.75 0.75 0 0 1 18.25 10A0.75 0.75 0 0 1 17.5 10.75L15.5 10.75A0.75 0.75 0 0 1 14.75 10A0.75 0.75 0 0 1 15.5 9.25ZM5.23 4.17L6.63 5.57A0.75 0.75 0 0 1 6.63 6.63A0.75 0.75 0 0 1 5.57 6.63L4.17 5.23A0.75 0.75 0 0 1 4.17 4.17A0.75 0.75 0 0 1 5.23 4.17ZM14.43 13.37L15.83 14.77A0.75 0.75 0 0 1 15.83 15.83A0.75 0.75 0 0 1 14.77 15.83L13.37 14.43A0.75 0.75 0 0 1 13.37 13.37A0.75 0.75 0 0 1 14.43 13.37ZM4.17 14.77L5.57 13.37A0.75 0.75 0 0 1 6.63 13.37A0.75 0.75 0 0 1 6.63 14.43L5.23 15.83A0.75 0.75 0 0 1 4.17 15.83A0.75 0.75 0 0 1 4.17 14.77ZM13.37 5.57L14.77 4.17A0.75 0.75 0 0 1 15.83 4.17A0.75 0.75 0 0 1 15.83 5.23L14.43 6.63A0.75 0.75 0 0 1 13.37 6.63A0.75 0.75 0 0 1 13.37 5.57Z"); }
.glyph-person-shield { clip-path: path("M11.75 6.5A3.75 3.75 0 0 1 4.25 6.5A3.75 3.75 0 0 1 11.75 6.5ZM10.25 6.5A2.25 2.25 0 0 0 5.75 6.5A2.25 2.25 0 0 0 10.25 6.5ZM1.75 16.44L1.83 15.51L2.06 14.58L2.44 13.73L2.96 12.97L3.59 12.31L4.32 11.76L5.14 11.32L6.04 11.01L6.99 10.81L7.95 10.75A0.75 0.75 0 0 1 8.02 10.75L8.33 10.76L8.65 10.78L8.97 10.81L9.28 10.86L9.59 10.92L9.89 10.99L10.19 11.08L10.48 11.18L10.76 11.3L11.02 11.42A0.75 0.75 0 0 1 11.38 12.42A0.75 0.75 0 0 1 10.38 12.78L10.16 12.67L9.94 12.59L9.72 12.51L9.49 12.44L9.26 12.38L9.02 12.34L8.78 12.3L8.53 12.27L8.27 12.26L8.02 12.25L7.19 12.3L6.44 12.46L5.75 12.7L5.13 13.03L4.59 13.44L4.13 13.92L3.76 14.46L3.49 15.08L3.31 15.75L3.25 16.56A0.75 0.75 0 0 1 2.44 17.25A0.75 0.75 0 0 1 1.75 16.44ZM14.72 10.3A0.75 0.75 0 0 1 15.28 10.3L17.78 11.3A0.75 0.75 0 0 1 18.25 12L18.25 14A0.75 0.75 0 0 1 18.25 14.05L18.21 14.59L18.1 15.15L17.91 15.67L17.67 16.15L17.37 16.59L17.02 16.98L16.64 17.33L16.23 17.65L15.79 17.92L15.36 18.16A0.75 0.75 0 0 1 14.64 18.16L14.21 17.92L13.77 17.65L13.36 17.33L12.98 16.98L12.63 16.59L12.33 16.15L12.09 15.67L11.9 15.15L11.79 14.59L11.75 14.05A0.75 0.75 0 0 1 11.75 14L11.75 12A0.75 0.75 0 0 1 12.22 11.3ZM13.25 12.51L13.25 13.98L13.28 14.39L13.35 14.75L13.47 15.08L13.62 15.38L13.82 15.66L14.05 15.93L14.32 16.18L14.63 16.41L14.97 16.63L15 16.65L15.03 16.63L15.37 16.41L15.68 16.18L15.95 15.93L16.18 15.66L16.38 15.38L16.53 15.08L16.65 14.75L16.72 14.39L16.75 13.98L16.75 12.51L15 11.81Z"); }

/* Site chrome: the public header and footer, the same markup on every public
   page. A 48px bar on the page grey with one hairline: the brand mark linking
   home, four 13px links 28px apart, then the language chip, the outline sign
   in and the one purple console button. Under 768px the bar keeps the brand,
   the language glyph and a menu button whose panel lists every link. The
   footer is the navy band with the product and developer columns. The FE9-1
   section at the end of this file draws both in design v9. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-bar { display: flex; align-items: center; gap: 40px; height: var(--site-bar-height); padding: 0 40px; }
.site-header .brand, .site-footer .brand { flex-shrink: 0; margin-right: 0; color: var(--ink); text-decoration: none; }
.site-header .brand:hover, .site-footer .brand:hover { text-decoration: none; }
.site-nav { display: flex; flex: 1 1 auto; align-items: center; gap: 28px; min-width: 0; }
.site-navlink { padding: 10px 0; color: var(--ink); font-size: var(--text-table); line-height: 1.366; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; }
.site-navlink:hover { color: var(--ink); opacity: .8; text-decoration: none; }
.site-navlink[aria-current] { font-weight: var(--weight-bold); }
.site-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin-left: auto; }
.site-actions .button { height: var(--control-height); min-height: var(--control-height); font-size: var(--text-table); line-height: 1.366; font-weight: 500; white-space: nowrap; }
.site-actions .site-sign-in { padding: 0 10px; border-color: var(--ink); color: var(--ink); }
.site-actions .site-sign-in:hover, .site-actions .site-sign-in[aria-current="page"] { background: var(--tint); border-color: var(--ink); color: var(--ink); }
.site-actions .site-console { padding: 0 12px; font-size: var(--text-body); }

/* The language control in a bar: the native select carries the name and
   the choice, the glyph is drawn before it and its notice floats under it. */
.language-control.language-chip, .language-control.language-icon, .language-control.language-footer { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--control-height); color: var(--ink); cursor: pointer; }
.language-control.language-chip::before, .language-control.language-icon::before, .language-control.language-footer::before, .site-language-link::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; clip-path: path("M16.2 9A7.2 7.2 0 0 1 1.8 9A7.2 7.2 0 0 1 16.2 9ZM14.85 9A5.85 5.85 0 0 0 3.15 9A5.85 5.85 0 0 0 14.85 9ZM2.48 8.33L15.53 8.33L15.53 9.68L2.48 9.68L2.48 8.33ZM9 1.46L10.03 2.62L10.52 3.25L10.95 3.9L11.33 4.57L11.65 5.26L11.91 5.97L12.11 6.7L12.26 7.45L12.35 8.22L12.38 9L12.35 9.78L12.26 10.55L12.11 11.3L11.91 12.03L11.65 12.74L11.33 13.43L10.95 14.1L10.52 14.75L10.03 15.38L9 16.54L7.97 15.38L7.48 14.75L7.05 14.1L6.67 13.43L6.35 12.74L6.09 12.03L5.89 11.3L5.74 10.55L5.65 9.78L5.62 9L5.65 8.22L5.74 7.45L5.89 6.7L6.09 5.97L6.35 5.26L6.67 4.57L7.05 3.9L7.48 3.25L7.97 2.62ZM9.01 3.48L8.58 4.04L8.2 4.6L7.87 5.18L7.6 5.78L7.37 6.39L7.2 7.01L7.08 7.65L7 8.32L6.98 9L7 9.68L7.08 10.35L7.2 10.99L7.37 11.61L7.6 12.22L7.87 12.82L8.2 13.4L8.58 13.96L9.01 14.52L9 14.51L8.99 14.52L9.42 13.96L9.8 13.4L10.13 12.82L10.4 12.22L10.63 11.61L10.8 10.99L10.92 10.35L11 9.68L11.02 9L11 8.32L10.92 7.65L10.8 7.01L10.63 6.39L10.4 5.78L10.13 5.18L9.8 4.6L9.42 4.04L8.99 3.48L9 3.49Z"); }
.language-control.language-chip { padding: 0 10px 0 8px; border-radius: var(--radius-control); background: var(--tint); }
.language-control.language-chip:hover, .language-control.language-icon:hover { background: var(--tint-hover); }
.language-control.language-icon { justify-content: center; width: var(--control-height); padding: 0; border-radius: var(--radius-control); background: var(--tint); }
.language-control.language-icon::before { width: 20px; height: 20px; clip-path: path("M18 10A8 8 0 0 1 2 10A8 8 0 0 1 18 10ZM16.5 10A6.5 6.5 0 0 0 3.5 10A6.5 6.5 0 0 0 16.5 10ZM2.75 9.25L17.25 9.25L17.25 10.75L2.75 10.75L2.75 9.25ZM10 1.62L11.15 2.91L11.69 3.61L12.17 4.33L12.59 5.08L12.94 5.84L13.23 6.63L13.46 7.45L13.62 8.28L13.72 9.13L13.75 10L13.72 10.87L13.62 11.72L13.46 12.55L13.23 13.37L12.94 14.16L12.59 14.92L12.17 15.67L11.69 16.39L11.15 17.09L10 18.38L8.85 17.09L8.31 16.39L7.83 15.67L7.41 14.92L7.06 14.16L6.77 13.37L6.54 12.55L6.38 11.72L6.28 10.87L6.25 10L6.28 9.13L6.38 8.28L6.54 7.45L6.77 6.63L7.06 5.84L7.41 5.08L7.83 4.33L8.31 3.61L8.85 2.91ZM10.01 3.87L9.53 4.48L9.11 5.11L8.75 5.76L8.44 6.42L8.19 7.1L8 7.79L7.86 8.51L7.78 9.24L7.75 10L7.78 10.76L7.86 11.49L8 12.21L8.19 12.9L8.44 13.58L8.75 14.24L9.11 14.89L9.53 15.52L10.01 16.13L10 16.12L9.99 16.13L10.47 15.52L10.89 14.89L11.25 14.24L11.56 13.58L11.81 12.9L12 12.21L12.14 11.49L12.22 10.76L12.25 10L12.22 9.24L12.14 8.51L12 7.79L11.81 7.1L11.56 6.42L11.25 5.76L10.89 5.11L10.47 4.48L9.99 3.87L10 3.88Z"); }
.language-control.language-footer { padding: 0; color: var(--band-ink); }
.language-control.language-footer:hover { opacity: .7; }
.language-control.language-footer::before, .site-language-link.site-language-footer::before { width: 16px; height: 16px; clip-path: path("M14.4 8A6.4 6.4 0 0 1 1.6 8A6.4 6.4 0 0 1 14.4 8ZM13.2 8A5.2 5.2 0 0 0 2.8 8A5.2 5.2 0 0 0 13.2 8ZM2.2 7.4L13.8 7.4L13.8 8.6L2.2 8.6L2.2 7.4ZM8 1.3L8.92 2.33L9.35 2.89L9.74 3.46L10.07 4.06L10.35 4.68L10.59 5.31L10.77 5.96L10.9 6.62L10.97 7.3L11 8L10.97 8.7L10.9 9.38L10.77 10.04L10.59 10.69L10.35 11.32L10.07 11.94L9.74 12.54L9.35 13.11L8.92 13.67L8 14.7L7.08 13.67L6.65 13.11L6.26 12.54L5.93 11.94L5.65 11.32L5.41 10.69L5.23 10.04L5.1 9.38L5.03 8.7L5 8L5.03 7.3L5.1 6.62L5.23 5.96L5.41 5.31L5.65 4.68L5.93 4.06L6.26 3.46L6.65 2.89L7.08 2.33ZM8.01 3.1L7.62 3.59L7.29 4.09L7 4.61L6.75 5.13L6.56 5.68L6.4 6.23L6.29 6.8L6.22 7.39L6.2 8L6.22 8.61L6.29 9.2L6.4 9.77L6.56 10.32L6.75 10.87L7 11.39L7.29 11.91L7.62 12.41L8.01 12.9L8 12.9L7.99 12.9L8.38 12.41L8.71 11.91L9 11.39L9.25 10.87L9.44 10.32L9.6 9.77L9.71 9.2L9.78 8.61L9.8 8L9.78 7.39L9.71 6.8L9.6 6.23L9.44 5.68L9.25 5.13L9 4.61L8.71 4.09L8.38 3.59L7.99 3.1L8 3.1Z"); }
.language-control.language-chip > select, .language-control.language-icon > select, .language-control.language-footer > select { appearance: none; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-size: var(--text-table); line-height: 1.366; font-weight: 500; cursor: pointer; field-sizing: content; }
.language-control.language-footer > select { color-scheme: dark; font-size: var(--text-body); font-weight: 400; }
.language-control.language-footer option { background-color: var(--band-bg); color: var(--band-ink); }
.language-control.language-icon > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.language-control.language-chip > select:focus, .language-control.language-icon > select:focus, .language-control.language-footer > select:focus { outline: 0; box-shadow: none; }
.language-control.language-chip:has(> select:focus-visible), .language-control.language-icon:has(> select:focus-visible), .language-control.language-footer:has(> select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.language-control.language-footer:has(> select:focus-visible) { outline-color: var(--band-ink); }
.language-control.language-chip > select:disabled, .language-control.language-icon > select:disabled, .language-control.language-footer > select:disabled { background: transparent; color: inherit; cursor: not-allowed; }
.language-control.language-chip:has(> select:disabled), .language-control.language-icon:has(> select:disabled), .language-control.language-footer:has(> select:disabled) { cursor: not-allowed; }
.language-chip > .language-notice:empty, .language-icon > .language-notice:empty, .language-footer > .language-notice:empty { display: none; }
.language-chip > .language-notice, .language-icon > .language-notice { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-menu); color: var(--muted); white-space: nowrap; }
.language-footer > .language-notice { color: var(--band-secondary); }
/* The generated API reference runs no chrome script: its language switch is
   a plain link to the reference in the other language, drawn like the chip. */
.site-language-link { display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--control-height); padding: 0 10px 0 8px; border-radius: var(--radius-control); background: var(--tint); color: var(--ink); font-size: var(--text-table); line-height: 1.366; font-weight: 500; white-space: nowrap; text-decoration: none; }
.site-language-link:hover { background: var(--tint-hover); color: var(--ink); text-decoration: none; }
.site-language-link.site-language-footer { padding: 0; background: transparent; color: var(--band-ink); font-size: var(--text-body); font-weight: 400; }
.site-language-link.site-language-footer:hover { background: transparent; color: var(--band-ink); opacity: .7; }

/* The phone menu: a native disclosure, so it opens without script */
.site-menu { position: relative; }
.site-menu > summary { display: flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); min-height: 0; padding: 0; border-radius: var(--radius-control); background: var(--tint); color: var(--ink); list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover, .site-menu[open] > summary { background: var(--tint-hover); }
.site-menu-panel { position: absolute; top: 40px; right: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; width: 240px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-menu); }
.site-menu-link { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--radius-control); color: var(--ink); font-size: 15px; text-decoration: none; }
.site-menu-link:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
.site-menu-link[aria-current] { background: var(--tint); font-weight: var(--weight-bold); }
.site-menu-rule { height: 1px; margin: 6px 0; background: var(--line); }
.site-menu-buttons { display: flex; gap: 8px; }
.site-menu-buttons > .button { flex: 1 1 0; height: 40px; min-height: 40px; padding: 0; font-size: 15px; font-weight: 500; }
.site-menu-buttons > .site-sign-in { border-color: var(--ink); color: var(--ink); }
.site-menu-buttons > .site-sign-in:hover, .site-menu-buttons > .site-sign-in[aria-current="page"] { background: var(--tint); border-color: var(--ink); color: var(--ink); }

/* The footer: navy, the brand in its dark-ground colors, then the columns
   at the approved render's 96px pitch, flush with the right edge as on that
   render (its last two slots; the company and legal columns wait for their
   pages). */
.site-footer { background: var(--band-bg); color: var(--band-ink); }
.site-footer-inner { max-width: 1440px; margin: 0 auto; padding: 52px 64px 0; }
.site-footer-top { display: flex; align-items: flex-start; justify-content: flex-start; gap: 40px; margin-bottom: 80px; }
.site-footer .brand { --brand-mark: var(--on-ink); --brand-arc: var(--ink); --brand-dot: var(--accent); }
.site-footer .brand strong { color: var(--band-ink); }
.site-footer-cols { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 40px 96px; margin-left: 108px; }
.site-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 96px; }
.site-footer-title { color: var(--band-secondary); font-size: var(--text-body); line-height: 1.366; }
.site-footer-link { color: var(--band-ink); font-size: var(--text-body); line-height: 1.366; text-decoration: none; }
.site-footer-link:hover { color: var(--band-ink); opacity: .7; text-decoration: none; }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 11px 0 18px; border-top: 1px solid var(--band-separator); color: var(--band-ink); font-size: var(--text-body); line-height: 1.366; }
.site-footer :focus-visible { outline-color: var(--band-ink); }

/* Pages under the site header or the admin sign-in bar: the split sign-in
   starts below the bar */
.site-header + .access-split, .site-header + .access-split > .access-intro, .site-header + .access-split > .access-card,
.access-header + .access-split, .access-header + .access-split > .access-intro, .access-header + .access-split > .access-card { min-height: calc(100vh - var(--site-bar-height) - 1px); }
.site-header + .access-split > .access-card, .access-header + .access-split > .access-card { padding-top: 60px; }

/* Wide and narrow halves of the chrome */
.phone-only { display: none !important; }
@media (max-width: 1079px) {
  .site-footer-cols { margin-left: 0; }
}
@media (max-width: 1023px) {
  .site-header + .access-split > .access-card, .access-header + .access-split > .access-card { padding-top: 48px; }
}
@media (max-width: 767px) {
  .desk-only { display: none !important; }
  .phone-only { display: block !important; }
  .site-bar { gap: 12px; padding: 0 16px; }
  .language-control.language-chip { justify-content: center; width: var(--control-height); padding: 0; }
  .language-control.language-chip::before { width: 20px; height: 20px; clip-path: path("M18 10A8 8 0 0 1 2 10A8 8 0 0 1 18 10ZM16.5 10A6.5 6.5 0 0 0 3.5 10A6.5 6.5 0 0 0 16.5 10ZM2.75 9.25L17.25 9.25L17.25 10.75L2.75 10.75L2.75 9.25ZM10 1.62L11.15 2.91L11.69 3.61L12.17 4.33L12.59 5.08L12.94 5.84L13.23 6.63L13.46 7.45L13.62 8.28L13.72 9.13L13.75 10L13.72 10.87L13.62 11.72L13.46 12.55L13.23 13.37L12.94 14.16L12.59 14.92L12.17 15.67L11.69 16.39L11.15 17.09L10 18.38L8.85 17.09L8.31 16.39L7.83 15.67L7.41 14.92L7.06 14.16L6.77 13.37L6.54 12.55L6.38 11.72L6.28 10.87L6.25 10L6.28 9.13L6.38 8.28L6.54 7.45L6.77 6.63L7.06 5.84L7.41 5.08L7.83 4.33L8.31 3.61L8.85 2.91ZM10.01 3.87L9.53 4.48L9.11 5.11L8.75 5.76L8.44 6.42L8.19 7.1L8 7.79L7.86 8.51L7.78 9.24L7.75 10L7.78 10.76L7.86 11.49L8 12.21L8.19 12.9L8.44 13.58L8.75 14.24L9.11 14.89L9.53 15.52L10.01 16.13L10 16.12L9.99 16.13L10.47 15.52L10.89 14.89L11.25 14.24L11.56 13.58L11.81 12.9L12 12.21L12.14 11.49L12.22 10.76L12.25 10L12.22 9.24L12.14 8.51L12 7.79L11.81 7.1L11.56 6.42L11.25 5.76L10.89 5.11L10.47 4.48L9.99 3.87L10 3.88Z"); }
  .language-control.language-chip > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  body:has(> .site-footer) .site-header .language-control, body:has(> .site-footer) .site-header .site-language-link { display: none; }
  .site-footer-inner { padding: 40px 20px 0; }
  .site-footer-top { flex-direction: column; gap: 32px; margin-bottom: 40px; }
  .site-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; width: 100%; margin-left: 0; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 640px) {
  .site-header + .access-split > .access-card, .access-header + .access-split > .access-card { padding-top: 32px; }
}

/* Disabled controls come last of the control rules. */
button:disabled, .button[aria-disabled="true"], input:disabled, select:disabled, textarea:disabled { color: var(--faint); background-color: var(--neutral-soft); border-color: transparent; cursor: not-allowed; }
button:disabled:hover { color: var(--faint); background-color: var(--neutral-soft); border-color: transparent; }

/* Shells: the top bar, on the page grey with one hairline. The brand mark is
   drawn on .brand and .brand strong (an ink rounded square, a light arc and
   a purple dot; on dark grounds a light square with an ink arc), so the
   brand keeps its two children. Customer and public pages draw the design
   v9 logo and console bar instead (the FE9-1 section at the end of this
   file); these rules stay for the operations console. */
.shell-topbar { position: fixed; inset: 0 0 auto 0; z-index: 25; display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); padding: 0 var(--shell-left); background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { position: relative; display: flex; align-items: center; gap: 10px; margin-right: var(--space-4); white-space: nowrap; }
.brand::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-mark); }
.brand::after { content: ""; position: absolute; top: 12px; left: 7px; width: 14px; height: 7px; border: 2px solid var(--brand-arc); border-bottom: 0; border-radius: 7px 7px 0 0; }
.brand strong::before { content: ""; position: absolute; top: 7px; left: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-dot); }
.brand strong { color: var(--ink); font-size: 17px; line-height: 28px; font-weight: var(--weight-bold); letter-spacing: .02em; }
.brand small { padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--muted); font-size: var(--text-table); line-height: var(--line-table); font-weight: 400; }
.hero-band .brand { --brand-mark: var(--on-ink); --brand-arc: var(--ink); --brand-dot: var(--accent); }
.hero-band .brand strong { color: var(--band-ink); }
.hero-band .brand small { color: var(--band-faint); border-left-color: var(--band-line); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-left: auto; }
.balance-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 300px; height: var(--control-height); padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent; color: var(--ink); font-size: var(--text-table); font-weight: 500; text-decoration: none; white-space: nowrap; }
.balance-pill:hover { color: var(--ink); background: var(--tint); border-color: var(--line-strong); text-decoration: none; }
.balance-label { color: var(--muted); font-weight: 400; }
.balance-pill .money { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-table); font-weight: 500; }
.balance-pill .money-tail { color: var(--muted); }
.balance-pill .negative, .balance-pill .negative .money-tail { color: var(--danger); }
.language-control { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.language-control select { width: 92px; height: var(--control-height); min-height: var(--control-height); padding-top: 0; padding-bottom: 0; border-color: var(--line-strong); background-color: transparent; font-size: var(--text-table); font-weight: 500; }
.language-control select:focus { border-color: var(--accent); }
.language-notice { color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.user-menu { position: relative; }
.user-menu { min-width: 0; max-width: min(280px, 40vw); }
summary { min-height: var(--control-height); padding: 6px 10px; border-radius: var(--radius-control); cursor: pointer; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary { display: flex; align-items: center; padding: 0 8px 0 0; border: 1px solid transparent; border-radius: var(--radius-control); }
.user-menu > summary:hover { background: var(--hover-wash); }
.user-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-table); font-weight: 500; }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font-size: var(--text-body); font-weight: 600; }
.avatar:empty { display: none; }
.avatar-neutral { background: var(--bar-hover); color: var(--bar-ink); }
.menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 200px; max-width: 320px; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-popover); }
.menu-panel a, .menu-panel button { display: block; width: 100%; min-height: var(--control-height); padding: 6px 8px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); font-weight: 400; text-align: left; text-decoration: none; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.menu-panel button:disabled { color: var(--faint); background: transparent; cursor: not-allowed; }
.menu-rule { height: 1px; margin: 4px 0; background: var(--line); }
.menu-panel p { margin: 0; padding: 4px 8px; color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.shell-user { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-left: auto; }
.timezone-control { display: flex; align-items: center; gap: var(--space-2); }
.timezone-control > label { font-size: var(--text-small); font-weight: 400; }
.timezone-control select { height: var(--control-height); padding-top: 0; padding-bottom: 0; font-size: var(--text-small); }
.shell-updated { color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
.environment-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-small); font-size: var(--text-small); font-weight: 600; white-space: nowrap; }
.environment-badge.uat { background: var(--env-uat-badge); color: var(--env-uat-badge-ink); }
.environment-badge.production { background: var(--env-production-badge); color: var(--env-production-badge-ink); border: 0; }
/* The production badge never shrinks: the console name gives way first. */
.admin-console .shell-topbar .environment-badge.production, .access-header .environment-badge.production { flex-shrink: 0; overflow: visible; }
.admin-console .shell-topbar:has(.environment-badge.production) .brand, .access-header:has(.environment-badge.production) .brand { flex-shrink: 1; }
.environment-badge.development { background: var(--env-development-badge); color: var(--env-development-badge-ink); }
.environment-uat::before, .environment-production::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; }
.environment-uat::before { background: var(--env-uat); }
.environment-production::before { background: var(--env-production); }

/* Shells: the sidebar is a 240px column of groups. A group title is 12px
   bold muted text 10px above its rows; rows are 32px with a 20px line icon;
   the current page is the panel color on the grey, semibold (no edge, no
   shadow). */
.shell-sidebar { position: fixed; top: var(--topbar-height); bottom: 0; left: var(--shell-left); z-index: 20; display: flex; flex-direction: column; gap: 14px; width: var(--sidebar-width); padding: var(--space-5) var(--space-3) var(--space-5) 0; overflow-y: auto; background: var(--paper); border: 0; border-right: 1px solid var(--line); border-radius: 0; color: var(--ink); }
.shell-sidebar > p { margin: 0; padding: 0 11px; color: var(--muted); font-size: var(--text-small); line-height: var(--line-small); }
.nav-group { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.nav-group h2 { margin: 0 0 10px; padding: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.366; font-weight: var(--weight-bold); }
.nav-link { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 2px 11px; border: 0; border-radius: var(--radius-control); color: var(--ink); font-weight: 400; text-decoration: none; }
.nav-link:hover { background: var(--side-hover); color: var(--ink); text-decoration: none; }
.nav-link[aria-current], .nav-link[aria-current]:hover { background: var(--surface); color: var(--ink); font-weight: 600; }
.nav-icon:not(.glyph) { display: none; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mark { display: none; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-control); background: var(--hover-wash); font-size: var(--text-small); font-weight: var(--weight-bold); }
.nav-link[aria-current] .nav-mark { background: var(--accent); color: var(--on-accent); }
.sidebar-toggle { width: 100%; min-height: var(--control-height-sm); margin-top: auto; padding: 2px 8px; border-color: transparent; background: transparent; color: var(--muted); font-size: var(--text-small); font-weight: 500; line-height: var(--line-small); }
.sidebar-toggle:hover { background: var(--hover-wash); border-color: transparent; color: var(--ink); }
.sidebar-menu { display: none; }

/* Shells: the operations console bar and sidebar. The customer console
   frame (design v9) is drawn in the FE9-1 section at the end of this file;
   these rules name the operations console only. */
.admin-console { --shell-x: calc(max(0px, (100% - var(--container)) / 2) + 80px); --frame-top: calc(var(--topbar-height) + 1px); }
.admin-console .shell-topbar .brand { flex-shrink: 0; margin-right: 0; color: var(--ink); text-decoration: none; }
.admin-console .shell-topbar .brand:hover { color: var(--ink); text-decoration: none; }
.user-face { display: flex; align-items: center; justify-content: center; }
.admin-console .shell-topbar .user-menu > summary { justify-content: center; width: var(--control-height); height: var(--control-height); min-height: 0; padding: 0; border: 0; background: var(--ink); color: var(--surface); }
.admin-console .shell-topbar .user-menu > summary:hover, .admin-console .shell-topbar .user-menu[open] > summary { background: var(--ink-hover); }
.admin-console .shell-topbar .user-menu > .menu-panel { top: 40px; display: flex; flex-direction: column; gap: 2px; width: 200px; min-width: 0; padding: 8px; box-shadow: var(--shadow-menu); }
.admin-console .shell-topbar .user-menu > .menu-panel > a, .admin-console .shell-topbar .user-menu > .menu-panel > button { display: flex; align-items: center; justify-content: flex-start; height: var(--control-height); min-height: var(--control-height); padding: 0 10px; font-size: var(--text-body); line-height: 1.366; text-align: left; }
.admin-console .shell-topbar .user-menu > .menu-panel > a:hover, .admin-console .shell-topbar .user-menu > .menu-panel > button:hover { background: var(--tint); }
.admin-console .shell-topbar .menu-person { overflow: hidden; padding: 4px 10px 6px; text-overflow: ellipsis; white-space: nowrap; }
.admin-console .shell-sidebar { position: absolute; top: calc(var(--frame-top) + 24px); bottom: auto; left: var(--shell-x); z-index: 1; width: 240px; padding: 0 0 80px; overflow: visible; background: transparent; border: 0; }
.admin-console .nav-group { gap: 0; }

/* Shells: the operations console, the same shell on the light bar. The
   brand carries the console name and links to the dashboard; the
   environment badge follows it. At the right the language glyph and the ink
   person square, whose menu holds the person, the roles, the time zone, the
   2FA page and the sign-out. The bar and the sidebar are inside main, which
   therefore stays unpositioned; an alert of the shell spans the width under
   the bar. The collapse button at the end of the sidebar folds it to a 64px
   rail of icons on wide screens; under 1080px the sidebar is the strip. */
.admin-console { background: var(--canvas); }
.admin-console main { max-width: none; min-width: 0; margin: calc(var(--frame-top) + 24px) var(--shell-x) 80px calc(var(--shell-x) + var(--sidebar-width) + 40px); padding: 0; background: transparent; border: 0; border-radius: 0; }
.admin-console .shell-topbar { gap: 16px; height: var(--frame-top); padding: 0 40px; }
.admin-console .shell-topbar .brand { min-width: 0; }
.admin-console .shell-topbar .brand small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-console .shell-topbar .environment-badge { display: block; flex-shrink: 1; min-width: 0; overflow: hidden; line-height: 22px; text-overflow: ellipsis; }
.admin-console .shell-user { flex-shrink: 0; gap: 8px; }
.admin-console .shell-topbar > p[role="alert"] { margin: 0; }
.admin-console .shell-topbar > p[role="alert"]:empty { position: absolute; }
.admin-console .shell-topbar > p[role="alert"]:not(:empty) { position: fixed; top: var(--frame-top); left: 0; right: 0; margin: 0; padding: 8px 40px; background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid var(--danger-line); }
.admin-console .shell-topbar .user-menu > .menu-panel { width: 220px; }
.admin-console .shell-topbar .menu-person { padding-bottom: 0; font-size: var(--text-table); line-height: var(--line-table); }
.admin-console .shell-topbar .menu-roles { padding: 2px 10px 4px; }
.admin-console .menu-panel > .timezone-control { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px 10px 6px; }
.admin-console .menu-panel > .timezone-control > label { color: var(--muted); }
.admin-console .menu-panel > .timezone-control select { width: 100%; min-width: 0; }
.admin-console .menu-panel > .timezone-control > .shell-updated { white-space: normal; }
.admin-console .shell-sidebar:empty { display: none; }
/* Until the operations pages fit their tables to the 940px column (at most
   seven columns, the rest in a detail panel), the operations shell is wider
   than the customer one: the sidebar starts under the brand (40px at 1440)
   and the content runs to the bar's right padding, 1080px wide at 1440. */
@media (min-width: 1080px) {
  .admin-console { --shell-x: calc(max(0px, (100% - 1600px) / 2) + 40px); }
  .admin-console .shell-sidebar { width: var(--sidebar-width); }
  .admin-console .sidebar-toggle { display: flex; align-items: center; justify-content: flex-start; height: var(--control-height-sm); padding: 0 11px; text-align: left; }
  .sidebar-collapsed { --sidebar-width: 64px; }
  .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-group h2 { display: none; }
  .sidebar-collapsed .nav-mark { display: inline-grid; }
  .sidebar-collapsed .nav-link, .sidebar-collapsed .sidebar-toggle { justify-content: center; padding: 0; }
}
@media (max-width: 1079px) {
  .admin-console .shell-sidebar { top: calc(var(--frame-top) + 20px); right: 24px; left: 24px; flex-direction: row; gap: 4px; width: auto; padding: 0 0 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .admin-console .nav-group { flex: none; flex-direction: row; gap: 4px; }
  .admin-console .nav-group h2, .admin-console .sidebar-toggle { display: none; }
  .admin-console .nav-link { flex: none; padding: 6px 12px; white-space: nowrap; }
  .admin-console main { margin: calc(var(--frame-top) + 20px + 45px + 16px) 24px 60px; }
}
@media (max-width: 767px) {
  .admin-console .shell-topbar { gap: 12px; padding: 0 16px; }
  .admin-console .shell-sidebar { top: calc(var(--frame-top) + 16px); right: 16px; left: 16px; }
  .admin-console .nav-link { height: 28px; min-height: 28px; padding: 4px 10px; font-size: var(--text-table); }
  .admin-console main { margin: calc(var(--frame-top) + 16px + 41px + 16px) 16px 48px; }
  .admin-console .shell-topbar > p[role="alert"]:not(:empty) { padding: 8px 16px; }
}
/* English names are longer: the console name gives way on phones. */
@media (max-width: 479px) {
  :lang(en) .admin-console .shell-topbar .brand small, :lang(en) .access-header .brand small { display: none; }
}

/* The content area is a transparent container: the page's sections and
   cards carry the panel ground. */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); padding: 0; border: 0; }
.page-header h1 { margin: 0; font-size: var(--text-page); line-height: var(--line-page); font-weight: var(--weight-bold); }
.page-header p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-body); line-height: var(--line-body); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-header .page-actions { margin-left: auto; }
.page-body { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.session-notice { margin: 72px 24px 24px; color: var(--danger); }
/* Existing IDs and local navigation remain intact for their authorization flows. */
.customer-console main nav { display: none; }
.customer-console #account > p { color: var(--muted); }

/* Narrow screens below 1280px: the sign-in wall takes half the width. */
@media (max-width: 1279px) {
  .access-split > .access-intro { flex-basis: 50%; }
}

/* Narrow screens, 1023px and below: sign-in pages show the form card
   alone. */
@media (max-width: 1023px) {
  dl.data-list.cols-2 { grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); }
  .access-layout { grid-template-columns: minmax(0, 400px); justify-content: center; margin: var(--space-8) auto; }
  .access-intro, .access-split > .access-intro { display: none; }
  .access-split { display: block; min-height: 0; }
  .access-split > .access-card { min-height: calc(100vh - 72px); padding: 96px var(--space-6) var(--space-12); }
  .hero-band { padding: var(--space-8) var(--space-6); }
}

/* Phones, 640px and below: a 16px side gutter everywhere */
@media (max-width: 640px) {
  :root { --topbar-height: 56px; --shell-left: 16px; --text-page: 20px; --line-page: 28px; --text-display: 28px; --line-display: 36px; }
  .customer-console, .admin-console { --topbar-height: 48px; }
  main { padding: var(--space-4); }
  .card, main > section, fieldset { padding: var(--space-4); }
  .filter-panel fieldset { padding: 0; }
  .hero-band { padding: var(--space-6) var(--space-4); }
  .drawer { width: 100%; }
  dialog, .dialog { width: calc(100% - 32px); }
  .customer-console button, .customer-console .button, .customer-console summary, .customer-console input:not([type="checkbox"]):not([type="radio"]), .customer-console select { min-height: 44px; }
  .customer-console .menu-panel a { display: flex; align-items: center; min-height: 44px; }
  .access-header { gap: 12px; padding: 0 16px; }
  .access-layout { margin: var(--space-4) auto; }
  .access-card { padding: var(--space-5) var(--space-4); }
  .access-split > .access-card { min-height: calc(100vh - 64px); padding: 88px var(--space-4) var(--space-8); }

  /* Customer: the environment badge gives way; the amber line stays */
  .customer-frame .environment-badge { display: none; }

}

/* Motion only for readers who have not asked for less of it: quick and
   quiet, .15s on the standard curve. */
@media (prefers-reduced-motion: no-preference) {
  button, .button, .nav-link, .balance-pill, summary, input, select, textarea, .chip, .model-card, .filter-option { transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
  [role="tab"], .tabs a { transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
  input[type="checkbox"].switch::before { transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); }
  .drawer { animation: drawer-enter var(--duration) var(--ease); }
  .menu-panel { animation: popover-enter var(--duration) var(--ease); }
  .badge-dot.badge-info::before, .badge-dot.badge-processing::before { animation: badge-breathe 1.2s ease-in-out infinite; }
  .skeleton { animation: skeleton-breathe 1.5s ease-in-out infinite; }
  @keyframes drawer-enter { from { transform: translateX(24px); } to { transform: none; } }
  @keyframes popover-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes badge-breathe { 50% { opacity: .35; } }
  @keyframes skeleton-breathe { 50% { opacity: .55; } }
}

/* Additions: page units append shared components below this line. */

/* FE8-ADMIN: the operations pages of design v8 (the Admin and AdminTasks
   boards). A page is one or more panels: a near-white box with a 20px by
   24px inset whose parts stand 16px apart. Its header holds a 16px title,
   a 14px muted lede and, at the right, a 13px meta line or the page
   actions, over one hairline. Inside a panel sit modules (hairline boxes
   without a fill), tables with a grey header row, task-state badges in the
   v8 colors and the notices. The shell bar and sidebar are children of
   main, so these rules name panels and their parts only. */
.admin-console { --status-warn-ink: #8a5300; --status-warn-fill: rgba(243, 130, 54, .1); }
.admin-console main.admin-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-console :is(main.admin-panel, main.admin-stack > section, .admin-panel) { --secondary: var(--muted); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.admin-console main.admin-stack > section, .admin-console section.admin-panel { margin: 0; }
.admin-console :where(.admin-panel, main.admin-stack > section) > * { margin-top: 0; margin-bottom: 0; }
/* An empty status line stays in the page (a live region must exist before
   its text) but takes no room: it pulls itself back over the gap. */
.admin-console :where(.admin-panel, main.admin-stack > section, .admin-module) > p:empty { margin-top: calc(-1 * var(--space-4)); }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header { flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header h1, .admin-console :where(.admin-panel, main.admin-stack > section) > .page-header h2 { margin: 0; font-size: var(--text-title); line-height: 1.366; font-weight: var(--weight-bold); letter-spacing: 0; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header p { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.366; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header .page-actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-3); margin-left: auto; }
:where(.admin-console) .page-meta { margin: 0; color: var(--muted); font-size: var(--text-table); line-height: 1.366; white-space: nowrap; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header .page-meta { font-size: var(--text-table); }
.admin-console :where(.admin-panel, main.admin-stack > section) .eyebrow { display: none; }

/* Modules: a hairline box without a fill, 20px by 18px inside; its header
   holds a 16px title, a 13px muted note and an optional 12px more link. */
:where(.admin-console) .admin-module { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-5) 18px; background: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
:where(.admin-console) .admin-module > * { margin-top: 0; margin-bottom: 0; }
:where(.admin-console) .module-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); min-width: 0; }
:where(.admin-console) .module-header > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
:where(.admin-console) .module-header h2, :where(.admin-console) .module-header h3 { margin: 0; font-size: var(--text-title); line-height: 1.3; font-weight: var(--weight-bold); }
:where(.admin-console) .module-header p { margin: 0; color: var(--muted); font-size: var(--text-table); line-height: 1.366; }
:where(.admin-console) .more-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-1); padding-top: 2px; color: var(--ink); font-size: var(--text-small); line-height: 1.37; white-space: nowrap; text-decoration: none; }
:where(.admin-console) .more-link:hover { color: var(--ink); opacity: .7; text-decoration: none; }
:where(.admin-console) .module-status { margin: 0; color: var(--muted); font-size: var(--text-table); line-height: 1.5; }

/* Tables in a panel: a grey header row of 12px muted labels and 13px
   cells; .table-box draws the hairline box the board puts round a list. */
.admin-console :where(.admin-panel, main.admin-stack > section) th { height: auto; padding: 10px 12px; background: var(--canvas); color: var(--muted); font-size: var(--text-small); line-height: 1.366; font-weight: 500; }
.admin-console :where(.admin-panel, main.admin-stack > section) td { height: auto; padding: 12px; font-size: var(--text-table); line-height: 1.4; }
:where(.admin-console) .table-box { border: 1px solid var(--line); border-radius: var(--radius-card); }

/* Badges in a panel: the v8 task colors, 24px high and semibold. */
.admin-console :where(.admin-panel, main.admin-stack > section) span.badge { min-height: 24px; padding: 0 10px; font-weight: 600; line-height: 1; }
.admin-console :where(.admin-panel, main.admin-stack > section) :is(.badge-success, .badge-succeeded) { color: var(--status-ok-ink); background: var(--status-ok-fill); }
.admin-console :where(.admin-panel, main.admin-stack > section) :is(.badge-info, .badge-reserved, .badge-processing) { color: var(--status-run-ink); background: var(--status-run-fill); }
.admin-console :where(.admin-panel, main.admin-stack > section) :is(.badge-neutral, .badge-queued, .badge-muted, .badge-cancelled) { color: var(--status-idle-ink); background: var(--status-idle-fill); }
.admin-console :where(.admin-panel, main.admin-stack > section) :is(.badge-danger, .badge-failed) { color: var(--status-fail-ink); background: var(--status-fail-fill); }
.admin-console :where(.admin-panel, main.admin-stack > section) :is(.badge-warning, .badge-probe) { color: var(--status-warn-ink); background: var(--status-warn-fill); }

/* Notices in a panel: ink text on the v8 grounds. */
.admin-console :where(.admin-panel, main.admin-stack > section) .notice-warning { background: var(--notice-warn-fill); border-color: var(--notice-warn-line); color: var(--ink); }
.admin-console :where(.admin-panel, main.admin-stack > section) .notice-info { background: var(--tint); border-color: var(--line); color: var(--ink); font-size: var(--text-body); line-height: 1.5; }
.admin-console :where(.admin-panel, main.admin-stack > section) .notice-info::before { top: 15px; background: var(--ink); }

/* The error code the customer sees, and a small monospace tag. */
:where(.admin-console) .error-code { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border-radius: var(--radius-small); background: var(--status-fail-fill); color: var(--status-fail-ink); font-family: var(--mono); font-size: var(--text-small); line-height: 1.4; overflow-wrap: anywhere; }
:where(.admin-console) .mono-tag { display: inline-flex; align-items: center; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--ink); font-family: var(--mono); font-size: var(--text-small); line-height: 1.4; overflow-wrap: anywhere; }

/* Glyphs of the operations boards: refresh and search at 16px, the
   chevron of a more link at 12px. */
.glyph.glyph-refresh-16 { width: 16px; height: 16px; clip-path: path("M14 8.05L13.95 8.76L13.81 9.52L13.57 10.25L13.24 10.94L12.82 11.58L12.32 12.17L11.76 12.68L11.13 13.12L10.45 13.48L9.73 13.75L8.99 13.92L8.22 14L7.46 13.98L6.7 13.86L5.96 13.65L5.26 13.34L4.6 12.95L4 12.48L3.46 11.93L3 11.32L2.62 10.65L2.32 9.95L2.12 9.21L2.01 8.45L2.01 7.68L2.1 6.92L2.28 6.18L2.56 5.46L2.93 4.79L3.38 4.17L3.91 3.61L4.5 3.13L5.16 2.72L5.85 2.4L6.58 2.17L7.34 2.04L8.11 2L8.87 2.07L9.62 2.23L10.34 2.48L11.03 2.82L11.66 3.25L12.21 3.73A0.75 0.75 0 0 1 12.27 4.79A0.75 0.75 0 0 1 11.21 4.85L10.75 4.44L10.27 4.12L9.76 3.86L9.21 3.67L8.65 3.55L8.08 3.51L7.51 3.53L6.94 3.63L6.39 3.8L5.87 4.04L5.38 4.35L4.94 4.71L4.54 5.13L4.2 5.59L3.93 6.1L3.72 6.63L3.58 7.19L3.51 7.76L3.51 8.34L3.59 8.91L3.74 9.46L3.96 9.99L4.25 10.49L4.6 10.95L5 11.36L5.45 11.71L5.95 12.01L6.47 12.24L7.03 12.4L7.59 12.48L8.17 12.5L8.74 12.44L9.3 12.31L9.84 12.11L10.35 11.84L10.82 11.51L11.24 11.12L11.61 10.69L11.92 10.2L12.17 9.68L12.35 9.14L12.46 8.57L12.5 7.95A0.75 0.75 0 0 1 13.3 7.25A0.75 0.75 0 0 1 14 8.05ZM14 2.75L14 5.75A0.75 0.75 0 0 1 13.25 6.5L10.25 6.5A0.75 0.75 0 0 1 9.5 5.75A0.75 0.75 0 0 1 10.25 5L12.5 5L12.5 2.75A0.75 0.75 0 0 1 13.25 2A0.75 0.75 0 0 1 14 2.75Z"); }
.glyph.glyph-search-16 { width: 16px; height: 16px; clip-path: path("M12.25 7A5.25 5.25 0 0 1 1.75 7A5.25 5.25 0 0 1 12.25 7ZM10.75 7A3.75 3.75 0 0 0 3.25 7A3.75 3.75 0 0 0 10.75 7ZM11.03 9.97L14.03 12.97A0.75 0.75 0 0 1 14.03 14.03A0.75 0.75 0 0 1 12.97 14.03L9.97 11.03A0.75 0.75 0 0 1 9.97 9.97A0.75 0.75 0 0 1 11.03 9.97Z"); }
.glyph.glyph-chevron-12 { width: 12px; height: 12px; clip-path: path("M5.03 2.47L8.03 5.47A0.75 0.75 0 0 1 8.03 6.53L5.03 9.53A0.75 0.75 0 0 1 3.97 9.53A0.75 0.75 0 0 1 3.97 8.47L6.44 6L3.97 3.53A0.75 0.75 0 0 1 3.97 2.47A0.75 0.75 0 0 1 5.03 2.47Z"); }

@media (max-width: 767px) {
  .admin-console :is(main.admin-panel, main.admin-stack > section, .admin-panel) { padding: var(--space-4); }
  .admin-console :where(.admin-panel, main.admin-stack > section) > .page-header { flex-direction: column; align-items: flex-start; }
  .admin-console :where(.admin-panel, main.admin-stack > section) > .page-header .page-actions { margin-left: 0; }
  :where(.admin-console) .admin-module { padding: var(--space-4); }
}

/* FE8-ADMIN, part two: the same patterns on every other operations page.
   There main itself is the panel (the dashboard keeps its stack of panels).
   Each rule keeps the weight of the base rule it replaces, so a page rule of
   equal weight, loaded later, still wins. A page header is either an h1
   with its intro paragraphs, the last of which carries the hairline, or a
   .page-header box. Sections and cards are modules, tables get the grey
   header row in a hairline box, field labels are 12px muted, and badges
   and notices take the v8 colors. Rules that reach into descendants leave
   the shell bar and sidebar alone: both are children of main. */
.admin-console main:not(.admin-stack) { --secondary: var(--muted); padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
:where(.admin-console main:not(.admin-stack)) > :last-child { margin-bottom: 0; }
:where(.admin-console main) .eyebrow { display: none; }
:where(.admin-console) main > h1 { margin: 0; font-size: var(--text-title); line-height: 1.366; font-weight: var(--weight-bold); letter-spacing: 0; }
:where(.admin-console) main > h1 ~ p[data-i18n]:not([id]):not([role]) { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-table); line-height: 1.5; }
:where(.admin-console) main > h1 + p[data-i18n]:not([id]):not([role]) { margin-top: 2px; font-size: var(--text-body); }
:where(.admin-console) main > h1 ~ p[data-i18n]:not([id]):not([role]):not(:has(~ p[data-i18n]:not([id]):not([role]))) { margin-bottom: var(--space-4); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
:where(.admin-console main) .page-header { align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: 0 0 14px; border-bottom: 1px solid var(--line); }
:where(.admin-console main) .page-header > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.admin-console main) .page-header h1 { margin: 0; font-size: var(--text-title); line-height: 1.366; font-weight: var(--weight-bold); letter-spacing: 0; }
:where(.admin-console main) .page-header p { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.366; }
:where(.admin-console main) .page-header .page-actions { flex-shrink: 0; align-items: center; gap: var(--space-3); }
:where(.admin-console main) .page-header .page-meta { font-size: var(--text-table); }
/* Page tabs stay on one row and scroll sideways on a phone; the underline
   is drawn inside the row, so the scroll box does not clip it. */
:where(.admin-console main) .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
:where(.admin-console main) .tabs a { flex-shrink: 0; margin-bottom: 0; white-space: nowrap; }

/* Modules: sections and cards are hairline boxes, 20px by 18px inside;
   their titles are 16px. */
:where(.admin-console) main:where(:not(.admin-stack)) > section, :where(.admin-console main) .card { padding: var(--space-5) 18px; background: none; }
:where(.admin-console main) section:where(:not(.shell-sidebar *)) > h2 { margin: 0 0 var(--space-3); font-size: var(--text-title); line-height: 1.3; }
:where(.admin-console) main:where(:not(.admin-stack)) > section > p:where([data-i18n]:not([id], [role])) { max-width: 100ch; margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-table); line-height: 1.5; }
:where(.admin-console) main:where(:not(.admin-stack)) > section > h2 + p:where([data-i18n]:not([id], [role])) { margin-top: -8px; }

/* Tables: a grey header row of 12px muted labels over 13px cells; a list
   table sits in a hairline box. Row headers in the body keep the panel. */
.admin-console th, .admin-console td { height: auto; }
.admin-console th { padding: 10px 12px; }
.admin-console td { padding: 12px; line-height: 1.4; }
.admin-console th:where(thead th) { background: var(--canvas); color: var(--muted); font-size: var(--text-small); line-height: 1.366; font-weight: 500; }
:where(.admin-console main:not(.admin-stack)) :is(.table-scroll, .routing-table-scroll):has(> table:not([hidden])), :where(.admin-console main:not(.admin-stack)) section > table { border: 1px solid var(--line); border-radius: var(--radius-card); }

/* Fields: labels of the fields are 12px muted, the fields 13px; a label
   that wraps its control or names a checkbox keeps the body text. */
:where(.admin-console main) label:where(:not(:has(> input, > select, > textarea), :has(+ input[type="checkbox"]), .shell-topbar *, .shell-sidebar *)) { color: var(--muted); font-size: var(--text-small); line-height: 1.366; font-weight: 500; }
:where(.admin-console) main :where(input:not([type="checkbox"], [type="radio"]), select, textarea):where(:not(.shell-topbar *, .shell-sidebar *)) { font-size: var(--text-table); }

/* Badges take the v8 task colors; a badge in a line of text is 24px high
   and semibold. Status lines drawn as badges keep their own size. */
:where(.admin-console main) span.badge { min-height: 24px; padding: 0 10px; font-weight: 600; line-height: 1; }
:where(.admin-console main) .badge { color: var(--status-idle-ink); background: var(--status-idle-fill); }
:where(.admin-console main) :is(.badge-success, .badge-succeeded) { color: var(--status-ok-ink); background: var(--status-ok-fill); }
:where(.admin-console main) :is(.badge-info, .badge-reserved, .badge-processing) { color: var(--status-run-ink); background: var(--status-run-fill); }
:where(.admin-console main) :is(.badge-danger, .badge-failed) { color: var(--status-fail-ink); background: var(--status-fail-fill); }
:where(.admin-console main) :is(.badge-warning, .badge-probe) { color: var(--status-warn-ink); background: var(--status-warn-fill); }
/* A status line drawn as an info badge says loading as well as a failed
   read, so it is neutral: v8 blue means a task is running. */
:where(.admin-console main) p.badge-info { color: var(--status-idle-ink); background: var(--status-idle-fill); }

/* Notices: ink text on the v8 grounds; a plain notice is the neutral one. */
:where(.admin-console main) .notice:where(:not(.notice-info, .notice-warning, .notice-danger, .notice-success)) { background: var(--tint); color: var(--ink); }
:where(.admin-console main) .notice-warning { background: var(--notice-warn-fill); border-color: var(--notice-warn-line); color: var(--ink); }
:where(.admin-console main) .notice-info { background: var(--tint); border-color: var(--line); color: var(--ink); }
:where(.admin-console main) .notice-info::before { background: var(--ink); }

@media (max-width: 767px) {
  .admin-console main:not(.admin-stack) { padding: var(--space-4); }
  :where(.admin-console main) .page-header { flex-direction: column; align-items: flex-start; }
  :where(.admin-console main) .page-header .page-actions { margin-left: 0; }
  :where(.admin-console) main:where(:not(.admin-stack)) > section, :where(.admin-console main) .card { padding: var(--space-4); }
}

/* FE8-CONSOLE: customer console page cards, panels, state badges, tables,
   notices, choice pills, dialogs and content glyphs (design v8). A console
   page is one or more cards inside its page section: a 1px hairline box on
   the panel colour, 20px by 24px, its head a 16px title over a 14px muted
   line and a hairline. Panels inside a card carry the faint shadow or a
   hairline. Every rule here has its own class, so no earlier rule changes. */
.console-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0 0 16px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.console-card:last-child { margin-bottom: 0; }
.console-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.console-head-text { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; min-width: 0; }
.console-head h1 { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.366; font-weight: var(--weight-bold); letter-spacing: 0; }
.console-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.366; }
.console-head p.console-caption { margin-top: 4px; font-size: var(--text-small); line-height: var(--line-small); overflow-wrap: anywhere; }
.console-caption code, .console-caption .identifier { font-family: var(--mono); font-size: 11px; }
.console-panel { min-width: 0; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }

/* The "more" link of a section head: 12px ink text and a small chevron. */
.console-more { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; color: var(--ink); font-size: var(--text-small); line-height: 1.37; text-decoration: none; }
.console-more:hover { color: var(--ink); opacity: .7; text-decoration: none; }

/* Task states, one spec on every board: 24px high, 12px semibold, the
   state's text on its soft fill; never purple, never an ink fill. */
.state-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-control); background: var(--status-idle-fill); color: var(--status-idle-ink); font-size: var(--text-small); line-height: 1; font-weight: 600; white-space: nowrap; }
.state-badge.state-ok { background: var(--status-ok-fill); color: var(--status-ok-ink); }
.state-badge.state-run { background: var(--status-run-fill); color: var(--status-run-ink); }
.state-badge.state-idle { background: var(--status-idle-fill); color: var(--status-idle-ink); }
.state-badge.state-fail { background: var(--status-fail-fill); color: var(--status-fail-ink); }

/* Console tables: the scroll box carries the hairline, the header row the
   grey; cells are 14px with hairlines. Only phones scroll sideways. The box
   is the containing block of visually hidden labels in its cells, so they
   scroll with the table instead of widening the page. */
.console-table { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.console-table > table { display: table; width: 100%; overflow: visible; border-collapse: collapse; background: transparent; font-size: 14px; line-height: 1.366; }
.console-table thead tr { background: var(--canvas); }
.console-table th { height: auto; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); line-height: 1.5; font-weight: 400; text-align: left; white-space: nowrap; }
.console-table td { height: auto; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.366; vertical-align: middle; }
.console-table tbody tr:last-child > td { border-bottom: 0; }
.console-table tbody tr:hover > td { background: rgba(26, 35, 48, .02); }
.console-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.console-table .mono { font-family: var(--mono); font-size: 13px; }
.console-table .sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-small); line-height: 1.4; }

/* Notices: neutral information on the ink tint, warnings on the orange
   tint, each with its glyph; the text stays ink. */
.console-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 16px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); font-size: 14px; line-height: 1.5; }
.console-note > .glyph { margin-top: 1px; }
.console-note p { margin: 0; }
.console-note-warn { background: var(--notice-warn-fill); border-color: var(--notice-warn-line); }
.console-note-title { display: block; margin: 0 0 2px; font-weight: 600; }

/* Empty states inside a panel or table: a glyph, one line and an action. */
.console-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 160px; padding: 32px 20px; color: var(--muted); text-align: center; }
.console-empty > .glyph { color: var(--muted); }
.console-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.console-empty-title { color: var(--ink); font-size: 14px; font-weight: 600; }

/* Segmented radio choices (models, aspect ratios, views): the radio stays a
   real, focusable input, drawn by its label. The checked label is ink. */
.choice-pills { position: relative; display: flex; gap: 2px; max-width: 100%; padding: 2px; overflow-x: auto; border-radius: var(--radius-control); background: var(--inset); scrollbar-width: none; }
.choice-input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.choice-pill { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-control); background: transparent; color: var(--ink); font-size: 13px; line-height: 1; font-weight: 500; white-space: nowrap; cursor: pointer; }
.choice-pill:hover { background: rgba(26, 35, 48, .06); }
.choice-input:checked + .choice-pill { background: var(--ink); color: var(--on-ink); }
.choice-input:focus-visible + .choice-pill { outline: 2px solid var(--accent); outline-offset: 1px; }
.choice-input:disabled + .choice-pill { cursor: not-allowed; opacity: .55; }
.choice-input:disabled + .choice-pill:hover { background: transparent; }
.choice-input:checked:disabled + .choice-pill:hover { background: var(--ink); }
.choice-pills-soft .choice-pill { height: 24px; padding: 0 10px; color: var(--muted); font-weight: 400; }
.choice-pills-soft .choice-pill:hover { background: transparent; color: var(--ink); }
.choice-pills-soft .choice-input:checked + .choice-pill { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* Soft buttons (the grey chips of the playground) and icon buttons. */
.soft-button, button.soft-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 4px; min-height: 0; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: var(--inset); color: var(--ink); font-size: 13px; line-height: 1; font-weight: 400; white-space: nowrap; text-decoration: none; }
.soft-button:hover, button.soft-button:hover { background: rgba(26, 35, 48, .1); color: var(--ink); text-decoration: none; }
.icon-button, button.icon-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); }
.icon-button:hover, button.icon-button:hover { background: var(--surface-hover); color: var(--ink); }

/* Dialogs: a fixed layer with the backdrop and a centred 480px panel. The
   layer lives inside its page section, so a concealed page hides it. */
.console-dialog-layer { position: fixed; inset: 0; z-index: 1000; }
.console-backdrop { position: absolute; inset: 0; background: rgba(26, 35, 48, .45); }
.console-dialog { position: fixed; top: 50%; left: 50%; z-index: 1001; width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; transform: translate(-50%, -50%); background: var(--surface); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); color: var(--ink); }
.console-dialog-close, button.console-dialog-close { position: absolute; top: 8px; right: 8px; }
.console-dialog-head { padding: 24px 56px 16px 24px; border-bottom: 1px solid var(--line); }
.console-dialog-head h2 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: var(--weight-bold); }
.console-dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; font-weight: 500; }
.console-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.console-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.console-dialog-actions > .button, .console-dialog-actions > button { min-width: 128px; height: 40px; padding: 0 20px; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Phones: cards and dialogs tighten; in-card controls keep a 32px target
   (the 44px floor of the console stays for every other control). */
@media (max-width: 767px) {
  .console-card { padding: 16px; }
  .console-head { flex-direction: column; align-items: stretch; }
  .console-head-text { flex-basis: auto; }
  .console-dialog-head { padding: 20px 52px 12px 16px; }
  .console-dialog-body { padding: 16px; }
  .console-dialog-actions { flex-direction: column-reverse; }
  .console-dialog-actions > .button, .console-dialog-actions > button { width: 100%; }
  .customer-console .choice-pill { height: 32px; }
  .customer-console .soft-button, .customer-console .icon-button { min-height: 32px; height: 32px; }
  .customer-console .icon-button { width: 32px; }
}

/* Content glyphs of the console boards, drawn like the shell glyphs: an
   empty span in currentColor clipped to the outline of the board's stroke. */
.glyph.glyph-step-done-16 { width: 16px; height: 16px; clip-path: path("M16 8A8 8 0 0 1 0 8A8 8 0 0 1 16 8ZM14.5 8A6.5 6.5 0 0 0 1.5 8A6.5 6.5 0 0 0 14.5 8ZM5.53 7.67L6.99 9.13L10.46 5.48A0.75 0.75 0 0 1 11.52 5.46A0.75 0.75 0 0 1 11.54 6.52L7.54 10.72A0.75 0.75 0 0 1 6.47 10.73L4.47 8.73A0.75 0.75 0 0 1 4.47 7.67A0.75 0.75 0 0 1 5.53 7.67Z"); }
.glyph.glyph-step-open-16 { width: 16px; height: 16px; clip-path: path("M16 8A8 8 0 0 1 0 8A8 8 0 0 1 16 8ZM14.5 8A6.5 6.5 0 0 0 1.5 8A6.5 6.5 0 0 0 14.5 8Z"); }
.glyph.glyph-more-8 { width: 5px; height: 8px; clip-path: path("M1.42 0.58L4.42 3.58A0.6 0.6 0 0 1 4.42 4.42L1.42 7.42A0.6 0.6 0 0 1 0.58 7.42A0.6 0.6 0 0 1 0.58 6.58L3.15 4L0.58 1.42A0.6 0.6 0 0 1 0.58 0.58A0.6 0.6 0 0 1 1.42 0.58Z"); }
.glyph.glyph-video-32 { width: 32px; height: 32px; clip-path: path("M6 6.25L26 6.25A2.75 2.75 0 0 1 28.75 9L28.75 23A2.75 2.75 0 0 1 26 25.75L6 25.75A2.75 2.75 0 0 1 3.25 23L3.25 9A2.75 2.75 0 0 1 6 6.25ZM6 7.75A1.25 1.25 0 0 0 4.75 9L4.75 23A1.25 1.25 0 0 0 6 24.25L26 24.25A1.25 1.25 0 0 0 27.25 23L27.25 9A1.25 1.25 0 0 0 26 7.75L6 7.75ZM19.88 15.35A0.75 0.75 0 0 1 19.88 16.65L13.88 20.15A0.75 0.75 0 0 1 12.75 19.5L12.75 12.5A0.75 0.75 0 0 1 13.88 11.85ZM14.25 13.81L14.25 18.19L18.01 16Z"); }
.glyph.glyph-close-16 { width: 16px; height: 16px; clip-path: path("M4.03 2.97L13.03 11.97A0.75 0.75 0 0 1 13.03 13.03A0.75 0.75 0 0 1 11.97 13.03L2.97 4.03A0.75 0.75 0 0 1 2.97 2.97A0.75 0.75 0 0 1 4.03 2.97ZM13.03 4.03L4.03 13.03A0.75 0.75 0 0 1 2.97 13.03A0.75 0.75 0 0 1 2.97 11.97L11.97 2.97A0.75 0.75 0 0 1 13.03 2.97A0.75 0.75 0 0 1 13.03 4.03Z"); }
.glyph.glyph-more-10 { width: 8px; height: 10px; clip-path: path("M2.99 1.01L6.49 4.51A0.7 0.7 0 0 1 6.49 5.49L2.99 8.99A0.7 0.7 0 0 1 2.01 8.99A0.7 0.7 0 0 1 2.01 8.01L5.01 5L2.01 1.99A0.7 0.7 0 0 1 2.01 1.01A0.7 0.7 0 0 1 2.99 1.01Z"); }
.glyph.glyph-eraser-13 { width: 13px; height: 13px; clip-path: path("M5.11 11L10.68 11A0.6 0.6 0 0 1 11.28 11.61A0.6 0.6 0 0 1 10.68 12.21L5.11 12.21A0.6 0.6 0 0 1 4.5 11.61A0.6 0.6 0 0 1 5.11 11ZM2.23 7.51L7.56 2.17A0.6 0.6 0 0 1 7.59 2.14L7.71 2.04L7.88 1.93L8.06 1.84L8.24 1.78L8.44 1.74L8.64 1.73L8.83 1.74L9.03 1.78L9.22 1.84L9.39 1.93L9.56 2.04L9.68 2.14A0.6 0.6 0 0 1 9.71 2.17L10.83 3.29A0.6 0.6 0 0 1 10.86 3.32L10.96 3.44L11.07 3.61L11.16 3.78L11.22 3.97L11.26 4.17L11.27 4.36L11.26 4.56L11.22 4.76L11.16 4.94L11.07 5.12L10.96 5.29L10.86 5.41A0.6 0.6 0 0 1 10.83 5.44L6.56 9.71A0.6 0.6 0 0 1 6.54 9.72L4.59 11.58A0.6 0.6 0 0 1 4.18 11.75L2.97 11.75A0.6 0.6 0 0 1 2.54 11.57L1.24 10.27A0.6 0.6 0 0 1 1.21 10.24L1.11 10.12L1 9.95L0.91 9.77L0.85 9.58L0.81 9.39L0.8 9.19L0.81 9L0.85 8.8L0.91 8.61L1 8.44L1.11 8.27L1.21 8.15A0.6 0.6 0 0 1 1.36 8.03ZM2.07 9.01L2.08 9L2.05 9.03L2.03 9.07L2.02 9.11L2.01 9.15L2.01 9.19L2.01 9.23L2.02 9.28L2.03 9.32L2.05 9.35L2.08 9.39L2.11 9.43L3.22 10.54L3.94 10.54L5.71 8.85L9.96 4.6L10 4.56L10.02 4.52L10.04 4.49L10.05 4.45L10.06 4.41L10.06 4.36L10.06 4.32L10.05 4.28L10.04 4.24L10.02 4.2L10 4.17L9.96 4.13L8.87 3.04L8.83 3L8.8 2.98L8.76 2.96L8.72 2.95L8.68 2.94L8.64 2.94L8.59 2.94L8.55 2.95L8.51 2.96L8.48 2.98L8.44 3L8.4 3.04L3.03 8.41A0.6 0.6 0 0 1 2.91 8.5Z"); }
.glyph.glyph-play-solid-12 { width: 12px; height: 12px; clip-path: path("M3 1.8L3 10.2L10 6Z"); }
.glyph.glyph-list-14 { width: 14px; height: 14px; clip-path: path("M5.25 3.29L11.55 3.29A0.56 0.56 0 0 1 12.11 3.85A0.56 0.56 0 0 1 11.55 4.41L5.25 4.41A0.56 0.56 0 0 1 4.69 3.85A0.56 0.56 0 0 1 5.25 3.29ZM5.25 6.44L11.55 6.44A0.56 0.56 0 0 1 12.11 7A0.56 0.56 0 0 1 11.55 7.56L5.25 7.56A0.56 0.56 0 0 1 4.69 7A0.56 0.56 0 0 1 5.25 6.44ZM5.25 9.59L11.55 9.59A0.56 0.56 0 0 1 12.11 10.15A0.56 0.56 0 0 1 11.55 10.71L5.25 10.71A0.56 0.56 0 0 1 4.69 10.15A0.56 0.56 0 0 1 5.25 9.59ZM2.45 3.29L2.8 3.29A0.56 0.56 0 0 1 3.36 3.85A0.56 0.56 0 0 1 2.8 4.41L2.45 4.41A0.56 0.56 0 0 1 1.89 3.85A0.56 0.56 0 0 1 2.45 3.29ZM2.45 6.44L2.8 6.44A0.56 0.56 0 0 1 3.36 7A0.56 0.56 0 0 1 2.8 7.56L2.45 7.56A0.56 0.56 0 0 1 1.89 7A0.56 0.56 0 0 1 2.45 6.44ZM2.45 9.59L2.8 9.59A0.56 0.56 0 0 1 3.36 10.15A0.56 0.56 0 0 1 2.8 10.71L2.45 10.71A0.56 0.56 0 0 1 1.89 10.15A0.56 0.56 0 0 1 2.45 9.59Z"); }
.glyph.glyph-info-14 { width: 14px; height: 14px; clip-path: path("M12.63 7A5.63 5.63 0 0 1 1.36 7A5.63 5.63 0 0 1 12.63 7ZM11.51 7A4.51 4.51 0 0 0 2.48 7A4.51 4.51 0 0 0 11.51 7ZM7.56 6.3L7.56 9.45A0.56 0.56 0 0 1 7 10.01A0.56 0.56 0 0 1 6.44 9.45L6.44 6.3A0.56 0.56 0 0 1 7 5.74A0.56 0.56 0 0 1 7.56 6.3ZM7.56 4.48L7.56 4.55A0.56 0.56 0 0 1 7 5.11A0.56 0.56 0 0 1 6.44 4.55L6.44 4.48A0.56 0.56 0 0 1 7 3.92A0.56 0.56 0 0 1 7.56 4.48Z"); }
.glyph.glyph-info-16 { width: 16px; height: 16px; clip-path: path("M14.44 8A6.44 6.44 0 0 1 1.56 8A6.44 6.44 0 0 1 14.44 8ZM13.16 8A5.16 5.16 0 0 0 2.84 8A5.16 5.16 0 0 0 13.16 8ZM8.64 7.2L8.64 10.8A0.64 0.64 0 0 1 8 11.44A0.64 0.64 0 0 1 7.36 10.8L7.36 7.2A0.64 0.64 0 0 1 8 6.56A0.64 0.64 0 0 1 8.64 7.2ZM8.64 5.12L8.64 5.2A0.64 0.64 0 0 1 8 5.84A0.64 0.64 0 0 1 7.36 5.2L7.36 5.12A0.64 0.64 0 0 1 8 4.48A0.64 0.64 0 0 1 8.64 5.12Z"); }
.glyph.glyph-info-18 { width: 18px; height: 18px; clip-path: path("M16.25 9A7.25 7.25 0 0 1 1.75 9A7.25 7.25 0 0 1 16.25 9ZM14.8 9A5.81 5.81 0 0 0 3.19 9A5.81 5.81 0 0 0 14.8 9ZM9.72 8.1L9.72 12.15A0.72 0.72 0 0 1 9 12.87A0.72 0.72 0 0 1 8.28 12.15L8.28 8.1A0.72 0.72 0 0 1 9 7.38A0.72 0.72 0 0 1 9.72 8.1ZM9.72 5.76L9.72 5.85A0.72 0.72 0 0 1 9 6.57A0.72 0.72 0 0 1 8.28 5.85L8.28 5.76A0.72 0.72 0 0 1 9 5.04A0.72 0.72 0 0 1 9.72 5.76Z"); }
.glyph.glyph-warning-16 { width: 16px; height: 16px; clip-path: path("M7.39 1.66A0.7 0.7 0 0 1 8.61 1.66L15.11 13.16A0.7 0.7 0 0 1 14.5 14.2L1.5 14.2A0.7 0.7 0 0 1 0.89 13.16ZM2.7 12.8L13.3 12.8L8 3.42ZM8.7 6.5L8.7 9.5A0.7 0.7 0 0 1 8 10.2A0.7 0.7 0 0 1 7.3 9.5L7.3 6.5A0.7 0.7 0 0 1 8 5.8A0.7 0.7 0 0 1 8.7 6.5ZM8.7 11.6L8.7 11.7A0.7 0.7 0 0 1 8 12.4A0.7 0.7 0 0 1 7.3 11.7L7.3 11.6A0.7 0.7 0 0 1 8 10.9A0.7 0.7 0 0 1 8.7 11.6Z"); }
.glyph.glyph-copy-14 { width: 14px; height: 14px; clip-path: path("M6.12 4.2L10.5 4.2A1.93 1.93 0 0 1 12.42 6.12L12.42 10.5A1.93 1.93 0 0 1 10.5 12.42L6.12 12.42A1.93 1.93 0 0 1 4.2 10.5L4.2 6.12A1.93 1.93 0 0 1 6.12 4.2ZM6.12 5.42A0.7 0.7 0 0 0 5.42 6.12L5.42 10.5A0.7 0.7 0 0 0 6.12 11.2L10.5 11.2A0.7 0.7 0 0 0 11.2 10.5L11.2 6.12A0.7 0.7 0 0 0 10.5 5.42L6.12 5.42ZM8.58 4.81L8.58 3.08L8.57 3.03L8.57 3L8.56 2.97L8.54 2.94L8.53 2.91L8.51 2.89L8.49 2.87L8.46 2.85L8.43 2.83L8.41 2.82L8.38 2.81L8.34 2.8L8.29 2.8L3.08 2.8L3.03 2.8L3 2.81L2.97 2.82L2.94 2.83L2.91 2.85L2.89 2.87L2.87 2.89L2.85 2.91L2.83 2.94L2.82 2.97L2.81 3L2.8 3.03L2.8 3.08L2.8 8.29L2.8 8.34L2.81 8.38L2.82 8.41L2.83 8.43L2.85 8.46L2.87 8.49L2.89 8.51L2.91 8.53L2.94 8.54L2.97 8.56L3 8.57L3.03 8.57L3.08 8.58L4.81 8.58L4.81 9.8L3.06 9.8A0.61 0.61 0 0 1 3.03 9.8L2.88 9.79L2.71 9.76L2.53 9.7L2.37 9.63L2.22 9.54L2.08 9.43L1.95 9.3L1.84 9.16L1.74 9L1.67 8.84L1.62 8.67L1.58 8.49L1.58 8.35A0.61 0.61 0 0 1 1.57 8.31L1.57 3.06A0.61 0.61 0 0 1 1.58 3.03L1.58 2.88L1.62 2.71L1.67 2.53L1.74 2.37L1.84 2.22L1.95 2.08L2.08 1.95L2.22 1.84L2.37 1.74L2.53 1.67L2.71 1.62L2.88 1.58L3.03 1.58A0.61 0.61 0 0 1 3.06 1.57L8.31 1.57A0.61 0.61 0 0 1 8.35 1.58L8.49 1.58L8.67 1.62L8.84 1.67L9 1.74L9.16 1.84L9.3 1.95L9.43 2.08L9.54 2.22L9.63 2.37L9.7 2.53L9.76 2.71L9.79 2.88L9.8 3.03A0.61 0.61 0 0 1 9.8 3.06L9.8 4.81L8.58 4.81Z"); }
.glyph.glyph-chevron-right-14 { width: 14px; height: 14px; clip-path: path("M5.57 2.43L9.57 6.43A0.8 0.8 0 0 1 9.57 7.57L5.57 11.57A0.8 0.8 0 0 1 4.43 11.57A0.8 0.8 0 0 1 4.43 10.43L7.87 7L4.43 3.57A0.8 0.8 0 0 1 4.43 2.43A0.8 0.8 0 0 1 5.57 2.43Z"); }
.glyph.glyph-chevron-right-16 { width: 16px; height: 16px; clip-path: path("M6.53 3.47L10.53 7.47A0.75 0.75 0 0 1 10.53 8.53L6.53 12.53A0.75 0.75 0 0 1 5.47 12.53A0.75 0.75 0 0 1 5.47 11.47L8.94 8L5.47 4.53A0.75 0.75 0 0 1 5.47 3.47A0.75 0.75 0 0 1 6.53 3.47Z"); }
.glyph.glyph-close-20 { width: 20px; height: 20px; clip-path: path("M6.07 4.93L15.07 13.93A0.8 0.8 0 0 1 15.07 15.07A0.8 0.8 0 0 1 13.93 15.07L4.93 6.07A0.8 0.8 0 0 1 4.93 4.93A0.8 0.8 0 0 1 6.07 4.93ZM15.07 6.07L6.07 15.07A0.8 0.8 0 0 1 4.93 15.07A0.8 0.8 0 0 1 4.93 13.93L13.93 4.93A0.8 0.8 0 0 1 15.07 4.93A0.8 0.8 0 0 1 15.07 6.07Z"); }
.glyph.glyph-tray-48 { width: 48px; height: 48px; clip-path: path("M5 27A1 1 0 0 1 5.05 26.69L10.55 9.69A1 1 0 0 1 11.5 9L36.5 9A1 1 0 0 1 37.45 9.69L42.95 26.69A1 1 0 0 1 43 27L43 38A1 1 0 0 1 43 38.06L42.98 38.36L42.91 38.72L42.81 39.06L42.66 39.4L42.47 39.71L42.25 39.99L41.99 40.25L41.71 40.47L41.4 40.66L41.06 40.81L40.72 40.91L40.36 40.98L40.06 41A1 1 0 0 1 40 41L8 41A1 1 0 0 1 7.94 41L7.64 40.98L7.28 40.91L6.94 40.81L6.6 40.66L6.29 40.47L6.01 40.25L5.75 39.99L5.53 39.71L5.34 39.4L5.19 39.06L5.09 38.72L5.02 38.36L5 38.06A1 1 0 0 1 5 38ZM7 37.97L7.01 38.12L7.03 38.24L7.07 38.35L7.12 38.46L7.18 38.57L7.25 38.66L7.34 38.75L7.43 38.82L7.54 38.88L7.65 38.93L7.76 38.97L7.88 38.99L8.03 39L39.97 39L40.12 38.99L40.24 38.97L40.35 38.93L40.46 38.88L40.57 38.82L40.66 38.75L40.75 38.66L40.82 38.57L40.88 38.46L40.93 38.35L40.97 38.24L40.99 38.12L41 37.97L41 27.16L35.77 11L12.23 11L7 27.16ZM6 26L16 26A1 1 0 0 1 16.89 26.55L19.12 31L28.88 31L31.11 26.55A1 1 0 0 1 32 26L42 26A1 1 0 0 1 43 27A1 1 0 0 1 42 28L32.62 28L30.39 32.45A1 1 0 0 1 29.5 33L18.5 33A1 1 0 0 1 17.61 32.45L15.38 28L6 28A1 1 0 0 1 5 27A1 1 0 0 1 6 26Z"); }
.glyph.glyph-key-48 { width: 48px; height: 48px; clip-path: path("M26 31A9 9 0 0 1 8 31A9 9 0 0 1 26 31ZM24 31A7 7 0 0 0 10 31A7 7 0 0 0 24 31ZM21.99 24.59L37.29 9.29A1 1 0 0 1 38.71 9.29A1 1 0 0 1 38.71 10.71L23.41 26.01A1 1 0 0 1 21.99 26.01A1 1 0 0 1 21.99 24.59ZM33.71 14.29L38.21 18.79A1 1 0 0 1 38.21 20.21A1 1 0 0 1 36.79 20.21L32.29 15.71A1 1 0 0 1 32.29 14.29A1 1 0 0 1 33.71 14.29ZM29.21 18.79L32.21 21.79A1 1 0 0 1 32.21 23.21A1 1 0 0 1 30.79 23.21L27.79 20.21A1 1 0 0 1 27.79 18.79A1 1 0 0 1 29.21 18.79Z"); }

/* FE8-PUBLIC (Issue 2182): shared pieces of the public model pages, the home
   page, the model catalogue and the model page, after the v8 boards. The
   model card (one component on the three pages), the type tag, the state
   pill, the section head, the image band, the purple call to action and the
   board glyphs. Page files only place them. */
:root {
  --pill-ground: rgba(26, 35, 48, .6);
  --pill-line: rgba(235, 244, 251, .3);
  --dot-live: #01ce0f;
  --dot-soon: #f38236;
  --hero-wash: rgba(16, 22, 31, .5);
  --ring: rgba(26, 35, 48, .5);
  --cover-ground: #d9d9d9;
  --accent-tint: rgba(112, 54, 240, .1);
  --accent-tint-hover: rgba(112, 54, 240, .16);
  --accent-faint: rgba(112, 54, 240, .06);
  --band-sub: rgba(235, 244, 251, .72);
  --code-tab: rgba(255, 255, 255, .62);
  --code-copy: rgba(255, 255, 255, .72);
}

/* Type tag (Atlas mono tag) and the state pill on a model still */
.type-tag { display: inline-flex; align-items: center; padding: 3px 4px; border: 1px solid var(--tag-video-line); border-radius: var(--radius-small); background: var(--tag-video-fill); color: var(--tag-video-ink); font-family: var(--mono); font-size: 12px; line-height: 1.25; white-space: nowrap; }
.type-tag.type-image { border-color: var(--tag-image-line); background: var(--tag-image-fill); color: var(--tag-image-ink); }
.type-tag.type-chat { border-color: var(--tag-chat-line); background: var(--tag-chat-fill); color: var(--tag-chat-ink); }
.type-tag.type-voice { border-color: var(--tag-voice-line); background: var(--tag-voice-fill); color: var(--tag-voice-ink); }
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--pill-line); border-radius: var(--radius-control); background: var(--pill-ground); color: var(--band-ink); font-size: 11px; line-height: 1; white-space: nowrap; }
.status-pill::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--dot-live); }
.status-pill.is-soon::before { background: var(--dot-soon); }
.status-pill.is-large { gap: 6px; min-height: 22px; padding: 3px 8px; font-size: 12px; }
.status-pill.is-large::before { width: 6px; height: 6px; }

/* Model card: panel, 248/140 still with the pill, tag above the name, a
   two-line name and description, the ID, the price and the try label. A
   live card is a link with a hover ring; a card of a model coming soon is
   a plain article. */
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.catalog-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border-radius: var(--radius-card); color: var(--ink); text-decoration: none; }
a.catalog-card:hover { color: var(--ink); text-decoration: none; }
a.catalog-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; border-radius: var(--radius-card); pointer-events: none; }
a.catalog-card:hover::after { border-width: 2px; border-color: var(--ring); }
.catalog-cover { position: relative; display: block; flex: none; aspect-ratio: 248 / 140; overflow: hidden; background: var(--cover-ground); }
.catalog-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalog-cover > .status-pill { position: absolute; top: 12px; left: 12px; }
.catalog-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 12px; }
.catalog-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.catalog-name { display: -webkit-box; margin: 0 0 8px; overflow: hidden; font-size: 14px; line-height: 1.366; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-desc { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.366; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-id { display: block; min-height: 16px; margin: 0 0 14px; overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 11px; line-height: 1.366; white-space: nowrap; text-overflow: ellipsis; }
.catalog-id > code { font-size: inherit; }
/* The state as text beside the tag; only list views show it. */
.catalog-state { display: none; color: var(--muted); font-size: 12px; line-height: 1.366; }
/* A coming-soon card names when its ID is published in words, not an ID:
   it wraps instead of ending in an ellipsis (English at 390px). */
.catalog-id.is-later { font-family: var(--font); font-size: 12px; white-space: normal; }
/* The foot keeps the try label at the right; a long price wraps inside
   its own box, so the feet of a row line up. */
.catalog-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.catalog-price { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 4px; min-height: 24px; min-width: 0; }
.catalog-lead, .catalog-unit { color: var(--muted); font-size: 12px; white-space: nowrap; }
.catalog-value { font-size: 18px; line-height: 1.366; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalog-note, .catalog-later { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); font-size: 13px; line-height: 1.366; }
/* A card of a model coming soon has its price line at the foot too. */
.catalog-body > .catalog-later { margin-top: auto; }
.catalog-try { display: inline-flex; flex: none; align-items: center; height: 24px; margin-left: auto; padding: 0 20px; border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-size: 12px; white-space: nowrap; }
a.catalog-card:hover .catalog-try { background: var(--accent-hover); }
@media (max-width: 1023px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .catalog-grid { gap: 12px; }
  /* Phones: the price on one line where it fits, the try label under it. */
  .catalog-foot { flex-direction: column; align-items: flex-start; }
  .catalog-price { gap: 3px; }
  .catalog-lead, .catalog-unit { font-size: 11px; }
  .catalog-try { margin-left: 0; padding: 0 14px; }
}

/* Section head of a public page: a 36px title, a 16px line and an optional
   outline action, 32px above the content */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
.section-head h2 { margin: 0; font-size: 36px; line-height: 1.25; font-weight: var(--weight-bold); letter-spacing: -.02em; }
.section-head p { margin: 0; max-width: 552px; font-size: 16px; line-height: 1.4; }
.button-outline-ink { display: inline-flex; align-items: center; height: 36px; margin-top: 4px; padding: 8px 20px; border: 1px solid var(--ink); border-radius: var(--radius-control); color: var(--ink); font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; }
.button-outline-ink:hover { color: var(--ink); opacity: .85; text-decoration: none; }
@media (max-width: 767px) {
  .section-head h2 { font-size: 28px; }
}

/* Image band of a public page: navy, 227px, the still at its own size on
   the right fading into the band, the title and a line on the left */
.image-band { position: relative; display: flex; height: 227px; overflow: hidden; background: var(--band-bg); }
.image-band-art { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 60%); }
.image-band-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.image-band-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--band-bg) 0%, rgba(26, 35, 48, 0) 45%); }
.image-band-inner { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; max-width: 1440px; margin: 0 auto; padding: 0 64px; }
.image-band h1 { margin: 0; max-width: 644px; color: var(--band-ink); font-size: 40px; line-height: 1.2; font-weight: var(--weight-bold); letter-spacing: normal; }
.image-band p { margin: 14px 0 0; max-width: 640px; color: var(--band-sub); font-size: 20px; line-height: 1.366; font-weight: 500; }
@media (max-width: 768px) {
  .image-band { height: auto; min-height: 240px; }
  .image-band-art { width: 100%; }
  .image-band-art::after { background: var(--scrim); }
  .image-band-inner { justify-content: flex-end; padding: 40px 16px 28px; }
  .image-band h1 { font-size: 28px; }
  .image-band p { font-size: 16px; }
}

/* Purple call to action before the footer */
.cta-band { padding: 48px 40px; background: var(--accent); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1300px; margin: 0 auto; }
.cta-band h2 { margin: 0; color: var(--on-accent); font-size: 32px; line-height: 1.366; font-weight: var(--weight-bold); white-space: nowrap; }
.cta-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.cta-light { display: inline-flex; align-items: center; gap: 12px; color: var(--on-accent); font-size: 16px; line-height: 1.366; white-space: nowrap; text-decoration: none; }
.cta-light:hover { color: var(--on-accent); opacity: .8; text-decoration: none; }
.cta-solid { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 40px; padding: 8px 20px; border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.366; font-weight: 500; white-space: nowrap; text-decoration: none; }
.cta-solid:hover { color: var(--ink); opacity: .88; text-decoration: none; }
.cta-band :focus-visible { outline-color: var(--on-accent); }
@media (max-width: 1079px) {
  .cta-band h2 { white-space: normal; }
}
@media (max-width: 767px) {
  .cta-band { padding: 28px 16px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-band h2 { font-size: 22px; }
}

/* Board glyphs: filled outlines of the v8 strokes, each at its board size */
.glyph.glyph-pub-chev-right { width: 8px; height: 12px; clip-path: path("M2.53 0.97L7.03 5.47A0.75 0.75 0 0 1 7.03 6.53L2.53 11.03A0.75 0.75 0 0 1 1.47 11.03A0.75 0.75 0 0 1 1.47 9.97L5.44 6L1.47 2.03A0.75 0.75 0 0 1 1.47 0.97A0.75 0.75 0 0 1 2.53 0.97Z"); }
.glyph.glyph-pub-chev-left { width: 8px; height: 12px; clip-path: path("M6.53 2.03L2.56 6L6.53 9.97A0.75 0.75 0 0 1 6.53 11.03A0.75 0.75 0 0 1 5.47 11.03L0.97 6.53A0.75 0.75 0 0 1 0.97 5.47L5.47 0.97A0.75 0.75 0 0 1 6.53 0.97A0.75 0.75 0 0 1 6.53 2.03Z"); }
.glyph.glyph-pub-chev-small { width: 8px; height: 10px; clip-path: path("M2.99 1.01L6.49 4.51A0.7 0.7 0 0 1 6.49 5.49L2.99 8.99A0.7 0.7 0 0 1 2.01 8.99A0.7 0.7 0 0 1 2.01 8.01L5.01 5L2.01 1.99A0.7 0.7 0 0 1 2.01 1.01A0.7 0.7 0 0 1 2.99 1.01Z"); }
.glyph.glyph-pub-chev-down { width: 10px; height: 10px; clip-path: path("M2.49 3.01L5 5.51L7.51 3.01A0.7 0.7 0 0 1 8.49 3.01A0.7 0.7 0 0 1 8.49 3.99L5.49 6.99A0.7 0.7 0 0 1 4.51 6.99L1.51 3.99A0.7 0.7 0 0 1 1.51 3.01A0.7 0.7 0 0 1 2.49 3.01Z"); }
.glyph.glyph-pub-crumb { width: 10px; height: 10px; clip-path: path("M3.99 1.01L7.49 4.51A0.7 0.7 0 0 1 7.49 5.49L3.99 8.99A0.7 0.7 0 0 1 3.01 8.99A0.7 0.7 0 0 1 3.01 8.01L6.01 5L3.01 1.99A0.7 0.7 0 0 1 3.01 1.01A0.7 0.7 0 0 1 3.99 1.01Z"); }
.glyph.glyph-pub-arrow-out { width: 10px; height: 10px; clip-path: path("M1.97 6.97L6.97 1.97A0.75 0.75 0 0 1 8.03 1.97A0.75 0.75 0 0 1 8.03 3.03L3.03 8.03A0.75 0.75 0 0 1 1.97 8.03A0.75 0.75 0 0 1 1.97 6.97ZM3.5 1.75L7.5 1.75A0.75 0.75 0 0 1 8.25 2.5L8.25 6.5A0.75 0.75 0 0 1 7.5 7.25A0.75 0.75 0 0 1 6.75 6.5L6.75 3.25L3.5 3.25A0.75 0.75 0 0 1 2.75 2.5A0.75 0.75 0 0 1 3.5 1.75Z"); }
.glyph.glyph-pub-copy { width: 14px; height: 14px; clip-path: path("M5.5 3.85L11 3.85A1.65 1.65 0 0 1 12.65 5.5L12.65 11A1.65 1.65 0 0 1 11 12.65L5.5 12.65A1.65 1.65 0 0 1 3.85 11L3.85 5.5A1.65 1.65 0 0 1 5.5 3.85ZM5.5 5.15A0.35 0.35 0 0 0 5.15 5.5L5.15 11A0.35 0.35 0 0 0 5.5 11.35L11 11.35A0.35 0.35 0 0 0 11.35 11L11.35 5.5A0.35 0.35 0 0 0 11 5.15L5.5 5.15ZM8.85 4.5L8.85 2.52L8.85 2.52L8.85 2.54L8.86 2.55L8.87 2.57L8.88 2.59L8.89 2.6L8.9 2.61L8.91 2.62L8.93 2.63L8.95 2.64L8.96 2.65L8.98 2.65L8.98 2.65L2.52 2.65L2.52 2.65L2.54 2.65L2.55 2.64L2.57 2.63L2.59 2.62L2.6 2.61L2.61 2.6L2.62 2.59L2.63 2.57L2.64 2.55L2.65 2.54L2.65 2.52L2.65 2.52L2.65 8.98L2.65 8.98L2.65 8.96L2.64 8.95L2.63 8.93L2.62 8.91L2.61 8.9L2.6 8.89L2.59 8.88L2.57 8.87L2.55 8.86L2.54 8.85L2.52 8.85L2.52 8.85L4.5 8.85L4.5 10.15L2.5 10.15A0.65 0.65 0 0 1 2.46 10.15L2.36 10.14L2.22 10.12L2.09 10.08L1.97 10.02L1.85 9.95L1.74 9.86L1.64 9.76L1.55 9.65L1.48 9.53L1.42 9.41L1.38 9.28L1.36 9.14L1.35 9.04A0.65 0.65 0 0 1 1.35 9L1.35 2.5A0.65 0.65 0 0 1 1.35 2.46L1.36 2.36L1.38 2.22L1.42 2.09L1.48 1.97L1.55 1.85L1.64 1.74L1.74 1.64L1.85 1.55L1.97 1.48L2.09 1.42L2.22 1.38L2.36 1.36L2.46 1.35A0.65 0.65 0 0 1 2.5 1.35L9 1.35A0.65 0.65 0 0 1 9.04 1.35L9.14 1.36L9.28 1.38L9.41 1.42L9.53 1.48L9.65 1.55L9.76 1.64L9.86 1.74L9.95 1.85L10.02 1.97L10.08 2.09L10.12 2.22L10.14 2.36L10.15 2.46A0.65 0.65 0 0 1 10.15 2.5L10.15 4.5L8.85 4.5Z"); }
.glyph.glyph-pub-close { width: 14px; height: 14px; clip-path: path("M4.03 2.97L11.03 9.97A0.75 0.75 0 0 1 11.03 11.03A0.75 0.75 0 0 1 9.97 11.03L2.97 4.03A0.75 0.75 0 0 1 2.97 2.97A0.75 0.75 0 0 1 4.03 2.97ZM11.03 4.03L4.03 11.03A0.75 0.75 0 0 1 2.97 11.03A0.75 0.75 0 0 1 2.97 9.97L9.97 2.97A0.75 0.75 0 0 1 11.03 2.97A0.75 0.75 0 0 1 11.03 4.03Z"); }
.glyph.glyph-pub-check { width: 12px; height: 12px; clip-path: path("M3.07 5.63L4.79 7.36L8.92 3.05A0.8 0.8 0 0 1 10.05 3.02A0.8 0.8 0 0 1 10.08 4.15L5.38 9.05A0.8 0.8 0 0 1 4.23 9.07L1.93 6.77A0.8 0.8 0 0 1 1.93 5.63A0.8 0.8 0 0 1 3.07 5.63Z"); }
.glyph.glyph-pub-info { width: 14px; height: 14px; clip-path: path("M13.1 7A6.1 6.1 0 0 1 0.9 7A6.1 6.1 0 0 1 13.1 7ZM11.9 7A4.9 4.9 0 0 0 2.1 7A4.9 4.9 0 0 0 11.9 7ZM7.6 6.3L7.6 9.7A0.6 0.6 0 0 1 7 10.3A0.6 0.6 0 0 1 6.4 9.7L6.4 6.3A0.6 0.6 0 0 1 7 5.7A0.6 0.6 0 0 1 7.6 6.3ZM7.6 4.3L7.6 4.4A0.6 0.6 0 0 1 7 5A0.6 0.6 0 0 1 6.4 4.4L6.4 4.3A0.6 0.6 0 0 1 7 3.7A0.6 0.6 0 0 1 7.6 4.3Z"); }
.glyph.glyph-pub-warning { width: 16px; height: 16px; clip-path: path("M7.39 1.66A0.7 0.7 0 0 1 8.61 1.66L15.11 13.16A0.7 0.7 0 0 1 14.5 14.2L1.5 14.2A0.7 0.7 0 0 1 0.89 13.16ZM2.7 12.8L13.3 12.8L8 3.42ZM8.7 6.5L8.7 9.5A0.7 0.7 0 0 1 8 10.2A0.7 0.7 0 0 1 7.3 9.5L7.3 6.5A0.7 0.7 0 0 1 8 5.8A0.7 0.7 0 0 1 8.7 6.5ZM8.7 11.6L8.7 11.7A0.7 0.7 0 0 1 8 12.4A0.7 0.7 0 0 1 7.3 11.7L7.3 11.6A0.7 0.7 0 0 1 8 10.9A0.7 0.7 0 0 1 8.7 11.6Z"); }
.glyph.glyph-pub-view-grid { width: 16px; height: 16px; clip-path: path("M3 2L6 2A1 1 0 0 1 7 3L7 6A1 1 0 0 1 6 7L3 7A1 1 0 0 1 2 6L2 3A1 1 0 0 1 3 2ZM10 2L13 2A1 1 0 0 1 14 3L14 6A1 1 0 0 1 13 7L10 7A1 1 0 0 1 9 6L9 3A1 1 0 0 1 10 2ZM3 9L6 9A1 1 0 0 1 7 10L7 13A1 1 0 0 1 6 14L3 14A1 1 0 0 1 2 13L2 10A1 1 0 0 1 3 9ZM10 9L13 9A1 1 0 0 1 14 10L14 13A1 1 0 0 1 13 14L10 14A1 1 0 0 1 9 13L9 10A1 1 0 0 1 10 9Z"); }
.glyph.glyph-pub-view-list { width: 16px; height: 16px; clip-path: path("M6 3.25L14 3.25A0.75 0.75 0 0 1 14.75 4A0.75 0.75 0 0 1 14 4.75L6 4.75A0.75 0.75 0 0 1 5.25 4A0.75 0.75 0 0 1 6 3.25ZM6 7.25L14 7.25A0.75 0.75 0 0 1 14.75 8A0.75 0.75 0 0 1 14 8.75L6 8.75A0.75 0.75 0 0 1 5.25 8A0.75 0.75 0 0 1 6 7.25ZM6 11.25L14 11.25A0.75 0.75 0 0 1 14.75 12A0.75 0.75 0 0 1 14 12.75L6 12.75A0.75 0.75 0 0 1 5.25 12A0.75 0.75 0 0 1 6 11.25ZM2.5 3.25L3 3.25A0.75 0.75 0 0 1 3.75 4A0.75 0.75 0 0 1 3 4.75L2.5 4.75A0.75 0.75 0 0 1 1.75 4A0.75 0.75 0 0 1 2.5 3.25ZM2.5 7.25L3 7.25A0.75 0.75 0 0 1 3.75 8A0.75 0.75 0 0 1 3 8.75L2.5 8.75A0.75 0.75 0 0 1 1.75 8A0.75 0.75 0 0 1 2.5 7.25ZM2.5 11.25L3 11.25A0.75 0.75 0 0 1 3.75 12A0.75 0.75 0 0 1 3 12.75L2.5 12.75A0.75 0.75 0 0 1 1.75 12A0.75 0.75 0 0 1 2.5 11.25Z"); }
.glyph.glyph-pub-filter { width: 16px; height: 16px; clip-path: path("M2.5 3.75L13.5 3.75A0.75 0.75 0 0 1 14.25 4.5A0.75 0.75 0 0 1 13.5 5.25L2.5 5.25A0.75 0.75 0 0 1 1.75 4.5A0.75 0.75 0 0 1 2.5 3.75ZM4.5 7.25L11.5 7.25A0.75 0.75 0 0 1 12.25 8A0.75 0.75 0 0 1 11.5 8.75L4.5 8.75A0.75 0.75 0 0 1 3.75 8A0.75 0.75 0 0 1 4.5 7.25ZM6.5 10.75L9.5 10.75A0.75 0.75 0 0 1 10.25 11.5A0.75 0.75 0 0 1 9.5 12.25L6.5 12.25A0.75 0.75 0 0 1 5.75 11.5A0.75 0.75 0 0 1 6.5 10.75Z"); }
.glyph.glyph-pub-sort { width: 16px; height: 16px; clip-path: path("M4.25 13L4.25 3A0.75 0.75 0 0 1 5 2.25A0.75 0.75 0 0 1 5.75 3L5.75 13A0.75 0.75 0 0 1 5 13.75A0.75 0.75 0 0 1 4.25 13ZM1.97 4.97L4.47 2.47A0.75 0.75 0 0 1 5.53 2.47L8.03 4.97A0.75 0.75 0 0 1 8.03 6.03A0.75 0.75 0 0 1 6.97 6.03L5 4.06L3.03 6.03A0.75 0.75 0 0 1 1.97 6.03A0.75 0.75 0 0 1 1.97 4.97ZM11.75 3L11.75 13A0.75 0.75 0 0 1 11 13.75A0.75 0.75 0 0 1 10.25 13L10.25 3A0.75 0.75 0 0 1 11 2.25A0.75 0.75 0 0 1 11.75 3ZM9.03 9.97L11 11.94L12.97 9.97A0.75 0.75 0 0 1 14.03 9.97A0.75 0.75 0 0 1 14.03 11.03L11.53 13.53A0.75 0.75 0 0 1 10.47 13.53L7.97 11.03A0.75 0.75 0 0 1 7.97 9.97A0.75 0.75 0 0 1 9.03 9.97Z"); }
.glyph.glyph-pub-compare { width: 14px; height: 14px; clip-path: path("M2 3.8L9.31 3.8L8.51 2.99A0.7 0.7 0 0 1 8.51 2.01A0.7 0.7 0 0 1 9.49 2.01L11.49 4.01A0.7 0.7 0 0 1 11 5.2L2 5.2A0.7 0.7 0 0 1 1.3 4.5A0.7 0.7 0 0 1 2 3.8ZM12 10.2L4.69 10.2L5.49 11.01A0.7 0.7 0 0 1 5.49 11.99A0.7 0.7 0 0 1 4.51 11.99L2.51 9.99A0.7 0.7 0 0 1 3 8.8L12 8.8A0.7 0.7 0 0 1 12.7 9.5A0.7 0.7 0 0 1 12 10.2Z"); }
.glyph.glyph-pub-code { width: 14px; height: 14px; clip-path: path("M5.46 3.96L2.42 7L5.46 10.04A0.65 0.65 0 0 1 5.46 10.96A0.65 0.65 0 0 1 4.54 10.96L1.04 7.46A0.65 0.65 0 0 1 1.04 6.54L4.54 3.04A0.65 0.65 0 0 1 5.46 3.04A0.65 0.65 0 0 1 5.46 3.96ZM9.46 3.04L12.96 6.54A0.65 0.65 0 0 1 12.96 7.46L9.46 10.96A0.65 0.65 0 0 1 8.54 10.96A0.65 0.65 0 0 1 8.54 10.04L11.58 7L8.54 3.96A0.65 0.65 0 0 1 8.54 3.04A0.65 0.65 0 0 1 9.46 3.04Z"); }
.glyph.glyph-pub-eraser { width: 14px; height: 14px; clip-path: path("M5.5 11.85L11.5 11.85A0.65 0.65 0 0 1 12.15 12.5A0.65 0.65 0 0 1 11.5 13.15L5.5 13.15A0.65 0.65 0 0 1 4.85 12.5A0.65 0.65 0 0 1 5.5 11.85ZM2.4 8.08L8.14 2.34A0.65 0.65 0 0 1 8.18 2.31L8.31 2.2L8.48 2.08L8.68 1.99L8.88 1.92L9.09 1.88L9.3 1.86L9.51 1.88L9.72 1.92L9.92 1.99L10.12 2.08L10.29 2.2L10.42 2.31A0.65 0.65 0 0 1 10.46 2.34L11.66 3.54A0.65 0.65 0 0 1 11.69 3.58L11.8 3.71L11.92 3.88L12.01 4.08L12.08 4.28L12.12 4.49L12.14 4.7L12.12 4.91L12.08 5.12L12.01 5.32L11.92 5.52L11.8 5.69L11.69 5.82A0.65 0.65 0 0 1 11.66 5.86L7.06 10.46A0.65 0.65 0 0 1 7.05 10.47L4.95 12.47A0.65 0.65 0 0 1 4.5 12.65L3.2 12.65A0.65 0.65 0 0 1 2.74 12.46L1.34 11.06A0.65 0.65 0 0 1 1.31 11.02L1.2 10.89L1.08 10.72L0.99 10.52L0.92 10.32L0.88 10.11L0.86 9.9L0.88 9.69L0.92 9.48L0.99 9.28L1.08 9.08L1.2 8.91L1.31 8.78A0.65 0.65 0 0 1 1.47 8.64ZM2.22 9.7L2.24 9.69L2.21 9.73L2.19 9.77L2.18 9.81L2.17 9.86L2.17 9.9L2.17 9.94L2.18 9.99L2.19 10.03L2.21 10.07L2.24 10.11L2.28 10.16L3.47 11.35L4.24 11.35L6.15 9.53L10.72 4.96L10.76 4.91L10.79 4.87L10.81 4.83L10.82 4.79L10.83 4.74L10.83 4.7L10.83 4.66L10.82 4.61L10.81 4.57L10.79 4.53L10.76 4.49L10.72 4.44L9.56 3.28L9.51 3.24L9.47 3.21L9.43 3.19L9.39 3.18L9.34 3.17L9.3 3.17L9.26 3.17L9.21 3.18L9.17 3.19L9.13 3.21L9.09 3.24L9.04 3.28L3.26 9.06A0.65 0.65 0 0 1 3.13 9.16Z"); }
.glyph.glyph-pub-tasks { width: 14px; height: 14px; clip-path: path("M5.25 3.29L11.55 3.29A0.56 0.56 0 0 1 12.11 3.85A0.56 0.56 0 0 1 11.55 4.41L5.25 4.41A0.56 0.56 0 0 1 4.69 3.85A0.56 0.56 0 0 1 5.25 3.29ZM5.25 6.44L11.55 6.44A0.56 0.56 0 0 1 12.11 7A0.56 0.56 0 0 1 11.55 7.56L5.25 7.56A0.56 0.56 0 0 1 4.69 7A0.56 0.56 0 0 1 5.25 6.44ZM5.25 9.59L11.55 9.59A0.56 0.56 0 0 1 12.11 10.15A0.56 0.56 0 0 1 11.55 10.71L5.25 10.71A0.56 0.56 0 0 1 4.69 10.15A0.56 0.56 0 0 1 5.25 9.59ZM2.45 3.29L2.8 3.29A0.56 0.56 0 0 1 3.36 3.85A0.56 0.56 0 0 1 2.8 4.41L2.45 4.41A0.56 0.56 0 0 1 1.89 3.85A0.56 0.56 0 0 1 2.45 3.29ZM2.45 6.44L2.8 6.44A0.56 0.56 0 0 1 3.36 7A0.56 0.56 0 0 1 2.8 7.56L2.45 7.56A0.56 0.56 0 0 1 1.89 7A0.56 0.56 0 0 1 2.45 6.44ZM2.45 9.59L2.8 9.59A0.56 0.56 0 0 1 3.36 10.15A0.56 0.56 0 0 1 2.8 10.71L2.45 10.71A0.56 0.56 0 0 1 1.89 10.15A0.56 0.56 0 0 1 2.45 9.59Z"); }
.glyph.glyph-pub-docs { width: 14px; height: 14px; clip-path: path("M2.94 1.75A0.56 0.56 0 0 1 3.5 1.19L8.05 1.19A0.56 0.56 0 0 1 8.45 1.35L10.9 3.8A0.56 0.56 0 0 1 11.06 4.2L11.06 12.25A0.56 0.56 0 0 1 10.5 12.81L3.5 12.81A0.56 0.56 0 0 1 2.94 12.25ZM4.06 11.69L9.94 11.69L9.94 4.43L7.82 2.31L4.06 2.31ZM8.61 1.75L8.61 3.64L10.5 3.64A0.56 0.56 0 0 1 11.06 4.2A0.56 0.56 0 0 1 10.5 4.76L8.05 4.76A0.56 0.56 0 0 1 7.49 4.2L7.49 1.75A0.56 0.56 0 0 1 8.05 1.19A0.56 0.56 0 0 1 8.61 1.75ZM5.25 6.44L8.75 6.44A0.56 0.56 0 0 1 9.31 7A0.56 0.56 0 0 1 8.75 7.56L5.25 7.56A0.56 0.56 0 0 1 4.69 7A0.56 0.56 0 0 1 5.25 6.44ZM5.25 8.54L8.75 8.54A0.56 0.56 0 0 1 9.31 9.1A0.56 0.56 0 0 1 8.75 9.66L5.25 9.66A0.56 0.56 0 0 1 4.69 9.1A0.56 0.56 0 0 1 5.25 8.54Z"); }
.glyph.glyph-pub-play-solid { width: 12px; height: 12px; clip-path: path("M3 1.8L3 10.2L10 6Z"); }
.glyph.glyph-pub-eye { width: 16px; height: 16px; clip-path: path("M0.88 8.29A0.6 0.6 0 0 1 0.88 7.71L0.95 7.57L1.18 7.2L1.55 6.65L2.05 6L2.7 5.28L3.48 4.55L4.4 3.88L5.47 3.32L6.67 2.94L7.94 2.8A0.6 0.6 0 0 1 8.06 2.8L9.33 2.94L10.53 3.32L11.6 3.88L12.52 4.55L13.3 5.28L13.95 6L14.45 6.65L14.82 7.2L15.05 7.57L15.12 7.71A0.6 0.6 0 0 1 15.12 8.29L15.05 8.43L14.82 8.8L14.45 9.35L13.95 10L13.3 10.72L12.52 11.45L11.6 12.12L10.53 12.68L9.33 13.06L8.06 13.2A0.6 0.6 0 0 1 7.94 13.2L6.67 13.06L5.47 12.68L4.4 12.12L3.48 11.45L2.7 10.72L2.05 10L1.55 9.35L1.18 8.8L0.95 8.43ZM1.99 7.83L2.19 8.15L2.52 8.64L2.98 9.24L3.55 9.88L4.24 10.52L5.04 11.1L5.93 11.57L6.92 11.88L8 12L9.08 11.88L10.07 11.57L10.96 11.1L11.76 10.52L12.45 9.88L13.02 9.24L13.48 8.64L13.81 8.15L14.01 7.83L13.91 8L14.01 8.17L13.81 7.85L13.48 7.36L13.02 6.76L12.45 6.12L11.76 5.48L10.96 4.9L10.07 4.43L9.08 4.12L8 4L6.92 4.12L5.93 4.43L5.04 4.9L4.24 5.48L3.55 6.12L2.98 6.76L2.52 7.36L2.19 7.85L1.99 8.17L2.09 8ZM10.8 8A2.8 2.8 0 0 1 5.2 8A2.8 2.8 0 0 1 10.8 8ZM9.6 8A1.6 1.6 0 0 0 6.4 8A1.6 1.6 0 0 0 9.6 8Z"); }
.glyph.glyph-pub-eye-off { width: 16px; height: 16px; clip-path: path("M2.82 1.98L14.02 13.18A0.6 0.6 0 0 1 14.02 14.02A0.6 0.6 0 0 1 13.18 14.02L1.98 2.82A0.6 0.6 0 0 1 1.98 1.98A0.6 0.6 0 0 1 2.82 1.98ZM6.46 2.97L7.21 2.84L7.97 2.8A0.6 0.6 0 0 1 8.06 2.8L9.33 2.94L10.53 3.32L11.6 3.88L12.52 4.55L13.3 5.28L13.95 6L14.45 6.65L14.82 7.2L15.05 7.57L15.12 7.71A0.6 0.6 0 0 1 15.1 8.33L14.52 9.22L13.85 10.08L13.12 10.85A0.6 0.6 0 0 1 12.27 10.88A0.6 0.6 0 0 1 12.24 10.03L12.94 9.29L13.55 8.52L13.9 7.97L14.01 8.17L13.81 7.85L13.48 7.36L13.02 6.76L12.45 6.12L11.76 5.48L10.96 4.9L10.07 4.43L9.08 4.12L7.99 4L7.34 4.04L6.66 4.15A0.6 0.6 0 0 1 5.97 3.66A0.6 0.6 0 0 1 6.46 2.97ZM4.83 5L4.28 5.41L3.8 5.83L3.37 6.26L3 6.7L2.67 7.11L2.41 7.49L2.2 7.81L2.05 8.06L1.96 8.22L2.08 7.99L1.99 7.83L2.19 8.15L2.52 8.64L2.98 9.24L3.55 9.88L4.24 10.52L5.04 11.1L5.93 11.57L6.92 11.88L8.02 12L8.34 11.99L8.67 11.96L9 11.91L9.31 11.84L9.61 11.75L9.91 11.65L10.19 11.53L10.47 11.4L10.74 11.25L11.01 11.09A0.6 0.6 0 0 1 11.83 11.29A0.6 0.6 0 0 1 11.63 12.11L11.34 12.29L11.02 12.47L10.68 12.63L10.34 12.77L9.98 12.9L9.6 13L9.22 13.09L8.82 13.15L8.42 13.19L8.02 13.2A0.6 0.6 0 0 1 7.94 13.2L6.67 13.06L5.47 12.68L4.4 12.12L3.48 11.45L2.7 10.72L2.05 10L1.55 9.35L1.18 8.8L0.95 8.43L0.88 8.29A0.6 0.6 0 0 1 0.87 7.72L0.9 7.65L1.01 7.47L1.18 7.18L1.41 6.82L1.71 6.4L2.07 5.93L2.49 5.45L2.98 4.95L3.53 4.47L4.13 4.04A0.6 0.6 0 0 1 4.96 4.17A0.6 0.6 0 0 1 4.83 5ZM7 6.77L6.89 6.99L6.81 7.18L6.76 7.38L6.73 7.58L6.74 7.79L6.77 7.99L6.82 8.19L6.9 8.38L7 8.56L7.13 8.72L7.28 8.87L7.44 9L7.62 9.1L7.81 9.18L8.01 9.23L8.21 9.26L8.42 9.27L8.62 9.24L8.82 9.19L9.01 9.11L9.23 9A0.6 0.6 0 0 1 10.04 9.23A0.6 0.6 0 0 1 9.81 10.04L9.53 10.2L9.19 10.33L8.84 10.42L8.48 10.47L8.12 10.46L7.76 10.41L7.41 10.32L7.08 10.18L6.77 9.99L6.48 9.77L6.23 9.52L6.01 9.23L5.82 8.92L5.68 8.59L5.59 8.24L5.54 7.88L5.53 7.52L5.58 7.16L5.67 6.81L5.8 6.47L5.96 6.19A0.6 0.6 0 0 1 6.77 5.96A0.6 0.6 0 0 1 7 6.77Z"); }
.glyph.glyph-pub-type-all { width: 16px; height: 16px; clip-path: path("M3 1.85L6.5 1.85A1.15 1.15 0 0 1 7.65 3L7.65 6.5A1.15 1.15 0 0 1 6.5 7.65L3 7.65A1.15 1.15 0 0 1 1.85 6.5L1.85 3A1.15 1.15 0 0 1 3 1.85ZM3.15 3.15L3.15 6.35L6.35 6.35L6.35 3.15L3.15 3.15ZM9.5 1.85L13 1.85A1.15 1.15 0 0 1 14.15 3L14.15 6.5A1.15 1.15 0 0 1 13 7.65L9.5 7.65A1.15 1.15 0 0 1 8.35 6.5L8.35 3A1.15 1.15 0 0 1 9.5 1.85ZM9.65 3.15L9.65 6.35L12.85 6.35L12.85 3.15L9.65 3.15ZM3 8.35L6.5 8.35A1.15 1.15 0 0 1 7.65 9.5L7.65 13A1.15 1.15 0 0 1 6.5 14.15L3 14.15A1.15 1.15 0 0 1 1.85 13L1.85 9.5A1.15 1.15 0 0 1 3 8.35ZM3.15 9.65L3.15 12.85L6.35 12.85L6.35 9.65L3.15 9.65ZM9.5 8.35L13 8.35A1.15 1.15 0 0 1 14.15 9.5L14.15 13A1.15 1.15 0 0 1 13 14.15L9.5 14.15A1.15 1.15 0 0 1 8.35 13L8.35 9.5A1.15 1.15 0 0 1 9.5 8.35ZM9.65 9.65L9.65 12.85L12.85 12.85L12.85 9.65L9.65 9.65Z"); }
.glyph.glyph-pub-type-video { width: 16px; height: 16px; clip-path: path("M3 2.35L13 2.35A1.65 1.65 0 0 1 14.65 4L14.65 12A1.65 1.65 0 0 1 13 13.65L3 13.65A1.65 1.65 0 0 1 1.35 12L1.35 4A1.65 1.65 0 0 1 3 2.35ZM3 3.65A0.35 0.35 0 0 0 2.65 4L2.65 12A0.35 0.35 0 0 0 3 12.35L13 12.35A0.35 0.35 0 0 0 13.35 12L13.35 4A0.35 0.35 0 0 0 13 3.65L3 3.65ZM10.34 7.45A0.65 0.65 0 0 1 10.34 8.55L7.09 10.55A0.65 0.65 0 0 1 6.1 10L6.1 6A0.65 0.65 0 0 1 7.09 5.45ZM7.4 7.16L7.4 8.84L8.76 8Z"); }
.glyph.glyph-pub-type-image { width: 16px; height: 16px; clip-path: path("M3 1.85L13 1.85A1.65 1.65 0 0 1 14.65 3.5L14.65 12.5A1.65 1.65 0 0 1 13 14.15L3 14.15A1.65 1.65 0 0 1 1.35 12.5L1.35 3.5A1.65 1.65 0 0 1 3 1.85ZM3 3.15A0.35 0.35 0 0 0 2.65 3.5L2.65 12.5A0.35 0.35 0 0 0 3 12.85L13 12.85A0.35 0.35 0 0 0 13.35 12.5L13.35 3.5A0.35 0.35 0 0 0 13 3.15L3 3.15ZM2.04 11.04L5.54 7.54A0.65 0.65 0 0 1 6.46 7.54L8.5 9.58L10.04 8.04A0.65 0.65 0 0 1 10.96 8.04L13.96 11.04L13.04 11.96L10.5 9.42L8.96 10.96A0.65 0.65 0 0 1 8.04 10.96L6 8.92L2.96 11.96L2.04 11.04ZM12.15 5.75A1.65 1.65 0 0 1 8.85 5.75A1.65 1.65 0 0 1 12.15 5.75ZM10.85 5.75A0.35 0.35 0 0 0 10.15 5.75A0.35 0.35 0 0 0 10.85 5.75Z"); }
.glyph.glyph-pub-type-chat { width: 16px; height: 16px; clip-path: path("M3.5 1.35L12.5 1.35A1.65 1.65 0 0 1 14.15 3L14.15 13A1.65 1.65 0 0 1 12.5 14.65L3.5 14.65A1.65 1.65 0 0 1 1.85 13L1.85 3A1.65 1.65 0 0 1 3.5 1.35ZM3.5 2.65A0.35 0.35 0 0 0 3.15 3L3.15 13A0.35 0.35 0 0 0 3.5 13.35L12.5 13.35A0.35 0.35 0 0 0 12.85 13L12.85 3A0.35 0.35 0 0 0 12.5 2.65L3.5 2.65ZM5 4.85L11 4.85L11 6.15L5 6.15L5 4.85ZM5 7.35L11 7.35L11 8.65L5 8.65L5 7.35ZM5 9.85L8.5 9.85L8.5 11.15L5 11.15L5 9.85Z"); }
.glyph.glyph-pub-type-voice { width: 16px; height: 16px; clip-path: path("M3 1.85L13 1.85A1.65 1.65 0 0 1 14.65 3.5L14.65 12.5A1.65 1.65 0 0 1 13 14.15L3 14.15A1.65 1.65 0 0 1 1.35 12.5L1.35 3.5A1.65 1.65 0 0 1 3 1.85ZM3 3.15A0.35 0.35 0 0 0 2.65 3.5L2.65 12.5A0.35 0.35 0 0 0 3 12.85L13 12.85A0.35 0.35 0 0 0 13.35 12.5L13.35 3.5A0.35 0.35 0 0 0 13 3.15L3 3.15ZM4.35 9.5L4.35 6.5A0.65 0.65 0 0 1 5 5.85A0.65 0.65 0 0 1 5.65 6.5L5.65 9.5A0.65 0.65 0 0 1 5 10.15A0.65 0.65 0 0 1 4.35 9.5ZM6.35 11L6.35 5A0.65 0.65 0 0 1 7 4.35A0.65 0.65 0 0 1 7.65 5L7.65 11A0.65 0.65 0 0 1 7 11.65A0.65 0.65 0 0 1 6.35 11ZM8.35 10L8.35 6A0.65 0.65 0 0 1 9 5.35A0.65 0.65 0 0 1 9.65 6L9.65 10A0.65 0.65 0 0 1 9 10.65A0.65 0.65 0 0 1 8.35 10ZM10.35 9L10.35 7A0.65 0.65 0 0 1 11 6.35A0.65 0.65 0 0 1 11.65 7L11.65 9A0.65 0.65 0 0 1 11 9.65A0.65 0.65 0 0 1 10.35 9Z"); }
.glyph.glyph-pub-dollar { width: 14px; height: 14px; clip-path: path("M13.15 7A6.15 6.15 0 0 1 0.85 7A6.15 6.15 0 0 1 13.15 7ZM11.85 7A4.85 4.85 0 0 0 2.15 7A4.85 4.85 0 0 0 11.85 7ZM8.75 5.9L6.42 5.9L6.34 5.91L6.28 5.92L6.22 5.94L6.16 5.96L6.11 6L6.06 6.04L6.02 6.08L5.98 6.13L5.95 6.19L5.93 6.25L5.91 6.31L5.9 6.37L5.9 6.43L5.91 6.49L5.93 6.55L5.95 6.61L5.98 6.67L6.02 6.72L6.06 6.76L6.11 6.8L6.16 6.84L6.22 6.86L6.28 6.88L6.34 6.89L6.42 6.9L7.62 6.9L7.83 6.91L8.05 6.96L8.26 7.03L8.47 7.12L8.66 7.24L8.83 7.39L8.99 7.55L9.12 7.73L9.23 7.93L9.31 8.14L9.37 8.36L9.4 8.59L9.4 8.81L9.37 9.04L9.31 9.26L9.23 9.47L9.12 9.67L8.99 9.85L8.83 10.01L8.66 10.16L8.47 10.28L8.26 10.37L8.05 10.44L7.83 10.49L7.62 10.5L5.25 10.5A0.65 0.65 0 0 1 4.6 9.85A0.65 0.65 0 0 1 5.25 9.2L7.58 9.2L7.66 9.19L7.72 9.18L7.78 9.16L7.84 9.14L7.89 9.1L7.94 9.06L7.98 9.02L8.02 8.97L8.05 8.91L8.07 8.85L8.09 8.79L8.1 8.73L8.1 8.67L8.09 8.61L8.07 8.55L8.05 8.49L8.02 8.43L7.98 8.38L7.94 8.34L7.89 8.3L7.84 8.26L7.78 8.24L7.72 8.22L7.66 8.21L7.58 8.2L6.38 8.2L6.17 8.19L5.95 8.14L5.74 8.07L5.53 7.98L5.34 7.86L5.17 7.71L5.01 7.55L4.88 7.37L4.77 7.17L4.69 6.96L4.63 6.74L4.6 6.51L4.6 6.29L4.63 6.06L4.69 5.84L4.77 5.63L4.88 5.43L5.01 5.25L5.17 5.09L5.34 4.94L5.53 4.82L5.74 4.73L5.95 4.66L6.17 4.61L6.38 4.6L8.75 4.6A0.65 0.65 0 0 1 9.4 5.25A0.65 0.65 0 0 1 8.75 5.9ZM7.65 3.9L7.65 5.25A0.65 0.65 0 0 1 7 5.9A0.65 0.65 0 0 1 6.35 5.25L6.35 3.9A0.65 0.65 0 0 1 7 3.25A0.65 0.65 0 0 1 7.65 3.9ZM7.65 9.85L7.65 11.1A0.65 0.65 0 0 1 7 11.75A0.65 0.65 0 0 1 6.35 11.1L6.35 9.85A0.65 0.65 0 0 1 7 9.2A0.65 0.65 0 0 1 7.65 9.85Z"); }
.glyph.glyph-pub-out-12 { width: 12px; height: 12px; clip-path: path("M3.04 8.04L8.04 3.04A0.65 0.65 0 0 1 8.96 3.04A0.65 0.65 0 0 1 8.96 3.96L3.96 8.96A0.65 0.65 0 0 1 3.04 8.96A0.65 0.65 0 0 1 3.04 8.04ZM4.5 2.85L8.5 2.85A0.65 0.65 0 0 1 9.15 3.5L9.15 7.5A0.65 0.65 0 0 1 8.5 8.15A0.65 0.65 0 0 1 7.85 7.5L7.85 4.15L4.5 4.15A0.65 0.65 0 0 1 3.85 3.5A0.65 0.65 0 0 1 4.5 2.85Z"); }
.glyph.glyph-pub-search-16 { width: 16px; height: 16px; clip-path: path("M12.45 7A5.45 5.45 0 0 1 1.55 7A5.45 5.45 0 0 1 12.45 7ZM11.05 7A4.05 4.05 0 0 0 2.95 7A4.05 4.05 0 0 0 11.05 7ZM10.99 10.01L13.99 13.01A0.7 0.7 0 0 1 13.99 13.99A0.7 0.7 0 0 1 13.01 13.99L10.01 10.99A0.7 0.7 0 0 1 10.01 10.01A0.7 0.7 0 0 1 10.99 10.01Z"); }
.glyph.glyph-pub-play-circle { width: 16px; height: 16px; clip-path: path("M14.65 8A6.65 6.65 0 0 1 1.35 8A6.65 6.65 0 0 1 14.65 8ZM13.35 8A5.35 5.35 0 0 0 2.65 8A5.35 5.35 0 0 0 13.35 8ZM10.6 7.45A0.65 0.65 0 0 1 10.6 8.55L7.1 10.8A0.65 0.65 0 0 1 6.1 10.25L6.1 5.75A0.65 0.65 0 0 1 7.1 5.2ZM7.4 6.94L7.4 9.06L9.05 8Z"); }
.glyph.glyph-pub-link { width: 16px; height: 16px; clip-path: path("M7.18 8.76L7.4 8.96L7.61 9.1L7.84 9.22L8.07 9.31L8.32 9.38L8.57 9.41L8.83 9.41L9.08 9.38L9.33 9.31L9.56 9.22L9.79 9.1L10 8.96L10.2 8.78L12.18 6.8L12.36 6.59L12.51 6.37L12.63 6.14L12.72 5.89L12.78 5.63L12.81 5.37L12.8 5.1L12.76 4.84L12.68 4.59L12.58 4.34L12.44 4.12L12.28 3.91L12.09 3.72L11.88 3.56L11.66 3.42L11.41 3.32L11.16 3.24L10.9 3.2L10.63 3.19L10.37 3.22L10.11 3.28L9.86 3.37L9.63 3.49L9.41 3.64L9.2 3.82L8.61 4.41A0.65 0.65 0 0 1 7.69 4.41A0.65 0.65 0 0 1 7.69 3.49L8.3 2.88L8.61 2.61L8.96 2.37L9.35 2.17L9.75 2.03L10.17 1.93L10.59 1.89L11.02 1.91L11.44 1.97L11.85 2.09L12.25 2.26L12.62 2.48L12.95 2.74L13.26 3.05L13.52 3.38L13.74 3.75L13.91 4.15L14.03 4.56L14.09 4.98L14.11 5.41L14.07 5.83L13.97 6.25L13.83 6.65L13.63 7.04L13.39 7.39L13.12 7.7L11.1 9.72L10.8 9.98L10.47 10.22L10.1 10.41L9.72 10.56L9.32 10.66L8.91 10.71L8.49 10.71L8.08 10.66L7.68 10.56L7.3 10.41L6.93 10.22L6.6 9.98L6.32 9.74A0.65 0.65 0 0 1 6.26 8.82A0.65 0.65 0 0 1 7.18 8.76ZM8.82 7.24L8.6 7.04L8.39 6.9L8.16 6.78L7.93 6.69L7.68 6.62L7.43 6.59L7.17 6.59L6.92 6.62L6.67 6.69L6.44 6.78L6.21 6.9L6 7.04L5.8 7.22L3.82 9.2L3.64 9.41L3.49 9.63L3.37 9.86L3.28 10.11L3.22 10.37L3.19 10.63L3.2 10.9L3.24 11.16L3.32 11.41L3.42 11.66L3.56 11.88L3.72 12.09L3.91 12.28L4.12 12.44L4.34 12.58L4.59 12.68L4.84 12.76L5.1 12.8L5.37 12.81L5.63 12.78L5.89 12.72L6.14 12.63L6.37 12.51L6.59 12.36L6.8 12.18L7.39 11.59A0.65 0.65 0 0 1 8.31 11.59A0.65 0.65 0 0 1 8.31 12.51L7.7 13.12L7.39 13.39L7.04 13.63L6.65 13.83L6.25 13.97L5.83 14.07L5.41 14.11L4.98 14.09L4.56 14.03L4.15 13.91L3.75 13.74L3.38 13.52L3.05 13.26L2.74 12.95L2.48 12.62L2.26 12.25L2.09 11.85L1.97 11.44L1.91 11.02L1.89 10.59L1.93 10.17L2.03 9.75L2.17 9.35L2.37 8.96L2.61 8.61L2.88 8.3L4.9 6.28L5.2 6.02L5.53 5.78L5.9 5.59L6.28 5.44L6.68 5.34L7.09 5.29L7.51 5.29L7.92 5.34L8.32 5.44L8.7 5.59L9.07 5.78L9.4 6.02L9.68 6.26A0.65 0.65 0 0 1 9.74 7.18A0.65 0.65 0 0 1 8.82 7.24Z"); }
.glyph.glyph-pub-key-16 { width: 16px; height: 16px; clip-path: path("M9.15 10.5A3.65 3.65 0 0 1 1.85 10.5A3.65 3.65 0 0 1 9.15 10.5ZM7.85 10.5A2.35 2.35 0 0 0 3.15 10.5A2.35 2.35 0 0 0 7.85 10.5ZM7.14 7.94L12.54 2.54A0.65 0.65 0 0 1 13.46 2.54A0.65 0.65 0 0 1 13.46 3.46L8.06 8.86A0.65 0.65 0 0 1 7.14 8.86A0.65 0.65 0 0 1 7.14 7.94ZM11.46 4.54L13.21 6.29A0.65 0.65 0 0 1 13.21 7.21A0.65 0.65 0 0 1 12.29 7.21L10.54 5.46A0.65 0.65 0 0 1 10.54 4.54A0.65 0.65 0 0 1 11.46 4.54Z"); }
.glyph.glyph-pub-retry { width: 16px; height: 16px; clip-path: path("M13.65 8.04L13.61 8.73L13.47 9.46L13.23 10.16L12.91 10.82L12.5 11.44L12.02 12L11.46 12.49L10.85 12.9L10.19 13.23L9.49 13.47L8.77 13.62L8.03 13.67L7.3 13.63L6.57 13.49L5.87 13.26L5.21 12.93L4.59 12.53L4.03 12.04L3.54 11.49L3.13 10.88L2.79 10.22L2.55 9.52L2.4 8.8L2.35 8.06L2.39 7.33L2.53 6.6L2.76 5.9L3.08 5.23L3.49 4.62L3.97 4.06L4.52 3.57L5.13 3.15L5.79 2.82L6.49 2.58L7.21 2.42L7.95 2.37L8.69 2.41L9.41 2.55L10.11 2.78L10.78 3.1L11.4 3.5L11.92 3.96A0.65 0.65 0 0 1 11.99 4.87A0.65 0.65 0 0 1 11.08 4.94L10.61 4.54L10.14 4.23L9.63 3.99L9.09 3.81L8.53 3.7L7.96 3.67L7.39 3.71L6.84 3.83L6.3 4.02L5.79 4.27L5.32 4.59L4.9 4.97L4.53 5.4L4.22 5.88L3.97 6.39L3.79 6.93L3.68 7.49L3.65 8.05L3.69 8.62L3.81 9.18L3.99 9.71L4.25 10.22L4.57 10.69L4.95 11.12L5.38 11.49L5.85 11.8L6.36 12.05L6.9 12.23L7.46 12.34L8.03 12.37L8.59 12.33L9.15 12.21L9.69 12.03L10.19 11.78L10.66 11.46L11.09 11.08L11.46 10.65L11.78 10.18L12.03 9.67L12.21 9.13L12.31 8.57L12.35 7.96A0.65 0.65 0 0 1 13.04 7.35A0.65 0.65 0 0 1 13.65 8.04ZM13.65 2.5L13.65 4.75A0.65 0.65 0 0 1 13 5.4L10.75 5.4A0.65 0.65 0 0 1 10.1 4.75A0.65 0.65 0 0 1 10.75 4.1L12.35 4.1L12.35 2.5A0.65 0.65 0 0 1 13 1.85A0.65 0.65 0 0 1 13.65 2.5Z"); }
.glyph.glyph-pub-lines { width: 16px; height: 16px; clip-path: path("M2.5 3.35L13.5 3.35A0.65 0.65 0 0 1 14.15 4A0.65 0.65 0 0 1 13.5 4.65L2.5 4.65A0.65 0.65 0 0 1 1.85 4A0.65 0.65 0 0 1 2.5 3.35ZM2.5 7.35L13.5 7.35A0.65 0.65 0 0 1 14.15 8A0.65 0.65 0 0 1 13.5 8.65L2.5 8.65A0.65 0.65 0 0 1 1.85 8A0.65 0.65 0 0 1 2.5 7.35ZM2.5 11.35L9.5 11.35A0.65 0.65 0 0 1 10.15 12A0.65 0.65 0 0 1 9.5 12.65L2.5 12.65A0.65 0.65 0 0 1 1.85 12A0.65 0.65 0 0 1 2.5 11.35Z"); }
.glyph.glyph-pub-copy-doc { width: 14px; height: 14px; clip-path: path("M5.5 3.9L11 3.9A1.6 1.6 0 0 1 12.6 5.5L12.6 11A1.6 1.6 0 0 1 11 12.6L5.5 12.6A1.6 1.6 0 0 1 3.9 11L3.9 5.5A1.6 1.6 0 0 1 5.5 3.9ZM5.5 5.1A0.4 0.4 0 0 0 5.1 5.5L5.1 11A0.4 0.4 0 0 0 5.5 11.4L11 11.4A0.4 0.4 0 0 0 11.4 11L11.4 5.5A0.4 0.4 0 0 0 11 5.1L5.5 5.1ZM8.9 4.5L8.9 3.02L8.9 2.95L8.89 2.9L8.87 2.86L8.85 2.81L8.83 2.77L8.8 2.74L8.76 2.7L8.73 2.67L8.69 2.65L8.64 2.63L8.6 2.61L8.55 2.6L8.48 2.6L3.02 2.6L2.95 2.6L2.9 2.61L2.86 2.63L2.81 2.65L2.77 2.67L2.74 2.7L2.7 2.74L2.67 2.77L2.65 2.81L2.63 2.86L2.61 2.9L2.6 2.95L2.6 3.02L2.6 8.48L2.6 8.55L2.61 8.6L2.63 8.64L2.65 8.69L2.67 8.73L2.7 8.76L2.74 8.8L2.77 8.83L2.81 8.85L2.86 8.87L2.9 8.89L2.95 8.9L3.02 8.9L4.5 8.9L4.5 10.1L3 10.1A0.6 0.6 0 0 1 2.96 10.1L2.81 10.09L2.62 10.05L2.43 10L2.26 9.92L2.09 9.82L1.94 9.7L1.8 9.56L1.68 9.41L1.58 9.24L1.5 9.07L1.45 8.88L1.41 8.69L1.4 8.54A0.6 0.6 0 0 1 1.4 8.5L1.4 3A0.6 0.6 0 0 1 1.4 2.96L1.41 2.81L1.45 2.62L1.5 2.43L1.58 2.26L1.68 2.09L1.8 1.94L1.94 1.8L2.09 1.68L2.26 1.58L2.43 1.5L2.62 1.45L2.81 1.41L2.96 1.4A0.6 0.6 0 0 1 3 1.4L8.5 1.4A0.6 0.6 0 0 1 8.54 1.4L8.69 1.41L8.88 1.45L9.07 1.5L9.24 1.58L9.41 1.68L9.56 1.8L9.7 1.94L9.82 2.09L9.92 2.26L10 2.43L10.05 2.62L10.09 2.81L10.1 2.96A0.6 0.6 0 0 1 10.1 3L10.1 4.5L8.9 4.5Z"); }
.glyph.glyph-pub-page { width: 14px; height: 14px; clip-path: path("M2.4 1.75A0.6 0.6 0 0 1 3 1.15L8 1.15A0.6 0.6 0 0 1 8.42 1.33L11.42 4.33A0.6 0.6 0 0 1 11.6 4.75L11.6 12.25A0.6 0.6 0 0 1 11 12.85L3 12.85A0.6 0.6 0 0 1 2.4 12.25ZM3.6 11.65L10.4 11.65L10.4 5L7.75 2.35L3.6 2.35ZM8.6 1.75L8.6 4.15L11 4.15L11 5.35L8 5.35A0.6 0.6 0 0 1 7.4 4.75L7.4 1.75L8.6 1.75Z"); }
.glyph.glyph-pub-download { width: 14px; height: 14px; clip-path: path("M7.6 2L7.6 9A0.6 0.6 0 0 1 7 9.6A0.6 0.6 0 0 1 6.4 9L6.4 2A0.6 0.6 0 0 1 7 1.4A0.6 0.6 0 0 1 7.6 2ZM4.42 6.08L7 8.65L9.58 6.08A0.6 0.6 0 0 1 10.42 6.08A0.6 0.6 0 0 1 10.42 6.92L7.42 9.92A0.6 0.6 0 0 1 6.58 9.92L3.58 6.92A0.6 0.6 0 0 1 3.58 6.08A0.6 0.6 0 0 1 4.42 6.08ZM2.5 11.4L11.5 11.4A0.6 0.6 0 0 1 12.1 12A0.6 0.6 0 0 1 11.5 12.6L2.5 12.6A0.6 0.6 0 0 1 1.9 12A0.6 0.6 0 0 1 2.5 11.4Z"); }
.glyph.glyph-pub-list-14 { width: 14px; height: 14px; clip-path: path("M2.5 2.9L11.5 2.9A0.6 0.6 0 0 1 12.1 3.5A0.6 0.6 0 0 1 11.5 4.1L2.5 4.1A0.6 0.6 0 0 1 1.9 3.5A0.6 0.6 0 0 1 2.5 2.9ZM2.5 6.4L11.5 6.4A0.6 0.6 0 0 1 12.1 7A0.6 0.6 0 0 1 11.5 7.6L2.5 7.6A0.6 0.6 0 0 1 1.9 7A0.6 0.6 0 0 1 2.5 6.4ZM2.5 9.9L8 9.9A0.6 0.6 0 0 1 8.6 10.5A0.6 0.6 0 0 1 8 11.1L2.5 11.1A0.6 0.6 0 0 1 1.9 10.5A0.6 0.6 0 0 1 2.5 9.9Z"); }
.glyph.glyph-pub-clipboard { width: 16px; height: 16px; clip-path: path("M4.5 2.35L11.5 2.35A1.65 1.65 0 0 1 13.15 4L13.15 13A1.65 1.65 0 0 1 11.5 14.65L4.5 14.65A1.65 1.65 0 0 1 2.85 13L2.85 4A1.65 1.65 0 0 1 4.5 2.35ZM4.5 3.65A0.35 0.35 0 0 0 4.15 4L4.15 13A0.35 0.35 0 0 0 4.5 13.35L11.5 13.35A0.35 0.35 0 0 0 11.85 13L11.85 4A0.35 0.35 0 0 0 11.5 3.65L4.5 3.65ZM5.35 3L5.35 2A0.65 0.65 0 0 1 6 1.35L10 1.35A0.65 0.65 0 0 1 10.65 2L10.65 3L9.35 3L9.35 2.65L6.65 2.65L6.65 3L5.35 3Z"); }
.glyph.glyph-pub-prev-14 { width: 14px; height: 14px; clip-path: path("M8.99 3.49L5.49 7L8.99 10.51A0.7 0.7 0 0 1 8.99 11.49A0.7 0.7 0 0 1 8.01 11.49L4.01 7.49A0.7 0.7 0 0 1 4.01 6.51L8.01 2.51A0.7 0.7 0 0 1 8.99 2.51A0.7 0.7 0 0 1 8.99 3.49Z"); }
.glyph.glyph-pub-next-14 { width: 14px; height: 14px; clip-path: path("M5.99 2.51L9.99 6.51A0.7 0.7 0 0 1 9.99 7.49L5.99 11.49A0.7 0.7 0 0 1 5.01 11.49A0.7 0.7 0 0 1 5.01 10.51L8.51 7L5.01 3.49A0.7 0.7 0 0 1 5.01 2.51A0.7 0.7 0 0 1 5.99 2.51Z"); }
.glyph.glyph-pub-caret { width: 16px; height: 16px; clip-path: path("M4.5 6.5L11.5 6.5L8 10Z"); }

/* FE9-1 (Issue 2268, design v9, S-409): the v9 foundation in three layers.
   A: the v9 primitives on the root, under new names only, so the
   operations console keeps its look. B: on customer and public pages (the
   body of the customer console, or a body led by the site header) the
   older token names point at v9 values, so every page stylesheet turns v9
   without edits, and a few older components are remapped. C: the v9
   component classes; the names the operations pages already use (card,
   badge, tabs, tab, label, cell-sub) apply on customer and public pages
   only. Then the public header and footer, the customer console shell and
   the logo. FE9-2 and FE9-3 rebuild the page bodies on the C classes and
   then drop the remaps of layer B. */

/* Layer A: v9 primitives. The light code tokens are --code-light-*: the
   older --code-bg and --code-key paint the dark blocks. Fonts are local
   only: the system faces with a CJK fallback. */
:root {
  --gray-0: #ffffff; --gray-25: #fafafb; --gray-50: #f3f3f3; --gray-100: #edeeef; --gray-150: #e5e6e8; --gray-200: #d5d7da;
  --gray-300: #bbbec3; --gray-400: #8c9198; --gray-500: #636972; --gray-600: #4c535e; --gray-700: #3a424d; --gray-900: #1a2330; --ink-950: #10161f;
  --wash-1: rgba(26, 35, 48, .05); --wash-2: rgba(26, 35, 48, .08);
  --violet-25: #f8f8fe; --violet-50: #f1f1ff; --violet-100: #e4e5ff; --violet-200: #cecffe; --violet-300: #b0affe; --violet-400: #9189ff;
  --violet-500: #7762f9; --violet-600: #6341e7; --violet-700: #5332c8; --violet-800: #4327a7; --violet-900: #321c80;
  --bg-page: var(--gray-50); --bg-surface: var(--gray-0); --bg-subtle: var(--gray-25); --bg-muted: var(--gray-100);
  --text-1: var(--gray-900); --text-2: var(--gray-600); --text-3: var(--gray-500); --text-off: var(--gray-400);
  --accent-press: var(--violet-800); --accent-tint: var(--violet-50); --accent-tint-2: var(--violet-100); --accent-border: var(--violet-200);
  --accent-fg: var(--violet-800); --focus: var(--violet-500);
  --success-fg: #0e6b37; --success-tint: #e7f6ed; --success-border: #bfe6cd; --success-dot: #16a34a;
  --warning-fg: #8a4b00; --warning-tint: #fff3e0; --warning-border: #f7d9a6; --warning-dot: #e08a00;
  --danger-fg: #b42318; --danger-tint: #feeceb; --danger-border: #f6c4bf; --danger-solid: #d92d20; --danger-hover: #b42318; --danger-press: #9b1c13; --danger-wash: #fddcd9;
  --info-fg: var(--violet-800); --info-tint: var(--violet-50); --info-border: var(--violet-200); --info-dot: var(--violet-500);
  --neutral-fg: var(--gray-600); --neutral-tint: var(--gray-100); --neutral-dot: var(--gray-400);
  --tag-video-fg: #9c1f5b; --tag-video-bg: #fceef4; --tag-image-fg: #0b6e67; --tag-image-bg: #e6f5f2;
  --tag-chat-fg: #0a5a86; --tag-chat-bg: #e8f3fa; --tag-audio-fg: #5b6410; --tag-audio-bg: #f2f5e1;
  --code-light-bg: var(--gray-25); --code-light-key: var(--violet-700); --code-str: #0e6b37; --code-num: #9a4700; --code-com: var(--gray-500); --code-punct: var(--gray-600);
  --code-dark-bg: #121822; --code-dark-head: #19202b; --code-dark-text: #e6eaf0; --code-dark-key: var(--violet-300); --code-dark-str: #7dd9a3;
  --code-dark-num: #f2b06b; --code-dark-com: #8d97a6; --code-dark-ln: #6e7787;
  --font-sans: Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "PingFang SC", "Microsoft YaHei UI", monospace;
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-full: 999px;
  --e1: 0 1px 2px rgba(26, 35, 48, .05);
  --e2: 0 0 0 1px rgba(26, 35, 48, .06), 0 4px 8px -2px rgba(26, 35, 48, .08), 0 12px 24px -6px rgba(26, 35, 48, .12);
  --e3: 0 0 0 1px rgba(26, 35, 48, .06), 0 12px 24px -8px rgba(26, 35, 48, .14), 0 32px 64px -16px rgba(26, 35, 48, .24);
  --shadow-primary: 0 1px 2px rgba(67, 39, 167, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
  --shadow-danger: 0 1px 2px rgba(155, 28, 19, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
  --shadow-control: 0 1px 2px rgba(26, 35, 48, .05);
  --ring-input: 0 0 0 3px rgba(99, 65, 231, .18); --ring-danger: 0 0 0 3px rgba(217, 45, 32, .14);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-press: 120ms; --t-hover: 150ms; --t-in: 160ms; --t-out: 120ms; --t-dialog: 200ms; --t-tab: 200ms;
  --table-edge: 20px;
  --z-head: 10; --z-sidebar: 30; --z-topbar: 40; --z-menu: 50; --z-sheet: 60; --z-overlay: 70; --z-dialog: 80; --z-toast: 90; --z-tooltip: 100;
  --site-head: 56px;
}
@media (max-width: 767px) {
  :root { --site-head: 52px; }
}

/* Layer B: on customer and public pages the older names take v9 values.
   Radii: 4 tags, 6 controls up to 32px, 12 cards, menus and dialogs.
   Shadows: e1 cards, e2 menus and popovers, e3 dialogs and sheets. */
:where(body.customer-console, body:has(> .site-header)) {
  --accent: var(--violet-600); --indigo: var(--violet-600); --accent-hover: var(--violet-700); --indigo-hover: var(--violet-700);
  --accent-pressed: var(--violet-800); --accent-ink: var(--violet-700);
  --accent-soft: var(--violet-50); --indigo-soft: var(--violet-50); --accent-line: var(--violet-200); --focus-ring: var(--ring-input);
  --accent-tint-hover: var(--violet-100); --accent-faint: var(--violet-25);
  --surface: var(--gray-0); --field: var(--gray-0); --surface-hover: var(--gray-50); --canvas: var(--gray-50); --inset: var(--gray-100);
  --line-strong: var(--gray-200); --line-hover: var(--gray-300);
  --hover-wash: var(--wash-1); --tint: var(--wash-1); --side-hover: var(--wash-1); --press-wash: var(--wash-2); --tint-hover: var(--wash-2);
  --backdrop: rgba(16, 22, 31, .48);
  --secondary: var(--gray-600); --muted: var(--gray-500); --faint: var(--gray-500); --muted-ink: var(--gray-600);
  --neutral: var(--gray-600); --neutral-soft: var(--gray-100); --muted-soft: var(--gray-100); --on-ink: var(--gray-0);
  --success: var(--success-fg); --success-soft: var(--success-tint); --success-line: var(--success-border);
  --warning: var(--warning-fg); --warning-soft: var(--warning-tint); --warning-line: var(--warning-border); --warning-icon: var(--warning-dot);
  --danger: var(--danger-fg); --danger-soft: var(--danger-tint); --danger-line: var(--danger-border);
  --info: var(--info-fg); --info-soft: var(--info-tint); --info-line: var(--info-border);
  --status-ok-ink: var(--success-fg); --status-ok-fill: var(--success-tint);
  --status-run-ink: var(--info-fg); --status-run-fill: var(--info-tint);
  --status-idle-ink: var(--neutral-fg); --status-idle-fill: var(--neutral-tint);
  --status-fail-ink: var(--danger-fg); --status-fail-fill: var(--danger-tint);
  --notice-warn-fill: var(--warning-tint); --notice-warn-line: var(--warning-border);
  --tag-video-ink: var(--tag-video-fg); --tag-video-fill: var(--tag-video-bg); --tag-video-line: transparent;
  --tag-image-ink: var(--tag-image-fg); --tag-image-fill: var(--tag-image-bg); --tag-image-line: transparent;
  --tag-chat-ink: var(--tag-chat-fg); --tag-chat-fill: var(--tag-chat-bg); --tag-chat-line: transparent;
  --tag-voice-ink: var(--tag-audio-fg); --tag-voice-fill: var(--tag-audio-bg); --tag-voice-line: transparent;
  --radius-small: var(--r-4); --radius-control: var(--r-6); --radius-card: var(--r-12); --radius-overlay: var(--r-12);
  --shadow-raised: var(--e1); --shadow-soft: var(--e1); --shadow-popover: var(--e2); --shadow-menu: var(--e2); --shadow-overlay: var(--e3);
  --font: var(--font-sans); --mono: var(--font-mono); --weight-bold: 600;
  --line-title: 24px; --line-section: 24px; --line-table: 20px; --text-number: 24px; --line-number: 32px;
  --row-height: 48px;
  --code-bg: var(--code-dark-bg); --code-head: var(--code-dark-head); --code-ink: var(--code-dark-text); --code-string: var(--code-dark-str);
  --code-key: var(--code-dark-key); --code-muted: var(--code-dark-com); --code-line: rgba(255, 255, 255, .06);
  --site-bar-height: calc(var(--site-head) - 1px);
}
:where(body.customer-console, body:has(> .site-header)) a:hover { text-decoration: none; }
:where(body.customer-console, body:has(> .site-header)) :is(p, li, dd) a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(body.customer-console, body:has(> .site-header)) :is(p, li, dd) a:hover { text-decoration: underline; }
:where(body.customer-console, body:has(> .site-header)) :focus-visible { outline-color: var(--focus); }
:where(body.customer-console, body:has(> .site-header)) :is(b, strong) { font-weight: var(--weight-bold); }
:where(body.customer-console, body:has(> .site-header)) ::selection { background: var(--violet-100); color: var(--text-1); }
:where(body.customer-console, body:has(> .site-header)) pre { border-radius: var(--r-8); background: var(--code-light-bg); }

/* Layer C: v9 component classes. Type sizes are 12/16, 13/20, 14/20,
   15/26, 16/24, 20/28, 24/32, 30/38, 36/44 and 48/56; weights 400, 500
   and 600 only. Variants are compound (.btn.btn-primary) so the older
   element rules for buttons and fields never win over them. */
.t-12 { font-size: 12px; line-height: 16px; } .t-13 { font-size: 13px; line-height: 20px; } .t-14 { font-size: 14px; line-height: 20px; }
.t-15 { font-size: 15px; line-height: 26px; } .t-16 { font-size: 16px; line-height: 24px; } .t-20 { font-size: 20px; line-height: 28px; }
.t-24 { font-size: 24px; line-height: 32px; } .t-30 { font-size: 30px; line-height: 38px; } .t-36 { font-size: 36px; line-height: 44px; }
.t-48 { font-size: 48px; line-height: 56px; }
.w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; }
.c-1 { color: var(--text-1); } .c-2 { color: var(--text-2); } .c-3 { color: var(--text-3); } .c-off { color: var(--text-off); }
.tight { letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -48px; left: 16px; z-index: var(--z-tooltip); padding: 8px 12px; border-radius: var(--r-8); background: var(--gray-900); color: #fff; }
.skip-link:focus-visible { top: 8px; color: #fff; }
.container { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
}
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .hide-sm { display: none !important; }
}
@media (min-width: 768px) {
  .show-sm { display: none !important; }
}

/* Buttons: xs 24, sm 32, md 36 (the default), lg 40; 44 on phones for md
   and lg. aria-disabled keeps the button focusable. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-height: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-8); background: transparent; box-shadow: none; color: var(--text-1); font: 500 14px/20px var(--font-sans); white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.btn:hover { text-decoration: none; }
.btn:active, .btn.is-active { transform: scale(.98); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.btn-xs { height: 24px; gap: 4px; padding: 0 8px; border-radius: var(--r-6); font-size: 12px; line-height: 16px; }
.btn.btn-sm { height: 32px; gap: 6px; padding: 0 12px; border-radius: var(--r-6); }
.btn.btn-lg { height: 40px; padding: 0 20px; font-size: 16px; line-height: 24px; }
.btn.btn-primary { border-color: transparent; background: var(--violet-600); color: #fff; box-shadow: var(--shadow-primary); }
.btn.btn-primary:hover, .btn.btn-primary.is-hover { border-color: transparent; background: var(--violet-700); color: #fff; }
.btn.btn-primary:active, .btn.btn-primary.is-active { background: var(--violet-800); color: #fff; }
.btn.btn-secondary { border-color: var(--gray-200); background: var(--gray-0); color: var(--text-1); box-shadow: var(--shadow-control); }
.btn.btn-secondary:hover, .btn.btn-secondary.is-hover { border-color: var(--gray-300); background: var(--gray-25); color: var(--text-1); }
.btn.btn-secondary:active, .btn.btn-secondary.is-active { background: var(--gray-100); color: var(--text-1); }
.btn.btn-ghost { border-color: transparent; background: transparent; color: var(--gray-700); }
.btn.btn-ghost:hover, .btn.btn-ghost.is-hover { border-color: transparent; background: var(--wash-1); color: var(--text-1); }
.btn.btn-ghost:active, .btn.btn-ghost.is-active { background: var(--wash-2); color: var(--text-1); }
.btn.btn-danger { border-color: transparent; background: var(--danger-solid); color: #fff; box-shadow: var(--shadow-danger); }
.btn.btn-danger:hover, .btn.btn-danger.is-hover { border-color: transparent; background: var(--danger-hover); color: #fff; }
.btn.btn-danger:active, .btn.btn-danger.is-active { background: var(--danger-press); color: #fff; }
.btn.btn-danger-ghost { border-color: transparent; background: transparent; color: var(--danger-fg); }
.btn.btn-danger-ghost:hover, .btn.btn-danger-ghost.is-hover { border-color: transparent; background: var(--danger-tint); color: var(--danger-fg); }
.btn.btn-danger-ghost:active, .btn.btn-danger-ghost.is-active { background: var(--danger-wash); color: var(--danger-fg); }
.btn.btn-link { height: auto; gap: 4px; padding: 0; border: 0; border-radius: var(--r-4); background: none; color: var(--violet-600); }
.btn.btn-link:hover, .btn.btn-link.is-hover { background: none; color: var(--violet-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn.btn-link:active, .btn.btn-link.is-active { color: var(--violet-800); transform: none; }
.btn.btn-icon { width: 36px; gap: 0; padding: 0; }
.btn.btn-icon.btn-sm { width: 32px; } .btn.btn-icon.btn-xs { width: 24px; } .btn.btn-icon.btn-lg { width: 40px; }
.btn.btn-icon[aria-pressed="true"] { background: var(--accent-tint); color: var(--violet-700); }
.btn:is(:disabled, [aria-disabled="true"]), .btn:is(:disabled, [aria-disabled="true"]):hover { cursor: not-allowed; transform: none; box-shadow: none; }
.btn:is(.btn-primary, .btn-danger):is(:disabled, [aria-disabled="true"]), .btn:is(.btn-primary, .btn-danger):is(:disabled, [aria-disabled="true"]):hover { border-color: transparent; background: var(--gray-100); color: var(--gray-400); }
.btn.btn-secondary:is(:disabled, [aria-disabled="true"]), .btn.btn-secondary:is(:disabled, [aria-disabled="true"]):hover { border-color: var(--gray-150); background: var(--gray-25); color: var(--gray-400); }
.btn:is(.btn-ghost, .btn-danger-ghost, .btn-link):is(:disabled, [aria-disabled="true"]), .btn:is(.btn-ghost, .btn-danger-ghost, .btn-link):is(:disabled, [aria-disabled="true"]):hover { border-color: transparent; background: transparent; color: var(--gray-400); text-decoration: none; }
.btn[aria-busy="true"] { cursor: progress; }
.spinner { flex: none; width: 16px; height: 16px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: v9-spin .8s linear infinite; }
.btn-xs .spinner { width: 14px; height: 14px; }
@keyframes v9-spin { to { transform: rotate(360deg); } }
.kbd { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--gray-0); box-shadow: 0 1px 0 var(--line); color: var(--text-3); font: 500 12px/16px var(--font-mono); white-space: nowrap; }
.tooltip { display: inline-block; max-width: 280px; padding: 6px 8px; border-radius: var(--r-6); background: var(--gray-900); box-shadow: var(--e2); color: #fff; font: 400 12px/16px var(--font-sans); }
.tooltip.is-wrap { font-size: 13px; line-height: 20px; }

/* Fields: a label over the field, 6px apart; the optional mark in
   .label-opt, never an asterisk. The field-error and older field helpers
   keep their own rules above. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(body.customer-console, body:has(> .site-header)) .label { color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.label-opt { color: var(--text-3); font-weight: 400; }
.help { color: var(--text-3); font-size: 12px; line-height: 16px; }
.counter { color: var(--text-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.input, .textarea, .select, .control { width: 100%; height: 36px; min-height: 0; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); box-shadow: none; color: var(--text-1); font: 400 14px/20px var(--font-sans); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.input, .select { padding: 0 12px; }
.input::placeholder, .textarea::placeholder, .control input::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .textarea:hover, .select:hover, .control:hover, .input.is-hover, .select.is-hover, .control.is-hover { border-color: var(--gray-300); background: var(--gray-0); }
.input:focus, .textarea:focus, .select:focus-visible, .control:focus-within, .input.is-focus, .textarea.is-focus, .control.is-focus, .select[aria-expanded="true"] { border-color: var(--violet-600); outline: none; box-shadow: var(--ring-input); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .control[aria-invalid="true"] { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
.input[readonly], .control.is-readonly { background: var(--gray-25); }
.input:disabled, .input[aria-disabled="true"], .select[aria-disabled="true"], .control.is-disabled { border-color: var(--gray-150); background: var(--gray-25); box-shadow: none; color: var(--gray-400); cursor: not-allowed; }
.input.input-sm, .select.input-sm, .control.input-sm { height: 32px; border-radius: var(--r-6); }
.input.input-lg, .control.input-lg { height: 40px; }
.textarea { display: block; height: auto; min-height: 96px; padding: 8px 12px; line-height: 22px; resize: vertical; }
.control { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; }
.control input, .control input:is(:hover, :focus, :focus-visible) { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: none; color: inherit; font: inherit; }
.control .affix, .control > .glyph { flex: none; color: var(--text-3); }
.control .kbd { margin-right: 4px; }
.select { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.select .chev { color: var(--text-3); transition: transform var(--t-in) var(--ease); }
.select[aria-expanded="true"] .chev { transform: rotate(180deg); }
.choice { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); font-size: 14px; line-height: 20px; font-weight: 400; cursor: pointer; }
.check, .radio { appearance: none; -webkit-appearance: none; display: inline-grid; flex: none; place-content: center; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--gray-400); background: var(--gray-0); cursor: pointer; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.check:hover, .radio:hover { border-color: var(--gray-400); }
.check { border-radius: var(--r-4); }
.check::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 1.75px 1.75px; opacity: 0; transform: translateY(-1px) rotate(-45deg); }
.check:checked, .check.is-mixed { border-color: var(--violet-600); background: var(--violet-600); }
.check:checked::after { opacity: 1; }
.check.is-mixed::after { width: 8px; height: 0; border-width: 0 0 1.75px; opacity: 1; transform: none; }
.radio { border-radius: 50%; }
.radio:checked { border: 5px solid var(--violet-600); }
.check:disabled, .radio:disabled { border-color: var(--gray-200); background: var(--gray-100); cursor: not-allowed; }
.check:disabled:checked { border-color: var(--gray-300); background: var(--gray-300); }
/* The v9 switch is a role=switch button with aria-checked; the older
   checkbox switch is remapped further down. */
.switch:not(input) { position: relative; display: inline-block; flex: none; width: 32px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-full); background: var(--gray-400); box-shadow: none; cursor: pointer; transition: background-color var(--t-hover) var(--ease); }
.switch:not(input):hover { border-color: transparent; background: var(--gray-400); }
.switch:not(input)::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 22, 31, .24); transition: transform var(--t-tab) var(--ease-out); }
.switch:not(input)[aria-checked="true"] { background: var(--violet-600); }
.switch:not(input)[aria-checked="true"]::after { transform: translateX(14px); }
.switch:not(input)[aria-disabled="true"] { background: var(--gray-200); cursor: not-allowed; }
.switch:not(input)[aria-disabled="true"][aria-checked="true"] { background: var(--violet-200); }

/* Menus and popovers: radius 12, padding 6, items 32 at radius 6 */
.menu { display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e2); }
.menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; min-height: 0; padding: 0 10px; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-1); font: 400 14px/20px var(--font-sans); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) var(--ease); }
.menu-item > .glyph { color: var(--gray-700); }
.menu-item:hover, .menu-item.is-hover { border-color: transparent; background: var(--gray-50); color: var(--text-1); text-decoration: none; }
.menu-item[aria-disabled="true"], .menu-item[aria-disabled="true"]:hover { background: transparent; color: var(--gray-400); cursor: not-allowed; }
.menu-item.is-danger, .menu-item.is-danger > .glyph { color: var(--danger-fg); }
.menu-item.is-danger:hover, .menu-item.is-danger.is-hover { background: var(--danger-tint); color: var(--danger-fg); }
.menu-meta { margin-left: auto; padding-left: 16px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.menu-check { margin-left: auto; color: var(--violet-600); }
.menu-sep { height: 1px; margin: 6px -6px; background: var(--line-soft); }
.menu-label { margin: 0; padding: 6px 10px 4px; color: var(--text-3); font: 500 12px/16px var(--font-sans); }

/* Tabs mark location in ink; the segmented control holds 2 to 5 options;
   the filter chip is dashed until it is on. */
:where(body.customer-console, body:has(> .site-header)) .tabs { display: flex; flex-wrap: nowrap; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
:where(body.customer-console, body:has(> .site-header)) .tabs.is-flush { border-bottom: 0; }
:where(body.customer-console, body:has(> .site-header)) .tabs > .tab { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-2); font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: color var(--t-hover) var(--ease); }
:where(body.customer-console, body:has(> .site-header)) .tabs > .tab:hover, :where(body.customer-console, body:has(> .site-header)) .tabs > .tab.is-hover { background: none; color: var(--text-1); text-decoration: none; }
:where(body.customer-console, body:has(> .site-header)) .tabs > .tab:is([aria-selected="true"], [aria-current="page"]) { color: var(--text-1); font-weight: 500; }
:where(body.customer-console, body:has(> .site-header)) .tabs > .tab:is([aria-selected="true"], [aria-current="page"])::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--gray-900); }
.seg { display: inline-flex; align-items: center; gap: 2px; width: max-content; max-width: 100%; height: 32px; padding: 2px; overflow-x: auto; border-radius: var(--r-8); background: var(--gray-100); scrollbar-width: none; }
.seg-item { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 28px; min-height: 0; padding: 0 12px; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-2); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t-tab) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-tab) var(--ease); }
.seg-item:hover, .seg-item.is-hover { background: transparent; color: var(--text-1); }
.seg-item:is([aria-checked="true"], [aria-pressed="true"], [aria-selected="true"]) { background: var(--gray-0); box-shadow: 0 0 0 1px var(--line-soft), var(--e1); color: var(--text-1); }
.seg-item[aria-disabled="true"] { color: var(--gray-400); cursor: not-allowed; }
.seg.seg-sm { height: 28px; }
.seg.seg-sm .seg-item { height: 24px; padding: 0 12px; font-size: 12px; line-height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; padding: 0 12px; border: 1px dashed var(--gray-300); border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-2); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.chip:hover, .chip.is-hover { border-color: var(--gray-400); background: var(--gray-25); color: var(--text-1); }
.chip.is-on { border-style: solid; border-color: var(--accent-border); background: var(--accent-tint); color: var(--accent-fg); }
.chip.is-on:hover { background: var(--violet-100); }

/* Cards and panels: one level of container, dividers inside. A v9 card
   carries its padding in its parts; an older card keeps its own. */
:where(body.customer-console, body:has(> .site-header)) .card { border: 1px solid var(--line); border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e1); }
:where(body.customer-console, body:has(> .site-header)) .card:has(> :is(.card-body, .card-body-lg, .card-head, .card-foot, .table-wrap, .toolbar, .table-foot)) { margin: 0; padding: 0; }
:where(body.customer-console, body:has(> .site-header)) .card-body { padding: 20px; }
:where(body.customer-console, body:has(> .site-header)) .card-body-lg { padding: 24px; }
:where(body.customer-console, body:has(> .site-header)) .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 16px; }
:where(body.customer-console, body:has(> .site-header)) .card-title { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
:where(body.customer-console, body:has(> .site-header)) .card-desc { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
:where(body.customer-console, body:has(> .site-header)) .card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-height: 52px; padding: 8px 20px; border-top: 1px solid var(--line-soft); }
:where(body.customer-console, body:has(> .site-header)) .card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
:where(body.customer-console, body:has(> .site-header)) .card-link:hover, :where(body.customer-console, body:has(> .site-header)) .card-link.is-hover { border-color: var(--gray-300); box-shadow: var(--e2); color: inherit; text-decoration: none; }
:where(body.customer-console, body:has(> .site-header)) .card.is-selected { border-color: var(--violet-600); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--violet-600); }
.cover { position: relative; overflow: hidden; background: var(--gray-100); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease); }
.card-link:hover .cover img, .card-link.is-hover .cover img { transform: scale(1.02); }
.divider { height: 1px; margin: 0; border: 0; background: var(--line-soft); }
.stat-label { margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; font-weight: 400; }
.stat-value { margin: 0; color: var(--text-1); font: 600 24px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.dl dt { color: var(--text-3); font-size: 12px; line-height: 16px; }
.dl dd { min-width: 0; margin: 4px 0 0; color: var(--text-1); font-size: 14px; line-height: 20px; }
.meter { height: 4px; overflow: hidden; border-radius: var(--r-full); background: var(--gray-100); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--violet-600); }
.avatar { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font: 500 12px/16px var(--font-sans); }

/* Tables: a head without a fill, a hover row, numbers to the right, the
   first and last column inset by the card padding; the row's one link is
   stretched over the row. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { display: table; width: 100%; overflow: visible; border-collapse: separate; border-spacing: 0; background: transparent; font-size: 14px; line-height: 20px; }
.table th { position: sticky; top: 0; z-index: var(--z-head); height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--gray-0); color: var(--text-3); font: 500 12px/16px var(--font-sans); text-align: left; vertical-align: middle; white-space: nowrap; }
.table td { height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); color: var(--text-1); font-size: 14px; line-height: 20px; vertical-align: middle; }
.table tr > :first-child { padding-left: var(--table-edge); }
.table tr > :last-child { padding-right: var(--table-edge); }
.table tbody tr { position: relative; transition: background-color var(--t-hover) var(--ease); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover, .table tbody tr.is-hover { background: var(--gray-50); }
.table tbody tr:hover > td { background: transparent; }
.table tbody tr.is-open { background: var(--accent-tint); }
.table tbody tr.is-open > :first-child { box-shadow: inset 2px 0 0 var(--violet-600); }
.table .ta-r { text-align: right; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.table-tasks td { height: 56px; }
.table.table-dense td { height: 40px; }
.table.sticky-head th { top: var(--sticky-top, 56px); }
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-action { position: relative; z-index: 1; }
.row-more { color: var(--gray-400); }
.table tbody tr:hover .row-more, .table tbody tr.is-hover .row-more { color: var(--gray-700); }
.cell-id { color: var(--text-2); font: 400 13px/20px var(--font-mono); white-space: nowrap; }
:where(body.customer-console, body:has(> .site-header)) .cell-sub { display: block; color: var(--text-3); font-size: 13px; line-height: 20px; }
.cell-muted { color: var(--text-3); }
.thumb { display: grid; flex: none; place-items: center; width: 64px; height: 36px; overflow: hidden; border-radius: var(--r-8); background: var(--gray-100); color: var(--text-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 56px; margin: 0; padding: 12px var(--table-edge); border-bottom: 1px solid var(--line-soft); }
.toolbar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.updated { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 13px; line-height: 20px; white-space: nowrap; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px var(--table-edge); border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 13px; line-height: 20px; }
.pager { display: flex; align-items: center; gap: 8px; }

/* Badges: a status with a dot or an icon, counts and model type tags.
   Only queued, processing and delivering pulse. */
:where(body.customer-console, body:has(> .site-header)) .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; min-height: 0; padding: 0 8px; border-radius: var(--r-6); background: var(--neutral-tint); color: var(--neutral-fg); font: 500 12px/16px var(--font-sans); white-space: nowrap; vertical-align: middle; }
:where(body.customer-console, body:has(> .site-header)) .badge .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); }
:where(body.customer-console, body:has(> .site-header)) .badge-success { background: var(--success-tint); color: var(--success-fg); }
:where(body.customer-console, body:has(> .site-header)) .badge-success .dot { background: var(--success-dot); }
:where(body.customer-console, body:has(> .site-header)) .badge-warning { background: var(--warning-tint); color: var(--warning-fg); }
:where(body.customer-console, body:has(> .site-header)) .badge-warning .dot { background: var(--warning-dot); }
:where(body.customer-console, body:has(> .site-header)) .badge-danger { background: var(--danger-tint); color: var(--danger-fg); }
:where(body.customer-console, body:has(> .site-header)) .badge-danger .dot { background: var(--danger-solid); }
:where(body.customer-console, body:has(> .site-header)) .badge-info { background: var(--info-tint); box-shadow: inset 0 0 0 1px var(--violet-100); color: var(--info-fg); }
:where(body.customer-console, body:has(> .site-header)) .badge-info .dot { background: var(--info-dot); }
.dot.is-live { animation: v9-pulse 1.6s var(--ease) infinite; }
@keyframes v9-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.stage-line { color: var(--text-3); font-size: 13px; line-height: 20px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-full); background: var(--gray-100); color: var(--text-2); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border: 0; border-radius: var(--r-4); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.tag-video { background: var(--tag-video-bg); color: var(--tag-video-fg); }
.tag-image { background: var(--tag-image-bg); color: var(--tag-image-fg); }
.tag-chat { background: var(--tag-chat-bg); color: var(--tag-chat-fg); }
.tag-audio, .tag-voice { background: var(--tag-audio-bg); color: var(--tag-audio-fg); }

/* Feedback: toasts at the bottom right (bottom centre on phones),
   banners for blocking states only, empty states with one action, and
   skeleton bars. The 2px progress bar is .progress-bar (the boards call it
   route-bar, a word customer markup may not carry). */
.toast { display: flex; align-items: flex-start; gap: 12px; width: 360px; max-width: 100%; padding: 12px 8px 12px 16px; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e2); color: var(--text-1); font-size: 14px; line-height: 20px; }
.toast-icon { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success-dot); color: #fff; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-action { flex: none; color: var(--violet-600); font-weight: 500; }
.toast .btn-icon { margin: -6px 0 -6px 4px; }
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: var(--r-8); font-size: 14px; line-height: 20px; }
.banner > .glyph { flex: none; }
.banner-text { flex: 1 1 240px; min-width: 0; }
.banner-warning { border-color: var(--warning-border); background: var(--warning-tint); color: var(--warning-fg); }
.banner-danger { border-color: var(--danger-border); background: var(--danger-tint); color: var(--danger-fg); }
.banner-info { border-color: var(--info-border); background: var(--info-tint); color: var(--info-fg); }
.empty { display: flex; flex-direction: column; align-items: center; max-width: 400px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: var(--r-8); background: var(--gray-100); color: var(--gray-700); }
.empty-title { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.empty-text { max-width: none; margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.empty .btn { margin-top: 20px; }
.skel { position: relative; display: block; height: 12px; overflow: hidden; border-radius: var(--r-4); background: var(--gray-100); }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); transform: translateX(-100%); animation: v9-shimmer 1.4s var(--ease) infinite; }
@keyframes v9-shimmer { to { transform: translateX(100%); } }
.progress-bar { height: 2px; overflow: hidden; background: var(--accent-tint-2); }
.progress-bar > span { display: block; width: 60%; height: 100%; background: var(--violet-500); }

/* Overlays: dialogs 400, 480, 640 and 960 wide, a bottom sheet on
   phones; the right sheet is 640 (560 below 1280, the whole screen below
   768). */
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 16px; background: rgba(16, 22, 31, .48); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog { position: relative; z-index: var(--z-dialog); display: flex; flex-direction: column; gap: 12px; width: 480px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border: 0; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e3); color: var(--text-1); }
.dialog.dialog-sm { width: 400px; } .dialog.dialog-lg { width: 640px; } .dialog.dialog-xl { width: 960px; }
.dialog-title { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.dialog-body { margin: 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sheet { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: var(--z-sheet); display: flex; flex-direction: column; width: 640px; max-width: calc(100% - 16px); overflow: hidden; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e3); }
.sheet-head { display: flex; flex: none; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line-soft); }
.sheet-title { margin: 0; font: 600 16px/24px var(--font-sans); white-space: nowrap; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; }
.sheet-foot { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-soft); background: var(--gray-0); }
.player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-12); background: var(--ink-950); }
.player img, .player video { width: 100%; height: 100%; object-fit: cover; }
.player-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(16, 22, 31, .56); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.player-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 12px; padding: 20px 16px 12px; background: linear-gradient(rgba(16, 22, 31, 0), rgba(16, 22, 31, .6)); color: #fff; font: 500 12px/16px var(--font-mono); }
.player-track { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.player-track > span { display: block; height: 100%; background: #fff; }

/* Code, snippets and secrets. Blocks hug their content; lines never wrap
   mid-token and fade over the right 24px where a line runs past the edge
   (.is-end at the scroll end drops the fade). Light code in the console,
   dark code for request samples. */
.code { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--code-light-bg); }
.code-head { display: flex; flex: none; align-items: center; gap: 2px; height: 40px; padding: 0 6px 0 4px; border-bottom: 1px solid var(--line-soft); }
.code-tab { position: relative; display: inline-flex; align-items: center; height: 40px; min-height: 0; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-3); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; transition: color var(--t-hover) var(--ease); }
.code-tab:hover, .code-tab[aria-selected="true"] { background: none; color: var(--text-1); }
.code-tab[aria-selected="true"]::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: var(--violet-600); }
.code-label { padding: 0 12px; color: var(--text-2); font: 500 13px/20px var(--font-sans); }
.code-copy { margin-left: auto; }
.code pre { max-height: 420px; margin: 0; padding: 12px 16px; overflow: auto; border: 0; border-radius: 0; background: none; color: var(--text-1); font: 400 13px/20px var(--font-mono); white-space: pre; tab-size: 2; scrollbar-color: var(--gray-300) transparent; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
.code pre.is-end { -webkit-mask-image: none; mask-image: none; }
.code .cl { display: block; min-height: 20px; }
.code .ln { display: inline-block; width: 16px; margin-right: 16px; color: var(--gray-400); text-align: right; user-select: none; }
.tk-key { color: var(--code-light-key); } .tk-str { color: var(--code-str); } .tk-num { color: var(--code-num); } .tk-com { color: var(--code-com); } .tk-pun { color: var(--code-punct); }
.code.code-dark { border-color: var(--code-dark-bg); background: var(--code-dark-bg); }
.code-dark .code-head { border-bottom-color: rgba(255, 255, 255, .06); background: var(--code-dark-head); }
.code-dark .code-tab, .code-dark .code-label { color: #9aa3b2; }
.code-dark .code-tab:hover, .code-dark .code-tab[aria-selected="true"] { color: #ffffff; }
.code-dark .code-tab[aria-selected="true"]::after { background: var(--violet-400); }
.code-dark pre { color: var(--code-dark-text); scrollbar-color: rgba(255, 255, 255, .24) transparent; }
.code-dark .ln { color: var(--code-dark-ln); }
.code-dark .tk-key { color: var(--code-dark-key); } .code-dark .tk-str { color: var(--code-dark-str); } .code-dark .tk-num { color: var(--code-dark-num); }
.code-dark .tk-com { color: var(--code-dark-com); } .code-dark .tk-pun { color: #b4bcc8; }
.code-dark .btn.btn-ghost { color: #c9d0da; }
.code-dark .btn.btn-ghost:hover, .code-dark .btn.btn-ghost.is-hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.code-more { display: flex; justify-content: center; padding: 8px; border-top: 1px solid var(--line-soft); }
.snippet { display: flex; align-items: center; gap: 8px; height: 40px; min-width: 0; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--gray-25); color: var(--text-1); font: 400 13px/20px var(--font-mono); }
.snippet-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-inline { padding: 1px 6px; border-radius: var(--r-4); background: var(--wash-1); color: var(--text-1); font: 400 13px/20px var(--font-mono); overflow-wrap: anywhere; }
.is-copied, .is-copied:hover { color: var(--success-fg); }
.key { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-6); background: var(--gray-25); }
.key-value { min-width: 0; margin-right: 4px; overflow: hidden; color: var(--text-1); font: 400 13px/20px var(--font-mono); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }

/* Breadcrumbs and the console page head */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text-1); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--text-1); }
.crumbs .glyph { color: var(--gray-400); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.page-title { margin: 0; color: var(--text-1); font: 600 20px/28px var(--font-sans); letter-spacing: 0; }
.page-desc { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 20px; }

/* Phones: small controls keep their look and answer taps over 44px; inputs
   are 16px so a phone never zooms; dialogs become bottom sheets. */
@media (max-width: 767px) {
  .btn.btn-sm::before { content: ""; position: absolute; inset: -6px 0; }
  .btn.btn-icon.btn-sm::before { inset: -6px; }
  .btn.btn-xs::before { content: ""; position: absolute; inset: -10px 0; }
  .btn.btn-icon.btn-xs::before { inset: -10px; }
  .btn:not(.btn-xs, .btn-sm, .btn-link) { height: 44px; }
  .btn.btn-icon:not(.btn-xs, .btn-sm) { width: 44px; }
  .customer-console .btn { min-height: 0; }
  .chip { height: 36px; }
  .seg, .seg.seg-sm { height: 40px; }
  .seg-item, .seg.seg-sm .seg-item { height: 36px; font-size: 13px; line-height: 20px; }
  .input, .textarea, .control, .select { font-size: 16px; }
  .input.input-sm, .control.input-sm, .select.input-sm { height: 40px; border-radius: var(--r-8); }
  .customer-console .control input:not([type="checkbox"]):not([type="radio"]) { min-height: 0; }
  .choice { min-height: 44px; }
  .overlay { align-items: end; padding: 0; }
  .dialog { width: 100%; max-width: none; border-radius: var(--r-16) var(--r-16) 0 0; }
  .sheet { inset: 0; width: auto; max-width: none; border-radius: 0; }
  .toast-stack { right: 16px; bottom: 16px; left: 16px; align-items: center; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sheet { width: 560px; }
}

/* Older components on customer and public pages, in the v9 look until
   FE9-2 and FE9-3 move the pages onto the v9 classes (a .btn never takes
   these remaps): outline buttons are white with the control shadow and stay
   outlined when disabled, as the v9 secondary does, while a filled button
   turns grey and a clear one stays clear; the primary carries its own
   shadow, tabs are 500 with an ink underline, chosen segments are white and
   raised, task states are 22px badges (running is the violet info badge),
   the switch is 32 by 18, tables have a head without a fill and 48px rows,
   cards lift by e1, dialogs and drawers float by e3 (the drawer is the v9
   sheet) and code blocks take the v9 dark tones. */
:where(body.customer-console, body:has(> .site-header)) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid),
:where(body.customer-console, body:has(> .site-header)) button:not([class], [role], [type="submit"]) { background: var(--gray-0); box-shadow: var(--shadow-control); }
:where(body.customer-console, body:has(> .site-header)) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid, [aria-disabled="true"]):hover,
:where(body.customer-console, body:has(> .site-header)) button:not([class], [role], [type="submit"], :disabled):hover { border-color: var(--gray-300); background: var(--gray-25); }
:where(body.customer-console, body:has(> .site-header)) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid, [aria-disabled="true"]):active,
:where(body.customer-console, body:has(> .site-header)) button:not([class], [role], [type="submit"], :disabled):active { background: var(--gray-100); }
:where(body.customer-console, body:has(> .site-header)) :where(button[type="submit"], .button-primary, .button-accent):not(.btn, .button-ghost, .button-danger, .button-danger-solid, .button-dark, .button-secondary, :disabled, [aria-disabled="true"]) { box-shadow: var(--shadow-primary); }
:where(body.customer-console, body:has(> .site-header)) :is(button, .button).button-danger-solid:not(.btn) { border-color: var(--danger-solid); background: var(--danger-solid); box-shadow: var(--shadow-danger); }
:where(body.customer-console, body:has(> .site-header)) :is(button, .button).button-danger-solid:not(.btn):hover { border-color: var(--danger-hover); background: var(--danger-hover); opacity: 1; }
:where(body.customer-console, body:has(> .site-header)) .button-lg:not(.btn) { border-radius: var(--r-8); font-weight: 500; }
:where(body.customer-console, body:has(> .site-header)) :is(button:disabled, .button[aria-disabled="true"]):not(.btn),
:where(body.customer-console, body:has(> .site-header)) :is(button:disabled, .button[aria-disabled="true"]):not(.btn):hover { border-color: var(--gray-150); background-color: var(--gray-25); box-shadow: none; color: var(--gray-400); }
:where(body.customer-console, body:has(> .site-header)) :is(button[type="submit"], .button-primary, .button-accent, .button-dark, .button-danger-solid):is(:disabled, [aria-disabled="true"]):not(.btn),
:where(body.customer-console, body:has(> .site-header)) :is(button[type="submit"], .button-primary, .button-accent, .button-dark, .button-danger-solid):is(:disabled, [aria-disabled="true"]):not(.btn):hover { border-color: transparent; background-color: var(--gray-100); color: var(--gray-400); }
:where(body.customer-console, body:has(> .site-header)) :is(.button-ghost, .icon-button, [role="tab"]):is(:disabled, [aria-disabled="true"]):not(.btn),
:where(body.customer-console, body:has(> .site-header)) :is(.button-ghost, .icon-button, [role="tab"]):is(:disabled, [aria-disabled="true"]):not(.btn):hover { border-color: transparent; background-color: transparent; color: var(--gray-400); }
:where(body.customer-console, body:has(> .site-header)) :is(input, select, textarea):disabled { border-color: var(--gray-150); background-color: var(--gray-25); color: var(--gray-400); }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch { width: 32px; height: 18px; min-height: 18px; background-color: var(--gray-400); box-shadow: none; }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch::before { width: 14px; height: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 22, 31, .24); }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch:checked { background-color: var(--violet-600); box-shadow: none; }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch:checked::before { background: #fff; transform: translateX(14px); }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch:disabled { background-color: var(--gray-200); opacity: 1; }
:where(body.customer-console, body:has(> .site-header)) input[type="checkbox"].switch:checked:disabled { background-color: var(--violet-200); }
:where(body.customer-console, body:has(> .site-header)) :is([role="tab"], .tabs a) { color: var(--text-2); font-weight: 500; }
:where(body.customer-console, body:has(> .site-header)) :is([role="tab"], .tabs a):hover { color: var(--text-1); }
:where(body.customer-console, body:has(> .site-header)) :is([role="tab"][aria-selected="true"], .tabs [aria-current="page"]) { border-bottom-color: var(--gray-900); color: var(--text-1); font-weight: 500; }
:where(body.customer-console, body:has(> .site-header)) .choice-pills { padding: 2px; border-radius: var(--r-8); background: var(--gray-100); }
:where(body.customer-console, body:has(> .site-header)) .choice-pill { border-radius: var(--r-6); color: var(--text-2); }
:where(body.customer-console, body:has(> .site-header)) .choice-pill:hover { background: transparent; color: var(--text-1); }
:where(body.customer-console, body:has(> .site-header)) .choice-input:checked + .choice-pill,
:where(body.customer-console, body:has(> .site-header)) .choice-input:checked:disabled + .choice-pill:hover { background: var(--gray-0); box-shadow: 0 0 0 1px var(--line-soft), var(--e1); color: var(--text-1); }
:where(body.customer-console, body:has(> .site-header)) .state-badge { height: 22px; padding: 0 8px; border-radius: var(--r-6); font-weight: 500; line-height: 16px; }
:where(body.customer-console, body:has(> .site-header)) .state-badge.state-run { box-shadow: inset 0 0 0 1px var(--violet-100); }
:where(body.customer-console, body:has(> .site-header)) .type-tag { height: 20px; padding: 0 6px; border: 0; border-radius: var(--r-4); font: 500 12px/16px var(--font-sans); }
:where(body.customer-console, body:has(> .site-header)) .console-card { padding: 20px; box-shadow: var(--e1); }
:where(body.customer-console, body:has(> .site-header)) .console-head h1 { line-height: 24px; }
:where(body.customer-console, body:has(> .site-header)) .console-head p { color: var(--text-2); }
:where(body.customer-console, body:has(> .site-header)) .page-header p { color: var(--text-2); }
:where(body.customer-console, body:has(> .site-header)) th { height: 36px; color: var(--text-3); }
:where(body.customer-console, body:has(> .site-header)) td { border-bottom-color: var(--line-soft); }
:where(body.customer-console, body:has(> .site-header)) .console-table thead tr { background: transparent; }
:where(body.customer-console, body:has(> .site-header)) .console-table th { color: var(--text-3); font-weight: 500; line-height: 16px; }
:where(body.customer-console, body:has(> .site-header)) .console-table td { border-bottom-color: var(--line-soft); line-height: 20px; }
:where(body.customer-console, body:has(> .site-header)) .console-table tbody tr:hover > td { background: var(--gray-50); }
:where(body.customer-console, body:has(> .site-header)) .console-empty .console-empty-title { color: var(--text-1); font-size: 16px; line-height: 24px; font-weight: 600; }
:where(body.customer-console, body:has(> .site-header)) .console-empty p:not(.console-empty-title) { color: var(--text-2); font-size: 14px; line-height: 22px; }
:where(body.customer-console, body:has(> .site-header)) :is(.notice, .console-note) { border-radius: var(--r-8); }
:where(body.customer-console, body:has(> .site-header)) dialog { border: 0; }
:where(body.customer-console, body:has(> .site-header)) .console-backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:where(body.customer-console, body:has(> .site-header)) .console-dialog-head { border-bottom-color: var(--line-soft); }
:where(body.customer-console, body:has(> .site-header)) .console-dialog-head h2 { font-size: 16px; line-height: 24px; }
:where(body.customer-console, body:has(> .site-header)) .console-dialog-head p { color: var(--text-2); font-size: 13px; line-height: 20px; font-weight: 400; }
:where(body.customer-console, body:has(> .site-header)) .console-dialog-actions > :is(.button, button) { height: 36px; min-width: 0; padding: 0 16px; border-radius: var(--r-8); font-weight: 500; }
:where(body.customer-console, body:has(> .site-header)) .drawer { inset: 8px 8px 8px auto; width: min(var(--drawer-width), calc(100% - 16px)); border: 0; border-radius: var(--r-12); box-shadow: var(--e3); }
:where(body.customer-console, body:has(> .site-header)) .drawer-header { border-bottom-color: var(--line-soft); }
:where(body.customer-console, body:has(> .site-header)) .drawer-footer { border-top-color: var(--line-soft); }
:where(body.customer-console, body:has(> .site-header)) .code-block { border-color: var(--code-dark-bg); border-radius: var(--r-8); }
:where(body.customer-console, body:has(> .site-header)) .code-block [role="tab"][aria-selected="true"] { border-bottom-color: var(--violet-400); }
@media (min-width: 1280px) {
  :where(body.customer-console, body:has(> .site-header)) { --drawer-width: 640px; }
}
@media (max-width: 767px) {
  :where(body.customer-console, body:has(> .site-header)) .drawer { inset: 0; width: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(body.customer-console, body:has(> .site-header)) *, :where(body.customer-console, body:has(> .site-header)) *::before, :where(body.customer-console, body:has(> .site-header)) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn:active, .btn.is-active { transform: none; }
}

/* The logo: an ink square (radius 7) with a white rising stroke and a
   violet dot, then the wordmark outlined from Noto Sans SC 600 (OFL), the
   Chinese name in ink and the Latin name in grey. The link keeps its name
   and its strong keeps the wordmark text for the language layer; the
   pictures are the link's pseudo-elements and its strong's, each clipped
   to its outline in a 24px or 144 by 24px box. The rail and narrow phones
   show the mark only. */
:where(body.customer-console, body:has(> .site-header)) .brand { position: relative; display: flex; flex: none; align-items: center; gap: 0; width: 144px; height: 24px; margin-right: 0; border-radius: var(--r-6); color: var(--text-1); text-decoration: none; white-space: nowrap; }
:where(body.customer-console, body:has(> .site-header)) .brand:hover { color: var(--text-1); text-decoration: none; }
:where(body.customer-console, body:has(> .site-header)) .brand::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; background: radial-gradient(circle at 17.2px 6.9px, var(--violet-400) 1.9px, transparent 2.7px), var(--gray-900); }
:where(body.customer-console, body:has(> .site-header)) .brand::after { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--gray-0); clip-path: path("M5.75 18.55L6.67 18.51L7.59 18.39L8.5 18.18L9.39 17.9L10.27 17.54L11.13 17.1L11.96 16.58L12.76 15.98L13.52 15.31L14.23 14.56L14.9 13.73L15.52 12.83L16.07 11.86L16.57 10.81A1.05 1.05 0 0 0 14.63 9.99L14.21 10.89L13.74 11.72L13.22 12.48L12.66 13.17L12.06 13.8L11.43 14.35L10.77 14.85L10.09 15.27L9.39 15.63L8.68 15.93L7.95 16.16L7.22 16.32L6.48 16.42L5.75 16.45A1.05 1.05 0 0 0 5.75 18.55Z"); }
:where(body.customer-console, body:has(> .site-header)) .brand strong { position: static; overflow: hidden; width: 0; color: var(--text-1); font-size: 0; line-height: 0; letter-spacing: 0; }
:where(body.customer-console, body:has(> .site-header)) .brand strong::before { content: ""; position: absolute; top: 0; left: 0; width: 144px; height: 24px; border-radius: 0; background: var(--gray-900); clip-path: path("M35.13 4.92H47.81V6.7H35.13ZM35.06 11.12H48.21V12.81H35.06ZM37.06 8.05H46.77V9.71H37.06ZM34.08 4.92H35.98V10.12Q35.98 11.21 35.91 12.52Q35.85 13.84 35.66 15.21Q35.47 16.58 35.1 17.86Q34.73 19.15 34.12 20.21Q33.94 20.05 33.63 19.86Q33.32 19.67 32.99 19.5Q32.66 19.33 32.42 19.24Q33 18.26 33.33 17.1Q33.66 15.94 33.82 14.71Q33.99 13.49 34.03 12.31Q34.08 11.12 34.08 10.12ZM42.09 11.76Q42.81 14.11 44.41 15.78Q46.01 17.46 48.55 18.16Q48.35 18.34 48.12 18.62Q47.89 18.9 47.69 19.2Q47.48 19.5 47.35 19.75Q45.56 19.14 44.24 18.07Q42.92 17 42 15.52Q41.08 14.03 40.49 12.15ZM46.22 12.91 47.83 13.95Q47.25 14.42 46.6 14.89Q45.95 15.37 45.32 15.79Q44.69 16.21 44.14 16.53L42.9 15.62Q43.44 15.27 44.05 14.8Q44.65 14.34 45.23 13.84Q45.81 13.34 46.22 12.91ZM37.44 20.08 37.28 18.47 38.06 17.84 42.28 16.77Q42.25 17.16 42.26 17.66Q42.26 18.15 42.3 18.48Q40.88 18.88 39.99 19.15Q39.1 19.41 38.59 19.58Q38.09 19.75 37.85 19.86Q37.6 19.97 37.44 20.08ZM37.44 20.08Q37.37 19.88 37.19 19.61Q37.01 19.34 36.82 19.08Q36.63 18.82 36.47 18.68Q36.75 18.47 37.02 18.06Q37.3 17.65 37.3 17.01V12.3H39.17V18.08Q39.17 18.08 39 18.22Q38.83 18.36 38.57 18.59Q38.31 18.82 38.05 19.09Q37.79 19.36 37.61 19.62Q37.44 19.88 37.44 20.08Z M56.15 5.73H65.96V7.27H56.15ZM56.88 8.78H65.88V10.22H56.88ZM57.33 13.5H64.28V14.94H57.33ZM55.31 5.73H57.04V10.36Q57.04 11.42 56.97 12.67Q56.9 13.93 56.7 15.23Q56.49 16.53 56.09 17.76Q55.7 18.99 55.06 20Q54.9 19.86 54.62 19.69Q54.35 19.52 54.05 19.36Q53.76 19.2 53.53 19.13Q54.15 18.18 54.51 17.06Q54.86 15.94 55.04 14.77Q55.22 13.59 55.26 12.46Q55.31 11.33 55.31 10.36ZM58.56 7.62H60.17V11.37H62.64V7.62H64.33V12.76H58.56ZM63.71 13.5H64.04L64.35 13.43L65.46 13.92Q64.96 15.24 64.14 16.24Q63.31 17.25 62.23 17.98Q61.16 18.71 59.89 19.21Q58.63 19.72 57.23 20.03Q57.11 19.71 56.86 19.27Q56.6 18.82 56.36 18.56Q57.62 18.33 58.77 17.92Q59.93 17.52 60.9 16.93Q61.87 16.33 62.59 15.53Q63.31 14.74 63.71 13.74ZM59.61 14.39Q60.44 15.98 62.17 17.02Q63.9 18.07 66.29 18.48Q66.1 18.65 65.89 18.92Q65.67 19.19 65.49 19.47Q65.31 19.76 65.18 20Q62.64 19.44 60.85 18.15Q59.06 16.86 58.04 14.85ZM51.02 5.73 52.04 4.37Q52.54 4.57 53.09 4.86Q53.64 5.14 54.14 5.45Q54.64 5.76 54.95 6.04L53.88 7.54Q53.59 7.24 53.11 6.91Q52.63 6.58 52.08 6.27Q51.53 5.95 51.02 5.73ZM50.2 10.24 51.19 8.85Q51.72 9.03 52.3 9.31Q52.88 9.58 53.4 9.89Q53.93 10.19 54.26 10.47L53.2 12.01Q52.9 11.71 52.39 11.39Q51.89 11.07 51.31 10.76Q50.73 10.45 50.2 10.24ZM50.37 18.83Q50.76 18.16 51.21 17.25Q51.65 16.34 52.11 15.31Q52.57 14.29 52.97 13.29L54.45 14.34Q54.1 15.26 53.7 16.22Q53.3 17.18 52.88 18.11Q52.46 19.04 52.04 19.88ZM59.56 4.47 61.26 4.1Q61.53 4.61 61.76 5.22Q61.99 5.84 62.07 6.27L60.28 6.71Q60.21 6.26 60 5.63Q59.79 4.99 59.56 4.47Z"); }
:where(body.customer-console, body:has(> .site-header)) .brand strong::after { content: ""; position: absolute; top: 0; left: 0; width: 144px; height: 24px; background: var(--gray-600); clip-path: path("M78.5 18.81Q77.46 18.81 76.55 18.43Q75.65 18.06 74.96 17.33Q74.28 16.59 73.89 15.53Q73.51 14.47 73.51 13.09Q73.51 11.73 73.9 10.66Q74.3 9.59 75 8.85Q75.69 8.1 76.61 7.71Q77.54 7.32 78.59 7.32Q79.64 7.32 80.45 7.75Q81.26 8.17 81.78 8.72L80.73 9.99Q80.31 9.56 79.79 9.3Q79.28 9.04 78.62 9.04Q77.73 9.04 77.03 9.52Q76.33 10 75.94 10.89Q75.54 11.79 75.54 13.03Q75.54 14.29 75.92 15.2Q76.29 16.11 76.97 16.6Q77.66 17.08 78.58 17.08Q79.32 17.08 79.9 16.77Q80.48 16.45 80.94 15.95L82 17.19Q81.32 17.98 80.46 18.39Q79.59 18.81 78.5 18.81Z M83.54 18.6V6.64H85.51V9.73L85.42 11.33Q85.93 10.83 86.58 10.45Q87.22 10.07 88.07 10.07Q89.41 10.07 90.03 10.94Q90.64 11.8 90.64 13.38V18.6H88.67V13.63Q88.67 12.61 88.37 12.18Q88.06 11.76 87.38 11.76Q86.84 11.76 86.43 12.02Q86.01 12.28 85.51 12.79V18.6Z M96.56 18.81Q95.41 18.81 94.48 18.28Q93.55 17.76 93 16.79Q92.45 15.81 92.45 14.44Q92.45 13.42 92.77 12.62Q93.09 11.81 93.64 11.24Q94.19 10.67 94.87 10.37Q95.56 10.07 96.29 10.07Q97.42 10.07 98.18 10.57Q98.94 11.07 99.34 11.96Q99.73 12.85 99.73 14.02Q99.73 14.31 99.7 14.56Q99.68 14.81 99.64 14.98H94.37Q94.45 15.71 94.78 16.22Q95.11 16.73 95.62 17Q96.14 17.27 96.81 17.27Q97.35 17.27 97.81 17.12Q98.28 16.97 98.74 16.68L99.41 17.9Q98.82 18.3 98.09 18.55Q97.36 18.81 96.56 18.81ZM94.34 13.64H98.04Q98.04 12.69 97.61 12.14Q97.18 11.6 96.32 11.6Q95.85 11.6 95.43 11.83Q95.01 12.06 94.72 12.51Q94.43 12.96 94.34 13.64Z M101.6 18.6V10.27H103.2L103.36 11.4H103.4Q103.96 10.85 104.62 10.46Q105.28 10.07 106.13 10.07Q107.47 10.07 108.09 10.94Q108.7 11.8 108.7 13.38V18.6H106.73V13.63Q106.73 12.61 106.43 12.18Q106.12 11.76 105.44 11.76Q104.9 11.76 104.49 12.02Q104.07 12.28 103.57 12.79V18.6Z M112.78 18.6 109.89 10.27H111.89L113.19 14.59Q113.37 15.2 113.55 15.83Q113.72 16.46 113.9 17.09H113.97Q114.15 16.46 114.32 15.83Q114.5 15.2 114.66 14.59L115.99 10.27H117.89L115.06 18.6Z M122.37 18.81Q121.33 18.81 120.42 18.29Q119.51 17.77 118.96 16.79Q118.4 15.81 118.4 14.44Q118.4 13.05 118.96 12.08Q119.51 11.1 120.42 10.59Q121.33 10.07 122.37 10.07Q123.14 10.07 123.85 10.36Q124.57 10.65 125.12 11.22Q125.67 11.78 126 12.59Q126.32 13.4 126.32 14.44Q126.32 15.81 125.76 16.79Q125.2 17.77 124.3 18.29Q123.4 18.81 122.37 18.81ZM122.37 17.19Q122.98 17.19 123.41 16.85Q123.85 16.51 124.08 15.89Q124.31 15.27 124.31 14.44Q124.31 13.61 124.08 12.99Q123.85 12.37 123.41 12.02Q122.98 11.68 122.37 11.68Q121.76 11.68 121.32 12.02Q120.88 12.37 120.65 12.99Q120.42 13.61 120.42 14.44Q120.42 15.27 120.65 15.89Q120.88 16.51 121.32 16.85Q121.76 17.19 122.37 17.19Z M128.51 22.01Q128.17 22.01 127.91 21.96Q127.65 21.92 127.42 21.84L127.78 20.32Q127.9 20.35 128.06 20.4Q128.22 20.44 128.38 20.44Q129.04 20.44 129.43 20.04Q129.82 19.64 130.03 19.02L130.19 18.49L126.92 10.27H128.91L130.33 14.35Q130.53 14.91 130.71 15.51Q130.88 16.1 131.07 16.7H131.14Q131.29 16.11 131.45 15.52Q131.61 14.92 131.76 14.35L133.01 10.27H134.9L131.89 18.98Q131.56 19.91 131.11 20.59Q130.67 21.27 130.05 21.64Q129.42 22.01 128.51 22.01Z M137.97 18.81Q137.24 18.81 136.69 18.49Q136.14 18.18 135.83 17.63Q135.52 17.08 135.52 16.36Q135.52 15.02 136.68 14.29Q137.85 13.55 140.4 13.27Q140.39 12.83 140.25 12.46Q140.11 12.1 139.79 11.88Q139.46 11.66 138.9 11.66Q138.28 11.66 137.7 11.9Q137.11 12.14 136.55 12.48L135.84 11.16Q136.3 10.87 136.84 10.62Q137.38 10.38 137.99 10.22Q138.6 10.07 139.25 10.07Q140.3 10.07 140.99 10.49Q141.68 10.9 142.02 11.7Q142.36 12.5 142.36 13.67V18.6H140.76L140.61 17.68H140.55Q140 18.16 139.35 18.48Q138.7 18.81 137.97 18.81ZM138.6 17.25Q139.1 17.25 139.53 17.02Q139.95 16.79 140.4 16.36V14.51Q139.28 14.64 138.62 14.88Q137.96 15.13 137.68 15.46Q137.4 15.79 137.4 16.21Q137.4 16.77 137.74 17.01Q138.08 17.25 138.6 17.25Z"); }

/* Public header (design v9): 56px, 52 on phones, white at 86 percent over
   a 12px blur with one hairline, the content 1264px wide (1440 on the API
   reference). Four links 28px apart, the current one in ink over a 2px ink
   bar; then the language control and the one primary action. The markup,
   IDs and words are shared with the generated API reference: until FE9-2
   and FE9-4 drop it, the console button (it opened the sign-in page too)
   stays hidden. Under 768px the phone menu opens a full-width panel of
   48px rows; it is placed absolute because the blur makes the header the
   containing block of fixed children. */
.site-header { height: var(--site-head); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
.site-bar { gap: 40px; height: 100%; max-width: 1264px; margin: 0 auto; padding: 0 32px; }
body.api-docs .site-bar { max-width: 1440px; }
.site-nav { align-self: stretch; flex: 0 1 auto; gap: 28px; }
.site-navlink { position: relative; display: flex; align-items: center; height: 100%; padding: 0; color: var(--text-2); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; }
.site-navlink:hover { color: var(--text-1); opacity: 1; }
.site-navlink[aria-current] { color: var(--text-1); font-weight: 500; }
.site-navlink[aria-current]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gray-900); }
.site-actions { gap: 8px; }
.site-actions .site-console, .site-menu-buttons > .button-primary { display: none; }
.site-actions .site-sign-in, .site-menu-buttons > .site-sign-in { height: 32px; min-height: 0; padding: 0 12px; border-color: transparent; border-radius: var(--r-6); background: var(--violet-600); box-shadow: var(--shadow-primary); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; }
.site-actions .site-sign-in:hover, .site-actions .site-sign-in[aria-current="page"], .site-menu-buttons > .site-sign-in:hover, .site-menu-buttons > .site-sign-in[aria-current="page"] { border-color: transparent; background: var(--violet-700); color: #fff; }
.site-actions .site-sign-in:active, .site-menu-buttons > .site-sign-in:active { background: var(--violet-800); }
.language-control.language-chip, .site-language-link { height: 32px; gap: 6px; padding: 0 12px 0 10px; border-radius: var(--r-6); background: transparent; color: var(--gray-700); font-size: 14px; line-height: 20px; font-weight: 500; }
.language-control.language-chip:hover, .site-language-link:hover { background: var(--wash-1); color: var(--text-1); }
.language-control.language-chip > select { font-size: 14px; line-height: 20px; font-weight: 500; }
.language-chip > .language-notice { border: 0; border-radius: var(--r-8); background: var(--gray-0); box-shadow: var(--e2); color: var(--text-2); font-size: 12px; line-height: 16px; }
.site-menu { position: static; }
.site-menu > summary { width: 32px; height: 32px; border-radius: var(--r-6); background: transparent; color: var(--gray-700); }
.site-menu > summary:hover, .site-menu[open] > summary { background: var(--wash-1); color: var(--text-1); }
.site-menu-panel { top: 100%; right: 0; left: 0; gap: 0; width: auto; height: calc(100vh - var(--site-head)); height: calc(100dvh - var(--site-head)); padding: 8px 16px 24px; overflow-y: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--gray-0); box-shadow: none; }
.site-menu-link { height: 48px; flex: none; padding: 0 4px; border-bottom: 1px solid var(--line-soft); border-radius: 0; color: var(--text-1); font-size: 16px; line-height: 24px; font-weight: 500; }
.site-menu-link:hover, .site-menu-link[aria-current] { background: transparent; color: var(--text-1); }
.site-menu-link[aria-current] { font-weight: 600; }
.site-menu-rule { display: none; }
.site-menu-buttons { margin-top: 24px; }
.site-menu-buttons > .site-sign-in { flex: 1 1 auto; height: 44px; font-size: 16px; line-height: 24px; }
@media (max-width: 1024px) {
  .site-bar { padding: 0 24px; }
}
@media (max-width: 767px) {
  .site-bar { gap: 16px; padding: 0 16px; }
  .language-control.language-chip { width: 32px; padding: 0; }
  .site-actions .site-sign-in.desk-only { display: inline-flex !important; }
  /* The 32px sign-in, menu and language controls answer taps over 44px;
     the sign-in's area starts inside its 1px border. */
  .site-actions > .site-sign-in, .site-menu > summary { position: relative; }
  .site-actions > .site-sign-in::before { content: ""; position: absolute; inset: -7px 0; }
  .site-menu > summary::before { content: ""; position: absolute; inset: -6px; }
  .site-header .language-control.language-chip > select { top: -6px; left: -6px; width: calc(100% + 12px); max-width: none; height: calc(100% + 12px); }
}

/* Public footer (design v9, light): white with a hairline, 64px over and
   32px under, the brand in the wide column then the product and developer
   columns; the bottom row holds the copyright and the language link. */
.site-footer { padding: 64px 0 32px; border-top: 1px solid var(--line); background: var(--gray-0); color: var(--text-2); }
.site-footer-inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.site-footer-top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; margin: 0; }
.site-footer-cols { display: contents; margin: 0; }
.site-footer-col { gap: 8px; min-width: 0; }
.site-footer-title { margin-bottom: 4px; color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; }
.site-footer-link { color: var(--text-2); font-size: 14px; line-height: 20px; }
.site-footer-link:hover { color: var(--text-1); opacity: 1; }
.site-footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding: 24px 0 0; border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 13px; line-height: 20px; }
.site-footer :focus-visible { outline-color: var(--focus); }
.language-control.language-footer, .site-language-link.site-language-footer { height: auto; padding: 0; background: transparent; color: var(--text-3); font-size: 13px; line-height: 20px; font-weight: 400; }
.language-control.language-footer:hover, .site-language-link.site-language-footer:hover { background: transparent; color: var(--text-1); opacity: 1; }
.language-control.language-footer > select { color-scheme: light; font-size: 13px; font-weight: 400; }
.language-control.language-footer option { background-color: var(--gray-0); color: var(--text-1); }
.language-control.language-footer:has(> select:focus-visible) { outline-color: var(--focus); }
.language-footer > .language-notice { color: var(--text-3); }
@media (max-width: 1024px) {
  .site-footer-inner { padding: 0 24px; }
}
@media (max-width: 767px) {
  .site-footer { padding: 48px 0 32px; }
  .site-footer-inner { padding: 0 16px; }
  .site-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .site-footer-top > .brand { grid-column: 1 / -1; }
}

/* The sidebar glyphs of design v9: its 24-unit line icons drawn at 18px with
   a 1.5px round stroke (the arrow of a row that opens a new tab at 14px),
   each the filled outline of that stroke. */
.glyph.glyph-dashboard-18 { width: 18px; height: 18px; clip-path: path("M2.87 1.5L6.88 1.5L6.99 1.52L7.29 1.59L7.59 1.75L7.7 1.83L7.92 2.05L8.08 2.29L8.19 2.55L8.25 2.87L8.25 8.4L8.16 8.79L8 9.09L7.91 9.21L7.7 9.42L7.46 9.58L7.2 9.69L6.88 9.75L2.87 9.75L2.46 9.66L2.12 9.47L1.84 9.21L1.66 8.93L1.55 8.65L1.5 8.4L1.5 2.85L1.52 2.74L1.59 2.46L1.67 2.29L1.83 2.05L2.05 1.83L2.29 1.67L2.46 1.59ZM11.12 1.5L15.13 1.5L15.54 1.59L15.71 1.67L15.95 1.83L16.17 2.05L16.33 2.29L16.44 2.55L16.5 2.87L16.5 5.4L16.41 5.79L16.3 6.01L16.16 6.21L15.95 6.42L15.71 6.58L15.45 6.69L15.13 6.75L11.12 6.75L10.71 6.66L10.54 6.58L10.3 6.42L10.09 6.21L9.91 5.93L9.84 5.79L9.77 5.51L9.75 5.4L9.75 2.85L9.77 2.74L9.84 2.46L9.92 2.29L10.08 2.05L10.3 1.83L10.54 1.67L10.71 1.59ZM3.01 3L3 8.24L6.74 8.25L6.75 3.01ZM11.26 3L11.26 5.25L15 5.24L14.99 3ZM11.12 8.25L15.13 8.25L15.24 8.27L15.54 8.34L15.84 8.5L15.95 8.58L16.17 8.8L16.33 9.04L16.44 9.3L16.5 9.62L16.5 15.15L16.41 15.54L16.25 15.84L16.16 15.96L15.95 16.17L15.71 16.33L15.45 16.44L15.13 16.5L11.12 16.5L10.71 16.41L10.37 16.22L10.09 15.96L9.91 15.68L9.8 15.4L9.75 15.15L9.75 9.6L9.77 9.49L9.84 9.21L9.92 9.04L10.08 8.8L10.3 8.58L10.54 8.42L10.71 8.34ZM11.26 9.75L11.25 14.99L14.99 15L15 9.76ZM2.87 11.25L6.88 11.25L7.29 11.34L7.46 11.42L7.7 11.58L7.92 11.8L8.08 12.04L8.19 12.3L8.25 12.62L8.25 15.15L8.16 15.54L8.05 15.76L7.91 15.96L7.7 16.17L7.46 16.33L7.2 16.44L6.88 16.5L2.87 16.5L2.46 16.41L2.29 16.33L2.05 16.17L1.84 15.96L1.66 15.68L1.59 15.54L1.52 15.26L1.5 15.15L1.5 12.6L1.52 12.49L1.59 12.21L1.67 12.04L1.83 11.8L2.05 11.58L2.29 11.42L2.46 11.34ZM3.01 12.75L3.01 15L6.75 14.99L6.74 12.75Z"); }
.glyph.glyph-sparkles-18 { width: 18px; height: 18px; clip-path: path("M8.88 0.75L9.23 0.77L9.35 0.8L9.55 0.89L9.71 1L9.89 1.18L10.03 1.41L10.19 1.95L11.25 6.13L11.33 6.35L11.48 6.55L11.65 6.67L11.8 6.73L16.41 7.91L16.59 7.97L16.82 8.11L17.06 8.37L17.17 8.57L17.25 8.88L17.23 9.23L17.11 9.55L17.02 9.7L16.82 9.89L16.55 10.05L11.8 11.27L11.62 11.34L11.45 11.48L11.33 11.65L11.25 11.87L11.16 12.29L11.13 12.35L11.02 12.84L10.98 12.9L10.88 13.38L10.84 13.45L10.05 16.55L9.89 16.82L9.7 17.02L9.46 17.16L9.29 17.22L9.12 17.25L8.77 17.23L8.45 17.11L8.3 17.02L8.11 16.82L7.95 16.55L7.58 15.09L7.55 15.02L7.44 14.54L7.41 14.48L7.3 13.99L7.27 13.93L7.16 13.45L7.13 13.38L7.02 12.9L6.98 12.84L6.88 12.35L6.84 12.29L6.75 11.87L6.64 11.6L6.51 11.44L6.38 11.34L6.2 11.27L1.45 10.05L1.18 9.89L0.98 9.7L0.83 9.43L0.75 9.12L0.77 8.77L0.83 8.57L0.91 8.41L0.98 8.3L1.18 8.11L1.41 7.97L1.59 7.91L6.2 6.73L6.35 6.67L6.55 6.52L6.64 6.4L6.75 6.13L7.81 1.95L7.97 1.41L8.11 1.18L8.35 0.95L8.65 0.8ZM14.91 1.5L15.09 1.5L15.27 1.55L15.46 1.66L15.64 1.85L15.7 1.98L15.75 2.15L15.76 3L16.59 3L16.77 3.05L16.96 3.16L17.11 3.3L17.2 3.48L17.25 3.65L17.25 3.85L17.2 4.02L17.11 4.2L16.9 4.39L16.77 4.45L16.59 4.5L15.75 4.51L15.75 5.35L15.7 5.52L15.61 5.7L15.45 5.86L15.27 5.95L15.09 6L14.91 6L14.73 5.95L14.55 5.86L14.36 5.65L14.3 5.52L14.25 5.35L14.24 4.5L13.41 4.5L13.23 4.45L13.05 4.36L12.89 4.2L12.8 4.02L12.75 3.85L12.75 3.65L12.8 3.48L12.89 3.3L13.1 3.11L13.23 3.05L13.41 3L14.25 2.99L14.25 2.15L14.3 1.98L14.39 1.8L14.54 1.66L14.73 1.55ZM8.99 3.41L8.17 6.62L8.03 6.99L7.94 7.16L7.73 7.45L7.45 7.73L7.3 7.84L6.85 8.09L6.26 8.27L3.41 8.98L3.41 9.01L6.66 9.84L6.88 9.92L7.13 10.05L7.46 10.28L7.73 10.55L7.84 10.7L8.09 11.15L8.2 11.49L8.98 14.59L9.01 14.59L9.83 11.38L9.97 11.01L10.09 10.79L10.27 10.55L10.63 10.2L10.87 10.05L11.2 9.89L11.74 9.73L14.59 9.02L14.59 8.99L11.38 8.17L11.01 8.03L10.79 7.91L10.55 7.73L10.27 7.45L10.16 7.3L10.06 7.16L9.91 6.85L9.8 6.51L9.02 3.41Z"); }
.glyph.glyph-list-18 { width: 18px; height: 18px; clip-path: path("M2.16 3.75L2.43 3.77L2.68 3.88L2.89 4.09L3 4.35L3 4.65L2.97 4.76L2.88 4.93L2.74 5.08L2.63 5.16L2.35 5.25L2.16 5.25L2.02 5.22L1.8 5.11L1.61 4.9L1.55 4.77L1.5 4.6L1.52 4.32L1.64 4.05L1.85 3.86L1.98 3.8ZM5.91 3.75L15.84 3.75L16.02 3.8L16.15 3.86L16.36 4.05L16.48 4.32L16.5 4.6L16.45 4.77L16.39 4.9L16.2 5.11L16.02 5.2L15.84 5.25L5.91 5.25L5.73 5.2L5.55 5.11L5.36 4.9L5.3 4.77L5.25 4.6L5.27 4.32L5.39 4.05L5.6 3.86L5.73 3.8ZM2.16 8.25L2.43 8.27L2.68 8.38L2.89 8.59L3 8.85L3 9.15L2.97 9.26L2.88 9.43L2.74 9.58L2.63 9.66L2.35 9.75L2.16 9.75L2.02 9.72L1.8 9.61L1.61 9.4L1.55 9.27L1.5 9.1L1.52 8.82L1.64 8.55L1.85 8.36L1.98 8.3ZM5.91 8.25L15.84 8.25L16.02 8.3L16.15 8.36L16.36 8.55L16.48 8.82L16.5 9.1L16.45 9.27L16.39 9.4L16.2 9.61L16.02 9.7L15.84 9.75L5.91 9.75L5.73 9.7L5.55 9.61L5.36 9.4L5.3 9.27L5.25 9.1L5.27 8.82L5.39 8.55L5.6 8.36L5.73 8.3ZM2.16 12.75L2.43 12.77L2.68 12.88L2.89 13.09L3 13.35L3 13.65L2.97 13.76L2.88 13.93L2.74 14.08L2.63 14.16L2.35 14.25L2.16 14.25L2.02 14.22L1.8 14.11L1.61 13.9L1.55 13.77L1.5 13.6L1.52 13.32L1.64 13.05L1.85 12.86L1.98 12.8ZM5.91 12.75L15.84 12.75L16.02 12.8L16.15 12.86L16.36 13.05L16.48 13.32L16.5 13.6L16.45 13.77L16.39 13.9L16.2 14.11L16.02 14.2L15.84 14.25L5.91 14.25L5.73 14.2L5.55 14.11L5.36 13.9L5.3 13.77L5.25 13.6L5.27 13.32L5.39 13.05L5.6 12.86L5.73 12.8Z"); }
.glyph.glyph-wallet-18 { width: 18px; height: 18px; clip-path: path("M3.62 1.5L13.63 1.5L13.9 1.55L14.21 1.67L14.45 1.83L14.67 2.05L14.86 2.35L14.98 2.74L15 2.87L15 4.49L15.4 4.55L15.68 4.66L15.84 4.75L15.95 4.83L16.17 5.05L16.33 5.29L16.41 5.46L16.5 5.87L16.5 8.45L16.7 8.58L16.92 8.8L17.03 8.96L17.16 9.21L17.25 9.62L17.25 11.4L17.23 11.51L17.16 11.79L17 12.09L16.91 12.21L16.7 12.42L16.5 12.55L16.5 15.15L16.48 15.26L16.41 15.54L16.3 15.76L16.16 15.96L15.95 16.17L15.71 16.33L15.54 16.41L15.13 16.5L3.55 16.5L3.09 16.41L2.71 16.25L2.35 16.02L2.06 15.74L1.86 15.48L1.66 15.09L1.53 14.66L1.5 14.41L1.5 3.6L1.52 3.45L1.59 3.09L1.77 2.68L1.98 2.35L2.26 2.06L2.49 1.88L2.95 1.64L3.34 1.53ZM3.66 3L3.51 3.03L3.3 3.14L3.14 3.3L3.08 3.4L3 3.65L3 3.85L3.03 3.99L3.14 4.2L3.3 4.36L3.4 4.42L3.65 4.5L13.5 4.49L13.49 3ZM3.01 5.88L3 14.35L3.08 14.6L3.14 14.7L3.3 14.86L3.43 14.94L3.65 15L15 14.99L15 12.76L13.3 12.75L12.84 12.66L12.46 12.5L12.23 12.36L11.99 12.17L11.81 11.99L11.61 11.73L11.41 11.34L11.28 10.91L11.25 10.66L11.25 10.35L11.28 10.09L11.34 9.84L11.47 9.52L11.64 9.23L11.83 8.99L12.01 8.81L12.24 8.63L12.7 8.39L13.09 8.28L13.37 8.25L15 8.24L14.99 6L3.55 6L3.34 5.97ZM13.41 9.75L13.26 9.78L13.05 9.89L12.89 10.05L12.83 10.15L12.75 10.4L12.75 10.6L12.83 10.85L12.89 10.95L13.05 11.11L13.15 11.17L13.4 11.25L15.75 11.24L15.74 9.75Z"); }
.glyph.glyph-key-18 { width: 18px; height: 18px; clip-path: path("M15.66 0.75L15.84 0.75L16.02 0.8L16.21 0.91L16.36 1.05L16.48 1.32L16.5 1.6L16.45 1.77L16.34 1.96L15.31 3.01L16.61 4.3L16.75 4.51L16.89 4.85L16.94 5.09L16.94 5.41L16.83 5.84L16.75 5.99L16.61 6.2L14.8 8L14.46 8.2L14.04 8.31L13.71 8.31L13.48 8.27L13.2 8.16L12.91 7.97L11.62 6.69L9.56 8.74L9.88 9.23L10.08 9.63L10.3 10.21L10.39 10.57L10.47 11.02L10.48 11.35L10.5 11.37L10.5 11.88L10.48 11.9L10.47 12.23L10.39 12.68L10.3 13.04L10.09 13.59L9.88 14.02L9.67 14.35L9.39 14.73L9.11 15.04L8.73 15.39L8.35 15.67L7.99 15.89L7.62 16.08L7.23 16.23L6.74 16.38L6.34 16.45L5.85 16.5L5.4 16.5L4.91 16.45L4.32 16.33L3.9 16.19L3.26 15.89L2.95 15.7L2.52 15.39L2.21 15.11L1.86 14.73L1.58 14.35L1.3 13.88L1.16 13.59L1.03 13.27L0.88 12.76L0.8 12.35L0.75 11.88L0.75 11.37L0.8 10.9L0.92 10.32L1.08 9.85L1.28 9.4L1.52 8.99L1.8 8.6L2.14 8.21L2.52 7.86L2.9 7.58L3.23 7.38L3.63 7.17L3.98 7.03L4.43 6.89L5.13 6.77L5.34 6.77L5.35 6.75L6.12 6.77L6.82 6.89L7.27 7.03L7.62 7.17L8.1 7.42L8.51 7.69L15.29 0.91L15.48 0.8ZM14.24 4.06L12.69 5.62L13.87 6.81L15.44 5.26ZM5.41 8.25L4.8 8.34L4.54 8.42L4.23 8.55L3.9 8.72L3.62 8.91L3.35 9.13L3.11 9.37L2.91 9.62L2.72 9.9L2.55 10.23L2.42 10.54L2.28 11.12L2.25 11.41L2.25 11.84L2.28 12.13L2.34 12.45L2.42 12.71L2.55 13.02L2.72 13.35L2.91 13.63L3.11 13.88L3.37 14.14L3.82 14.48L4.23 14.7L4.46 14.8L4.7 14.88L5.13 14.97L5.41 15L5.84 15L6.37 14.92L6.6 14.86L7.02 14.7L7.35 14.53L7.63 14.34L7.88 14.14L8.14 13.88L8.34 13.63L8.53 13.35L8.7 13.02L8.83 12.71L8.97 12.13L9 11.84L9 11.41L8.97 11.12L8.91 10.8L8.7 10.23L8.53 9.9L8.34 9.62L8.14 9.37L7.9 9.13L7.63 8.91L7.35 8.72L7.02 8.55L6.71 8.42L6.45 8.34L6.12 8.28L5.84 8.25Z"); }
.glyph.glyph-webhook-18 { width: 18px; height: 18px; clip-path: path("M8.84 0.75L9.43 0.77L9.8 0.83L10.1 0.91L10.66 1.13L11.21 1.45L11.57 1.75L11.78 1.96L12.02 2.24L12.22 2.54L12.34 2.77L12.39 2.96L12.39 3.13L12.34 3.32L12.23 3.51L12.1 3.64L11.95 3.73L11.71 3.8L11.54 3.8L11.37 3.75L11.2 3.66L11.03 3.49L10.91 3.27L10.72 3.02L10.51 2.81L10.29 2.64L10.12 2.53L9.82 2.39L9.51 2.3L9.2 2.25L8.7 2.27L8.35 2.34L8.1 2.44L7.7 2.67L7.54 2.8L7.25 3.1L7.09 3.32L6.89 3.74L6.78 4.2L6.77 4.66L6.81 4.98L6.91 5.3L7.03 5.57L7.25 5.91L7.47 6.34L7.67 6.9L7.72 7.09L7.78 7.54L7.77 7.99L7.69 8.35L7.61 8.57L7.44 8.91L5.14 13.15L4.95 13.36L4.77 13.45L4.6 13.5L4.4 13.5L4.23 13.45L4.05 13.36L3.89 13.2L3.8 13.02L3.75 12.84L3.75 12.65L3.8 12.48L6.17 8.1L6.25 7.91L6.28 7.76L6.27 7.48L6.17 7.13L5.97 6.7L5.75 6.35L5.58 6.01L5.41 5.54L5.33 5.21L5.27 4.73L5.27 4.27L5.34 3.71L5.5 3.18L5.75 2.65L6.08 2.16L6.48 1.73L6.82 1.45L7.16 1.23L7.7 0.98L8.23 0.83ZM8.9 3.75L9.1 3.75L9.27 3.8L9.45 3.89L9.61 4.05L11.97 8.38L12.16 8.64L12.32 8.75L12.51 8.84L12.74 8.92L13.24 9L13.91 9.02L14.37 9.09L14.87 9.25L15.27 9.44L15.54 9.59L15.82 9.8L16.28 10.23L16.55 10.55L16.83 11.01L16.95 11.27L17.11 11.71L17.2 12.12L17.23 12.35L17.23 12.51L17.25 12.52L17.23 13.16L17.11 13.79L17.02 14.07L16.84 14.46L16.67 14.76L16.44 15.09L16.25 15.3L15.82 15.7L15.46 15.95L15.24 16.08L14.74 16.3L14.3 16.42L13.91 16.48L13.41 16.5L13.23 16.45L13.1 16.39L12.89 16.2L12.77 15.93L12.75 15.65L12.8 15.48L12.86 15.35L13.1 15.11L13.32 15.02L13.91 14.97L14.16 14.91L14.45 14.8L14.73 14.64L14.9 14.52L15.19 14.24L15.36 14.02L15.48 13.82L15.59 13.59L15.72 13.16L15.75 12.91L15.75 12.6L15.72 12.34L15.59 11.91L15.48 11.68L15.27 11.35L14.99 11.06L14.76 10.88L14.41 10.69L14.16 10.59L13.91 10.53L13.63 10.5L13.23 10.5L13.21 10.48L12.88 10.47L12.59 10.42L12.16 10.31L11.8 10.17L11.46 9.98L11.23 9.81L10.92 9.51L10.78 9.32L10.61 9.02L8.3 4.77L8.25 4.6L8.25 4.4L8.3 4.23L8.36 4.1L8.54 3.91L8.63 3.84ZM1.82 10.5L2.12 10.52L2.37 10.64L2.48 10.74L2.58 10.87L2.67 11.12L2.66 11.45L2.38 12.02L2.3 12.29L2.25 12.6L2.25 12.93L2.3 13.24L2.39 13.55L2.53 13.85L2.81 14.24L3.18 14.58L3.59 14.81L4.09 14.97L4.3 15L4.66 15L4.91 14.97L5.37 14.83L5.73 14.64L5.98 14.45L6.28 14.13L6.78 13.32L7.08 12.95L7.38 12.64L7.62 12.45L7.88 12.28L8.21 12.13L8.6 12.02L8.8 11.98L13.59 11.98L13.77 12.03L13.9 12.09L14.11 12.29L14.23 12.55L14.25 12.84L14.2 13.01L14.11 13.18L13.9 13.38L13.62 13.48L8.91 13.48L8.74 13.53L8.59 13.61L8.41 13.73L8.09 14.07L7.94 14.29L7.58 14.9L7.2 15.35L6.84 15.69L6.32 16.03L5.77 16.28L5.48 16.38L5.02 16.47L4.71 16.5L4.27 16.5L3.79 16.44L3.37 16.33L3.02 16.2L2.49 15.92L1.98 15.53L1.64 15.18L1.33 14.76L1.05 14.23L0.91 13.84L0.8 13.37L0.75 12.95L0.75 12.59L0.77 12.57L0.78 12.26L0.89 11.74L1.05 11.3L1.33 10.79L1.55 10.59Z"); }
.glyph.glyph-book-open-18 { width: 18px; height: 18px; clip-path: path("M2.12 1.5L6.23 1.5L6.54 1.53L6.87 1.59L7.55 1.83L8.04 2.09L8.51 2.45L8.78 2.73L8.99 2.98L9.49 2.45L9.8 2.2L10.09 2.02L10.63 1.75L11.07 1.61L11.46 1.53L11.77 1.5L15.88 1.5L16.29 1.59L16.46 1.67L16.7 1.83L16.92 2.05L17.08 2.29L17.19 2.55L17.25 2.87L17.25 12.9L17.16 13.29L17.05 13.51L16.91 13.71L16.7 13.92L16.46 14.08L16.2 14.19L15.88 14.25L11.12 14.25L10.71 14.34L10.54 14.42L10.3 14.58L10.03 14.87L9.92 15.04L9.81 15.3L9.75 15.6L9.75 15.87L9.67 16.1L9.55 16.27L9.43 16.38L9.35 16.42L9.12 16.5L8.88 16.5L8.73 16.45L8.57 16.38L8.45 16.27L8.33 16.1L8.27 15.95L8.23 15.49L8.16 15.21L8.03 14.96L7.92 14.8L7.7 14.58L7.46 14.42L7.15 14.3L6.88 14.25L2.12 14.25L1.71 14.16L1.54 14.08L1.3 13.92L1.09 13.71L0.91 13.43L0.8 13.15L0.75 12.9L0.75 2.85L0.81 2.55L0.92 2.29L1.08 2.05L1.3 1.83L1.54 1.67L1.71 1.59ZM2.26 3L2.25 12.74L6.93 12.75L7.3 12.8L7.63 12.88L7.96 13L8.24 13.14L8.25 5.1L8.22 4.84L8.17 4.65L8.09 4.41L7.98 4.18L7.86 3.98L7.67 3.74L7.49 3.56L7.26 3.38L6.8 3.14L6.41 3.03L6.13 3ZM11.87 3L11.59 3.03L11.2 3.14L10.74 3.38L10.51 3.56L10.23 3.85L10.02 4.18L9.84 4.59L9.78 4.84L9.75 5.1L9.75 13.13L9.77 13.14L10.04 13L10.37 12.88L10.7 12.8L11.07 12.75L15.74 12.75L15.75 3.01Z"); }
.glyph.glyph-arrow-up-right-14 { width: 14px; height: 14px; clip-path: path("M4.02 3.33L10.01 3.33L10.26 3.41L10.4 3.5L10.5 3.6L10.61 3.77L10.67 4.01L10.67 9.96L10.63 10.18L10.56 10.3L10.45 10.45L10.3 10.56L10.13 10.64L9.98 10.67L9.76 10.66L9.62 10.61L9.46 10.52L9.31 10.37L9.19 10.12L9.17 10.05L9.16 5.91L4.54 10.52L4.38 10.61L4.24 10.66L4.02 10.67L3.82 10.63L3.65 10.53L3.53 10.43L3.38 10.18L3.33 9.96L3.36 9.7L3.48 9.46L8.11 4.84L3.95 4.83L3.79 4.78L3.63 4.69L3.44 4.48L3.34 4.24L3.33 4.02L3.38 3.82L3.53 3.57L3.65 3.47L3.82 3.38Z"); }

/* Customer console shell (design v9): a 56px white bar (52 on phones) over
   a 240px sidebar on the page grey; the content in a 1280px column (the
   task list 1600) centred in the rest, 24 over, 32 at the sides and 64
   under. The bar holds the logo (240 wide, 20 in), then the balance, the
   language control and the account menu. The balance chip drops the last
   four decimals of a balance but shows an amount owed in full, so it never
   shows less than is owed. The sidebar has two groups: the first without a
   visible title, then the developer group; the current row (or the row of
   the current page's section) is white with a hairline and e1 in ink, and
   the reference row ends with the arrow of a new tab. From 768 to 1279px
   the sidebar is a 64px rail of icons (each link keeps its title as a
   tooltip) and the logo is the mark only; under 768px the sidebar is a
   strip of rows under the bar, and the language moves from the bar into
   the account menu. */
.customer-console { --topbar-height: 56px; --frame-top: 56px; --sidebar-width: 240px; }
.customer-console:has(> .customer-frame:not([hidden])) { background: var(--gray-50); }
.customer-frame .shell-topbar { right: 0; left: 0; z-index: 25; gap: 16px; height: 56px; padding: 0 16px 0 0; border-bottom: 1px solid var(--line); background: var(--gray-0); }
.customer-frame .brand { width: 144px; margin: 0 76px 0 20px; }
.customer-frame .environment-badge { flex: none; }
.customer-frame .topbar-actions { flex: none; gap: 8px; margin-left: auto; }
.balance-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-6); background: var(--gray-0); color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.balance-chip:hover { border-color: var(--gray-300); background: var(--gray-25); color: var(--text-1); text-decoration: none; }
.balance-chip .balance-label { color: var(--text-3); font-weight: 400; }
.balance-chip .money { overflow: visible; font-size: 13px; font-weight: 500; }
.balance-chip .money-tail { display: none; }
.balance-chip.is-low { border-color: var(--warning-border); background: var(--warning-tint); color: var(--warning-fg); }
.balance-chip.is-low .balance-label { color: var(--warning-fg); }
.balance-chip.is-low .balance-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--warning-dot); vertical-align: middle; }
.balance-chip.is-due { border-color: var(--danger-border); background: var(--danger-tint); color: var(--danger-fg); }
.balance-chip.is-due .balance-label, .balance-chip.is-due .money { color: var(--danger-fg); }
.balance-chip.is-due .money-tail { display: inline; color: var(--danger-fg); }
.customer-frame .user-menu { position: relative; min-width: 0; max-width: 240px; }
.customer-frame .user-menu > summary { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 32px; min-height: 0; padding: 0 6px 0 4px; border: 0; border-radius: var(--r-6); background: transparent; color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; }
.customer-frame .user-menu > summary:hover, .customer-frame .user-menu[open] > summary { background: var(--wash-1); }
.customer-frame .user-face { gap: 8px; min-width: 0; }
.customer-frame .user-face > .glyph { color: var(--text-3); }
.customer-frame .avatar { width: 24px; height: 24px; }
.customer-frame .account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-frame .user-menu > .menu-panel { top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: 0; width: 220px; min-width: 0; padding: 6px; border: 0; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e2); }
.customer-frame .user-menu > .menu-panel > :is(a, button) { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; min-height: 0; padding: 0 10px; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-1); font-size: 14px; line-height: 20px; font-weight: 400; text-align: left; text-decoration: none; }
.customer-frame .user-menu > .menu-panel > :is(a, button):hover { background: var(--gray-50); color: var(--text-1); text-decoration: none; }
.customer-frame .user-menu > .menu-panel > a[aria-current="page"] { font-weight: 500; }
.customer-frame .user-menu > .menu-panel > .menu-person { overflow: hidden; margin: 0; padding: 6px 10px; color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.customer-frame .user-menu > .menu-panel > .menu-rule { height: 1px; margin: 6px -6px; background: var(--line-soft); }
.customer-frame .shell-sidebar { position: fixed; top: 56px; right: auto; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; gap: 16px; width: 240px; height: auto; padding: 12px; overflow-x: hidden; overflow-y: auto; border: 0; background: var(--gray-50); scrollbar-width: thin; }
.customer-frame .nav-group { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.customer-frame .nav-group > h2 { margin: 0; padding: 0 12px 4px; color: var(--text-3); font-size: 12px; line-height: 16px; font-weight: 500; }
.customer-frame .nav-group:first-child > h2 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.customer-frame .nav-link { position: relative; display: flex; align-items: center; gap: 12px; height: 32px; min-height: 0; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-8); color: var(--gray-700); font-size: 14px; line-height: 20px; font-weight: 400; white-space: nowrap; text-decoration: none; }
.customer-frame .nav-link:hover { background: var(--wash-1); color: var(--text-1); text-decoration: none; }
.customer-frame .nav-link[aria-current], .customer-frame .nav-link[aria-current]:hover { border-color: var(--line); background: var(--gray-0); box-shadow: var(--e1); color: var(--text-1); font-weight: 500; }
.customer-frame .nav-icon { color: var(--gray-600); }
.customer-frame .nav-link:hover .nav-icon, .customer-frame .nav-link[aria-current] .nav-icon { color: var(--text-1); }
.customer-frame .nav-ext { margin-left: auto; color: var(--gray-400); }
.customer-frame .user-menu > .menu-panel > .language-control { display: none; }
.customer-console main { --page-max: 1280px; max-width: calc(var(--page-max) + 64px); min-width: 0; margin: 56px 0 0 calc(240px + max(0px, (100% - 304px - var(--page-max)) / 2)); padding: 24px 32px 64px; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 1279px) {
  .customer-frame .brand { width: 24px; margin: 0 20px; }
  .customer-frame .brand strong { display: none; }
  .customer-frame .shell-sidebar { width: 64px; }
  .customer-frame .nav-group > h2 { display: none; }
  .customer-frame .nav-link { justify-content: center; width: 40px; padding: 0; }
  .customer-frame .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .customer-frame .nav-ext { display: none; }
  .customer-console main { margin-left: calc(64px + max(0px, (100% - 128px - var(--page-max)) / 2)); }
}
@media (max-width: 767px) {
  .customer-console { --topbar-height: 52px; --frame-top: 52px; }
  .customer-frame .shell-topbar { gap: 8px; height: 52px; padding-right: 8px; }
  .customer-frame .brand { width: 144px; margin: 0 0 0 16px; }
  .customer-frame .brand strong { display: block; }
  .customer-frame .account-name { display: none; }
  .customer-frame .topbar-actions > .language-control { display: none; }
  .balance-chip::before { content: ""; position: absolute; inset: -7px 0; }
  .customer-frame .user-menu > summary::before { content: ""; position: absolute; inset: -6px 0; }
  .customer-frame .user-menu > .menu-panel > :is(a, button) { height: 40px; }
  .customer-frame .user-menu > .menu-panel > .language-control.language-chip { display: flex; justify-content: flex-start; width: 100%; height: 40px; padding: 0 10px; border-radius: var(--r-6); color: var(--text-1); }
  .customer-frame .user-menu > .menu-panel > .language-control.language-chip:hover { background: var(--gray-50); }
  .customer-frame .user-menu > .menu-panel > .language-control.language-chip > select { padding: 0 10px 0 38px; opacity: 1; color: var(--text-1); font-size: 14px; line-height: 20px; font-weight: 400; text-align: left; cursor: pointer; }
  .customer-frame .shell-sidebar { position: absolute; top: 52px; right: 0; bottom: auto; left: 0; flex-direction: row; gap: 2px; width: auto; height: 48px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); background: var(--gray-0); scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
  .customer-frame .nav-group { flex: none; flex-direction: row; align-items: center; gap: 2px; }
  .customer-frame .nav-link { justify-content: flex-start; gap: 8px; width: auto; padding: 0 12px; scroll-snap-align: start; }
  .customer-frame .nav-link::before { content: ""; position: absolute; inset: -7px 0; }
  .customer-frame .nav-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .customer-frame .nav-ext { display: none; }
  .customer-frame .nav-link[aria-current], .customer-frame .nav-link[aria-current]:hover { border-color: transparent; background: var(--gray-100); box-shadow: none; }
  .customer-console main { max-width: none; margin: 100px 0 0; padding: 16px 16px 48px; }
}
@media (max-width: 479px) {
  .customer-frame .brand { width: 24px; }
  .customer-frame .brand strong { display: none; }
}

/* FE9-5a (Issue 2273, design v9, S-409): the staff console in the v9 look.
   Staff pages only: every rule below names the staff body, which the shell
   marks admin-console and the sign-in page admin-auth, so customer and
   public pages keep the FE9-1 rules above unchanged. Layer A: on staff
   pages the older token names take v9 values, as FE9-1 layer B does on
   customer pages, and the staff tokens of SHELL 6.1 are set. Layer B: the
   older components of the staff pages in the v9 look; each rule keeps the
   weight of the FE8 or base rule it replaces, so a page rule of equal
   weight, loaded later, still wins. A staff page is one white v9 card on
   the page grey (the overview and the task list keep their stack of cards),
   and inside a card sections are divided, never boxed again. Layer C: the
   staff shell of SHELL 6.2, an ink bar of 56px (52 on phones) with the
   logo, the environment badge, the task search and the operator menu, over
   the grouped sidebar of 240px (a 64px rail from 768 to 1279px, a drawer
   under 768px), and the page tabs of a section of several pages. FE9-5b
   rebuilds the task, team, channel and route table pages on the v9
   classes. */

/* Layer A: tokens. */
body.admin-console, body.admin-auth {
  --accent: var(--violet-600); --indigo: var(--violet-600); --accent-hover: var(--violet-700); --indigo-hover: var(--violet-700);
  --accent-pressed: var(--violet-800); --accent-ink: var(--violet-700);
  --accent-soft: var(--violet-50); --indigo-soft: var(--violet-50); --accent-line: var(--violet-200); --focus-ring: var(--ring-input);
  --accent-tint-hover: var(--violet-100); --accent-faint: var(--violet-25);
  --surface: var(--gray-0); --field: var(--gray-0); --surface-hover: var(--gray-50); --canvas: var(--gray-50); --inset: var(--gray-25);
  --line-strong: var(--gray-200); --line-hover: var(--gray-300);
  --hover-wash: var(--wash-1); --tint: var(--wash-1); --side-hover: var(--wash-1); --press-wash: var(--wash-2); --tint-hover: var(--wash-2);
  --backdrop: rgba(16, 22, 31, .48);
  --secondary: var(--gray-600); --muted: var(--gray-500); --faint: var(--gray-500); --muted-ink: var(--gray-600);
  --neutral: var(--gray-600); --neutral-soft: var(--gray-100); --muted-soft: var(--gray-100); --on-ink: var(--gray-0);
  --success: var(--success-fg); --success-soft: var(--success-tint); --success-line: var(--success-border);
  --warning: var(--warning-fg); --warning-soft: var(--warning-tint); --warning-line: var(--warning-border); --warning-icon: var(--warning-dot);
  --danger: var(--danger-fg); --danger-soft: var(--danger-tint); --danger-line: var(--danger-border);
  --info: var(--info-fg); --info-soft: var(--info-tint); --info-line: var(--info-border);
  --status-ok-ink: var(--success-fg); --status-ok-fill: var(--success-tint);
  --status-run-ink: var(--info-fg); --status-run-fill: var(--info-tint);
  --status-idle-ink: var(--neutral-fg); --status-idle-fill: var(--neutral-tint);
  --status-fail-ink: var(--danger-fg); --status-fail-fill: var(--danger-tint);
  --status-warn-ink: var(--warning-fg); --status-warn-fill: var(--warning-tint);
  --notice-warn-fill: var(--warning-tint); --notice-warn-line: var(--warning-border);
  --radius-small: var(--r-4); --radius-control: var(--r-6); --radius-card: var(--r-12); --radius-overlay: var(--r-12);
  --shadow-raised: var(--e1); --shadow-soft: var(--e1); --shadow-popover: var(--e2); --shadow-menu: var(--e2); --shadow-overlay: var(--e3);
  --font: var(--font-sans); --mono: var(--font-mono); --weight-bold: 600;
  --line-title: 24px; --line-section: 24px; --line-table: 20px; --text-number: 24px; --line-number: 32px;
  --code-bg: var(--code-dark-bg); --code-head: var(--code-dark-head); --code-ink: var(--code-dark-text); --code-string: var(--code-dark-str);
  --code-key: var(--code-dark-key); --code-muted: var(--code-dark-com); --code-line: rgba(255, 255, 255, .06);
  --topbar-height: 56px; --frame-top: 56px; --sidebar-width: 240px; --row-height: 40px; --drawer-width: 640px; --page-max: 1280px;
  --admin-bar: var(--ink-950); --admin-line: rgba(255, 255, 255, .14); --admin-text: #ffffff; --admin-text-2: rgba(255, 255, 255, .76);
  --admin-text-3: rgba(255, 255, 255, .6); --admin-icon: #c9d0da; --admin-wash-1: rgba(255, 255, 255, .08); --admin-wash-2: rgba(255, 255, 255, .14);
  --admin-field: rgba(255, 255, 255, .06); --admin-field-line: rgba(255, 255, 255, .16); --admin-focus: var(--violet-400);
}
body.admin-console { background: var(--gray-50); }
@media (max-width: 767px) {
  body.admin-console, body.admin-auth { --topbar-height: 52px; --frame-top: 52px; }
}

/* Layer B: older components on staff pages. */
:where(body.admin-console, body.admin-auth) a:hover { text-decoration: none; }
:where(body.admin-console, body.admin-auth) :is(p, li, dd) a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(body.admin-console, body.admin-auth) :is(p, li, dd) a:hover { text-decoration: underline; }
:where(body.admin-console, body.admin-auth) :focus-visible { outline-color: var(--focus); }
:where(body.admin-console, body.admin-auth) ::selection { background: var(--violet-100); color: var(--text-1); }
:where(body.admin-console) pre { border-radius: var(--r-8); background: var(--code-light-bg); }

/* The page: one white card on the page grey, 24 inside (16 on phones),
   with the title as the v9 page title and the intro in the secondary text;
   the overview and the task list are stacks of cards. Inside the card a
   section or an older card is a divided block, not a second box. */
body.admin-console main:not(.admin-stack) { padding: 24px; background: var(--gray-0); border: 1px solid var(--line); border-radius: var(--r-12); box-shadow: var(--e1); }
body.admin-console :is(main.admin-panel, main.admin-stack > section, .admin-panel) { border-radius: var(--r-12); box-shadow: var(--e1); }
:where(body.admin-console) main > h1 { margin: 0; color: var(--text-1); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
:where(body.admin-console) main > h1 ~ p[data-i18n]:not([id]):not([role]) { color: var(--text-2); font-size: 13px; line-height: 20px; }
:where(body.admin-console) main > h1 + p[data-i18n]:not([id]):not([role]) { margin-top: 4px; font-size: 14px; }
:where(body.admin-console) main > h1 ~ p[data-i18n]:not([id]):not([role]):not(:has(~ p[data-i18n]:not([id]):not([role]))) { margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; }
:where(body.admin-console main) .page-header { margin: 0 0 20px; padding: 0; border-bottom: 0; }
:where(body.admin-console main) .page-header h1 { color: var(--text-1); font-size: 20px; line-height: 28px; font-weight: 600; }
:where(body.admin-console main) .page-header p { color: var(--text-2); font-size: 14px; line-height: 20px; }
:where(body.admin-console main) .page-header .page-meta, :where(body.admin-console) .page-meta { color: var(--text-3); font-size: 13px; line-height: 20px; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header { border-bottom-color: var(--line-soft); }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header h1, .admin-console :where(.admin-panel, main.admin-stack > section) > .page-header h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.admin-console :where(.admin-panel, main.admin-stack > section) > .page-header p { color: var(--text-2); font-size: 13px; line-height: 20px; }
:where(body.admin-console) main:where(:not(.admin-stack)) > section, :where(body.admin-console main) .card { margin: 24px 0 0; padding: 24px 0 0; background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; }
:where(body.admin-console main) section:where(:not(.shell-sidebar *)) > h2 { margin: 0 0 12px; color: var(--text-1); font-size: 16px; line-height: 24px; font-weight: 600; }
:where(body.admin-console) main:where(:not(.admin-stack)) > section > p:where([data-i18n]:not([id], [role])) { color: var(--text-2); font-size: 13px; line-height: 20px; }
:where(body.admin-console) .admin-module { border-color: var(--line-soft); border-radius: var(--r-8); }
:where(body.admin-console) .module-header h2, :where(body.admin-console) .module-header h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
:where(body.admin-console) .module-header p, :where(body.admin-console) .module-status { color: var(--text-2); font-size: 13px; line-height: 20px; }
:where(body.admin-console) .more-link { gap: 4px; padding-top: 0; color: var(--violet-600); font-size: 13px; line-height: 20px; font-weight: 500; }
:where(body.admin-console) .more-link:hover { color: var(--violet-700); opacity: 1; }
:where(body.admin-console main) fieldset { border-color: var(--line-soft); border-radius: var(--r-8); background: var(--gray-25); }

/* Buttons that are not v9 buttons: the outline is the white v9 secondary
   with the control shadow, and so is the older solid ink (v9 has no ink
   button); the purple fill carries its own shadow, and a disabled button
   greys out; 32px high at radius 6. */
:where(body.admin-console, body.admin-auth) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid),
:where(body.admin-console, body.admin-auth) button:not([class], [role], [type="submit"]) { background: var(--gray-0); box-shadow: var(--shadow-control); }
:where(body.admin-console, body.admin-auth) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid, [aria-disabled="true"]):hover,
:where(body.admin-console, body.admin-auth) button:not([class], [role], [type="submit"], :disabled):hover { border-color: var(--gray-300); background: var(--gray-25); }
:where(body.admin-console, body.admin-auth) :where(.button, .button-secondary):not(.btn, .button-primary, .button-accent, .button-dark, .button-ghost, .button-danger, .button-danger-solid, [aria-disabled="true"]):active,
:where(body.admin-console, body.admin-auth) button:not([class], [role], [type="submit"], :disabled):active { background: var(--gray-100); }
:where(body.admin-console, body.admin-auth) :where(button[type="submit"], .button-primary, .button-accent):not(.btn, .button-ghost, .button-danger, .button-danger-solid, .button-dark, .button-secondary, :disabled, [aria-disabled="true"]) { box-shadow: var(--shadow-primary); }
:where(body.admin-console) :is(button, .button).button-dark:not(.btn) { border-color: var(--gray-200); background: var(--gray-0); box-shadow: var(--shadow-control); color: var(--text-1); }
:where(body.admin-console) :is(button, .button).button-dark:not(.btn, :disabled, [aria-disabled="true"]):hover { border-color: var(--gray-300); background: var(--gray-25); color: var(--text-1); }
:where(body.admin-console, body.admin-auth) :is(button, .button).button-danger-solid:not(.btn) { border-color: var(--danger-solid); background: var(--danger-solid); box-shadow: var(--shadow-danger); }
:where(body.admin-console, body.admin-auth) :is(button, .button).button-danger-solid:not(.btn):hover { border-color: var(--danger-hover); background: var(--danger-hover); opacity: 1; }
:where(body.admin-console, body.admin-auth) :is(button:disabled, .button[aria-disabled="true"]):not(.btn),
:where(body.admin-console, body.admin-auth) :is(button:disabled, .button[aria-disabled="true"]):not(.btn):hover { border-color: var(--gray-150); background-color: var(--gray-25); box-shadow: none; color: var(--gray-400); }
:where(body.admin-console, body.admin-auth) :is(button[type="submit"], .button-primary, .button-accent, .button-dark, .button-danger-solid):is(:disabled, [aria-disabled="true"]):not(.btn),
:where(body.admin-console, body.admin-auth) :is(button[type="submit"], .button-primary, .button-accent, .button-dark, .button-danger-solid):is(:disabled, [aria-disabled="true"]):not(.btn):hover { border-color: transparent; background-color: var(--gray-100); color: var(--gray-400); }
:where(body.admin-console, body.admin-auth) :is(.button-ghost, .icon-button, [role="tab"]):is(:disabled, [aria-disabled="true"]):not(.btn),
:where(body.admin-console, body.admin-auth) :is(.button-ghost, .icon-button, [role="tab"]):is(:disabled, [aria-disabled="true"]):not(.btn):hover { border-color: transparent; background-color: transparent; color: var(--gray-400); }

/* Fields: 32px at radius 6 on the gray-200 line, 14px text, the violet
   focus ring; labels 13px in ink. */
:where(body.admin-console, body.admin-auth) :is(input, select, textarea):disabled { border-color: var(--gray-150); background-color: var(--gray-25); color: var(--gray-400); }
:where(body.admin-console) main :where(input:not([type="checkbox"], [type="radio"]), select, textarea):where(:not(.shell-topbar *, .shell-sidebar *)) { font-size: 14px; }
:where(body.admin-console main) label:where(:not(:has(> input, > select, > textarea), :has(+ input[type="checkbox"]), .shell-topbar *, .shell-sidebar *)) { color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch { width: 32px; height: 18px; min-height: 18px; background-color: var(--gray-400); box-shadow: none; }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch::before { width: 14px; height: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 22, 31, .24); }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch:checked { background-color: var(--violet-600); box-shadow: none; }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch:checked::before { background: #fff; transform: translateX(14px); }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch:disabled { background-color: var(--gray-200); opacity: 1; }
:where(body.admin-console, body.admin-auth) input[type="checkbox"].switch:checked:disabled { background-color: var(--violet-200); }

/* Tables: a head without a fill (12px, 500, gray-500) over 40px rows on
   soft dividers; inside a card a table is not boxed again. */
body.admin-console th, body.admin-console td { height: 40px; }
body.admin-console th { height: 36px; padding: 0 12px; }
body.admin-console td { padding: 8px 12px; border-bottom-color: var(--line-soft); font-size: 13px; line-height: 20px; }
body.admin-console th:where(thead th) { background: transparent; color: var(--text-3); font-size: 12px; line-height: 16px; font-weight: 500; }
body.admin-console :where(tbody tr:hover) > td { background: var(--gray-50); }
.admin-console :where(.admin-panel, main.admin-stack > section) th { padding: 0 12px; background: transparent; color: var(--text-3); font-size: 12px; line-height: 16px; }
.admin-console :where(.admin-panel, main.admin-stack > section) td { padding: 8px 12px; font-size: 13px; line-height: 20px; }
:where(body.admin-console main:not(.admin-stack)) :is(.table-scroll, .routing-table-scroll):has(> table:not([hidden])), :where(body.admin-console main:not(.admin-stack)) section > table { border: 0; border-radius: 0; }
:where(body.admin-console) .table-box { border-color: var(--line-soft); border-radius: var(--r-8); }

/* Badges: 22px at radius 6, 12px 500; processing and the hold are the
   violet info badge with its hairline ring. */
:where(body.admin-console main) span.badge { min-height: 22px; padding: 3px 8px; border-radius: var(--r-6); font-weight: 500; line-height: 16px; }
.admin-console :where(.admin-panel, main.admin-stack > section) span.badge { min-height: 22px; padding: 3px 8px; border-radius: var(--r-6); font-weight: 500; line-height: 16px; }
:where(body.admin-console main) :is(.badge-info, .badge-reserved, .badge-processing) { box-shadow: inset 0 0 0 1px var(--violet-100); }
:where(body.admin-console main) p.badge-info { box-shadow: none; }
:where(body.admin-console) .error-code { padding: 0; border-radius: 0; background: none; color: var(--text-2); font: 400 12px/16px var(--font-mono); }
:where(body.admin-console) .mono-tag { padding: 0 6px; border: 0; border-radius: var(--r-4); background: var(--gray-100); color: var(--text-2); font: 400 12px/20px var(--font-mono); }

/* Notices are the v9 banners: radius 8, the tint, the border and the text
   of their kind; a plain notice is the neutral gray-25 one. */
:where(body.admin-console main) .notice { border-radius: var(--r-8); font-size: 14px; line-height: 22px; }
:where(body.admin-console main) .notice:where(:not(.notice-info, .notice-warning, .notice-danger, .notice-success)) { border-color: var(--line); background: var(--gray-25); color: var(--text-2); }
:where(body.admin-console main) .notice-warning { border-color: var(--warning-border); background: var(--warning-tint); color: var(--warning-fg); }
:where(body.admin-console main) .notice-info { border-color: var(--info-border); background: var(--info-tint); color: var(--info-fg); }
:where(body.admin-console main) .notice-info::before { background: var(--info-dot); }
:where(body.admin-console main) .notice-danger { border-color: var(--danger-border); background: var(--danger-tint); color: var(--danger-fg); }
:where(body.admin-console main) .notice-success { border-color: var(--success-border); background: var(--success-tint); color: var(--success-fg); }

/* Location tabs in ink (500, a 2px ink bar), the segmented control on the
   gray-100 track with the white raised choice. */
:where(body.admin-console) :is([role="tab"], .tabs a) { color: var(--text-2); font-weight: 500; }
:where(body.admin-console) :is([role="tab"], .tabs a):hover { color: var(--text-1); }
:where(body.admin-console) :is([role="tab"][aria-selected="true"], .tabs [aria-current="page"]) { border-bottom-color: var(--gray-900); color: var(--text-1); font-weight: 500; }
:where(body.admin-console) .segmented { gap: 2px; padding: 2px; border: 0; border-radius: var(--r-8); background: var(--gray-100); }
:where(body.admin-console) .segmented > button, :where(body.admin-console) .segmented > a { min-height: 28px; padding: 0 12px; border-radius: var(--r-6); background: transparent; color: var(--text-2); font-size: 13px; }
:where(body.admin-console) .segmented > button:hover, :where(body.admin-console) .segmented > a:hover { background: transparent; color: var(--text-1); }
:where(body.admin-console) .segmented > [aria-pressed="true"], :where(body.admin-console) .segmented > [aria-current="page"] { background: var(--gray-0); box-shadow: 0 0 0 1px var(--line-soft), var(--e1); color: var(--text-1); }

/* Overlays: dialogs float at radius 12 with e3 and no border; a drawer is
   the v9 sheet, 8px off the edges. Code blocks take the dark v9 tones. */
:where(body.admin-console) dialog { border: 0; }
:where(body.admin-console) .drawer { inset: 8px 8px 8px auto; width: min(var(--drawer-width), calc(100% - 16px)); border: 0; border-radius: var(--r-12); box-shadow: var(--e3); }
:where(body.admin-console) .drawer-header { border-bottom-color: var(--line-soft); }
:where(body.admin-console) .drawer-footer { border-top-color: var(--line-soft); }
:where(body.admin-console) .confirm-block { border-color: var(--line-soft); border-radius: var(--r-8); background: var(--gray-25); }
:where(body.admin-console) .code-block { border-color: var(--code-dark-bg); border-radius: var(--r-8); }
:where(body.admin-console) .code-block [role="tab"][aria-selected="true"] { border-bottom-color: var(--violet-400); }
@media (max-width: 767px) {
  :where(body.admin-console) .drawer { inset: 0; width: 100%; border-radius: 0; }
}

/* Layer C: the staff shell. The bar and the sidebar are fixed children of
   main (main stays unpositioned and untransformed); main is placed under
   the bar and beside the sidebar, its content at most 1280px (the task
   list 1600) centred in the rest, 24 over, 32 at the sides and 64 under. */
body.admin-console main { min-width: 0; max-width: var(--page-max); margin: 80px 32px 64px calc(272px + max(0px, (100% - 304px - var(--page-max)) / 2)); }
body.admin-console main.tlist-page { --page-max: 1600px; }
body.admin-console.environment-uat::before, body.admin-console.environment-production::before { content: none; }
body.admin-console .shell-topbar { position: fixed; inset: 0 0 auto 0; z-index: 25; display: flex; align-items: center; gap: 16px; height: 56px; margin: 0; padding: 0 16px 0 0; border: 0; background: var(--admin-bar); color: var(--admin-text); }
body.admin-console .shell-topbar :focus-visible { outline-color: var(--admin-focus); }
body.admin-console .shell-topbar > p[role="alert"]:not(:empty) { top: 56px; padding: 8px 32px; background: var(--danger-tint); color: var(--danger-fg); border-bottom-color: var(--danger-border); }

/* The identity block, 240 wide like the sidebar: on phones the menu button,
   then the logo (the inverted mark and the Chinese wordmark in white, which
   stays the link's text), the console name after a hairline, and the environment badge. */
:where(body.admin-console, body.admin-auth) .admin-id { display: flex; flex: none; align-items: center; gap: 12px; width: auto; min-width: 240px; height: 100%; padding-left: 20px; }
:where(body.admin-console, body.admin-auth) .admin-brand { display: flex; flex: none; align-items: center; gap: 8px; height: 32px; margin: 0; border-radius: var(--r-6); color: var(--admin-text); text-decoration: none; }
:where(body.admin-console, body.admin-auth) .admin-brand:hover { color: var(--admin-text); text-decoration: none; }
:where(body.admin-console, body.admin-auth) .admin-mark { position: relative; display: block; flex: none; width: 24px; height: 24px; border-radius: 7px; background: radial-gradient(circle at 17.2px 6.9px, var(--violet-500) 1.9px, transparent 2.7px), #ffffff; }
:where(body.admin-console, body.admin-auth) .admin-mark::after { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: var(--ink-950); clip-path: path("M5.75 18.55L6.67 18.51L7.59 18.39L8.5 18.18L9.39 17.9L10.27 17.54L11.13 17.1L11.96 16.58L12.76 15.98L13.52 15.31L14.23 14.56L14.9 13.73L15.52 12.83L16.07 11.86L16.57 10.81A1.05 1.05 0 0 0 14.63 9.99L14.21 10.89L13.74 11.72L13.22 12.48L12.66 13.17L12.06 13.8L11.43 14.35L10.77 14.85L10.09 15.27L9.39 15.63L8.68 15.93L7.95 16.16L7.22 16.32L6.48 16.42L5.75 16.45A1.05 1.05 0 0 0 5.75 18.55Z"); }
:where(body.admin-console, body.admin-auth) .admin-word { position: relative; display: block; flex: none; width: 35px; height: 24px; }
:where(body.admin-console, body.admin-auth) .admin-word::before { content: ""; position: absolute; top: 0; left: -32px; width: 144px; height: 24px; background: currentColor; clip-path: path("M35.13 4.92H47.81V6.7H35.13ZM35.06 11.12H48.21V12.81H35.06ZM37.06 8.05H46.77V9.71H37.06ZM34.08 4.92H35.98V10.12Q35.98 11.21 35.91 12.52Q35.85 13.84 35.66 15.21Q35.47 16.58 35.1 17.86Q34.73 19.15 34.12 20.21Q33.94 20.05 33.63 19.86Q33.32 19.67 32.99 19.5Q32.66 19.33 32.42 19.24Q33 18.26 33.33 17.1Q33.66 15.94 33.82 14.71Q33.99 13.49 34.03 12.31Q34.08 11.12 34.08 10.12ZM42.09 11.76Q42.81 14.11 44.41 15.78Q46.01 17.46 48.55 18.16Q48.35 18.34 48.12 18.62Q47.89 18.9 47.69 19.2Q47.48 19.5 47.35 19.75Q45.56 19.14 44.24 18.07Q42.92 17 42 15.52Q41.08 14.03 40.49 12.15ZM46.22 12.91 47.83 13.95Q47.25 14.42 46.6 14.89Q45.95 15.37 45.32 15.79Q44.69 16.21 44.14 16.53L42.9 15.62Q43.44 15.27 44.05 14.8Q44.65 14.34 45.23 13.84Q45.81 13.34 46.22 12.91ZM37.44 20.08 37.28 18.47 38.06 17.84 42.28 16.77Q42.25 17.16 42.26 17.66Q42.26 18.15 42.3 18.48Q40.88 18.88 39.99 19.15Q39.1 19.41 38.59 19.58Q38.09 19.75 37.85 19.86Q37.6 19.97 37.44 20.08ZM37.44 20.08Q37.37 19.88 37.19 19.61Q37.01 19.34 36.82 19.08Q36.63 18.82 36.47 18.68Q36.75 18.47 37.02 18.06Q37.3 17.65 37.3 17.01V12.3H39.17V18.08Q39.17 18.08 39 18.22Q38.83 18.36 38.57 18.59Q38.31 18.82 38.05 19.09Q37.79 19.36 37.61 19.62Q37.44 19.88 37.44 20.08Z M56.15 5.73H65.96V7.27H56.15ZM56.88 8.78H65.88V10.22H56.88ZM57.33 13.5H64.28V14.94H57.33ZM55.31 5.73H57.04V10.36Q57.04 11.42 56.97 12.67Q56.9 13.93 56.7 15.23Q56.49 16.53 56.09 17.76Q55.7 18.99 55.06 20Q54.9 19.86 54.62 19.69Q54.35 19.52 54.05 19.36Q53.76 19.2 53.53 19.13Q54.15 18.18 54.51 17.06Q54.86 15.94 55.04 14.77Q55.22 13.59 55.26 12.46Q55.31 11.33 55.31 10.36ZM58.56 7.62H60.17V11.37H62.64V7.62H64.33V12.76H58.56ZM63.71 13.5H64.04L64.35 13.43L65.46 13.92Q64.96 15.24 64.14 16.24Q63.31 17.25 62.23 17.98Q61.16 18.71 59.89 19.21Q58.63 19.72 57.23 20.03Q57.11 19.71 56.86 19.27Q56.6 18.82 56.36 18.56Q57.62 18.33 58.77 17.92Q59.93 17.52 60.9 16.93Q61.87 16.33 62.59 15.53Q63.31 14.74 63.71 13.74ZM59.61 14.39Q60.44 15.98 62.17 17.02Q63.9 18.07 66.29 18.48Q66.1 18.65 65.89 18.92Q65.67 19.19 65.49 19.47Q65.31 19.76 65.18 20Q62.64 19.44 60.85 18.15Q59.06 16.86 58.04 14.85ZM51.02 5.73 52.04 4.37Q52.54 4.57 53.09 4.86Q53.64 5.14 54.14 5.45Q54.64 5.76 54.95 6.04L53.88 7.54Q53.59 7.24 53.11 6.91Q52.63 6.58 52.08 6.27Q51.53 5.95 51.02 5.73ZM50.2 10.24 51.19 8.85Q51.72 9.03 52.3 9.31Q52.88 9.58 53.4 9.89Q53.93 10.19 54.26 10.47L53.2 12.01Q52.9 11.71 52.39 11.39Q51.89 11.07 51.31 10.76Q50.73 10.45 50.2 10.24ZM50.37 18.83Q50.76 18.16 51.21 17.25Q51.65 16.34 52.11 15.31Q52.57 14.29 52.97 13.29L54.45 14.34Q54.1 15.26 53.7 16.22Q53.3 17.18 52.88 18.11Q52.46 19.04 52.04 19.88ZM59.56 4.47 61.26 4.1Q61.53 4.61 61.76 5.22Q61.99 5.84 62.07 6.27L60.28 6.71Q60.21 6.26 60 5.63Q59.79 4.99 59.56 4.47Z"); }
:where(body.admin-console, body.admin-auth) .admin-word-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(body.admin-console, body.admin-auth) .admin-label { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--admin-line); color: var(--admin-text-2); font: 500 14px/20px var(--font-sans); white-space: nowrap; }
:where(body.admin-console, body.admin-auth) .env-badge { display: inline-flex; flex: none; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-6); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
:where(body.admin-console, body.admin-auth) .env-badge.is-prod { background: var(--danger-solid); color: #ffffff; }
:where(body.admin-console, body.admin-auth) .env-badge.is-uat { background: var(--warning-dot); color: var(--ink-950); }
:where(body.admin-console, body.admin-auth) .env-badge.is-dev { background: var(--admin-wash-2); color: var(--admin-text); }
body.admin-console :is(.admin-menu-btn, .admin-search-btn) { display: none; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--admin-icon); }
body.admin-console :is(.admin-menu-btn, .admin-search-btn):hover, body.admin-console :is(.admin-menu-btn, .admin-search-btn)[aria-expanded="true"] { border: 0; background: var(--admin-wash-1); color: var(--admin-text); }
body.admin-console :is(.admin-menu-btn, .admin-search-btn) > .glyph-menu { width: 20px; height: 20px; }

/* The search: a 300px field on ink (task, team or upstream task ID) whose
   links hang 4px under it in a 400px menu; Ctrl K focuses it. */
body.admin-console .admin-search-box { position: relative; flex: 0 1 300px; min-width: 0; }
body.admin-console .admin-search { position: relative; height: 32px; padding: 0 4px 0 10px; gap: 8px; border: 1px solid var(--admin-field-line); border-radius: var(--r-6); background: var(--admin-field); box-shadow: none; color: var(--admin-text); cursor: text; }
body.admin-console .admin-search:hover { border-color: rgba(255, 255, 255, .3); background: var(--admin-field); }
body.admin-console .admin-search:focus-within { border-color: var(--admin-focus); box-shadow: 0 0 0 3px rgba(145, 137, 255, .32); }
body.admin-console .admin-search > .glyph { color: var(--admin-text-3); }
body.admin-console .admin-search > input { color: var(--admin-text); font: 400 14px/20px var(--font-sans); }
body.admin-console .admin-search > input::-webkit-search-cancel-button { display: none; }
body.admin-console .admin-search > .admin-search-ph { position: absolute; top: 5px; right: 52px; left: 34px; overflow: hidden; color: var(--admin-text-3); font: 400 14px/20px var(--font-sans); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
body.admin-console .admin-search:not(.is-empty) > .admin-search-ph { display: none; }
body.admin-console .admin-search > .kbd { margin-right: 2px; border-color: var(--admin-field-line); background: transparent; box-shadow: none; color: var(--admin-text-3); }
body.admin-console .admin-pop { position: absolute; top: calc(100% + 16px); left: 0; z-index: 30; width: 400px; max-width: calc(100vw - 32px); color: var(--text-1); }
body.admin-console .admin-search-row { justify-content: space-between; gap: 16px; }
body.admin-console .admin-search-value { min-width: 0; overflow: hidden; color: var(--text-3); font: 400 12px/16px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
body.admin-console .admin-search-hint { margin: 0; padding: 6px 10px; color: var(--text-3); font-size: 12px; line-height: 16px; }
body.admin-console .admin-search-row + .admin-search-hint { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* The operator menu: the avatar, the name and a chevron on ink; its white
   menu hangs 4px under the bar: who is signed in, two-step verification,
   the time zone, the language, the sign-in time and the sign-out. */
body.admin-console .shell-user { flex: none; gap: 8px; min-width: 0; margin-left: auto; }
body.admin-console .shell-topbar .user-menu { position: relative; min-width: 0; max-width: 240px; }
body.admin-console .shell-topbar .user-menu > summary { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 32px; min-height: 0; padding: 0 6px 0 4px; border: 0; border-radius: var(--r-6); background: transparent; color: var(--admin-text); font: 500 13px/20px var(--font-sans); }
body.admin-console .shell-topbar .user-menu > summary:hover, body.admin-console .shell-topbar .user-menu[open] > summary { background: var(--admin-wash-1); }
body.admin-console .shell-topbar .user-face { gap: 8px; min-width: 0; }
body.admin-console .shell-topbar .user-face > .avatar { width: 24px; height: 24px; background: var(--admin-wash-2); color: var(--admin-text); font: 500 12px/16px var(--font-sans); }
body.admin-console .shell-topbar .user-face > .account-name { min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-console .shell-topbar .user-face > .glyph { color: var(--admin-text-3); }
body.admin-console .shell-topbar .user-menu > .menu-panel { top: calc(100% + 16px); right: 0; display: flex; flex-direction: column; gap: 0; width: 264px; min-width: 0; padding: 6px; border: 0; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e2); color: var(--text-1); }
body.admin-console .shell-topbar .user-menu > .menu-panel > .menu-rule { height: 1px; margin: 6px -6px; background: var(--line-soft); }
body.admin-console .shell-topbar .admin-who { display: flex; align-items: center; gap: 12px; padding: 6px 10px 8px; }
body.admin-console .shell-topbar .admin-who > .avatar { width: 32px; height: 32px; background: var(--gray-100); color: var(--gray-700); font: 500 13px/20px var(--font-sans); }
body.admin-console .shell-topbar .admin-who p { margin: 0; padding: 0; }
body.admin-console .shell-topbar .admin-who .admin-who-name { color: var(--text-1); font: 500 14px/20px var(--font-sans); }
body.admin-console .shell-topbar .admin-who .admin-who-role { color: var(--text-3); font-size: 12px; line-height: 16px; }
body.admin-console .shell-topbar .user-menu > .menu-panel > a.admin-menu-row, body.admin-console .shell-topbar .user-menu > .menu-panel > button.shell-sign-out,
body.admin-console .shell-topbar .menu-panel .admin-menu-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 32px; min-height: 0; padding: 0 10px; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-1); font: 400 14px/20px var(--font-sans); text-align: left; text-decoration: none; }
body.admin-console .shell-topbar .user-menu > .menu-panel > a.admin-menu-row:hover, body.admin-console .shell-topbar .user-menu > .menu-panel > button.shell-sign-out:hover,
body.admin-console .shell-topbar .menu-panel .admin-menu-row:hover { background: var(--gray-50); color: var(--text-1); text-decoration: none; }
body.admin-console .shell-topbar .menu-panel .admin-menu-row > .glyph { width: 16px; height: 16px; color: var(--gray-700); }
body.admin-console .shell-topbar .menu-panel .admin-menu-row > :is(.glyph-clock, .glyph-globe) { width: 20px; height: 20px; margin: -2px; transform: scale(.8); }
body.admin-console .shell-topbar .menu-panel .timezone-control label { color: var(--text-1); font: 400 14px/20px var(--font-sans); cursor: pointer; }
body.admin-console .shell-topbar .menu-panel .admin-menu-row > select, body.admin-console .shell-topbar .menu-panel .admin-language .language-control > select { position: static; width: auto; height: 28px; min-height: 0; margin-left: auto; opacity: 1; padding: 0 22px 0 6px; border: 0; background-color: transparent; box-shadow: none; color: var(--text-3); font: 400 12px/16px var(--font-sans); text-align: right; background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; }
body.admin-console .shell-topbar .menu-panel .admin-language .language-control { margin-left: auto; }
body.admin-console .shell-topbar .menu-panel .admin-language .language-control.language-chip { width: auto; height: 28px; padding: 0; background: transparent; }
body.admin-console .shell-topbar .user-menu > .menu-panel > .shell-updated { margin: 0; padding: 6px 10px 4px; color: var(--text-3); font: 500 12px/16px var(--font-sans); white-space: normal; }
body.admin-console .shell-topbar .user-menu > .menu-panel > button.shell-sign-out > .glyph { color: var(--gray-700); }
body.admin-console .shell-topbar .menu-panel .admin-language .language-control::before { content: none; }

/* The sidebar: the customer console's rows on the page grey, grouped under
   12px titles (the first group has none); the current row, or the row of
   the current page's section, is white with a hairline and e1, in ink. */
body.admin-console .shell-sidebar { position: fixed; top: 56px; right: auto; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; gap: 16px; width: 240px; height: auto; margin: 0; padding: 12px; overflow-x: hidden; overflow-y: auto; border: 0; background: var(--gray-50); scrollbar-width: thin; }
body.admin-console .shell-sidebar > p { padding: 0 12px; color: var(--text-3); font-size: 13px; line-height: 20px; }
body.admin-console .shell-sidebar .nav-group { display: flex; flex: none; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
body.admin-console .shell-sidebar .nav-group > h2 { margin: 0; padding: 0 12px 4px; color: var(--text-3); font: 500 12px/16px var(--font-sans); }
body.admin-console .shell-sidebar .nav-group:first-child > h2 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.admin-console .shell-sidebar .nav-link { position: relative; display: flex; flex: none; align-items: center; gap: 12px; height: 32px; min-height: 0; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-8); color: var(--gray-700); font: 400 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none; }
body.admin-console .shell-sidebar .nav-link:hover { background: var(--wash-1); color: var(--text-1); text-decoration: none; }
body.admin-console .shell-sidebar .nav-link[aria-current], body.admin-console .shell-sidebar .nav-link[aria-current]:hover { border-color: var(--line); background: var(--gray-0); box-shadow: var(--e1); color: var(--text-1); font-weight: 500; }
body.admin-console .shell-sidebar .nav-icon { color: var(--gray-600); }
body.admin-console .shell-sidebar .nav-link:hover .nav-icon, body.admin-console .shell-sidebar .nav-link[aria-current] .nav-icon { color: var(--text-1); }
body.admin-console .shell-sidebar .nav-icon:is(.glyph-people, .glyph-servers, .glyph-path, .glyph-link, .glyph-tag, .glyph-layers, .glyph-hourglass, .glyph-lock, .glyph-doc-check, .glyph-gear, .glyph-person-shield) { margin: -1px; transform: scale(.9); }
body.admin-console .shell-sidebar .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.admin-console .admin-scrim { position: fixed; inset: 52px 0 0 0; z-index: 59; background: rgba(16, 22, 31, .48); }

/* The page tabs of a section of several pages: ink location tabs at the
   top of the page, before its title. */
body.admin-console .admin-tabs { display: none; }
body.admin-console .admin-tabs.is-shown { display: flex; gap: 24px; margin: -4px 0 20px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
body.admin-console .admin-tab { position: relative; display: inline-flex; flex: none; align-items: center; height: 40px; color: var(--text-2); font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none; }
body.admin-console .admin-tab:hover { color: var(--text-1); text-decoration: none; }
body.admin-console .admin-tab[aria-current="page"] { color: var(--text-1); }
body.admin-console .admin-tab[aria-current="page"]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--gray-900); }
body.admin-console main.admin-stack > .admin-tabs.is-shown { margin: 0; }

/* From 768 to 1279px the sidebar is the 64px rail of icons (each row keeps
   its name as a tooltip and for screen readers, a hairline parts the
   groups) and the bar keeps the mark, the console name, the badge and the search. */
@media (max-width: 1279px) {
  body.admin-console main { margin-left: calc(96px + max(0px, (100% - 128px - var(--page-max)) / 2)); }
  :where(body.admin-console) .admin-id { min-width: 0; }
  body.admin-console .shell-topbar .admin-word { display: none; }
  body.admin-console .shell-sidebar { width: 64px; }
  body.admin-console .shell-sidebar .nav-group > h2 { display: none; }
  body.admin-console .shell-sidebar .nav-group + .nav-group { padding-top: 12px; border-top: 1px solid var(--line); }
  body.admin-console .shell-sidebar .nav-link { justify-content: center; width: 40px; padding: 0; }
  body.admin-console .shell-sidebar .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Under 768px: a 52px bar whose menu button opens the sidebar as a 280px
   drawer over a scrim (44px rows, group titles shown), the search folds
   into an icon that opens it under the bar, the wordmark and the operator's name
   hide, and menus span the width. */
@media (max-width: 767px) {
  body.admin-console main { margin: 68px 16px 48px; }
  body.admin-console main:not(.admin-stack) { padding: 16px; }
  body.admin-console .shell-topbar { gap: 4px; height: 52px; padding-right: 8px; }
  body.admin-console .shell-topbar > p[role="alert"]:not(:empty) { top: 52px; padding: 8px 16px; }
  :where(body.admin-console) .admin-id { gap: 8px; padding-left: 8px; }
  :where(body.admin-console) .admin-label { margin-left: 0; padding-left: 8px; }
  body.admin-console :is(.admin-menu-btn, .admin-search-btn) { display: inline-flex; position: relative; }
  body.admin-console :is(.admin-menu-btn, .admin-search-btn)::before { content: ""; position: absolute; inset: -6px; }
  body.admin-console .admin-search-box { position: absolute; top: 52px; right: 0; left: 0; display: none; padding: 8px; background: var(--admin-bar); }
  body.admin-console .admin-search-box.is-open { display: block; }
  body.admin-console .admin-search { height: 40px; }
  body.admin-console .admin-search > input { font-size: 16px; }
  body.admin-console .admin-search > .admin-search-ph { top: 9px; }
  body.admin-console .admin-search > .kbd { display: none; }
  body.admin-console .admin-pop { top: calc(100% + 4px); right: 8px; left: 8px; width: auto; max-width: none; }
  body.admin-console .shell-topbar .user-face > .account-name { display: none; }
  body.admin-console .shell-topbar .user-menu { position: static; }
  body.admin-console .shell-topbar .user-menu > summary { position: relative; }
  body.admin-console .shell-topbar .user-menu > summary::before { content: ""; position: absolute; inset: -6px 0; }
  body.admin-console .shell-topbar .user-menu > .menu-panel { top: calc(100% + 4px); right: 8px; left: 8px; width: auto; }
  body.admin-console .shell-topbar .menu-panel .admin-menu-row, body.admin-console .shell-topbar .user-menu > .menu-panel > :is(a.admin-menu-row, button.shell-sign-out) { height: 44px; }
  body.admin-console .shell-sidebar { display: none; }
  body.admin-console .shell-sidebar.is-open { top: 52px; z-index: 60; display: flex; width: 280px; max-width: calc(100% - 48px); border-right: 1px solid var(--line); box-shadow: var(--e3); }
  body.admin-console .shell-sidebar.is-open .nav-group > h2 { display: block; }
  body.admin-console .shell-sidebar.is-open .nav-group:first-child > h2 { display: none; }
  body.admin-console .shell-sidebar.is-open .nav-group + .nav-group { padding-top: 0; border-top: 0; }
  body.admin-console .shell-sidebar.is-open .nav-link { justify-content: flex-start; width: auto; height: 44px; padding: 0 12px; }
  body.admin-console .shell-sidebar.is-open .nav-label { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; }
  body.admin-console .admin-tabs.is-shown { gap: 20px; -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
  body.admin-console .admin-tab { height: 44px; }
}

/* Glyphs of the staff shell and the overview, drawn like the sidebar
   glyphs: the 24-unit line icons as the filled outlines of their 2-unit
   round strokes, at the size in their name. */
.glyph.glyph-pulse-18 { width: 18px; height: 18px; clip-path: path("M16.5 9.75L13.5 9.75L13.5 8.25L16.5 8.25ZM14.21 9.24L11.96 15.99L10.54 15.51L12.79 8.76ZM10.54 15.99L6.04 2.49L7.46 2.01L11.96 15.51ZM7.46 2.49L5.21 9.24L3.79 8.76L6.04 2.01ZM4.5 9.75L1.5 9.75L1.5 8.25L4.5 8.25ZM17.25 9A0.75 0.75 0 1 1 15.75 9A0.75 0.75 0 1 1 17.25 9ZM14.25 9A0.75 0.75 0 1 1 12.75 9A0.75 0.75 0 1 1 14.25 9ZM12 15.75A0.75 0.75 0 1 1 10.5 15.75A0.75 0.75 0 1 1 12 15.75ZM7.5 2.25A0.75 0.75 0 1 1 6 2.25A0.75 0.75 0 1 1 7.5 2.25ZM5.25 9A0.75 0.75 0 1 1 3.75 9A0.75 0.75 0 1 1 5.25 9ZM2.25 9A0.75 0.75 0 1 1 0.75 9A0.75 0.75 0 1 1 2.25 9Z"); }
.glyph.glyph-sign-out-16 { width: 16px; height: 16px; clip-path: path("M6 14.67L3.33 14.67L3.33 13.33L6 13.33ZM3.25 14.66L2.9 14.62L3.08 13.29L3.42 13.34ZM2.73 14.57L2.41 14.44L2.92 13.21L3.24 13.34ZM2.26 14.35L1.98 14.14L2.8 13.08L3.07 13.29ZM1.86 14.02L1.65 13.74L2.71 12.93L2.92 13.2ZM1.56 13.59L1.43 13.27L2.66 12.76L2.79 13.08ZM1.38 13.1L1.34 12.75L2.66 12.58L2.71 12.92ZM1.33 12.67L1.33 3.33L2.67 3.33L2.67 12.67ZM1.34 3.25L1.38 2.9L2.71 3.08L2.66 3.42ZM1.43 2.73L1.56 2.41L2.79 2.92L2.66 3.24ZM1.65 2.26L1.86 1.98L2.92 2.8L2.71 3.07ZM1.98 1.86L2.26 1.65L3.07 2.71L2.8 2.92ZM2.41 1.56L2.73 1.43L3.24 2.66L2.92 2.79ZM2.9 1.38L3.25 1.34L3.42 2.66L3.08 2.71ZM3.33 1.33L6 1.33L6 2.67L3.33 2.67ZM6.67 14A0.67 0.67 0 1 1 5.33 14A0.67 0.67 0 1 1 6.67 14ZM4 14A0.67 0.67 0 1 1 2.67 14A0.67 0.67 0 1 1 4 14ZM3.65 13.95A0.67 0.67 0 1 1 2.32 13.95A0.67 0.67 0 1 1 3.65 13.95ZM3.33 13.82A0.67 0.67 0 1 1 2 13.82A0.67 0.67 0 1 1 3.33 13.82ZM3.06 13.61A0.67 0.67 0 1 1 1.72 13.61A0.67 0.67 0 1 1 3.06 13.61ZM2.85 13.33A0.67 0.67 0 1 1 1.51 13.33A0.67 0.67 0 1 1 2.85 13.33ZM2.71 13.01A0.67 0.67 0 1 1 1.38 13.01A0.67 0.67 0 1 1 2.71 13.01ZM2.67 12.67A0.67 0.67 0 1 1 1.33 12.67A0.67 0.67 0 1 1 2.67 12.67ZM2.67 3.33A0.67 0.67 0 1 1 1.33 3.33A0.67 0.67 0 1 1 2.67 3.33ZM2.71 2.99A0.67 0.67 0 1 1 1.38 2.99A0.67 0.67 0 1 1 2.71 2.99ZM2.85 2.67A0.67 0.67 0 1 1 1.51 2.67A0.67 0.67 0 1 1 2.85 2.67ZM3.06 2.39A0.67 0.67 0 1 1 1.72 2.39A0.67 0.67 0 1 1 3.06 2.39ZM3.33 2.18A0.67 0.67 0 1 1 2 2.18A0.67 0.67 0 1 1 3.33 2.18ZM3.65 2.05A0.67 0.67 0 1 1 2.32 2.05A0.67 0.67 0 1 1 3.65 2.05ZM4 2A0.67 0.67 0 1 1 2.67 2A0.67 0.67 0 1 1 4 2ZM6.67 2A0.67 0.67 0 1 1 5.33 2A0.67 0.67 0 1 1 6.67 2ZM10.2 10.86L13.53 7.53L14.47 8.47L11.14 11.8ZM13.53 8.47L10.2 5.14L11.14 4.2L14.47 7.53ZM11.33 11.33A0.67 0.67 0 1 1 10 11.33A0.67 0.67 0 1 1 11.33 11.33ZM14.67 8A0.67 0.67 0 1 1 13.33 8A0.67 0.67 0 1 1 14.67 8ZM11.33 4.67A0.67 0.67 0 1 1 10 4.67A0.67 0.67 0 1 1 11.33 4.67ZM14 8.67L6 8.67L6 7.33L14 7.33ZM14.67 8A0.67 0.67 0 1 1 13.33 8A0.67 0.67 0 1 1 14.67 8ZM6.67 8A0.67 0.67 0 1 1 5.33 8A0.67 0.67 0 1 1 6.67 8Z"); }
.glyph.glyph-alert-circle-12 { width: 12px; height: 12px; clip-path: path("M11.5 6A5.5 5.5 0 1 1 0.5 6A5.5 5.5 0 1 1 11.5 6ZM10.5 6A4.5 4.5 0 1 0 1.5 6A4.5 4.5 0 1 0 10.5 6ZM6.5 4L6.5 6L5.5 6L5.5 4ZM6.5 4A0.5 0.5 0 1 1 5.5 4A0.5 0.5 0 1 1 6.5 4ZM6.5 6A0.5 0.5 0 1 1 5.5 6A0.5 0.5 0 1 1 6.5 6ZM6 7.5L6 7.5L6 8.5L6 8.5ZM6.5 8A0.5 0.5 0 1 1 5.5 8A0.5 0.5 0 1 1 6.5 8ZM6.5 8A0.5 0.5 0 1 1 5.5 8A0.5 0.5 0 1 1 6.5 8Z"); }
.glyph.glyph-triangle-12 { width: 12px; height: 12px; clip-path: path("M4.75 1.68L4.97 1.41L5.74 2.06L5.52 2.32ZM5.11 1.3L5.41 1.13L5.91 1.99L5.61 2.17ZM5.57 1.07L5.91 1.01L6.09 1.99L5.74 2.05ZM6.09 1.01L6.43 1.07L6.26 2.05L5.91 1.99ZM6.59 1.13L6.89 1.3L6.39 2.17L6.09 1.99ZM7.03 1.41L7.25 1.68L6.48 2.32L6.26 2.06ZM7.3 1.75L11.3 8.75L10.43 9.25L6.43 2.25ZM11.34 8.83L11.45 9.16L10.51 9.5L10.4 9.17ZM11.48 9.33L11.48 9.67L10.48 9.67L10.48 9.33ZM11.45 9.84L11.34 10.17L10.4 9.83L10.51 9.5ZM11.25 10.32L11.03 10.59L10.26 9.94L10.48 9.68ZM10.89 10.7L10.59 10.87L10.09 10.01L10.39 9.83ZM10.43 10.93L10.09 10.99L9.91 10.01L10.26 9.95ZM10 11L2 11L2 10L10 10ZM1.91 10.99L1.57 10.93L1.74 9.95L2.09 10.01ZM1.41 10.87L1.11 10.7L1.61 9.83L1.91 10.01ZM0.97 10.59L0.75 10.32L1.52 9.68L1.74 9.94ZM0.66 10.17L0.55 9.84L1.49 9.5L1.6 9.83ZM0.52 9.67L0.52 9.33L1.52 9.33L1.52 9.67ZM0.55 9.16L0.66 8.83L1.6 9.17L1.49 9.5ZM0.7 8.75L4.7 1.75L5.57 2.25L1.57 9.25ZM5.63 2A0.5 0.5 0 1 1 4.63 2A0.5 0.5 0 1 1 5.63 2ZM5.86 1.73A0.5 0.5 0 1 1 4.86 1.73A0.5 0.5 0 1 1 5.86 1.73ZM6.16 1.56A0.5 0.5 0 1 1 5.16 1.56A0.5 0.5 0 1 1 6.16 1.56ZM6.5 1.5A0.5 0.5 0 1 1 5.5 1.5A0.5 0.5 0 1 1 6.5 1.5ZM6.84 1.56A0.5 0.5 0 1 1 5.84 1.56A0.5 0.5 0 1 1 6.84 1.56ZM7.14 1.73A0.5 0.5 0 1 1 6.14 1.73A0.5 0.5 0 1 1 7.14 1.73ZM7.37 2A0.5 0.5 0 1 1 6.37 2A0.5 0.5 0 1 1 7.37 2ZM11.37 9A0.5 0.5 0 1 1 10.37 9A0.5 0.5 0 1 1 11.37 9ZM11.48 9.33A0.5 0.5 0 1 1 10.48 9.33A0.5 0.5 0 1 1 11.48 9.33ZM11.48 9.67A0.5 0.5 0 1 1 10.48 9.67A0.5 0.5 0 1 1 11.48 9.67ZM11.37 10A0.5 0.5 0 1 1 10.37 10A0.5 0.5 0 1 1 11.37 10ZM11.14 10.27A0.5 0.5 0 1 1 10.14 10.27A0.5 0.5 0 1 1 11.14 10.27ZM10.84 10.44A0.5 0.5 0 1 1 9.84 10.44A0.5 0.5 0 1 1 10.84 10.44ZM10.5 10.5A0.5 0.5 0 1 1 9.5 10.5A0.5 0.5 0 1 1 10.5 10.5ZM2.5 10.5A0.5 0.5 0 1 1 1.5 10.5A0.5 0.5 0 1 1 2.5 10.5ZM2.16 10.44A0.5 0.5 0 1 1 1.16 10.44A0.5 0.5 0 1 1 2.16 10.44ZM1.86 10.27A0.5 0.5 0 1 1 0.86 10.27A0.5 0.5 0 1 1 1.86 10.27ZM1.63 10A0.5 0.5 0 1 1 0.63 10A0.5 0.5 0 1 1 1.63 10ZM1.52 9.67A0.5 0.5 0 1 1 0.52 9.67A0.5 0.5 0 1 1 1.52 9.67ZM1.52 9.33A0.5 0.5 0 1 1 0.52 9.33A0.5 0.5 0 1 1 1.52 9.33ZM1.63 9A0.5 0.5 0 1 1 0.63 9A0.5 0.5 0 1 1 1.63 9ZM6.5 4.5L6.5 6.5L5.5 6.5L5.5 4.5ZM6.5 4.5A0.5 0.5 0 1 1 5.5 4.5A0.5 0.5 0 1 1 6.5 4.5ZM6.5 6.5A0.5 0.5 0 1 1 5.5 6.5A0.5 0.5 0 1 1 6.5 6.5ZM6 8L6 8L6 9L6 9ZM6.5 8.5A0.5 0.5 0 1 1 5.5 8.5A0.5 0.5 0 1 1 6.5 8.5ZM6.5 8.5A0.5 0.5 0 1 1 5.5 8.5A0.5 0.5 0 1 1 6.5 8.5Z"); }
.glyph.glyph-info-12 { width: 12px; height: 12px; clip-path: path("M11.5 6A5.5 5.5 0 1 1 0.5 6A5.5 5.5 0 1 1 11.5 6ZM10.5 6A4.5 4.5 0 1 0 1.5 6A4.5 4.5 0 1 0 10.5 6ZM5.5 8L5.5 6L6.5 6L6.5 8ZM6.5 8A0.5 0.5 0 1 1 5.5 8A0.5 0.5 0 1 1 6.5 8ZM6.5 6A0.5 0.5 0 1 1 5.5 6A0.5 0.5 0 1 1 6.5 6ZM6 3.5L6 3.5L6 4.5L6 4.5ZM6.5 4A0.5 0.5 0 1 1 5.5 4A0.5 0.5 0 1 1 6.5 4ZM6.5 4A0.5 0.5 0 1 1 5.5 4A0.5 0.5 0 1 1 6.5 4Z"); }
.glyph.glyph-check-12 { width: 12px; height: 12px; clip-path: path("M10.35 3.35L4.85 8.85L4.15 8.15L9.65 2.65ZM4.15 8.85L1.65 6.35L2.35 5.65L4.85 8.15ZM10.5 3A0.5 0.5 0 1 1 9.5 3A0.5 0.5 0 1 1 10.5 3ZM5 8.5A0.5 0.5 0 1 1 4 8.5A0.5 0.5 0 1 1 5 8.5ZM2.5 6A0.5 0.5 0 1 1 1.5 6A0.5 0.5 0 1 1 2.5 6Z"); }
.glyph.glyph-cross-12 { width: 12px; height: 12px; clip-path: path("M9.35 3.35L3.35 9.35L2.65 8.65L8.65 2.65ZM9.5 3A0.5 0.5 0 1 1 8.5 3A0.5 0.5 0 1 1 9.5 3ZM3.5 9A0.5 0.5 0 1 1 2.5 9A0.5 0.5 0 1 1 3.5 9ZM3.35 2.65L9.35 8.65L8.65 9.35L2.65 3.35ZM3.5 3A0.5 0.5 0 1 1 2.5 3A0.5 0.5 0 1 1 3.5 3ZM9.5 9A0.5 0.5 0 1 1 8.5 9A0.5 0.5 0 1 1 9.5 9Z"); }
.glyph.glyph-arrow-right-14 { width: 14px; height: 14px; clip-path: path("M2.92 6.42L11.08 6.42L11.08 7.58L2.92 7.58ZM3.5 7A0.58 0.58 0 1 1 2.33 7A0.58 0.58 0 1 1 3.5 7ZM11.67 7A0.58 0.58 0 1 1 10.5 7A0.58 0.58 0 1 1 11.67 7ZM7.41 2.5L11.5 6.59L10.67 7.41L6.59 3.33ZM11.5 7.41L7.41 11.5L6.59 10.67L10.67 6.59ZM7.58 2.92A0.58 0.58 0 1 1 6.42 2.92A0.58 0.58 0 1 1 7.58 2.92ZM11.67 7A0.58 0.58 0 1 1 10.5 7A0.58 0.58 0 1 1 11.67 7ZM7.58 11.08A0.58 0.58 0 1 1 6.42 11.08A0.58 0.58 0 1 1 7.58 11.08Z"); }
.glyph.glyph-shield-check-16 { width: 16px; height: 16px; clip-path: path("M14 8.71L13.93 9.67L12.6 9.57L12.67 8.62ZM13.91 9.77L13.72 10.62L12.42 10.33L12.62 9.47ZM13.69 10.73L13.37 11.49L12.14 10.99L12.45 10.22ZM13.32 11.59L12.9 12.28L11.77 11.58L12.19 10.89ZM12.84 12.36L12.33 12.97L11.31 12.11L11.83 11.5ZM12.27 13.03L11.67 13.57L10.78 12.58L11.37 12.04ZM11.61 13.62L10.94 14.09L10.17 13L10.84 12.53ZM10.88 14.13L10.15 14.54L9.49 13.38L10.22 12.97ZM10.1 14.57L9.32 14.93L8.76 13.72L9.54 13.36ZM9.28 14.94L8.46 15.26L7.99 14.01L8.81 13.7ZM8.32 15.29L8.1 15.33L7.9 14.01L8.13 13.97ZM7.88 15.32L7.66 15.28L7.9 13.97L8.12 14.01ZM7.54 15.25L6.73 14.94L7.2 13.69L8.02 14ZM6.68 14.92L5.9 14.56L6.46 13.35L7.24 13.71ZM5.85 14.54L5.12 14.13L5.78 12.97L6.51 13.38ZM5.07 14.09L4.4 13.62L5.16 12.53L5.83 13ZM4.33 13.57L3.74 13.03L4.63 12.04L5.22 12.58ZM3.67 12.97L3.16 12.36L4.17 11.5L4.69 12.11ZM3.1 12.28L2.68 11.59L3.81 10.89L4.23 11.58ZM2.63 11.49L2.31 10.73L3.55 10.22L3.86 10.99ZM2.28 10.62L2.09 9.77L3.38 9.47L3.58 10.33ZM2.07 9.67L2 8.71L3.33 8.62L3.4 9.57ZM2 8.67L2 4L3.33 4L3.33 8.67ZM2.02 3.83L2.11 3.49L3.4 3.84L3.31 4.17ZM2.28 3.2L2.53 2.95L3.47 3.89L3.23 4.14ZM2.83 2.78L3.16 2.69L3.51 3.98L3.17 4.07ZM3.3 2.67L3.7 2.64L3.78 3.98L3.37 4ZM3.64 2.65L4.06 2.58L4.27 3.9L3.85 3.97ZM4 2.6L4.44 2.49L4.76 3.78L4.33 3.89ZM4.39 2.5L4.83 2.35L5.25 3.62L4.81 3.77ZM4.79 2.37L5.23 2.19L5.73 3.42L5.29 3.6ZM5.19 2.21L5.62 2L6.2 3.2L5.77 3.41ZM5.59 2.01L6.01 1.78L6.66 2.94L6.24 3.18ZM5.98 1.8L6.38 1.54L7.1 2.66L6.69 2.92ZM6.35 1.56L6.74 1.28L7.52 2.36L7.13 2.64ZM6.71 1.3L7.07 1L7.92 2.04L7.55 2.33ZM7.26 0.89L7.77 0.71L8.23 1.96L7.72 2.15ZM8.23 0.71L8.74 0.89L8.28 2.15L7.77 1.96ZM8.93 1L9.29 1.3L8.45 2.33L8.08 2.04ZM9.26 1.28L9.65 1.56L8.87 2.64L8.48 2.36ZM9.62 1.54L10.03 1.8L9.31 2.92L8.9 2.66ZM9.99 1.78L10.42 2.02L9.76 3.18L9.34 2.94ZM10.38 2L10.82 2.21L10.23 3.41L9.8 3.2ZM10.78 2.19L11.22 2.37L10.71 3.61L10.27 3.43ZM11.17 2.36L11.61 2.5L11.19 3.77L10.75 3.62ZM11.56 2.49L12 2.6L11.67 3.89L11.24 3.78ZM11.94 2.58L12.36 2.65L12.15 3.97L11.73 3.9ZM12.3 2.64L12.7 2.67L12.63 4L12.22 3.98ZM12.84 2.69L13.17 2.78L12.83 4.07L12.49 3.98ZM13.47 2.95L13.72 3.2L12.77 4.14L12.53 3.89ZM13.89 3.49L13.98 3.83L12.69 4.17L12.6 3.84ZM14 4L14 8.67L12.67 8.67L12.67 4ZM14 8.67A0.67 0.67 0 1 1 12.67 8.67A0.67 0.67 0 1 1 14 8.67ZM13.93 9.62A0.67 0.67 0 1 1 12.6 9.62A0.67 0.67 0 1 1 13.93 9.62ZM13.74 10.47A0.67 0.67 0 1 1 12.4 10.47A0.67 0.67 0 1 1 13.74 10.47ZM13.42 11.24A0.67 0.67 0 1 1 12.09 11.24A0.67 0.67 0 1 1 13.42 11.24ZM13 11.93A0.67 0.67 0 1 1 11.67 11.93A0.67 0.67 0 1 1 13 11.93ZM12.49 12.54A0.67 0.67 0 1 1 11.15 12.54A0.67 0.67 0 1 1 12.49 12.54ZM11.89 13.08A0.67 0.67 0 1 1 10.56 13.08A0.67 0.67 0 1 1 11.89 13.08ZM11.22 13.55A0.67 0.67 0 1 1 9.89 13.55A0.67 0.67 0 1 1 11.22 13.55ZM10.49 13.96A0.67 0.67 0 1 1 9.16 13.96A0.67 0.67 0 1 1 10.49 13.96ZM9.71 14.32A0.67 0.67 0 1 1 8.38 14.32A0.67 0.67 0 1 1 9.71 14.32ZM8.89 14.63A0.67 0.67 0 1 1 7.56 14.63A0.67 0.67 0 1 1 8.89 14.63ZM8.67 14.67A0.67 0.67 0 1 1 7.33 14.67A0.67 0.67 0 1 1 8.67 14.67ZM8.45 14.63A0.67 0.67 0 1 1 7.11 14.63A0.67 0.67 0 1 1 8.45 14.63ZM7.63 14.32A0.67 0.67 0 1 1 6.29 14.32A0.67 0.67 0 1 1 7.63 14.32ZM6.85 13.96A0.67 0.67 0 1 1 5.51 13.96A0.67 0.67 0 1 1 6.85 13.96ZM6.12 13.55A0.67 0.67 0 1 1 4.78 13.55A0.67 0.67 0 1 1 6.12 13.55ZM5.45 13.07A0.67 0.67 0 1 1 4.11 13.07A0.67 0.67 0 1 1 5.45 13.07ZM4.85 12.54A0.67 0.67 0 1 1 3.51 12.54A0.67 0.67 0 1 1 4.85 12.54ZM4.33 11.93A0.67 0.67 0 1 1 3 11.93A0.67 0.67 0 1 1 4.33 11.93ZM3.91 11.24A0.67 0.67 0 1 1 2.58 11.24A0.67 0.67 0 1 1 3.91 11.24ZM3.6 10.47A0.67 0.67 0 1 1 2.26 10.47A0.67 0.67 0 1 1 3.6 10.47ZM3.4 9.62A0.67 0.67 0 1 1 2.07 9.62A0.67 0.67 0 1 1 3.4 9.62ZM3.33 8.67A0.67 0.67 0 1 1 2 8.67A0.67 0.67 0 1 1 3.33 8.67ZM3.33 4A0.67 0.67 0 1 1 2 4A0.67 0.67 0 1 1 3.33 4ZM3.42 3.67A0.67 0.67 0 1 1 2.09 3.67A0.67 0.67 0 1 1 3.42 3.67ZM3.67 3.42A0.67 0.67 0 1 1 2.33 3.42A0.67 0.67 0 1 1 3.67 3.42ZM4 3.33A0.67 0.67 0 1 1 2.67 3.33A0.67 0.67 0 1 1 4 3.33ZM4.41 3.31A0.67 0.67 0 1 1 3.08 3.31A0.67 0.67 0 1 1 4.41 3.31ZM4.83 3.24A0.67 0.67 0 1 1 3.5 3.24A0.67 0.67 0 1 1 4.83 3.24ZM5.27 3.13A0.67 0.67 0 1 1 3.93 3.13A0.67 0.67 0 1 1 5.27 3.13ZM5.71 2.99A0.67 0.67 0 1 1 4.37 2.99A0.67 0.67 0 1 1 5.71 2.99ZM6.14 2.81A0.67 0.67 0 1 1 4.81 2.81A0.67 0.67 0 1 1 6.14 2.81ZM6.58 2.6A0.67 0.67 0 1 1 5.25 2.6A0.67 0.67 0 1 1 6.58 2.6ZM7 2.36A0.67 0.67 0 1 1 5.67 2.36A0.67 0.67 0 1 1 7 2.36ZM7.41 2.1A0.67 0.67 0 1 1 6.08 2.1A0.67 0.67 0 1 1 7.41 2.1ZM7.8 1.82A0.67 0.67 0 1 1 6.46 1.82A0.67 0.67 0 1 1 7.8 1.82ZM8.16 1.52A0.67 0.67 0 1 1 6.83 1.52A0.67 0.67 0 1 1 8.16 1.52ZM8.67 1.33A0.67 0.67 0 1 1 7.33 1.33A0.67 0.67 0 1 1 8.67 1.33ZM9.17 1.52A0.67 0.67 0 1 1 7.84 1.52A0.67 0.67 0 1 1 9.17 1.52ZM9.54 1.82A0.67 0.67 0 1 1 8.2 1.82A0.67 0.67 0 1 1 9.54 1.82ZM9.93 2.1A0.67 0.67 0 1 1 8.59 2.1A0.67 0.67 0 1 1 9.93 2.1ZM10.33 2.36A0.67 0.67 0 1 1 9 2.36A0.67 0.67 0 1 1 10.33 2.36ZM10.76 2.6A0.67 0.67 0 1 1 9.42 2.6A0.67 0.67 0 1 1 10.76 2.6ZM11.19 2.81A0.67 0.67 0 1 1 9.86 2.81A0.67 0.67 0 1 1 11.19 2.81ZM11.63 2.99A0.67 0.67 0 1 1 10.3 2.99A0.67 0.67 0 1 1 11.63 2.99ZM12.07 3.13A0.67 0.67 0 1 1 10.73 3.13A0.67 0.67 0 1 1 12.07 3.13ZM12.5 3.24A0.67 0.67 0 1 1 11.17 3.24A0.67 0.67 0 1 1 12.5 3.24ZM12.92 3.31A0.67 0.67 0 1 1 11.59 3.31A0.67 0.67 0 1 1 12.92 3.31ZM13.33 3.33A0.67 0.67 0 1 1 12 3.33A0.67 0.67 0 1 1 13.33 3.33ZM13.67 3.42A0.67 0.67 0 1 1 12.33 3.42A0.67 0.67 0 1 1 13.67 3.42ZM13.91 3.67A0.67 0.67 0 1 1 12.58 3.67A0.67 0.67 0 1 1 13.91 3.67ZM14 4A0.67 0.67 0 1 1 12.67 4A0.67 0.67 0 1 1 14 4ZM14 8.67A0.67 0.67 0 1 1 12.67 8.67A0.67 0.67 0 1 1 14 8.67ZM6.47 7.53L7.8 8.86L6.86 9.8L5.53 8.47ZM6.86 8.86L9.53 6.2L10.47 7.14L7.8 9.8ZM6.67 8A0.67 0.67 0 1 1 5.33 8A0.67 0.67 0 1 1 6.67 8ZM8 9.33A0.67 0.67 0 1 1 6.67 9.33A0.67 0.67 0 1 1 8 9.33ZM10.67 6.67A0.67 0.67 0 1 1 9.33 6.67A0.67 0.67 0 1 1 10.67 6.67Z"); }

/* FE9-5a, review round (Issue 2273, SHELL 6.1 and 6.2), staff pages only,
   like the rest of this section: every rule names the staff body. The bar's
   alerts bell with its count and its panel of alert rows (the rows the
   overview lists too), the sidebar's counts of open work (hidden in the
   rail), the person glyph of the operator chip, the operator menu's labels
   on one line and its selects as tall as a phone row, the search as a full
   ink sheet on phones, 44px hit areas for text links on phones (X9), the
   reduced-motion preference, and the bell and alert glyphs. */
body.admin-console .admin-bell-box { position: relative; flex: none; }
body.admin-console .admin-bell { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 32px; min-height: 0; padding: 0 8px; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--admin-icon); }
body.admin-console .admin-bell:hover, body.admin-console .admin-bell[aria-expanded="true"] { border: 0; background: var(--admin-wash-1); color: var(--admin-text); }
body.admin-console .admin-bell:active { background: var(--admin-wash-2); color: var(--admin-text); }
body.admin-console .admin-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-full); background: var(--admin-wash-2); color: var(--admin-text); font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
body.admin-console .admin-count.is-danger { background: var(--danger-solid); color: #ffffff; }
body.admin-console .admin-count.is-warning { background: var(--warning-dot); color: var(--ink-950); }
body.admin-console .admin-bell-box > .admin-pop { right: 0; left: auto; }
body.admin-console .admin-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; color: var(--text-1); font: 500 13px/20px var(--font-sans); }
body.admin-console .admin-pop-meta { color: var(--text-3); font: 400 12px/16px var(--font-sans); white-space: nowrap; }
body.admin-console .admin-pop-note { margin: 0; padding: 6px 10px; color: var(--text-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
body.admin-console .admin-alerts > .alert-list { max-height: min(60vh, 420px); overflow-y: auto; }
body.admin-console .admin-pop-all > .menu-meta { display: inline-flex; color: var(--text-2); }

/* Alert rows: the severity first (badge, icon and word), the title is the
   row's link, the time at the right, the description under the title. */
body.admin-console .alert-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body.admin-console .alert-row { position: relative; display: grid; grid-template-columns: minmax(60px, max-content) minmax(0, 1fr) auto; grid-template-areas: "sev title time" "sev desc desc"; column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px 20px; border-top: 1px solid var(--line-soft); transition: background-color var(--t-hover) var(--ease); }
body.admin-console .alert-row:hover { background: var(--gray-50); }
body.admin-console .alert-sev { grid-area: sev; display: flex; }
body.admin-console .alert-row .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; min-height: 22px; padding: 0 8px; border-radius: var(--r-6); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
body.admin-console .alert-row .badge > .glyph { flex: none; }
body.admin-console .alert-title { grid-area: title; min-width: 0; color: var(--text-1); font: 500 14px/20px var(--font-sans); text-decoration: none; }
body.admin-console .alert-title::after { content: ""; position: absolute; inset: 0; }
body.admin-console .alert-title:hover { color: var(--text-1); text-decoration: none; }
body.admin-console .alert-time { grid-area: time; color: var(--text-3); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.admin-console .alert-desc { grid-area: desc; min-width: 0; margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
body.admin-console .alert-desc:empty { display: none; }
body.admin-console .menu .alert-row { padding: 8px 10px; border-top: 0; border-radius: var(--r-6); }

/* Counts of open work at the right of their sidebar rows: neutral, and
   amber for the channel accounts that are not normal; the rail hides them
   and the phone drawer shows them again. */
body.admin-console .shell-sidebar .nav-link > .count { flex: none; margin-left: auto; }
body.admin-console .count.is-warning { background: var(--warning-tint); color: var(--warning-fg); }
body.admin-console .count.is-danger { background: var(--danger-tint); color: var(--danger-fg); }

/* The operator chip and the menu header show the person glyph while the
   session names no person; the menu's row names stay on one line. */
body.admin-console .shell-topbar .user-face > .avatar > .glyph-person { transform: scale(.78); }
body.admin-console .shell-topbar .admin-who > .avatar > .glyph-person { transform: scale(.9); }
body.admin-console .shell-topbar .menu-panel .admin-menu-row > label { white-space: nowrap; }
body.admin-console .shell-topbar .menu-panel .admin-language > label[for] { color: var(--text-1); font: 400 14px/20px var(--font-sans); cursor: pointer; }

/* The search's field and, on phones only, its close button. */
body.admin-console .admin-search-line { display: flex; align-items: center; gap: 8px; }
body.admin-console .admin-search-line > .admin-search { flex: 1 1 auto; min-width: 0; }
body.admin-console .admin-search-close { display: none; }

@media (max-width: 1279px) {
  body.admin-console .shell-sidebar .nav-link > .count { display: none; }
}
@media (max-width: 767px) {
  body.admin-console .shell-sidebar.is-open .nav-link > .count { display: inline-flex; }
  body.admin-console .alert-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sev time" "title title" "desc desc"; row-gap: 4px; padding: 12px 16px; }
  /* The phone bar keeps the operator menu in view: tighter controls, a
     console name that can shorten, and in English, whose names are longer,
     the avatar without its chevron. */
  body.admin-console .shell-user { gap: 4px; }
  :where(body.admin-console) .admin-id, :where(body.admin-console) .admin-brand { flex-shrink: 1; min-width: 0; }
  :where(body.admin-console) .admin-id { gap: 6px; }
  :where(body.admin-console) .admin-label { min-width: 0; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; }
  body.admin-console:lang(en) .shell-topbar .user-face > .glyph-pub-chev-down { display: none; }
  body.admin-console .admin-bell-box { position: static; }
  body.admin-console .admin-bell { position: relative; padding: 0 6px; }
  body.admin-console .admin-bell::before { content: ""; position: absolute; inset: -6px 0; }
  body.admin-console .admin-bell-box > .admin-pop { top: calc(100% + 4px); right: 8px; left: 8px; width: auto; max-width: none; }
  body.admin-console .shell-topbar .user-menu > .menu-panel { max-width: none; }
  body.admin-console .shell-topbar .menu-panel .admin-menu-row > select, body.admin-console .shell-topbar .menu-panel .admin-language .language-control > select,
  body.admin-console .shell-topbar .menu-panel .admin-language .language-control.language-chip { height: 44px; }
  /* The search opens as an ink sheet from the bar down, its results under
     the field and a close button beside it. */
  body.admin-console .admin-search-box.is-open { position: fixed; top: 52px; right: 0; bottom: 0; left: 0; z-index: 70; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 24px; overflow-y: auto; background: var(--admin-bar); }
  body.admin-console .admin-search-box.is-open .admin-pop { position: static; width: auto; max-width: none; }
  body.admin-console .admin-search-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--admin-icon); }
  body.admin-console .admin-search-close:hover { border: 0; background: var(--admin-wash-1); color: var(--admin-text); }
  /* X9: text links reach 44px under a finger. */
  body.admin-console .btn.btn-link::before { content: ""; position: absolute; inset: -12px -4px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(body.admin-console, body.admin-auth) *, :where(body.admin-console, body.admin-auth) *::before, :where(body.admin-console, body.admin-auth) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.glyph.glyph-bell-18 { width: 18px; height: 18px; clip-path: path("M8.26 15.25L8.68 15.71L7.56 16.72L7.14 16.25ZM8.42 15.53L8.99 15.78L8.38 17.15L7.81 16.9ZM8.69 15.72L9.31 15.72L9.31 17.22L8.69 17.22ZM9.01 15.78L9.58 15.53L10.19 16.9L9.62 17.15ZM9.32 15.71L9.74 15.25L10.86 16.25L10.44 16.72ZM8.45 15.75A0.75 0.75 0 1 1 6.95 15.75A0.75 0.75 0 1 1 8.45 15.75ZM8.87 16.21A0.75 0.75 0 1 1 7.37 16.21A0.75 0.75 0 1 1 8.87 16.21ZM9.44 16.47A0.75 0.75 0 1 1 7.94 16.47A0.75 0.75 0 1 1 9.44 16.47ZM10.06 16.47A0.75 0.75 0 1 1 8.56 16.47A0.75 0.75 0 1 1 10.06 16.47ZM10.63 16.21A0.75 0.75 0 1 1 9.13 16.21A0.75 0.75 0 1 1 10.63 16.21ZM11.05 15.75A0.75 0.75 0 1 1 9.55 15.75A0.75 0.75 0 1 1 11.05 15.75ZM3.15 11.75L2.95 12.28L1.55 11.76L1.74 11.23ZM2.94 11.72L3.16 12.24L1.79 12.84L1.56 12.33ZM2.76 11.84L3.28 12.06L2.72 13.44L2.2 13.23ZM3 12L15 12L15 13.5L3 13.5ZM14.72 12.05L15.24 11.84L15.8 13.23L15.28 13.45ZM14.84 12.24L15.06 11.72L16.44 12.33L16.21 12.84ZM15.05 12.28L14.85 11.75L16.26 11.24L16.45 11.76ZM15.01 12.01L14.68 11.67L15.76 10.63L16.1 10.98ZM14.66 11.64L14.33 11.27L15.46 10.28L15.78 10.65ZM14.3 11.23L13.98 10.82L15.18 9.91L15.49 10.32ZM13.94 10.76L13.65 10.29L14.93 9.5L15.22 9.97ZM13.61 10.21L13.35 9.66L14.71 9.02L14.97 9.57ZM13.32 9.58L13.1 8.94L14.52 8.46L14.74 9.1ZM13.08 8.86L12.91 8.1L14.38 7.78L14.54 8.54ZM12.9 8.02L12.79 7.13L14.28 6.95L14.39 7.85ZM12.79 7.07L12.75 6.03L14.25 5.97L14.29 7.02ZM12.75 6.06L12.69 5.32L14.19 5.2L14.25 5.94ZM12.71 5.44L12.53 4.72L13.98 4.35L14.17 5.08ZM12.57 4.84L12.27 4.16L13.64 3.56L13.94 4.24ZM12.33 4.27L11.92 3.65L13.18 2.83L13.59 3.45ZM12 3.74L11.5 3.2L12.6 2.18L13.1 2.73ZM11.59 3.28L11 2.82L11.92 1.64L12.51 2.1ZM11.1 2.89L10.45 2.54L11.16 1.22L11.82 1.57ZM10.56 2.59L9.86 2.35L10.35 0.93L11.05 1.17ZM9.98 2.38L9.25 2.26L9.5 0.78L10.23 0.9ZM9.37 2.27L8.63 2.27L8.63 0.77L9.37 0.77ZM8.75 2.26L8.02 2.38L7.77 0.9L8.5 0.78ZM8.14 2.35L7.44 2.59L6.95 1.17L7.65 0.93ZM7.55 2.54L6.9 2.89L6.18 1.57L6.84 1.22ZM7 2.82L6.41 3.28L5.49 2.1L6.08 1.64ZM6.5 3.2L6 3.74L4.9 2.73L5.4 2.18ZM6.08 3.65L5.67 4.27L4.41 3.45L4.82 2.83ZM5.73 4.16L5.43 4.84L4.06 4.24L4.36 3.56ZM5.47 4.72L5.29 5.44L3.83 5.08L4.02 4.35ZM5.31 5.32L5.25 6.06L3.75 5.94L3.81 5.2ZM5.25 6.03L5.21 7.07L3.71 7.02L3.75 5.97ZM5.21 7.13L5.1 8.02L3.61 7.85L3.72 6.95ZM5.09 8.1L4.92 8.86L3.46 8.54L3.62 7.78ZM4.9 8.94L4.68 9.58L3.26 9.1L3.48 8.46ZM4.65 9.66L4.39 10.21L3.03 9.57L3.29 9.02ZM4.35 10.29L4.06 10.76L2.78 9.97L3.07 9.5ZM4.02 10.82L3.7 11.23L2.51 10.32L2.82 9.91ZM3.67 11.27L3.34 11.64L2.22 10.65L2.55 10.28ZM3.32 11.66L2.99 12.01L1.9 10.98L2.24 10.63ZM3.2 11.49A0.75 0.75 0 1 1 1.7 11.49A0.75 0.75 0 1 1 3.2 11.49ZM3 12.02A0.75 0.75 0 1 1 1.5 12.02A0.75 0.75 0 1 1 3 12.02ZM3.23 12.54A0.75 0.75 0 1 1 1.73 12.54A0.75 0.75 0 1 1 3.23 12.54ZM3.75 12.75A0.75 0.75 0 1 1 2.25 12.75A0.75 0.75 0 1 1 3.75 12.75ZM15.75 12.75A0.75 0.75 0 1 1 14.25 12.75A0.75 0.75 0 1 1 15.75 12.75ZM16.27 12.54A0.75 0.75 0 1 1 14.77 12.54A0.75 0.75 0 1 1 16.27 12.54ZM16.5 12.02A0.75 0.75 0 1 1 15 12.02A0.75 0.75 0 1 1 16.5 12.02ZM16.3 11.5A0.75 0.75 0 1 1 14.8 11.5A0.75 0.75 0 1 1 16.3 11.5ZM15.97 11.15A0.75 0.75 0 1 1 14.47 11.15A0.75 0.75 0 1 1 15.97 11.15ZM15.64 10.78A0.75 0.75 0 1 1 14.14 10.78A0.75 0.75 0 1 1 15.64 10.78ZM15.33 10.36A0.75 0.75 0 1 1 13.83 10.36A0.75 0.75 0 1 1 15.33 10.36ZM15.04 9.89A0.75 0.75 0 1 1 13.54 9.89A0.75 0.75 0 1 1 15.04 9.89ZM14.78 9.34A0.75 0.75 0 1 1 13.28 9.34A0.75 0.75 0 1 1 14.78 9.34ZM14.56 8.7A0.75 0.75 0 1 1 13.06 8.7A0.75 0.75 0 1 1 14.56 8.7ZM14.39 7.94A0.75 0.75 0 1 1 12.89 7.94A0.75 0.75 0 1 1 14.39 7.94ZM14.29 7.04A0.75 0.75 0 1 1 12.79 7.04A0.75 0.75 0 1 1 14.29 7.04ZM14.25 6A0.75 0.75 0 1 1 12.75 6A0.75 0.75 0 1 1 14.25 6ZM14.19 5.26A0.75 0.75 0 1 1 12.69 5.26A0.75 0.75 0 1 1 14.19 5.26ZM14.01 4.54A0.75 0.75 0 1 1 12.51 4.54A0.75 0.75 0 1 1 14.01 4.54ZM13.71 3.86A0.75 0.75 0 1 1 12.21 3.86A0.75 0.75 0 1 1 13.71 3.86ZM13.3 3.24A0.75 0.75 0 1 1 11.8 3.24A0.75 0.75 0 1 1 13.3 3.24ZM12.8 2.69A0.75 0.75 0 1 1 11.3 2.69A0.75 0.75 0 1 1 12.8 2.69ZM12.21 2.23A0.75 0.75 0 1 1 10.71 2.23A0.75 0.75 0 1 1 12.21 2.23ZM11.56 1.88A0.75 0.75 0 1 1 10.06 1.88A0.75 0.75 0 1 1 11.56 1.88ZM10.85 1.64A0.75 0.75 0 1 1 9.35 1.64A0.75 0.75 0 1 1 10.85 1.64ZM10.12 1.52A0.75 0.75 0 1 1 8.62 1.52A0.75 0.75 0 1 1 10.12 1.52ZM9.38 1.52A0.75 0.75 0 1 1 7.88 1.52A0.75 0.75 0 1 1 9.38 1.52ZM8.65 1.64A0.75 0.75 0 1 1 7.15 1.64A0.75 0.75 0 1 1 8.65 1.64ZM7.94 1.88A0.75 0.75 0 1 1 6.44 1.88A0.75 0.75 0 1 1 7.94 1.88ZM7.29 2.23A0.75 0.75 0 1 1 5.79 2.23A0.75 0.75 0 1 1 7.29 2.23ZM6.7 2.69A0.75 0.75 0 1 1 5.2 2.69A0.75 0.75 0 1 1 6.7 2.69ZM6.2 3.24A0.75 0.75 0 1 1 4.7 3.24A0.75 0.75 0 1 1 6.2 3.24ZM5.79 3.86A0.75 0.75 0 1 1 4.29 3.86A0.75 0.75 0 1 1 5.79 3.86ZM5.49 4.54A0.75 0.75 0 1 1 3.99 4.54A0.75 0.75 0 1 1 5.49 4.54ZM5.31 5.26A0.75 0.75 0 1 1 3.81 5.26A0.75 0.75 0 1 1 5.31 5.26ZM5.25 6A0.75 0.75 0 1 1 3.75 6A0.75 0.75 0 1 1 5.25 6ZM5.21 7.04A0.75 0.75 0 1 1 3.71 7.04A0.75 0.75 0 1 1 5.21 7.04ZM5.11 7.94A0.75 0.75 0 1 1 3.61 7.94A0.75 0.75 0 1 1 5.11 7.94ZM4.94 8.7A0.75 0.75 0 1 1 3.44 8.7A0.75 0.75 0 1 1 4.94 8.7ZM4.72 9.34A0.75 0.75 0 1 1 3.22 9.34A0.75 0.75 0 1 1 4.72 9.34ZM4.46 9.89A0.75 0.75 0 1 1 2.96 9.89A0.75 0.75 0 1 1 4.46 9.89ZM4.17 10.36A0.75 0.75 0 1 1 2.67 10.36A0.75 0.75 0 1 1 4.17 10.36ZM3.86 10.78A0.75 0.75 0 1 1 2.36 10.78A0.75 0.75 0 1 1 3.86 10.78ZM3.53 11.15A0.75 0.75 0 1 1 2.03 11.15A0.75 0.75 0 1 1 3.53 11.15ZM3.2 11.49A0.75 0.75 0 1 1 1.7 11.49A0.75 0.75 0 1 1 3.2 11.49Z"); }
.glyph.glyph-alert-circle-18 { width: 18px; height: 18px; clip-path: path("M17.25 9A8.25 8.25 0 1 1 0.75 9A8.25 8.25 0 1 1 17.25 9ZM15.75 9A6.75 6.75 0 1 0 2.25 9A6.75 6.75 0 1 0 15.75 9ZM9.75 6L9.75 9L8.25 9L8.25 6ZM9.75 6A0.75 0.75 0 1 1 8.25 6A0.75 0.75 0 1 1 9.75 6ZM9.75 9A0.75 0.75 0 1 1 8.25 9A0.75 0.75 0 1 1 9.75 9ZM9.75 12A0.75 0.75 0 1 1 8.25 12A0.75 0.75 0 1 1 9.75 12Z"); }

/* FE9-5b (Issue 2274, design v9, S-409): the pieces the rebuilt task, team,
   channel and route table pages share, staff pages only like the rest of
   this section. A page card (white, radius 12, a hairline, e1) with its
   head, body and foot, dividers inside and never a second box; location
   tabs inside a card (ink, a 2px ink bar, 48px); status badges with a live
   dot or an icon; and the three-dot glyph of row menus. */
body.admin-console .s-card { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e1); }
body.admin-console .s-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 20px 20px 12px; }
body.admin-console .s-card-head > div:first-child { min-width: 0; }
body.admin-console .s-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
body.admin-console .s-card-desc { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
body.admin-console .s-card-body { padding: 0 20px 20px; }
body.admin-console .s-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 52px; padding: 8px 20px; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 13px; line-height: 20px; }
body.admin-console .s-tabs { display: flex; gap: 24px; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
body.admin-console .s-tab { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; height: 48px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-2); font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; }
body.admin-console .s-tab:hover { border: 0; background: transparent; color: var(--text-1); text-decoration: none; }
body.admin-console .s-tab:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) { color: var(--text-1); }
body.admin-console .s-tab:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"])::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--gray-900); }
body.admin-console .s-tab:disabled, body.admin-console .s-tab:disabled:hover { border: 0; background: transparent; color: var(--text-2); cursor: default; }
body.admin-console .s-tab[aria-pressed="true"]:disabled { color: var(--text-1); }
body.admin-console .s-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
body.admin-console .badge > .glyph { flex: none; }
body.admin-console .badge > .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.admin-console .badge-neutral > .dot { background: var(--neutral-dot); }
body.admin-console .badge-success > .dot { background: var(--success-dot); }
body.admin-console .badge-warning > .dot { background: var(--warning-dot); }
body.admin-console .badge-danger > .dot { background: var(--danger-solid); }
body.admin-console .badge-info > .dot { background: var(--info-dot); }
body.admin-console main span.badge:has(> .dot, > .glyph) { height: 22px; min-height: 22px; padding: 0 8px; font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.glyph.glyph-dots-16 { width: 16px; height: 16px; clip-path: path("M4.5 8A1.25 1.25 0 1 1 2 8A1.25 1.25 0 1 1 4.5 8ZM9.25 8A1.25 1.25 0 1 1 6.75 8A1.25 1.25 0 1 1 9.25 8ZM14 8A1.25 1.25 0 1 1 11.5 8A1.25 1.25 0 1 1 14 8Z"); }
body.admin-console .s-about { margin: 0; padding: 0 4px; color: var(--text-3); font-size: 13px; line-height: 20px; }
body.admin-console .s-about > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text-2); font: 500 13px/20px var(--font-sans); list-style: none; cursor: pointer; }
body.admin-console .s-about > summary::-webkit-details-marker { display: none; }
body.admin-console .s-about > summary::before { content: ""; width: 8px; height: 10px; background: currentColor; clip-path: path("M2.99 1.01L6.49 4.51A0.7 0.7 0 0 1 6.49 5.49L2.99 8.99A0.7 0.7 0 0 1 2.01 8.99A0.7 0.7 0 0 1 2.01 8.01L5.01 5L2.01 1.99A0.7 0.7 0 0 1 2.99 1.01Z"); transition: transform var(--t-hover) var(--ease); }
body.admin-console .s-about[open] > summary::before { transform: rotate(90deg); }
body.admin-console .s-about > p { max-width: 100ch; margin: 4px 0 0; text-wrap: pretty; }

/* FE9-SEL-0 (Issue 2267, owner S-413, design v9): the shared controls of
   shared/controls.js and admin/capability-picker.js, for the values the
   system knows and the reader chooses instead of typing: the select with a
   search field and pasted IDs, the filter chip, the time presets with the
   calendar of a custom range, the number stepper with its slider, the page
   size and the capability picker. The trigger is the v9 select and the list
   the v9 menu (32px items, the check on the chosen one, a search field
   above eight items). On phones a menu keeps that look at the foot of the
   screen over a transparent catcher, and every control keeps its board
   height and answers taps over 44px through a transparent ::before. Every
   selector here starts with ctl- or cpk-, or adds one to a v9 class, so
   another unit's section stacks beside this one. */
.ctl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctl-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ctl-label { color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.ctl-label-meta { flex: none; color: var(--text-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ctl-help { margin: 0; color: var(--text-3); font-size: 12px; line-height: 16px; text-wrap: pretty; }
.ctl-help.is-wrap { font-size: 13px; line-height: 20px; }
.field-error.ctl-error { display: flex; align-items: flex-start; gap: 4px; margin: 0; color: var(--danger-fg); font-size: 12px; line-height: 16px; text-wrap: pretty; }
.ctl-error > .glyph.ctl-alert { margin-top: 1px; }
.glyph.ctl-alert { width: 14px; height: 14px; clip-path: path("M12.63 7A5.63 5.63 0 0 1 1.37 7A5.63 5.63 0 0 1 12.63 7ZM11.51 7A4.51 4.51 0 0 0 2.49 7A4.51 4.51 0 0 0 11.51 7ZM7.56 4.67L7.56 7A0.56 0.56 0 0 1 6.44 7L6.44 4.67A0.56 0.56 0 0 1 7.56 4.67ZM7.56 9.33A0.56 0.56 0 1 1 6.44 9.33A0.56 0.56 0 1 1 7.56 9.33Z"); }
.ctl-select, .ctl-chip, .ctl-range { position: relative; min-width: 0; }
.ctl-chip, .ctl-range { display: inline-flex; max-width: 100%; vertical-align: middle; }
.select.ctl-trigger { position: relative; width: 100%; padding-right: 10px; }
.ctl-trigger > .ctl-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ctl-value.is-placeholder { color: var(--text-3); }
.ctl-value.mono { font-family: var(--font-mono); font-size: 13px; }
.ctl-value-hint { flex: none; max-width: 50%; overflow: hidden; color: var(--text-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.select.ctl-trigger[aria-disabled="true"] > .ctl-value-hint { color: var(--gray-400); }
.glyph.ctl-chevron { width: 16px; height: 16px; color: var(--text-3); clip-path: path("M4.53 5.47L8 8.94L11.47 5.47A0.75 0.75 0 0 1 12.53 5.47A0.75 0.75 0 0 1 12.53 6.53L8.53 10.53A0.75 0.75 0 0 1 7.47 10.53L3.47 6.53A0.75 0.75 0 0 1 3.47 5.47A0.75 0.75 0 0 1 4.53 5.47Z"); transition: transform var(--t-in) var(--ease); }
[aria-expanded="true"] > .glyph.ctl-chevron { transform: rotate(180deg); }
.glyph.ctl-chevron.is-left { transform: rotate(90deg); }
.glyph.ctl-chevron.is-right { transform: rotate(-90deg); }
.glyph.ctl-check { width: 16px; height: 16px; clip-path: path("M3.53 7.72L6.25 10.44L12.47 4.22A0.75 0.75 0 0 1 13.53 4.22A0.75 0.75 0 0 1 13.53 5.28L6.78 12.03A0.75 0.75 0 0 1 5.72 12.03L2.47 8.78A0.75 0.75 0 0 1 2.47 7.72A0.75 0.75 0 0 1 3.53 7.72Z"); }
.glyph.ctl-minus { width: 14px; height: 14px; clip-path: path("M3 6.25L11 6.25A0.75 0.75 0 0 1 11.75 7A0.75 0.75 0 0 1 11 7.75L3 7.75A0.75 0.75 0 0 1 2.25 7A0.75 0.75 0 0 1 3 6.25Z"); }
.glyph.ctl-calendar { width: 16px; height: 16px; clip-path: path("M3.5 2.25L12.5 2.25A2.25 2.25 0 0 1 14.75 4.5L14.75 12.5A2.25 2.25 0 0 1 12.5 14.75L3.5 14.75A2.25 2.25 0 0 1 1.25 12.5L1.25 4.5A2.25 2.25 0 0 1 3.5 2.25ZM3.5 3.75A0.75 0.75 0 0 0 2.75 4.5L2.75 12.5A0.75 0.75 0 0 0 3.5 13.25L12.5 13.25A0.75 0.75 0 0 0 13.25 12.5L13.25 4.5A0.75 0.75 0 0 0 12.5 3.75ZM4.25 1.5A0.75 0.75 0 0 1 5.75 1.5L5.75 4.5A0.75 0.75 0 0 1 4.25 4.5ZM10.25 1.5A0.75 0.75 0 0 1 11.75 1.5L11.75 4.5A0.75 0.75 0 0 1 10.25 4.5ZM2 6L14 6L14 7.5L2 7.5Z"); }

/* The menu: below its trigger and at least as wide (a select's menu is as
   wide as the select), aligned to its end or opened above it when the
   window has no room (is-end, is-up). A row that cannot be chosen keeps
   its reason in text-3; without a count, the reason sits flush right. */
.ctl-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-menu); width: max-content; min-width: max(100%, 200px); max-width: min(400px, calc(100vw - 32px)); }
.ctl-select > .ctl-menu { width: 100%; max-width: none; }
.ctl-menu.is-end { right: 0; left: auto; }
.ctl-menu.is-up { top: auto; bottom: calc(100% + 4px); }
.ctl-scrim { display: none; }
.control.ctl-search { flex: none; margin-bottom: 4px; }
.ctl-search > .glyph { color: var(--text-3); }
.ctl-list { display: flex; flex-direction: column; max-height: 296px; overflow-y: auto; outline: none; }
.ctl-list:focus-visible { border-radius: var(--r-6); box-shadow: inset 0 0 0 2px var(--focus); }
.ctl-option { position: relative; flex: none; gap: 12px; }
.ctl-option.is-active, .ctl-option:hover { background: var(--gray-50); }
.ctl-option[aria-disabled="true"], .ctl-option[aria-disabled="true"]:hover, .ctl-option[aria-disabled="true"].is-active { background: transparent; color: var(--gray-400); cursor: not-allowed; }
.ctl-option-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.ctl-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-option-label.mono, .ctl-option-label > code { font-family: var(--font-mono); font-size: 13px; }
.ctl-option-detail { overflow: hidden; color: var(--text-3); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.menu-item.ctl-option.has-detail { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.menu-item.ctl-option-pasted { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; white-space: normal; }
.ctl-option-pasted .ctl-option-label { white-space: normal; overflow-wrap: anywhere; }
.ctl-option > .menu-meta { flex: none; margin-left: 0; padding-left: 0; }
.ctl-option > .glyph.ctl-check { flex: none; color: var(--text-1); visibility: hidden; }
.ctl-option:is([aria-selected="true"], [aria-checked="true"]) > .glyph.ctl-check { visibility: visible; }
.ctl-option.is-flush > .glyph.ctl-check { display: none; }
.ctl-option > .glyph.ctl-calendar { flex: none; color: var(--gray-700); }
.ctl-group { display: flex; flex-direction: column; }
.ctl-list > * + .ctl-group, .ctl-group + * { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.ctl-menu-status { margin: 0; padding: 6px 10px; color: var(--text-3); font-size: 13px; line-height: 20px; text-wrap: pretty; }
.ctl-menu-status.is-error { color: var(--danger-fg); }
.btn.btn-link:is(.ctl-retry, .cpk-retry) { font-size: inherit; line-height: inherit; vertical-align: baseline; }

/* The filter chip: dashed with a plus while empty; set, it is violet and
   carries its clear button inside its right edge. */
.ctl-chip > .chip { max-width: 100%; }
.ctl-chip > .chip > .ctl-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctl-chip.is-on > .chip { padding-right: 32px; }
.ctl-chip > .chip[aria-disabled="true"] { border-color: var(--gray-200); background: transparent; color: var(--gray-400); cursor: not-allowed; }
.ctl-chip-clear { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-4); background: transparent; box-shadow: none; color: var(--accent-fg); cursor: pointer; transform: translateY(-50%); }
.ctl-chip-clear:hover { border-color: transparent; background: var(--violet-100); color: var(--accent-fg); }
.ctl-chip-clear[aria-disabled="true"], .ctl-chip-clear[aria-disabled="true"]:hover { background: transparent; color: var(--gray-400); cursor: not-allowed; }

/* The time range: a secondary button with a calendar, its menu of presets
   (the start of each at the right) and, under a line, the custom range;
   chosen, its row gives way to the calendar of board AdminTasks 时间范围: a
   month from Monday, the start and end days in ink and the days between in
   gray-100, days after today in gray-400; the start and the end as a day
   and a time on the half hour; the zone's line; 取消 and 应用. */
.ctl-range-trigger > .ctl-value { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-range-trigger > .glyph.ctl-calendar { color: var(--gray-700); }
.ctl-menu.ctl-range-menu { width: 320px; min-width: 0; }
.ctl-range-presets { display: flex; flex-direction: column; }
.ctl-cal { display: flex; flex-direction: column; padding: 4px 10px 6px; }
.ctl-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; margin-bottom: 4px; }
.ctl-cal-title { margin: 0; color: var(--text-1); font: 500 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.ctl-cal-nav { display: flex; gap: 4px; }
.btn.ctl-cal-step > .glyph.ctl-chevron { color: inherit; }
.ctl-cal .ctl-cal-grid { display: table; width: 100%; margin: 0 0 12px; overflow: visible; border-collapse: collapse; border-spacing: 0; background: transparent; table-layout: fixed; }
.ctl-cal .ctl-cal-grid th { position: static; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-3); font: 400 12px/16px var(--font-sans); text-align: center; white-space: nowrap; }
.ctl-cal .ctl-cal-grid td { height: 34px; padding: 0; border: 0; background: transparent; text-align: center; vertical-align: middle; }
.ctl-day { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--text-1); font: 400 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--t-hover) var(--ease); }
.ctl-day:hover, .ctl-day:active { border-color: transparent; background: var(--gray-50); color: var(--text-1); }
.ctl-day.is-today { font-weight: 600; }
.ctl-day.is-between, .ctl-day.is-between:hover, .ctl-day.is-between:active { border-radius: 0; background: var(--gray-100); }
.ctl-day.is-edge, .ctl-day.is-edge:hover, .ctl-day.is-edge:active { background: var(--gray-900); color: #fff; font-weight: 500; }
.ctl-day[aria-disabled="true"], .ctl-day[aria-disabled="true"]:hover, .ctl-day[aria-disabled="true"]:active { background: transparent; color: var(--gray-400); font-weight: 400; cursor: not-allowed; }
.ctl-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ctl-cal-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 32px; margin-bottom: 12px; }
.ctl-cal-label { color: var(--text-2); font-size: 13px; line-height: 20px; }
.ctl-cal-day { min-width: 40px; color: var(--text-2); font: 400 13px/20px var(--font-mono); white-space: nowrap; }
.ctl-cal-day.is-open { font-family: var(--font-sans); }
.ctl-cal-help { margin-bottom: 12px; }
.ctl-cal > .ctl-error { margin: -4px 0 12px; }
.ctl-range-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* The stepper: minus, the number with its unit and plus in one field; in a
   table row it is 32 high with 24px buttons and a 500 value, violet once
   edited (board AdminRouteTables). A slider fills up to its thumb (a
   ctl-fill class per percent) beside a 76px number field (board
   Playground). A number outside the range marks the field (the danger
   border and ring) and says the range under it. */
.ctl-stepper { display: flex; align-items: center; gap: 16px; min-width: 0; }
.control.ctl-stepper-box { position: relative; flex: none; width: auto; gap: 0; padding: 2px; }
.ctl-step { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--gray-700); cursor: pointer; }
.ctl-step:hover { border-color: transparent; background: var(--wash-1); color: var(--text-1); }
.ctl-step:active { background: var(--wash-2); }
.ctl-step:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ctl-step[aria-disabled="true"], .ctl-step[aria-disabled="true"]:hover, .ctl-step[aria-disabled="true"]:active { background: transparent; color: var(--gray-300); cursor: not-allowed; }
.control .ctl-step-input { flex: none; width: 48px; min-width: 0; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.ctl-step-input::-webkit-outer-spin-button, .ctl-step-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.ctl-stepper-box > .affix { padding-right: 4px; font-size: 13px; }
.control.ctl-stepper-box.is-compact { height: 32px; border-radius: var(--r-6); }
.ctl-stepper-box.is-compact > .ctl-step { width: 24px; height: 24px; border-radius: var(--r-4); }
.control.is-compact .ctl-step-input { width: 32px; font-weight: 500; }
.control.ctl-stepper-box.is-number { width: 76px; gap: 6px; padding: 0 8px; }
.control.is-number .ctl-step-input { flex: 1 1 auto; width: 0; text-align: right; }
.ctl-stepper-box.is-number > .affix { padding-right: 0; }
.control.ctl-stepper-box.is-changed { border-color: var(--accent-border); background: var(--accent-tint); }
.control.ctl-stepper-box.is-changed:hover { border-color: var(--violet-300); }
.control.ctl-stepper-box.is-changed:focus-within { border-color: var(--violet-600); box-shadow: var(--ring-input); }
.control.is-changed .ctl-step-input { color: var(--accent-fg); }
.control.ctl-stepper-box[aria-invalid="true"], .control.ctl-stepper-box[aria-invalid="true"]:hover, .control.ctl-stepper-box[aria-invalid="true"]:focus-within { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
.control.ctl-stepper-box.is-disabled .ctl-step-input { color: var(--gray-400); }
.ctl-slider { flex: 1 1 auto; width: auto; min-width: 96px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; --ctl-fill: 0; }
.ctl-slider:focus, .ctl-slider:focus-visible { outline: none; box-shadow: none; }
.ctl-slider:disabled { cursor: not-allowed; }
.ctl-slider::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-full); background: linear-gradient(var(--violet-600), var(--violet-600)) 0 0 / calc(8px + var(--ctl-fill) * (100% - 16px)) 100% no-repeat, var(--gray-150); }
.ctl-slider::-moz-range-track { height: 4px; border-radius: var(--r-full); background: var(--gray-150); }
.ctl-slider::-moz-range-progress { height: 4px; border-radius: var(--r-full); background: var(--violet-600); }
.ctl-slider::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 1px solid var(--gray-300); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 22, 31, .24); -webkit-appearance: none; appearance: none; }
.ctl-slider::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--gray-300); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 22, 31, .24); }
.ctl-slider:focus-visible::-webkit-slider-thumb { border-color: var(--violet-600); box-shadow: var(--ring-input); }
.ctl-slider:focus-visible::-moz-range-thumb { border-color: var(--violet-600); box-shadow: var(--ring-input); }
.ctl-slider:disabled::-webkit-slider-runnable-track { background: var(--gray-150); }
.ctl-slider:disabled::-moz-range-progress { background: var(--gray-300); }
.ctl-fill-0 { --ctl-fill: 0; } .ctl-fill-1 { --ctl-fill: .01; } .ctl-fill-2 { --ctl-fill: .02; } .ctl-fill-3 { --ctl-fill: .03; } .ctl-fill-4 { --ctl-fill: .04; } .ctl-fill-5 { --ctl-fill: .05; } .ctl-fill-6 { --ctl-fill: .06; } .ctl-fill-7 { --ctl-fill: .07; } .ctl-fill-8 { --ctl-fill: .08; } .ctl-fill-9 { --ctl-fill: .09; }
.ctl-fill-10 { --ctl-fill: .10; } .ctl-fill-11 { --ctl-fill: .11; } .ctl-fill-12 { --ctl-fill: .12; } .ctl-fill-13 { --ctl-fill: .13; } .ctl-fill-14 { --ctl-fill: .14; } .ctl-fill-15 { --ctl-fill: .15; } .ctl-fill-16 { --ctl-fill: .16; } .ctl-fill-17 { --ctl-fill: .17; } .ctl-fill-18 { --ctl-fill: .18; } .ctl-fill-19 { --ctl-fill: .19; }
.ctl-fill-20 { --ctl-fill: .20; } .ctl-fill-21 { --ctl-fill: .21; } .ctl-fill-22 { --ctl-fill: .22; } .ctl-fill-23 { --ctl-fill: .23; } .ctl-fill-24 { --ctl-fill: .24; } .ctl-fill-25 { --ctl-fill: .25; } .ctl-fill-26 { --ctl-fill: .26; } .ctl-fill-27 { --ctl-fill: .27; } .ctl-fill-28 { --ctl-fill: .28; } .ctl-fill-29 { --ctl-fill: .29; }
.ctl-fill-30 { --ctl-fill: .30; } .ctl-fill-31 { --ctl-fill: .31; } .ctl-fill-32 { --ctl-fill: .32; } .ctl-fill-33 { --ctl-fill: .33; } .ctl-fill-34 { --ctl-fill: .34; } .ctl-fill-35 { --ctl-fill: .35; } .ctl-fill-36 { --ctl-fill: .36; } .ctl-fill-37 { --ctl-fill: .37; } .ctl-fill-38 { --ctl-fill: .38; } .ctl-fill-39 { --ctl-fill: .39; }
.ctl-fill-40 { --ctl-fill: .40; } .ctl-fill-41 { --ctl-fill: .41; } .ctl-fill-42 { --ctl-fill: .42; } .ctl-fill-43 { --ctl-fill: .43; } .ctl-fill-44 { --ctl-fill: .44; } .ctl-fill-45 { --ctl-fill: .45; } .ctl-fill-46 { --ctl-fill: .46; } .ctl-fill-47 { --ctl-fill: .47; } .ctl-fill-48 { --ctl-fill: .48; } .ctl-fill-49 { --ctl-fill: .49; }
.ctl-fill-50 { --ctl-fill: .50; } .ctl-fill-51 { --ctl-fill: .51; } .ctl-fill-52 { --ctl-fill: .52; } .ctl-fill-53 { --ctl-fill: .53; } .ctl-fill-54 { --ctl-fill: .54; } .ctl-fill-55 { --ctl-fill: .55; } .ctl-fill-56 { --ctl-fill: .56; } .ctl-fill-57 { --ctl-fill: .57; } .ctl-fill-58 { --ctl-fill: .58; } .ctl-fill-59 { --ctl-fill: .59; }
.ctl-fill-60 { --ctl-fill: .60; } .ctl-fill-61 { --ctl-fill: .61; } .ctl-fill-62 { --ctl-fill: .62; } .ctl-fill-63 { --ctl-fill: .63; } .ctl-fill-64 { --ctl-fill: .64; } .ctl-fill-65 { --ctl-fill: .65; } .ctl-fill-66 { --ctl-fill: .66; } .ctl-fill-67 { --ctl-fill: .67; } .ctl-fill-68 { --ctl-fill: .68; } .ctl-fill-69 { --ctl-fill: .69; }
.ctl-fill-70 { --ctl-fill: .70; } .ctl-fill-71 { --ctl-fill: .71; } .ctl-fill-72 { --ctl-fill: .72; } .ctl-fill-73 { --ctl-fill: .73; } .ctl-fill-74 { --ctl-fill: .74; } .ctl-fill-75 { --ctl-fill: .75; } .ctl-fill-76 { --ctl-fill: .76; } .ctl-fill-77 { --ctl-fill: .77; } .ctl-fill-78 { --ctl-fill: .78; } .ctl-fill-79 { --ctl-fill: .79; }
.ctl-fill-80 { --ctl-fill: .80; } .ctl-fill-81 { --ctl-fill: .81; } .ctl-fill-82 { --ctl-fill: .82; } .ctl-fill-83 { --ctl-fill: .83; } .ctl-fill-84 { --ctl-fill: .84; } .ctl-fill-85 { --ctl-fill: .85; } .ctl-fill-86 { --ctl-fill: .86; } .ctl-fill-87 { --ctl-fill: .87; } .ctl-fill-88 { --ctl-fill: .88; } .ctl-fill-89 { --ctl-fill: .89; }
.ctl-fill-90 { --ctl-fill: .90; } .ctl-fill-91 { --ctl-fill: .91; } .ctl-fill-92 { --ctl-fill: .92; } .ctl-fill-93 { --ctl-fill: .93; } .ctl-fill-94 { --ctl-fill: .94; } .ctl-fill-95 { --ctl-fill: .95; } .ctl-fill-96 { --ctl-fill: .96; } .ctl-fill-97 { --ctl-fill: .97; } .ctl-fill-98 { --ctl-fill: .98; } .ctl-fill-99 { --ctl-fill: .99; }
.ctl-fill-100 { --ctl-fill: 1; }

/* The switch row, the page size, the segmented track and the capability
   picker: a page's own lead (the team select) first in the row, then the
   model and the resolution as segmented controls (the model a select below
   768), the ratio as a select, then the declared capabilities in groups of
   checkboxes, the omni reference type as one select among the controls. A
   segmented track stays on one line and fades at its right edge while it
   overflows (is-overflow, until is-end). */
.ctl-switch.is-spread { display: flex; justify-content: space-between; width: 100%; }
.ctl-switch-hint { color: var(--text-3); font-size: 12px; line-height: 16px; }
.ctl-switch.is-disabled { cursor: not-allowed; }
.ctl-switch.is-disabled > .ctl-switch-text { color: var(--text-off); }
.ctl-per-page { position: relative; display: inline-flex; align-items: center; }
.ctl-per-page::after { content: ""; position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; margin-top: -8px; background: var(--text-3); clip-path: path("M4.53 5.47L8 8.94L11.47 5.47A0.75 0.75 0 0 1 12.53 5.47A0.75 0.75 0 0 1 12.53 6.53L8.53 10.53A0.75 0.75 0 0 1 7.47 10.53L3.47 6.53A0.75 0.75 0 0 1 3.47 5.47A0.75 0.75 0 0 1 4.53 5.47Z"); pointer-events: none; }
.ctl-per-page:has(> select:disabled)::after { background: var(--gray-400); }
select.input.ctl-per-page-select { width: auto; min-width: 0; padding-right: 32px; background-image: none; cursor: pointer; }
.seg.ctl-seg.is-overflow:not(.is-end) { -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
.cpk { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cpk-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.cpk-part { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cpk-part.cpk-lead { flex: 0 1 280px; min-width: 200px; }
.cpk-part.cpk-ratio { flex: 0 1 144px; min-width: 120px; }
.cpk-caps { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.cpk-caps > legend { margin: 0 0 8px; padding: 0; }
.cpk-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px 24px; }
.cpk-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpk-group-title { margin: 0 0 2px; color: var(--text-3); font: 500 12px/16px var(--font-sans); }
.cpk-cap { min-height: 28px; }
.cpk-omni { margin-top: 6px; }
.cpk-note { margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
.cpk-note.is-warning { color: var(--warning-fg); }
.cpk-note.is-error { color: var(--danger-fg); }
/* The older 44px minimum of customer buttons and selects on phones gives
   way to the board heights; the hit areas below take its place. */
.customer-console :is(.select.ctl-trigger, .ctl-chip > .chip, .ctl-chip-clear, .menu-item.ctl-option, .ctl-step, .ctl-day, .ctl-seg > .seg-item, select.ctl-per-page-select) { min-height: 0; }
@media (max-width: 767px) {
  .ctl-menu, .ctl-select > .ctl-menu, .ctl-menu.is-end, .ctl-menu.is-up, .ctl-menu.ctl-range-menu { position: fixed; top: auto; right: 8px; bottom: 8px; left: 8px; z-index: calc(var(--z-menu) + 1); width: auto; min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto; }
  .ctl-scrim { position: fixed; inset: 0; z-index: var(--z-menu); display: block; background: transparent; }
  .ctl-list { max-height: none; }
  .select.ctl-trigger::before { content: ""; position: absolute; inset: -4px 0; }
  .select.input-sm.ctl-trigger::before { inset: -2px 0; }
  .ctl-cal .select.input-sm.ctl-trigger { height: 32px; border-radius: var(--r-6); }
  .ctl-cal .select.input-sm.ctl-trigger::before { inset: -6px 0; }
  .ctl-chip > .chip::before { content: ""; position: absolute; inset: -4px 0; }
  .ctl-chip-clear::before { content: ""; position: absolute; inset: -11px; }
  .ctl-step::before { content: ""; position: absolute; inset: -7px 0; }
  .ctl-stepper-box.is-compact > .ctl-step::before { inset: -10px 0; }
  .ctl-slider { height: 44px; }
  .ctl-cal > .ctl-range-actions { position: sticky; bottom: -6px; margin: 0 -16px -6px; padding: 8px 16px 12px; border-top: 1px solid var(--line-soft); background: var(--gray-0); }
  .ctl-range-trigger > .ctl-value { max-width: 180px; }
  .cpk-row { flex-direction: column; align-items: stretch; }
  .cpk-part, .cpk-part.cpk-lead, .cpk-part.cpk-ratio { flex: none; min-width: 0; }
  .cpk-groups { grid-template-columns: minmax(0, 1fr); }
  .cpk-cap { min-height: 44px; }
}