/* INVITE Customer Hub: INVITE's brand as the Managed Services Portal's customer pages draw it (portal.css):
   Montserrat throughout, INVITE Orange on Rack Black and Fan Grey. Light and dark: the header's button sets
   data-theme on <html> (static/hub.js); without it, the system's choice.
   Three layers that never blend: the page (--bg), what sits on it (--surface: cards, the sidebar, the header) and
   what sits inside that (--surface-2). Colour is kept for meaning: orange for INVITE, where you are and the main
   action; green on, amber waiting, red a problem; and a hue per staff section (--hue-*), on its icons only. */
:root {
  color-scheme: light;
  --bg: #ebe9e5; --surface: #ffffff; --surface-2: #f5f4f1; --line: #e0ddd7; --line-strong: #c9c5be;
  --ink: #262a29; --ink-2: #464a49; --muted: #67696d;
  --accent: #f38520; --accent-ink: #ffffff; --accent-soft: #fdeedd; --accent-text: #a8520a;
  --good: #3f7f27; --good-soft: #e3f0d6; --bad: #b5382a; --bad-soft: #fbe4df; --warn: #8a5c00; --warn-soft: #fbefcf; --warn-dot: #dd9f00;
  --full-text: #3a7422; --part-text: #9c4c07;
  --hue-customers: #3f7f27; --hue-apps: #d0650c; --hue-integrations: #8b4f9f; --hue-hub: #5d6064;
  --shadow: 0 10px 30px rgba(38, 42, 41, .12);
  --shadow-sm: 0 1px 2px rgba(38, 42, 41, .06), 0 2px 8px rgba(38, 42, 41, .04);
  --lift: 0 4px 12px rgba(38, 42, 41, .12); --ease: cubic-bezier(.2, .7, .2, 1);
  --r: 10px; --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: var(--font); --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0f11; --surface: #1b1d20; --surface-2: #25282c; --line: #2f3237; --line-strong: #474b51;
    --ink: #efeff0; --ink-2: #cacbce; --muted: #9b9ca1;
    --accent-soft: #3b2814; --accent-text: #f7a45c;
    --good: #a3d45c; --good-soft: #213019; --bad: #f2887a; --bad-soft: #3b201c; --warn: #f0c35e; --warn-soft: #352b12; --warn-dot: #e8b23c;
    --full-text: #a3d45c; --part-text: #f7a45c;
    --hue-customers: #9fd060; --hue-apps: #f7a45c; --hue-integrations: #c99bdb; --hue-hub: #a9abaf;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5); --shadow-sm: none; --lift: 0 4px 14px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f11; --surface: #1b1d20; --surface-2: #25282c; --line: #2f3237; --line-strong: #474b51;
  --ink: #efeff0; --ink-2: #cacbce; --muted: #9b9ca1;
  --accent-soft: #3b2814; --accent-text: #f7a45c;
  --good: #a3d45c; --good-soft: #213019; --bad: #f2887a; --bad-soft: #3b201c; --warn: #f0c35e; --warn-soft: #352b12; --warn-dot: #e8b23c;
  --full-text: #a3d45c; --part-text: #f7a45c;
  --hue-customers: #9fd060; --hue-apps: #f7a45c; --hue-integrations: #c99bdb; --hue-hub: #a9abaf;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --shadow-sm: none; --lift: 0 4px 14px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Montserrat at 500 and smoothed, as the portal: at 400 it draws thin and grainy */
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 14.5px/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: none; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.015em; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; margin-top: 28px; }
h3 { font-size: 15px; font-weight: 700; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* header: brand, the page links, then the theme button and the account menu */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; min-height: 60px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .logo { width: 158px; }
.brand .rule { width: 1px; height: 30px; background: var(--line); }
/* INVITE's logo (logo.html): its grey wordmark on light backgrounds, white on dark, so it never fades in */
.logo { display: block; flex: none; line-height: 0; }
.logo img { display: block; width: 100%; height: auto; }
.logo .on-dark { display: none; }
:root[data-theme="dark"] .logo .on-light { display: none; }
:root[data-theme="dark"] .logo .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .on-light { display: none; }
  :root:not([data-theme="light"]) .logo .on-dark { display: block; }
}
.brand .name { font-family: var(--display); font-weight: 700; font-size: 15px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.nav a .i { width: 16px; height: 16px; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.on { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.nav a.on .i { color: var(--accent); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tools form { margin: 0; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn[hidden] { display: none; }
/* the theme button shows where it goes: a moon in light, a sun in dark */
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}

details.menu { position: relative; }
details.menu > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink-2); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { background: var(--surface-2); }
details.menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 13px var(--display); flex: none; }
.who { display: grid; line-height: 1.25; max-width: 200px; }
.who strong { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.menu .i-chevron { width: 16px; height: 16px; transition: transform .15s; }
details.menu[open] .i-chevron { transform: rotate(180deg); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 290px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 30; }
.menu-pop form { margin: 0; }
.menu-head { display: grid; gap: 2px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-wrap: anywhere; }
.menu-head > span:not(.tag) { font-size: 13px; color: var(--muted); }
.menu-head .tag { justify-self: start; margin-top: 6px; }
.menu-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item .i { color: var(--muted); }
.menu-item:hover { background: var(--surface-2); }
.menu-item[hidden] { display: none; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }

.main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 16px 40px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; box-shadow: var(--shadow-sm); }
.card.narrow { max-width: 440px; margin: 40px auto; }
.card > h2:first-child, .card-head h2 { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin-bottom: 0; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.backup-card { display: flex; flex-direction: column; }
.backup-card > :last-child { margin-top: auto; padding-top: 8px; }
.backup-card .card-head .tag { margin-left: auto; }
.backup-card p { margin: 8px 0 0; }
.card-head.spread { justify-content: space-between; flex-wrap: wrap; }
.card-head form { margin: 0; }
.chip-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.lede { color: var(--ink-2); margin: 0 0 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.brand-case { text-transform: none; }
.api-output { white-space: pre-wrap; overflow-wrap: anywhere; font: 500 13px/1.65 var(--mono); padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
/* the way back up: a link to the page above, orange, with a chevron pointing back */
.eyebrow a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; }
.eyebrow a::before { content: ""; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.eyebrow a:hover { text-decoration: underline; }
.note { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
/* status, the same everywhere: green on, amber waiting or needs a look, red a problem, outlined nothing */
.tag.on, .tag.ok { background: var(--good-soft); color: var(--full-text); box-shadow: none; }
.tag.warn { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.tag.bad { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.tag.off { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.tag.staff { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
/* how much access gives, at a glance: green the most, orange some, faded nothing. A profile is outlined, with
   the shield of the Access page */
.tag.full { background: var(--good-soft); color: var(--full-text); box-shadow: none; }
.tag.part { background: var(--accent-soft); color: var(--part-text); box-shadow: none; }
.tag.none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag.profile { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag.profile .i { width: 13px; height: 13px; color: var(--accent); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
/* Help stays beside the title; its panel occupies a full row on phones rather than overflowing the edge. */
.gateway-title { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gateway-title h1 { margin-bottom: 0; }
.gateway-title + p { margin-top: 8px; }
.gateway-help { position: static; }
.gateway-help > summary { display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; color: var(--muted); border-radius: 50%; }
.gateway-help > summary::-webkit-details-marker { display: none; }
.gateway-help > summary:hover, .gateway-help[open] > summary { color: var(--accent-text); background: var(--accent-soft); }
.gateway-help > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gateway-help .i { width: 22px; height: 22px; }
.gateway-help-pop { position: absolute; left: 0; top: calc(100% + 8px); width: 340px; max-width: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); z-index: 25; font-size: 13px; }
.gateway-help-pop p { margin: 10px 0; color: var(--ink-2); }
.gateway-help-pop .btn { min-height: 44px; }
.gateway-guide { max-width: 920px; margin-inline: auto; }
.gateway-guide .card { scroll-margin-top: 24px; }
.gateway-guide h2 { margin-bottom: 14px; }
.gateway-guide p, .gateway-guide li { color: var(--ink-2); }
.gateway-guide code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.gateway-guide li + li { margin-top: 10px; }
.guide-address { display: grid; gap: 6px; padding: 14px; border-radius: 8px; background: var(--surface-2); margin: 12px 0; }
.guide-address .k { color: var(--muted); font-size: 12px; font-weight: 600; }
.guide-address code { overflow-wrap: anywhere; color: var(--ink); }
.gateway-guide .api-output { margin-bottom: 0; }
@media (max-width: 620px) {
  .backup-grid { grid-template-columns: 1fr; }
  .gateway-guide ol { padding-left: 20px; }
}

.stack { display: grid; gap: 14px; }
.stack form { margin: 0; }
.stack-lg { display: grid; gap: 16px; margin-top: 20px; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.inline { display: flex; gap: 8px; align-items: center; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions form { margin: 0; }
.after { margin-top: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
/* the staff Apps page: two to a row, so ids, scopes and links fit */
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }

/* customers' home: a tile per app */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; margin-top: 20px; }
.tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tile-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.tile-icon .i { width: 26px; height: 26px; }
.tile-body { flex: 1; }
.tile h2 { margin: 0 0 4px; font-size: 17px; }
.tile p { margin: 0; }
.tile-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
/* an app the customer can open: the whole card is its link. The name's link stretches over the card, and
   Access sits above it */
.tile.go { transition: border-color .15s, box-shadow .15s; }
.tile.go:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.tile-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tile-link::after { content: ""; position: absolute; inset: 0; }
.tile-link .i { width: 16px; height: 16px; color: var(--muted); transition: color .15s; }
.tile.go:hover .tile-link .i { color: var(--accent); }
.tile-link:focus-visible { outline: none; }
.tile.go:has(.tile-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-access { position: relative; z-index: 1; margin-left: auto; }
.tile-access .i { width: 14px; height: 14px; }
.tile.off { background: transparent; border-style: dashed; }
.tile.off .tile-icon { background: var(--surface-2); color: var(--muted); }
.tile.off h2 { color: var(--ink-2); }
/* an app's own mark is shown as the app shows its icon: INVITE Ticketing's and the Managed Services Portal's
   sit at 80% on a white tile, in both themes (Ticketing's render-icons.mjs). Drawn small, Ticketing's line is
   heavier and its dots square, as Ticketing does */
.i-ticketing .tk-line { stroke-width: 22; }
.i-ticketing .mark-lg { display: none; }
.tile-icon:has(.mark), .chip-icon:has(.mark) { background: #ffffff; border: 1px solid var(--line); }
.tile-icon .mark, .chip-icon .mark { width: 80%; height: 80%; }
:is(.tile-icon, .chip-icon) .i-ticketing .tk-line { stroke-width: 14; }
:is(.tile-icon, .chip-icon) .i-ticketing .mark-lg { display: inline; }
:is(.tile-icon, .chip-icon) .i-ticketing .mark-sm { display: none; }
.tile.off .mark { filter: grayscale(1); opacity: .6; }
.tile-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tile-form h3 { margin: 0; }

ul.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.events li:last-child { border-bottom: 0; }
.events .when { flex: none; width: 110px; color: var(--muted); font-size: 13px; padding-top: 1px; }

/* a field: its name small and grey above, the box with a firm edge below */
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; min-height: 40px; min-width: 0; }
textarea { font: 13px/1.5 var(--mono); resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
details.sub { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* "Change", "Set It Up": an orange line with a chevron that turns when it opens */
details.sub > summary { list-style: none; display: flex; align-items: center; gap: 9px; min-height: 36px; cursor: pointer; font-weight: 700; color: var(--accent-text); width: fit-content; }
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
details.sub[open] > summary::before { transform: rotate(45deg); }
details.sub > summary:hover { text-decoration: underline; }
details.sub form { margin-top: 12px; }
.problem { color: var(--bad); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 14px var(--font); padding: 10px 16px; min-height: 40px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn .i { width: 15px; height: 15px; }
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 30%, var(--line-strong)); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(.95); }
.btn.small { padding: 6px 12px; min-height: 34px; font-size: 13px; }
.btn.choice { width: 100%; justify-content: flex-start; font-size: 15px; }
button.link { background: none; border: 0; font: inherit; cursor: pointer; }

table { font-variant-numeric: tabular-nums; }
table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.list th, .list td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); background: var(--surface-2); border-bottom-color: var(--line-strong); }
.list tbody tr:hover > td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.list tr:last-child td { border-bottom: 0; }
.list td.end { text-align: right; }
.list td.end form { margin: 0; display: inline; }
.list .tag { margin: 1px 0; }
.card table.list { border-radius: 8px; }
/* "Label: value", one look wherever a page pairs them: these tables, an audit event's detail (dl.pairs) and
   phones' stacked cells. The label is semibold and dark grey, its column as wide as its longest label */
table.kv { border-collapse: collapse; width: 100%; }
.kv th, .kv td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
.kv tr:first-child > * { border-top: 0; padding-top: 0; }
.kv th { text-align: left; width: 1%; white-space: nowrap; padding-right: 14px; font-weight: 600; color: var(--ink-2); }
.kv:not(.levels) th::after, .pairs dt::after { content: ":"; }
.kv .tag { margin: 2px 0; }
.kv td.mono { font-size: 14px; font-weight: 500; }
.kv td { overflow-wrap: anywhere; min-width: 0; }
dl.pairs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.pairs dt { color: var(--ink-2); font-weight: 600; }
.pairs dd { margin: 0; overflow-wrap: anywhere; }
/* who did it, under when */
.by { display: block; font-size: 13px; color: var(--muted); overflow-wrap: break-word; }

/* "Add a …": a dashed row that opens into its form */
details.add { margin-top: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); }
details.add > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; cursor: pointer; font-weight: 700; color: var(--accent-text); border-radius: var(--r); }
details.add > summary::-webkit-details-marker { display: none; }
details.add > summary:hover { background: var(--surface-2); }
details.add > summary .i { width: 16px; height: 16px; }
details.add[open] { border-style: solid; border-color: var(--line); background: var(--surface); }
details.add[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
details.add > form { margin: 0; padding: 16px 20px 20px; }
details.add > summary .add-note { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; align-items: end; }

/* a company or person's badge: their initials, orange on soft orange */
.initials { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font: 700 15px var(--display); letter-spacing: .02em; flex: none; }
.initials.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }
.initials.sm { width: 36px; height: 36px; border-radius: 50%; font-size: 13px; }
/* "Label: value" inline, beside others on a line */
.pair { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
.pair .k { font-weight: 600; color: var(--ink-2); }
.pair .k::after { content: ":"; }
.pair .tag { align-self: center; }

/* Companies: a card per company, the whole card its link */
.cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.co { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; transition: border-color .15s, box-shadow .15s; }
.co:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.co h2 { margin: 0 0 2px; font-size: 17px; }
.co-link { color: inherit; text-decoration: none; }
.co-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.co-link:focus-visible { outline: none; }
.co:has(.co-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.co-go { color: var(--muted); display: grid; transition: color .15s, transform .15s; }
.co:hover .co-go { color: var(--accent); transform: translateX(2px); }
.co-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.co.off { background: transparent; border-style: dashed; }
.co.off .initials { background: var(--surface-2); color: var(--muted); }

/* a company's page: its badge and facts, then its people */
.co-head { align-items: center; margin-bottom: 4px; }
.co-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.co-title h1 { margin: 0 0 6px; }
.co-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-size: 13.5px; }
h2.section { margin: 28px 0 12px; }
ul.people { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge who controls" "badge facts controls"; column-gap: 14px; row-gap: 8px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person > .initials { grid-area: badge; }
.person-who { grid-area: who; min-width: 0; }
.person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.person-who .small { overflow-wrap: anywhere; }
.person-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; }
.person-controls { grid-area: controls; display: grid; justify-items: end; gap: 8px; }
.person-actions { display: flex; gap: 8px; }
.person-actions form { margin: 0; }
.person.off .initials { background: var(--surface-2); color: var(--muted); }
.person.off .person-name strong { color: var(--muted); }
.person.empty { display: block; }
/* a select and its Save as one control, labelled at its left */
.join { display: flex; align-items: stretch; margin: 0; }
.join-label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 8px 0 0 8px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.join-label .i { width: 14px; height: 14px; color: var(--accent); }
.join select { border-radius: 0; min-width: 150px; }
.join .btn { border-radius: 0 8px 8px 0; border-color: var(--line-strong); margin-left: -1px; }
.co-ids { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; }
/* NetSuite: the last sync in a line, a search, and a Ticketing id beside Add to hub */
.sync-line { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; }
.sync-line .i { width: 16px; height: 16px; color: var(--muted); }
.sync-line.bad { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); }
.sync-line.bad .i { color: var(--bad); }
.search { position: relative; display: flex; gap: 8px; margin: 0 0 14px; }
.search > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { flex: 1; padding-left: 36px; }
.join input:not([type="hidden"]) { border-radius: 8px 0 0 8px; min-width: 180px; }
.btn.soft { background: var(--accent-soft); color: var(--accent-text); }
.join .btn.soft { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.btn.soft:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
/* the NetSuite connection: what's saved in a row, then the form in NetSuite's three groups */
.conn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 4px 0 16px; padding: 14px 20px; }
.conn .pair { font-size: 13.5px; }
.connect { max-width: 760px; }
.connect h2 { margin: 0; }
.connect fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.connect legend { padding: 0; margin-bottom: 8px; font: 700 14px var(--display); color: var(--ink); }
.fields.one { grid-template-columns: minmax(0, 320px); }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Integrations: a card each is its link; the page's title carries its mark */
a.integ { display: grid; align-content: start; gap: 8px; color: inherit; text-decoration: none; transition: border-color .15s; }
a.integ:hover { border-color: var(--accent); }
a.integ .card-head { margin-bottom: 0; }
a.integ .card-head .tag { margin-left: auto; }
a.integ p { margin: 0; }
.integ-check.problem { color: var(--bad); }
.integ-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 700; font-size: 13.5px; color: var(--accent-text); }
.integ-go .i { width: 16px; height: 16px; }
.integ-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.integ-title h1 { margin: 0; }
.integ-title p { margin: 2px 0 0; }
/* staff sign-in: Microsoft first, the emailed link below it */
.btn.wide { width: 100%; justify-content: center; }
.or { text-align: center; margin: 16px 0 10px; }
/* signing in: the Wasatch at sunset behind (tools/backdrop), the card in the middle with INVITE's full logo, the
   theme button in the corner. On upright screens the picture runs across the top, Sapphire below it. */
body.auth { background: #2d3130 url(/static/wasatch.webp?v=25d6d0852a1a) 60% 50% / cover no-repeat; }
.auth .top { background: none; border: 0; position: static; }
.auth .top-in { max-width: none; }
.auth .brand { display: none; }
.auth .icon-btn { background: rgba(18, 19, 20, .45); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(6px); }
.auth .icon-btn:hover { background: rgba(18, 19, 20, .7); color: #fff; }
.auth .main { max-width: none; display: flex; align-items: center; justify-content: center; padding: 16px 16px 40px; }
.auth-card { width: 100%; max-width: 440px; padding: 28px; border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
/* the logo's grey wordmark needs white under it, so the band stays white in dark mode too */
.auth-brand { display: flex; align-items: center; justify-content: center; container-type: inline-size; margin: -28px -28px 24px; padding: 24px 28px 22px; background: #fff; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); }
/* sized by the band's width, so the lockup fills it at every width: the px are for browsers without cqw */
.auth-brand img { width: 204px; width: 58cqw; height: auto; }
.auth-brand .rule { width: 1px; align-self: stretch; margin: 0 14px; margin: 0 4.5cqw; background: #d6d3ce; }
/* two lines, as tall as the logo, the way its wordmark sits over "networks" */
.auth-brand .name { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; font-size: 21px; font-size: 5.8cqw; line-height: 1.04; letter-spacing: -.01em; color: #4b4f4e; white-space: nowrap; }
.auth .foot { color: rgba(255, 255, 255, .75); }
/* wider screens: a roomier card, with larger fields and buttons */
@media (min-width: 621px) {
  .auth-card { max-width: 500px; padding: 40px 44px 44px; border-radius: 16px; }
  .auth-brand { margin: -40px -44px 32px; padding: 28px 36px 26px; border-radius: 16px 16px 0 0; }
  .auth-card h1 { font-size: 30px; margin-bottom: 10px; }
  .auth-card .lede { font-size: 15.5px; margin-bottom: 28px; }
  .auth-card .stack { gap: 20px; }
  .auth-card label { gap: 8px; font-size: 14px; }
  .auth-card input:not([type=hidden]) { min-height: 48px; padding: 11px 14px; font-size: 15px; }
  .auth-card .btn { min-height: 48px; padding: 12px 20px; font-size: 15px; }
  .auth-card .or { margin: 22px 0 14px; }
}
/* upright screens: the picture whole across the top, the card below it on Sapphire, so nothing peeks round it */
@media (max-width: 960px) and (orientation: portrait) {
  body.auth { --art: max(46vh, 56.25vw); background-size: auto var(--art); background-position: 60% 0; }
  .auth .main { padding-top: max(16px, calc(var(--art) * 0.93 - 60px)); }
}
@media (min-width: 621px) and (max-width: 960px) and (orientation: portrait) {
  body.auth { --art: max(54vh, 56.25vw); }
}
@media (max-width: 620px) {
  .auth-card { padding: 22px 20px; }
  .auth-brand { margin: -22px -20px 20px; padding: 18px 16px; }
}
.setup { margin: 0 0 16px; }
.btn.in-hub { color: var(--full-text); }
.btn.in-hub .i { width: 14px; height: 14px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }

.app-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-head h2 { margin: 0; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); min-height: 40px; cursor: pointer; }
.switch input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
/* the profile editor. An access type is a card with a radio dot, saying what it gives; the picked one is
   orange-edged */
fieldset.seg { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; }
fieldset.seg legend, .perms-head h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; padding: 0; letter-spacing: 0; }
.seg label { display: block; color: inherit; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; height: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.seg span::before { content: ""; grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.seg b { font-size: 14px; font-weight: 700; color: var(--ink); }
.seg small { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.seg span:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.seg input:checked + span::before { border: 5px solid var(--accent); background: var(--surface); }
.seg input:checked + span b { color: var(--accent-text); }
.seg input:checked + span small { color: var(--ink-2); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.perms-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.perms-head h3 { margin: 0 0 10px; }
.hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.hint .i { width: 14px; height: 14px; }
/* a manifest's names off the standard (docs/naming.md): noted, never refused */
.stray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
p.stray { margin: 14px 0 0; }
.stray .tag { white-space: normal; background: var(--accent-soft); color: var(--accent-text); }
/* a permission: its name dark, its note grey under it, its level beside */
.levels th { width: 200px; white-space: normal; color: var(--ink); }
.levels th .small { font-weight: 500; margin-top: 2px; }
.levels td { vertical-align: middle; }
.levels select { min-width: 160px; }
.levels .tag { font-size: 13px; padding: 4px 10px; }
/* with Custom on offer, the levels are fixed until it's picked: the highest shown, the choices hidden (a hidden
   choice still posts; the hub ignores it, permissions::Manifest::grant) */
.app.fixes:has(.seg input[value="custom"]:checked) .when-fixed,
.app.fixes:not(:has(.seg input[value="custom"]:checked)) .when-custom { display: none; }
/* an app left out: its settings faded, still there to set */
.app:has(.toggle):not(:has(.toggle input:checked)) .app-body { opacity: .5; }
.app:has(.toggle):not(:has(.toggle input:checked)) .app-title .chip-icon { filter: grayscale(1); opacity: .6; }
.save-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
pre.secret { font-family: var(--mono); background: var(--surface-2); padding: 12px; border-radius: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }

/* narrower screens: the account menu shows initials only, so the header stays on one row */
/* Apps: one URL adds an app; its review shows where it answered from, large, and what it would change */
.add-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 8px 0 20px; }
.add-app h2, .add-app p { margin: 0; }
.add-app .join input:not([type="hidden"]) { flex: 1; min-width: 0; }
.join .btn.primary { border-radius: 0 8px 8px 0; margin-left: 0; }
img.mark { object-fit: contain; }
.chip-icon.lg { width: 56px; height: 56px; border-radius: 14px; }
.chip-icon.lg .i { width: 26px; height: 26px; }
a.waiting { display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 13.5px; text-decoration: none; }
a.waiting span { flex: 1; }
a.waiting .i { width: 16px; height: 16px; }
.origin { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; font-size: 15px; color: var(--ink-2); }
.origin .i { width: 18px; height: 18px; flex: none; color: var(--accent); }
.origin strong { font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.wrap { overflow-wrap: anywhere; margin: 0 0 16px; }
.review tbody th { width: 1%; white-space: nowrap; padding-right: 18px; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); background: none; vertical-align: top; }
.review td { vertical-align: top; overflow-wrap: anywhere; }
.review td.mono { font-size: 13px; }
.review.both td { width: 50%; }
.review tr.changed td:last-child { background: var(--accent-soft); }
.review .chip-icon { display: inline-grid; }
.approve { margin-top: 16px; max-width: 640px; }
.approve fieldset { border: 0; margin: 0; padding: 0; min-width: 0; gap: 2px; }
.approve legend { padding: 0; margin-bottom: 4px; font: 700 14px var(--display); color: var(--ink); }

/* API keys: one row each, stopped ones faded; the form below */
.keys .key-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--ink); }
.keys tr.gone td { color: var(--muted); }
.keys tr.gone .key-name { color: var(--ink-2); }
.new-key { margin-top: 20px; max-width: 720px; }
.new-key h2 { margin: 0; }
.new-key fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.new-key legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.scope-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 16px; }
.scope-checks label.check { padding: 4px 0; }
.scope-checks .mono { font-weight: 400; font-size: 12px; }
.scope-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px 20px; }
.scope-area { display: flex; flex-direction: column; min-width: 0; }
.scope-area-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.scope-area label.check { padding: 4px 0; }
.scope-area .mono { font-weight: 400; font-size: 12px; }
.scope-checks label.check > span, .scope-area label.check > span { flex: 1; min-width: 0; }
.consent { max-width: 760px; }
.consent fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.consent legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.consent .section-hint { margin: 2px 0 6px; }
.connect-claude { max-width: 760px; }
.connect-claude pre.copy { margin: 0; }
/* the header stays one row on a computer: past 1180px everything fits, below it the nav drops its icons */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav a .i, .tag.staff { display: none; }
}
/* tablets and phones: the brand and buttons on top, the nav its own row beneath */
@media (max-width: 960px) {
  .who, details.menu .i-chevron { display: none; }
  details.menu > summary { padding: 3px; }
  .nav { order: 3; width: 100%; }
}
/* phones: stack, never scroll sideways, 44px targets (INVITE Ticketing's rules) */
@media (max-width: 620px) {
  .top-in { padding: 8px 16px; gap: 8px 12px; }
  .brand { gap: 8px; min-height: 44px; }
  .brand .logo { width: 132px; }
  /* small links get a 44px reach without moving anything */
  @media (max-width: 359px) {
    .brand .logo { width: 112px; }
    .brand .name { font-size: 13px; }
  }
  .eyebrow a { display: inline-flex; padding: 15px 0; margin: -15px 0; }
  details.sub summary { padding: 11px 0; }
  .nav a { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 8px 6px; }
  /* seven sections: words only, and the header scrolls away instead of covering a third of the screen */
  .nav a .i { display: none; }
  .top { position: static; }
  .who, details.menu .i-chevron, .tag.staff { display: none; }
  details.menu > summary { padding: 4px; min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .main { padding: 20px 16px 32px; }
  .btn, input, select, .seg span, .menu-item { min-height: 44px; }
  .btn.small { min-height: 44px; }
  .row { flex-direction: column; align-items: stretch; }
  table.list, .list thead, .list tbody, .list tr, .list td { display: block; width: 100%; }
  .list thead { display: none; }
  .list tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .list td { border: 0; padding: 4px 12px; }
  .list td.end { text-align: left; }
  .list td[data-label]::before { content: attr(data-label) ":"; display: inline-block; min-width: 96px; margin-right: 8px; color: var(--ink-2); font-weight: 600; }
  .inline { flex-wrap: wrap; }
  .levels th { width: auto; }
  .levels td { width: 1%; white-space: nowrap; text-align: right; }
  fieldset.seg { grid-template-columns: 1fr; }
  .co { padding: 16px; }
  .co-title { gap: 12px; }
  .initials.lg { width: 48px; height: 48px; font-size: 17px; }
  .person { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge who" "badge facts" "controls controls"; padding: 16px; }
  .person-facts { flex-direction: column; }
  .person-controls { justify-items: stretch; margin-top: 4px; }
  .person-controls, .person-controls .join { min-width: 0; }
  .person-controls .join { flex-wrap: wrap; }
  .person-controls .join-label { flex-basis: 100%; }
  .join select, .join input:not([type="hidden"]) { flex: 1; min-width: 0; }
  .person-actions > form { flex: 1; }
  .person-actions .btn { width: 100%; }
  .events li { flex-direction: column; gap: 0; }
  .events .when { width: auto; }
  .fields.one, .fields.two { grid-template-columns: 1fr; }
  .conn { padding: 14px 16px; }
  .review tbody th { display: block; width: auto; padding: 10px 12px 0; white-space: normal; }
  .review.both td { width: 100%; }
  .review td.mono[data-label]::before { font-family: var(--font); font-size: 14px; }
  .scope-checks label.check, .scope-area label.check { min-height: 44px; align-items: flex-start; }
  .scope-checks label.check input, .scope-area label.check input { margin-top: 3px; flex: none; }
  .new-key select { min-height: 44px; }
}
@media (hover: none) { .btn:hover { background: var(--surface); } .btn.primary:hover { filter: none; } }

/* Profiles: a card per profile with a line per app; the editor's header, app heads, switch and level pills */
.grid.profiles { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
a.profile-card { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.profile-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 6px 20px rgb(0 0 0 / .10); transform: translateY(-1px); }
.profile-card .card-head { margin: 0; align-items: flex-start; flex-wrap: wrap; }
.pc-title { flex: 1 1 auto; min-width: 0; }
.pc-title h2 { margin: 2px 0 3px; font-size: 17px; }
.pc-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.pc-scope .i, .tag.profile .i-grid { width: 13px; height: 13px; color: var(--accent); }
.tag.dflt { background: var(--accent-soft); color: var(--accent-text); }
.profile-card .card-head .tag { margin-top: 4px; }
.pc-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pc-apps li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.pc-apps li.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pc-apps li.off .pc-app { color: var(--muted); }
.pc-apps li.off .chip-icon { filter: grayscale(1); opacity: .55; }
.pc-app { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-icon.sm { width: 30px; height: 30px; border-radius: 8px; }
.chip-icon.sm .i { width: 15px; height: 15px; }
.pc-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pc-people { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.pc-people .i { width: 15px; height: 15px; color: var(--accent); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dots i.on { background: var(--accent); }
.pc-foot .integ-go { margin: 0 0 0 auto; }
.new-profile { display: grid; gap: 12px; align-content: start; border-style: dashed; border-color: var(--line-strong); background: transparent; }
.new-profile .card-head { margin: 0; }
.profile-hero { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; }
.profile-hero h1 { margin: 0 0 8px; }
.profile-hero .tags { margin: 0; }
.app-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-title h2 { margin: 0 0 1px; }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.toggle .track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background .15s; flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle input:checked ~ .when-off, .toggle input:not(:checked) ~ .when-on { display: none; }
.toggle .when-off { color: var(--muted); }
.perm-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.perm-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; }
.perm-row + .perm-row { border-top: 1px solid var(--line); }
.perm-row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.perm-name { flex: 1 1 200px; min-width: 0; font-weight: 600; color: var(--ink); }
.perm-name small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.perm-row .tag { font-size: 13px; padding: 4px 12px; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); }
.pills label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.pills span { display: block; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.pills span:hover { color: var(--ink); background: var(--surface); }
.pills input:checked + span { background: var(--accent); color: var(--accent-ink); }
.pills input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 621px) {
  .save-bar { position: sticky; bottom: 0; z-index: 2; padding: 12px 16px; margin: 0 -16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .profile-hero { align-items: flex-start; }
  .toggle { min-height: 44px; }
  .perm-row { flex-direction: column; align-items: stretch; }
  .perm-name { flex: none; }
  .pills { display: flex; border-radius: 12px; }
  .pills label { flex: 1; }
  .pills span { min-height: 44px; display: grid; place-items: center; text-align: center; border-radius: 9px; padding: 6px 8px; }
  .pc-foot .integ-go { min-height: 44px; }
  .profile-card .card-head { flex-wrap: wrap; }
  .profile-card .card-head .tag { order: 3; margin: 0 0 0 56px; }
  .pc-app { white-space: normal; }
}

/* Staff reference pages: Admin Portals, Systems and Connect an iApp. Diagrams are HTML and CSS (no inline style is
   allowed by the CSP), drawn from the same tokens so light and dark both work; on phones they stack. */
.page-hero { margin: 6px 0 24px; }
.page-hero h1 { font-size: 34px; margin-bottom: 8px; }
.page-hero .lede { font-size: 15.5px; max-width: 780px; margin-bottom: 0; }


.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
/* a section of a page: its name in small capitals behind a short orange bar, so sections stand apart */
.section-title { display: flex; align-items: center; gap: 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 34px 0 12px; font-weight: 800; }
.section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); flex: none; }
:is(.ref-page, .portal-grid, .doc-steps, .endpoints, .jump-grid, .manage) code { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Admin Portals */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.portal { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.portal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 75%); opacity: 0; transition: opacity .15s; }
.portal:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.portal:hover::before, .portal:focus-visible::before { opacity: 1; }
.portal .tile-icon { width: 52px; height: 52px; flex: none; }
.portal-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.portal-name { font-family: var(--display); font-weight: 700; font-size: 16.5px; }
.portal-note { color: var(--ink-2); font-size: 14px; }
.portal-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.portal-host { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.portal-arrow { color: var(--muted); flex: none; transition: color .15s; }
.portal:hover .portal-arrow { color: var(--accent); }
.empty-state { display: flex; gap: 14px; align-items: center; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-2); }
.empty-state p { margin: 0; }
.jump-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.jump { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; text-decoration: none; color: var(--ink); min-height: 44px; transition: background .15s, border-color .15s; }
.jump:hover { border-color: var(--line-strong); background: var(--surface-2); }
.jump b, .manage summary b { display: block; font-size: 14px; }
.jump small, .manage summary small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.manage { margin-top: 26px; }
.manage summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; min-height: 44px; }
.manage summary::-webkit-details-marker { display: none; }
.portal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.portal-form .span-2 { grid-column: 1 / -1; }
.portal-form .actions { margin-top: 0; }
.manage-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.manage-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.manage-list small { display: block; color: var(--muted); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.manage-list form { margin: 0; }

/* Connect an iApp */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 10px; }
.kv dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }
.kv dd { margin: 0; min-width: 0; }
.doc-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.doc-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.doc-step.optional { border-style: dashed; }
.step-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.step-head h2 { margin: 2px 0 4px; font-size: 19px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.step-head p { margin: 0; color: var(--ink-2); }
.step-n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 17px var(--display); color: #fff; background: linear-gradient(135deg, #f38520, #d96a0e); box-shadow: 0 6px 16px rgba(243, 133, 32, .3); }
.step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
.step-grid h3, .ref-page .card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 27px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 5px; background: var(--accent-soft); }
.checks li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px; border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks.two-col { grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.rule-line { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 11px 13px; border-radius: 10px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.rule-line .i { width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
table.spec { width: 100%; border-collapse: collapse; }
table.spec th { text-align: left; white-space: nowrap; padding: 9px 18px 9px 0; color: var(--muted); font-weight: 600; font-size: 13px; vertical-align: top; width: 1%; border-bottom: 1px solid var(--line); }
table.spec td { padding: 9px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
table.spec tr:last-child :is(th, td) { border-bottom: 0; }
.flow-line { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: fl; }
.flow-line li { counter-increment: fl; padding: 14px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 3px; align-content: start; }
.flow-line li::before { content: counter(fl); font: 800 13px var(--display); color: var(--accent-text); }
.flow-line b { font-size: 14px; }
.flow-line span { font-size: 13px; color: var(--muted); }
.handoff, .done-when { margin-top: 16px; }
@media (max-width: 1180px) {
  .step-grid, .checks.two-col { grid-template-columns: 1fr; }
  .flow-line { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .page-hero h1 { font-size: 27px; }
  .portal-form, .flow-line { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
  .doc-step { padding: 18px 16px; }
  table.spec :is(th, td) { display: block; padding: 2px 0; border: 0; width: auto; }
  table.spec th { padding-top: 12px; }
}

/* the iApp a sign-in continues to: a strip under the logo band, the same for every iApp */
.auth-app { display: flex; align-items: center; gap: 14px; margin: -24px -28px 24px; padding: 14px 28px; background: var(--accent-soft); border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--accent); }
.auth-app .tile-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.auth-app .tile-icon .i { width: 22px; height: 22px; }
.auth-app-text { display: grid; gap: 1px; min-width: 0; }
.auth-app-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.auth-app-text b { font: 700 16px/1.3 var(--display); color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 621px) {
  .auth-app { margin: -32px -44px 30px; padding: 16px 44px; }
  .auth-app-text b { font-size: 17px; }
}
@media (max-width: 620px) {
  .auth-app { margin: -20px -20px 20px; padding: 12px 20px; gap: 12px; }
}

/* Systems */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sys-section { margin-top: 8px; scroll-margin-top: 80px; }

/* the path in: zones (per host) left to right, links between them, the iApps under the edge */
.topo { display: grid; grid-template-columns: minmax(0, .95fr) 70px minmax(0, 1.55fr) 70px minmax(0, 1fr) 70px minmax(0, .9fr);
  grid-template-areas: "callers l1 edge l2 core l3 data" ". . l4 . . . ." ". . apps apps apps . ."; align-items: stretch; row-gap: 0; }
.z-callers { grid-area: callers; } .z-edge { grid-area: edge; } .z-core { grid-area: core; } .z-data { grid-area: data; } .z-apps { grid-area: apps; }
.l1 { grid-area: l1; } .l2 { grid-area: l2; } .l3 { grid-area: l3; } .l4 { grid-area: l4; }
.zone { position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.zone.host { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 55%); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.z-apps { border-style: dashed; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.z-apps .zone-head { grid-column: 1 / -1; }
.zone-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.zone-head code { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); }
.node { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; }
.node b { display: block; font-size: 14px; line-height: 1.3; }
.node small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.node.hot { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 12%, transparent); }
.node.dim { opacity: .6; }
.node-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.node-ic .i { width: 16px; height: 16px; }
.node-ic.mark-ic { background: #fff; border: 1px solid var(--line); }
.node-ic .mark { width: 80%; height: 80%; }
.node-ic .i-ticketing .mark-lg { display: inline; } .node-ic .i-ticketing .mark-sm { display: none; }
.link { position: relative; display: grid; place-content: center; text-align: center; gap: 2px; padding: 0 4px; }
.link::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 13px); background-size: 26px 2px; animation: flow-x 1.2s linear infinite; }
.link::after { content: ""; position: absolute; right: 2px; top: calc(50% - 5px); border: 6px solid transparent; border-left: 8px solid var(--accent); border-right: 0; }
.link span, .link small { position: relative; z-index: 1; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.link span { font: 800 11px var(--display); color: var(--accent-text); letter-spacing: .03em; margin-bottom: 20px; }
.link small { font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 20px; }
.link.down { height: 74px; }
.link.down::before { left: calc(50% - 1px); right: auto; top: 6px; bottom: 8px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 13px); background-size: 2px 26px; animation-name: flow-y; }
.link.down::after { right: auto; left: calc(50% - 6px); top: auto; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; }
.link.down { place-content: center stretch; padding-left: calc(50% + 14px); text-align: left; }
.link.down span, .link.down small { margin: 0; justify-self: start; background: none; padding: 0; }
.link .hop { display: none; }
@keyframes flow-x { to { background-position: 26px 0; } }
@keyframes flow-y { to { background-position: 0 26px; } }
@media (prefers-reduced-motion: reduce) { .link::before { animation: none; } }
/* the edge's two gateways, apart: the Customer Gateway (every request in, in orange) above the API Gateway (API
   reads only, a dashed grey frame), the one hop between them named */
.gw { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.gw-customer { border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.gw-api { border: 2px dashed var(--line-strong); }
.gw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gw-head b { font: 800 14px var(--display); }
.gw-n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; font: 800 12px var(--display); background: var(--accent); color: var(--accent-ink); }
.gw-api .gw-n { background: var(--ink-2); color: var(--surface); }
.gw-for { margin-left: auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.gw .node { padding: 9px 10px; }
.gw-sends { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; gap: 5px; font-size: 12px; color: var(--ink-2); }
.gw-sends li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.gw-sends li > span { margin-left: auto; font-weight: 700; color: var(--ink); white-space: nowrap; }
.gw-sends li > span::before { content: "→ "; color: var(--accent); }
.gw-sends code { font-size: 11px; padding: 0 4px; }
.gw-hop { position: relative; display: grid; justify-items: center; padding: 18px 0 14px; font-size: 11px; font-weight: 700; color: var(--muted); }
.gw-hop::before { content: ""; position: absolute; top: 0; bottom: 6px; left: calc(50% - 1px); width: 2px; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px); }
.gw-hop::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 6px); border: 6px solid transparent; border-top: 7px solid var(--accent); border-bottom: 0; }
.gw-hop span { position: relative; z-index: 1; padding: 2px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gw-hop code { font-size: 11px; padding: 0 3px; background: none; }

/* the route table */
.route-table { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.rt-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 16px; padding: 13px 18px; border-top: 1px solid var(--line); align-items: center; }
.rt-row:first-child { border-top: 0; }
.rt-head { background: var(--surface-2); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rt-row [data-label="Path"] { display: flex; flex-wrap: wrap; gap: 5px; }
.rt-row [data-label="Rules"] { color: var(--ink-2); font-size: 14px; }
.dest { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.dest::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dest.hub::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dest.app::before { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dest.api::before { background: var(--ink-2); }
.dest.off { color: var(--muted); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.mini { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.mini b { font: 800 15px var(--display); color: var(--accent-text); }
.mini span { font-size: 13px; color: var(--ink-2); }

/* flows: tabs that need no script; each panel a sequence diagram (lifelines and arrows) */
.flows { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.flow-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.flow-tabs label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.flow-tabs label:hover { color: var(--ink); background: var(--surface); }
.flow-tabs .i { width: 16px; height: 16px; }
#flow-customer:checked ~ .flow-tabs [for="flow-customer"], #flow-staff:checked ~ .flow-tabs [for="flow-staff"],
#flow-signout:checked ~ .flow-tabs [for="flow-signout"], #flow-api:checked ~ .flow-tabs [for="flow-api"],
#flow-register:checked ~ .flow-tabs [for="flow-register"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), inset 0 -2px 0 var(--accent); }
#flow-customer:focus-visible ~ .flow-tabs [for="flow-customer"], #flow-staff:focus-visible ~ .flow-tabs [for="flow-staff"],
#flow-signout:focus-visible ~ .flow-tabs [for="flow-signout"], #flow-api:focus-visible ~ .flow-tabs [for="flow-api"],
#flow-register:focus-visible ~ .flow-tabs [for="flow-register"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.flow-panel { display: none; padding: 20px 22px 22px; }
#flow-customer:checked ~ .flow-panels .p-customer, #flow-staff:checked ~ .flow-panels .p-staff,
#flow-signout:checked ~ .flow-panels .p-signout, #flow-api:checked ~ .flow-panels .p-api,
#flow-register:checked ~ .flow-panels .p-register { display: block; }
.flow-sum { margin: 0 0 18px; color: var(--ink-2); max-width: 820px; }
.seq { --n: 4; }
.seq.cols-3 { --n: 3; }
.seq-actors, .seq-steps > li { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.seq-actors { padding-bottom: 8px; }
.seq-actors span { justify-self: center; padding: 7px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 13px; text-align: center; }
.seq-actors span.core { background: var(--accent); border-color: var(--accent); color: #fff; }
.seq-steps { list-style: none; margin: 0; padding: 6px 0 4px; counter-reset: step;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(50% / var(--n) - 1px), var(--line-strong) calc(50% / var(--n) - 1px), var(--line-strong) calc(50% / var(--n) + 1px), transparent calc(50% / var(--n) + 1px), transparent calc(100% / var(--n))); }
.seq-steps > li { counter-increment: step; padding: 7px 0; }
.seq-steps .seq-who { display: none; }
.seq-steps .lbl { position: relative; display: block; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: center; padding: 0 8px 9px; }
.seq-steps .lbl::before { content: counter(step); display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 6px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 800 10.5px var(--display); vertical-align: 1px; }
.msg .lbl { margin: 0 calc(50% / var(--span)); }
.msg .lbl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.msg { position: relative; }
.msg::after { content: ""; position: absolute; bottom: 3px; border: 5px solid transparent; }
.msg:not(.back)::after { border-left: 8px solid var(--accent); border-right: 0; }
.msg.back .lbl::after { background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 10px); }
.msg.back::after { border-right: 8px solid var(--muted); border-left: 0; }
.self .lbl { display: inline-block; justify-self: center; text-align: center; padding: 7px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.self .lbl::after { display: none; }
.c1-2 { --a: 1; --span: 2; } .c1-3 { --a: 1; --span: 3; } .c1-4 { --a: 1; --span: 4; } .c2-3 { --a: 2; --span: 2; }
.c2-4 { --a: 2; --span: 3; } .c3-4 { --a: 3; --span: 2; } .c2 { --a: 2; --span: 1; } .c3 { --a: 3; --span: 1; }
.seq-steps > li > .lbl { grid-column: var(--a) / span var(--span); }
.msg:not(.back)::after { right: calc((var(--n) - var(--a) - var(--span) + 1) * 100% / var(--n) + 50% / var(--n) - 2px); }
.msg.back::after { left: calc((var(--a) - 1) * 100% / var(--n) + 50% / var(--n) - 2px); }
.facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 6px 11px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.facts b { color: var(--ink); }
.api-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.api-card { padding: 16px; border-radius: 12px; background: var(--surface-2); }
.api-card h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.api-card .checks { font-size: 13.5px; }

/* security and navigation */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px; }
.sec-card { padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.sec-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.sec-head h3 { margin: 0 !important; font-size: 15px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
.sec-card .checks { font-size: 13.5px; }
.nav-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nav-map { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.nm-root { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; }
.nm-root b { display: block; font: 700 16px var(--display); }
.nm-root small { display: block; color: var(--muted); font-size: 12.5px; }
.nm-tree { list-style: none; margin: 0 0 0 17px; padding: 0 0 0 0; border-left: 2px solid var(--line-strong); }
.nm-tree li { position: relative; display: grid; gap: 1px; padding: 8px 0 8px 24px; }
.nm-tree li::before { content: ""; position: absolute; left: 0; top: 19px; width: 16px; height: 2px; background: var(--line-strong); }
.nm-tree li::after { content: ""; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.nm-tree li:last-child { background: linear-gradient(var(--surface), var(--surface)) 0 21px / 2px 100% no-repeat; margin-left: -2px; padding-left: 26px; }
.nm-tree b { font-size: 14px; }
.nm-tree span { font-size: 13px; color: var(--muted); }

/* narrower than the five columns: the path stacks top to bottom, each arrow naming its two ends */
@media (max-width: 1100px) {
  .topo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "callers" "l1" "edge" "l2" "core" "l3" "data" "l4" "apps"; }
  .zone { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .zone.z-edge { grid-template-columns: minmax(0, 1fr); }
  .zone-head { grid-column: 1 / -1; }
  .link, .link.down { height: 78px; place-content: center stretch; padding-left: calc(50% + 14px); text-align: left; gap: 1px; }
  .link::before { left: calc(50% - 1px); right: auto; top: 6px; bottom: 8px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 13px); background-size: 2px 26px; animation-name: flow-y; }
  .link::after { right: auto; left: calc(50% - 6px); top: auto; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; }
  .link span, .link small { margin: 0; justify-self: start; background: none; padding: 0; }
  .link .hop { display: block; font-size: 12.5px; color: var(--ink); }
  .api-cards { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .nav-maps { grid-template-columns: 1fr; }
  .rt-row { grid-template-columns: 1fr; gap: 6px; }
  .rt-head { display: none; }
  .rt-row [role="cell"]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
}
/* phones, and narrow panes: every diagram stacks; arrows turn into "from → to" chips */
@media (max-width: 760px) {
  .link, .link.down { padding-left: calc(50% + 12px); }
  .seq-actors { display: none; }
  .seq-steps { background: none; padding: 0; display: grid; gap: 8px; }
  .seq-steps > li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
  .seq-steps .seq-who { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
  .seq-steps > li > .lbl, .self .lbl { grid-column: auto; margin: 0; padding: 0; text-align: left; background: none; border: 0; display: block; }
  .msg .lbl::after, .msg::after { display: none; }
  .flow-panel { padding: 16px; }
  .flow-tabs label { flex: 1 1 auto; justify-content: center; }
}

/* a waiting sign-in: the number another device picks, and that device's choice */
.wait { display: grid; gap: 12px; margin: 22px 0 6px; }
.wait-number { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 14px; background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.wait-k { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.wait-number b { font: 800 40px/1 var(--display); letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wait-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.wait-live { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.wait-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: wait-pulse 1.4s ease-in-out infinite; }
@keyframes wait-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .wait-live .dot { animation: none; } }
.note.bad { color: var(--bad); }
dl.asker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
dl.asker div { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
dl.asker dt { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
dl.asker dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pick-number { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.btn.number { min-height: 64px; justify-content: center; font: 800 26px var(--display); font-variant-numeric: tabular-nums; }
.btn.number:hover { border-color: var(--accent); color: var(--accent-text); }

/* Sign-In Protection: Valkey's state, a minute-by-minute last hour, brakes and limits */
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.sparks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.spark { margin: 0; padding: 16px 16px 12px; }
.spark figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.spark-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.spark-total { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.spark svg { display: block; width: 100%; height: 48px; }
.spark .bar { fill: var(--accent); }
.spark .base { fill: var(--line-strong); }
.spark .hit { fill: transparent; }
.spark g:hover .bar { fill: var(--accent-text); }
.spark g:hover .base { fill: var(--muted); }
.spark-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.lookup { margin-bottom: 14px; }
.lookup .btn .i { width: 16px; height: 16px; }
.card > .note { margin: 0 0 14px; }
.limits-card { margin-bottom: 14px; }
.limits { list-style: none; margin: 0; padding: 0; }
.limit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, auto); gap: 10px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.limit:first-child { border-top: 0; padding-top: 0; }
.limit:last-child { padding-bottom: 0; }
.limit-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.limit-what p { margin: 4px 0 0; overflow-wrap: anywhere; }
.limit-use { display: grid; gap: 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.use-bar { display: block; width: 100%; height: 6px; }
.use-bar .track { fill: var(--surface-2); }
.use-bar .fill { fill: var(--muted); }
.use-bar.near .fill { fill: var(--accent); }
.use-bar.over .fill { fill: var(--bad); }
.limit-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.limit-set input { width: 150px; font-variant-numeric: tabular-nums; }
.brakes { margin-top: 4px; }
@media (max-width: 1180px) {
  .limit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .limit-set input { flex: 1 1 140px; width: auto; }
  .limit-set .btn { flex: 1 1 auto; }
  .spark-axis span:nth-child(2) { display: none; }
}

/* A company's services (staff) and its admins */
.section-note { margin: -4px 0 12px; }
.service:has(.seg input[value="everything"]:checked) .when-chosen { display: none; }
.when-chosen { margin-top: 4px; }
.seg.checks span::before { border-radius: 4px; }
.seg.checks input:checked + span::before { border: 0; background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); outline: 2px solid var(--accent); outline-offset: -2px; }
.offer { display: inline-block; margin: 0 0 0 10px; }
@media (max-width: 620px) { .offer { display: block; margin: 8px 0 0; } }

/* A company admin's pages: People and Profiles */
/* tabs: a line under the row, the open one underlined in orange. Never pills, so they don't read as buttons */
.subnav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 22px; border-bottom: 1px solid var(--line-strong); }
.subnav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.subnav a .i { width: 15px; height: 15px; }
.subnav a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); border-bottom-color: var(--line-strong); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.subnav a.on .i { color: var(--accent); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.profile-tile { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
a.profile-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.profile-tile .card-head { margin-bottom: 4px; }
.profile-tile h2 { font-size: 17px; overflow-wrap: anywhere; }
.profile-tile .tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.profile-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.profile-foot .i { width: 14px; height: 14px; margin-left: auto; }
.profile-tile.beyond { opacity: .75; }
.add-profile { margin: 14px 0 0; max-width: 520px; }
.add-profile input { flex: 1 1 auto; min-width: 0; }
.changes { list-style: none; margin: 0; padding: 4px 20px; }
.changes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.changes li:first-child { border-top: 0; }
.change-what { font-weight: 600; overflow-wrap: anywhere; }
.change-when { color: var(--muted); font-size: 13px; }
.profile-name-field { display: grid; gap: 6px; min-width: 0; flex: 1; }
.profile-name-field input { font: 700 22px var(--font); max-width: 480px; }
@media (max-width: 620px) {
  /* tabs share the width: the icon over a label of two lines at most */
  .subnav a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; min-height: 44px; padding: 8px 6px; font-size: 13px; line-height: 1.2; text-align: center; }
  .add-profile { flex-wrap: wrap; }
  .add-profile .btn { flex: 1 1 100%; }
  .profile-name-field input { font-size: 18px; }
}

/* iApps → Routes and Connect an iApp (edge.rs): where the edge sends each iApp, and how it's doing */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.4; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.state.ok, .state.applied { background: var(--good-soft); color: var(--full-text); }
.state.ok::before, .state.applied::before { background: var(--good); }
.state.warn, .state.waiting { background: var(--accent-soft); color: var(--part-text); }
.state.warn::before, .state.waiting::before { background: var(--accent); }
.state.bad, .state.failed { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.state.bad::before, .state.failed::before { background: var(--bad); }
.state.waiting::before { animation: wait-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .state.waiting::before { animation: none; } }
.edge-card { margin-bottom: 8px; box-shadow: inset 4px 0 0 var(--line-strong); }
.edge-card.edge-applied { box-shadow: inset 4px 0 0 var(--good); }
.edge-card.edge-waiting { box-shadow: inset 4px 0 0 var(--accent); }
.edge-card.edge-failed { box-shadow: inset 4px 0 0 var(--bad); }
.edge-head { display: flex; align-items: flex-start; gap: 12px; }
.edge-head > div { flex: 1; min-width: 0; }
.edge-head h2, .edge-head h3 { margin: 0 0 2px; }
.edge-head p { margin: 0; }
.edge-problems { margin: 12px 0 0; padding-left: 18px; }
.edge-agent { margin: 10px 0 0; }
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.route.off { border-style: dashed; }
.route-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.route-title > div { min-width: 0; }
.route-title h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.route-title h3.host-name { font-size: 15px; }
code.path { font-family: var(--mono); font-size: 13px; color: var(--accent-text); overflow-wrap: anywhere; }
.route-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kv td.good { color: var(--full-text); }
.route-form .wide { grid-column: 1 / -1; }
.route-form textarea { font-family: var(--mono); font-size: 12px; }
.route-form input[readonly] { background: var(--surface-2); color: var(--muted); }
.remove-route { margin-top: 12px; }
.empty-note { margin: 4px 0 0; }
.host-checks { display: grid; gap: 8px; margin: 4px 0 6px; }
.check-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.check-row .state { min-width: 116px; }
ol.setup { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 14px; }
ol.setup li > b, ol.setup li > span { display: block; }
pre.copy { margin: 6px 0 0; font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.needs { margin-top: 20px; }
.needs h2 { margin-top: 0; }
.connect-pick { display: grid; gap: 10px; margin-bottom: 4px; }
.connect-pick p { margin: 0; }
.connect-pick .join select { flex: 1; min-width: 0; }
.wide-join { margin-top: 4px; }
.wide-join input:not([type="hidden"]) { flex: 1; min-width: 0; }
.connect .doc-step.done .step-n { background: var(--good); box-shadow: none; }
.connect .step-head h2 .state, .connect .step-head h2 .tag { font-size: 12px; }
.connect .step-head { margin-bottom: 12px; }
.connect .doc-step > .actions { margin-top: 0; }
.host-line { margin: 0 0 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
/* Set Up an iApp (setup.rs): where each iApp stands, its next step, and a bar of the required steps done */
a.setup-line { display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 13.5px; text-decoration: none; }
a.setup-line.done { background: var(--good-soft); color: var(--full-text); }
a.setup-line span { flex: 1; }
a.setup-line .i { width: 16px; height: 16px; }
progress.setup-bar { appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
progress.setup-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 99px; }
progress.setup-bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
progress.setup-bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
progress.setup-bar.complete::-webkit-progress-value { background: var(--good); }
progress.setup-bar.complete::-moz-progress-bar { background: var(--good); }
.setup-head { display: grid; gap: 12px; }
.setup-head .card-head, .setup-head p { margin: 0; }
.setup-head .card-actions { margin-top: 4px; }
.setup-next a { font-weight: 700; }
.setup-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.setup-list li + li { border-top: 1px solid var(--line); }
.setup-row { display: grid; grid-template-columns: 36px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 16px; align-items: center; gap: 16px; min-height: 68px; padding: 10px 20px; color: inherit; text-decoration: none; }
.setup-row:hover { background: var(--surface-2); }
.setup-who { display: grid; min-width: 0; }
.setup-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-done { display: grid; gap: 4px; }
.setup-state { display: grid; justify-items: start; font-weight: 600; font-size: 14px; }
.setup-row > .i { width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 620px) {
  .setup-row { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 8px 12px; padding: 12px 16px; }
  .setup-who { grid-column: 2; grid-row: 1; }
  .setup-row > .i { grid-column: 3; grid-row: 1; }
  .setup-done, .setup-state { grid-column: 2; }
}
@media (max-width: 620px) {
  .edge-head { flex-wrap: wrap; }
  .check-row .state { min-width: 0; }
  .connect-pick .join, .wide-join { flex-wrap: wrap; }
  .connect-pick .join > *, .wide-join > *:not([type="hidden"]) { flex: 1 1 100%; border-radius: 8px; margin-left: 0; }
  .connect-pick .join-label { border: 0; background: none; padding: 0 0 2px; font-weight: 700; color: var(--ink-2); }
}

.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 34px 0 12px; }
.title-row .section-title { margin: 0; }
/* Registered: two ways to add an iApp */
.add-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; margin-top: 12px; }
.add-way { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (max-width: 620px) {
  .add-way .join { flex-wrap: wrap; gap: 8px; }
  .add-way .join input:not([type="hidden"]), .add-way .join .btn { flex: 1 1 100%; border-radius: 8px; margin-left: 0; }
}
.add-way h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.add-way h3 .i { width: 18px; height: 18px; color: var(--accent-text); }
.add-way p { margin: 0; }
/* iApps → Reverse Proxy (admin_proxy.html): a card per iApp, a section per way the edge reaches it */
.own-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.px-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.px-cards { display: grid; gap: 18px; margin-top: 18px; }
.px .card-head h3 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.px-sec { margin-top: 14px; padding: 14px 16px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.px-sec details.sub { border-top-color: var(--line-strong); }
.px-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.px-sec-head h4 { margin: 0; font-size: 15px; }
.px-sec-head .host-name { font-family: var(--mono); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.px-none { margin: 0; }
.px-paths { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.px-paths li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.px-paths li > code { font-family: var(--mono); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.px-paths .tag { font-size: 11px; }
.px-policy { margin-top: 14px; }
.px-asked { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r); display: grid; gap: 8px; }
.px-asked .px-sec-head { margin: 0; }
.px-asked h5 { margin: 0; font-size: 14px; }
.px-asked p, .px-asked .px-paths { margin: 0; }
.px-rows { display: grid; gap: 8px; }
.px-rows > p { margin: 2px 0 0; }
.px-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.px-row.px-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.px-cell { display: block; min-width: 0; margin: 0; }
.px-cell input, .px-cell select { width: 100%; font-family: var(--mono); font-size: 13px; }
.px-cell select { font-family: inherit; }
.px-host { padding: 12px 0 4px; border-top: 1px dashed var(--line); }
.px-host:first-of-type { border-top: 0; padding-top: 0; }
/* the page's own order: a section title, a line saying what the section is, then its cards */
.section-hint { margin: -6px 0 14px; color: var(--muted); font-size: 13.5px; }
/* Routes at a glance: one row an iApp, its name the link to its card */
.px-glance td { vertical-align: middle; }
.px-who { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.px-who > span:last-child { display: grid; gap: 1px; min-width: 0; }
.px-who strong { overflow-wrap: anywhere; }
.px-who code { font-size: 12px; }
.px-who .tag { justify-self: start; }
.px-who:hover strong { color: var(--accent-text); }
.chip-icon.sm { width: 32px; height: 32px; border-radius: 8px; }
.chip-icon.sm .i { width: 16px; height: 16px; }
.px-cell-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.px-glance .btn .i { width: 14px; height: 14px; }
.px-glance .btn, .px-glance code { white-space: nowrap; }
.px-glance td.end { width: 1%; }
/* a card's three parts: an icon and name, a line saying what the part is, its details, its buttons in a row */
.px-lead { margin: -4px 0 4px; }
.px-sec-icon { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent-text); flex: none; }
.px-sec-icon .i { width: 15px; height: 15px; }
.px-hint { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.px-none { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.px-sub { margin: 16px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.px-actions { align-items: center; }
.form-end { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
/* reference: two cards side by side */
.px-ref { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; align-items: start; }
.px-ref h3 { margin-bottom: 10px; }
@media (max-width: 620px) {
  .px-row { grid-template-columns: 1fr; padding: 10px 0 4px; border-top: 1px solid var(--line); }
  .px-row.px-head { display: none; }
  .px-cell::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
  .px-jump .btn { flex: 1 1 auto; }
}

/* Switch Company, from inside an iApp (switch.html) */
.switch-hero { display: flex; align-items: center; gap: 16px; }
.switch-hero .tile-icon { flex: none; }
.switch-list tr.current td { background: var(--accent-soft); }
.switch-list td.end form { display: inline; }
@media (max-width: 620px) {
  .switch-hero { align-items: flex-start; }
  .switch-list td.end .btn { min-height: 44px; width: 100%; }
}

/* System: Services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.svc-card.hot { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.svc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.svc-head > div { flex: 1; min-width: 0; }
.svc-head h3 { margin: 0; font-size: 16px; }
.svc-head code { font-size: 11.5px; color: var(--muted); background: none; padding: 0; }
.svc-facts { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13.5px; line-height: 1.45; }
.svc-facts dt { font: 800 11px var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 2px; }
.svc-facts dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.svc-facts dt:last-of-type, .svc-facts dt:last-of-type + dd { color: var(--ink); }

/* System: customer sign-in, service by service */
.lane-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.op { display: inline-block; font: 800 10.5px var(--display); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); vertical-align: 1px; }
.op.count { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.op.write { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); }
.op.send { background: var(--good-soft); border-color: transparent; color: var(--full-text); }
.op.check { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.op.read { background: transparent; }
.lane { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ln-row { display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ln-row:first-child { border-top: 0; }
.ln-head { background: var(--surface-2); }
.ln-head > span { font: 800 11px var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 10px; }
.ln-head .ln-svc.valkey { color: var(--accent-text); }
.ln-step { padding: 12px 10px 12px 14px; font-weight: 700; font-size: 13.5px; line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; }
.ln-step b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--accent-soft); color: var(--accent-text); }
.ln-head .ln-step { display: block; }
.ln-cell { padding: 12px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); border-left: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.ln-cell code { font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }
.ln-what { min-width: 0; }
.ln-cell.col-valkey { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.valkey-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.valkey-grid h3 { margin: 0 0 6px; font-size: 16px; }
.valkey-rules h3 + ul { margin-bottom: 16px; }
.valkey-keys td:first-child { white-space: nowrap; }
.checks.warn li::before { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.checks.warn li::after { border-color: var(--bad); }
.zone-head a { text-transform: none; letter-spacing: 0; font-weight: 700; }
.node small .state { margin-top: 4px; }
@media (max-width: 1100px) {
  .ln-row { grid-template-columns: 120px repeat(7, minmax(0, 1fr)); }
  .valkey-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .lane { border: 0; background: none; gap: 12px; overflow: visible; grid-template-columns: minmax(0, 1fr); }
  .ln-row.ln-head { display: none; }
  .ln-row { display: block; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 0 8px; }
  .ln-row:first-child { border-top: 1px solid var(--line); }
  .ln-step { font-size: 15px; padding: 12px 14px 6px; }
  .ln-cell { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; border-left: 0; padding: 7px 14px; }
  .ln-cell::before { content: attr(data-label); font: 800 11px var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 3px; }
  .ln-cell.col-valkey { border-left: 3px solid var(--accent); padding-left: 11px; }
  .ln-cell.empty { display: none; }
}
@media (max-width: 620px) {
  .ln-cell { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .svc-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .svc-facts dd { margin-bottom: 8px; }
  .valkey-keys td:first-child { white-space: normal; }
  .flow-tabs label { min-height: 44px; }
}

/* Staff: every section in a panel of its own, framed and labelled in its group's hue, faintly; the open page
   outlined in orange. Pages under a page hang from it on a tree line; the groups used less sit at the foot. From
   1001px it stays at the left; narrower, a bar on top whose Menu opens the same panels. hub.js marks the open page */
.g-customers { --hue: var(--hue-customers); }
.g-apps { --hue: var(--hue-apps); }
.g-integrations { --hue: var(--hue-integrations); }
.g-hub { --hue: var(--hue-hub); }
.side-nav { display: flex; flex-direction: column; gap: 10px; }
.side-group { display: grid; gap: 1px; align-content: start; padding: 9px 6px 6px; border: 1px solid color-mix(in srgb, var(--hue) 20%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--hue) 3%, var(--surface)); }
.side-label { display: flex; align-items: center; gap: 10px; padding: 0 6px 7px; font: 700 10.5px/1.2 var(--display); text-transform: uppercase; letter-spacing: .16em; color: color-mix(in srgb, var(--hue) 62%, var(--ink-2)); }
.side-label::before, .side-label::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--hue) 26%, var(--line)); }
.side-nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.side-nav a .i { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, var(--hue) 78%, var(--muted)); }
.side-nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.side-nav a.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--ink); }
.side-nav a.on .i { color: var(--accent-text); }
.side-nav a:focus-visible { outline-offset: -2px; }
/* pages under a page: a fine line down from its icon, a short tick to each */
.side-sub { display: grid; margin: 0 0 3px 19px; }
.side-sub a { margin-left: 11px; padding-left: 10px; min-height: 31px; font-size: 13px; font-weight: 500; }
.side-sub a::before, .side-sub a::after { content: ""; position: absolute; left: -12px; background: color-mix(in srgb, var(--hue) 26%, var(--line-strong)); }
.side-sub a::before { top: 50%; width: 10px; height: 1px; }
.side-sub a::after { top: -1px; bottom: -1px; width: 1px; }
.side-sub a:last-child::after { bottom: 50%; }
.side-sub a.on { font-weight: 600; }
.side > .side-nav .side-end { margin-top: auto; }

.sided { --side-w: 260px; display: block; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 20; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.side-brand { display: grid; justify-items: center; gap: 7px; padding: 20px 22px 16px; text-decoration: none; }
.side-brand .logo { width: 184px; }
.side-brand .name { font: 700 11.5px var(--display); text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
.side > .side-nav { flex: 1 0 auto; padding: 2px 12px 14px; }
.side-foot { margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
/* the profile menu at the foot of the sidebar: the whole width, opening upwards */
.side-foot details.menu > summary { border-radius: 10px; padding: 6px 10px 6px 6px; border-color: transparent; }
.side-foot details.menu > summary:hover, .side-foot details.menu[open] > summary { border-color: var(--line); }
.side-foot .who { flex: 1; min-width: 0; max-width: none; }
.side-foot .menu-pop { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; }
.side-foot form { margin: 0; }
.page { margin-left: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.sided .main { max-width: 1280px; padding: 32px 36px 48px; }
.side-top { display: none; }

/* below 1001px: the bar on top, Menu opening the list under it */
@media (max-width: 1000px) {
  .side { display: none; }
  .page { margin-left: 0; }
  .sided .main { padding: 24px 16px 40px; }
  .side-top { display: block; position: sticky; }
  .side-top .top-in { flex-wrap: nowrap; max-width: none; }
  details.phone-menu { position: static; }
  details.phone-menu > summary { padding: 0 14px 0 12px; border-radius: 8px; gap: 8px; min-height: 44px; font-weight: 700; color: var(--ink); }
  details.phone-menu > summary .i { width: 20px; height: 20px; color: var(--accent); }
  details.phone-menu[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
  .phone-pop { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 22px; background: var(--surface); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow); }
  .phone-pop .side-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); align-items: start; gap: 18px 24px; max-width: 1240px; margin: 0 auto; }
  .phone-pop .side-nav a { min-height: 44px; }
  .side-top .brand { margin-right: auto; }
}
@media (max-width: 620px) {
  .side-top { position: relative; }
  .side-top .brand .rule, .side-top .brand .name { display: none; }
  details.phone-menu > summary span { display: none; }
  details.phone-menu > summary { padding: 0; width: 44px; justify-content: center; }
}

/* INVITE Staff and Staff Roles (staff.rs): owners, staff with a role each, and roles area by area */
.staff-who { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; overflow-wrap: anywhere; }
.role-pick { display: flex; gap: 8px; align-items: center; margin: 0; }
.role-pick select { min-width: 160px; }
.staff-list td.end form { display: inline; margin: 0; }
.roles-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
a.role-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; transition: border-color .15s; }
a.role-card:hover { border-color: var(--accent); }
.role-card .card-head { margin: 0; align-items: flex-start; }
.role-card .card-head > .tag { margin-left: auto; }
.role-card-name h3 { margin: 0; }
.role-card-name p { margin: 2px 0 0; }
.role-sum th, .role-sum td { padding: 6px 0; font-size: 13.5px; }
.role-sum td { text-align: right; }
.role-card .integ-go { margin-top: auto; }
.role-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
fieldset.role-area { margin: 0; min-width: 0; display: grid; gap: 2px; }
.role-area legend { float: left; width: 100%; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font: 700 15px var(--display); color: var(--ink); }
.role-area label.check { align-items: flex-start; padding: 6px 0; min-height: 36px; font-weight: 600; color: var(--ink-2); }
.role-area label.check input { margin-top: 2px; flex: none; width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.role-area label.role-see { color: var(--ink); }
.role-area label.check:has(input:disabled) { color: var(--muted); }
.role-save { margin-top: 18px; align-items: center; position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
@media (max-width: 620px) {
  .role-pick { flex-wrap: wrap; }
  .role-pick select, .role-pick .btn { flex: 1 1 100%; }
  .role-area label.check { min-height: 44px; }
  .staff-list td.end form .btn { width: 100%; }
}

/* a group of fields that only some roles may change: disabled as a whole, laid out like .stack */
fieldset.bare { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
/* a card's buttons: one row at its foot, below a rule */
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.card-actions form { margin: 0; }
.card-actions:not(:has(*)) { display: none; }
@media (max-width: 620px) {
  .card-actions > * { flex: 1 1 100%; }
  .card-actions .btn { width: 100%; justify-content: center; }
}
fieldset.bare.contents { display: contents; }
/* Your Access: where it comes from, then each permission and its level */
.access-via { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--ink-2); font-size: 13px; }
.access-via .i { width: 14px; height: 14px; color: var(--accent-text); flex: none; }
.perm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.perm-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 14px; }
.perm-list li:last-child { border-bottom: 0; }
/* On This Page: a labelled index of a long page's sections, quiet links in one panel */
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; margin: 18px 0 26px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.toc-label { font: 700 10.5px var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.toc a { display: inline-flex; align-items: center; min-height: 34px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 620px) {
  .toc { display: grid; gap: 0; padding: 10px 16px 4px; }
  .toc-label { padding-bottom: 6px; }
  .toc a { min-height: 44px; border-top: 1px solid var(--line); }
}
/* how an iApp shows to a company (Its iApps): Offered in green, Shown Greyed in amber, Hidden in grey; a line
   under it says what that means. Only an offered one has more to set */
.show-pick { display: inline-grid; grid-template-columns: repeat(3, auto); border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.show-pick label { position: relative; display: flex; }
.show-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.show-pick span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-left: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.show-pick label:first-child span { border-left: 0; }
.show-pick span:hover { color: var(--ink); }
.show-pick input[value="offered"]:checked + span { background: var(--good-soft); color: var(--full-text); }
.show-pick input[value="shown"]:checked + span { background: var(--warn-soft); color: var(--warn); }
.show-pick input[value="hidden"]:checked + span { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.show-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.show-pick input:disabled + span { cursor: default; }
.show-note { display: none; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.service:has(input[value="offered"]:checked) .show-note.when-offered,
.service:has(input[value="shown"]:checked) .show-note.when-shown,
.service:has(input[value="hidden"]:checked) .show-note.when-hidden { display: block; }
.service:not(:has(.show-pick input[value="offered"]:checked)) .app-body { display: none; }
.service:not(:has(.show-pick input[value="offered"]:checked)) .app-title .chip-icon { filter: grayscale(1); opacity: .6; }
@media (max-width: 620px) {
  .show-pick { display: grid; width: 100%; }
  .show-pick span { min-height: 44px; padding: 0 8px; }
}

/* Customers: their few pages across the top. Each icon in a chip of its group's hue; the open page in orange,
   with a bar on the header's edge. On phones, a row of equal tabs under the bar, icon over label */
.customer .top-in { gap: 8px 18px; }
.customer .tools .who { max-width: 170px; }
.cnav { display: flex; align-items: center; gap: 4px; }
.cnav-link { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 6px; border: 1px solid transparent; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.cnav .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--hue) 13%, var(--surface)); color: var(--hue); flex: none; }
.cnav .ic .i { width: 20px; height: 20px; }
.cnav-link:hover { background: var(--surface-2); color: var(--ink); }
.cnav-link.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); font-weight: 700; }
.cnav-link.on .ic { background: var(--accent); color: var(--accent-ink); }
.cnav-link.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.cnav-link:focus-visible { outline-offset: 2px; }
/* the header stays one row while it fits (brand, the five pages, the profile menu): "API Gateway" shortens to "API"
   first, then the pages take a row of their own, never leaving the profile menu alone on a second row */
@media (max-width: 1240px) {
  .cnav .lg { display: none; }
}
@media (max-width: 1180px) {
  .cnav { order: 3; width: 100%; }
}
@media (max-width: 620px) {
  .customer .top-in { gap: 0 12px; padding-bottom: 0; }
  .cnav { order: 3; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 8px -4px 0; }
  .cnav-link { flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: 6px 2px 8px; border-radius: 10px 10px 0 0; font-size: 12px; }
  .cnav .ic { width: 30px; height: 30px; }
  .cnav .ic .i { width: 18px; height: 18px; }
  .cnav-link.on { border-bottom-color: transparent; }
  .cnav-link.on::after { left: 8px; right: 8px; bottom: -1px; }
}
.access-card.off .chip-icon { filter: grayscale(1); opacity: .6; }

/* People, as a roster: a summary row each (who, profile, last sign-in) that opens to Manage them, in labelled parts
   side by side whose controls line up at the foot. On phones the cells stack under the name, labelled */
.roster { --cols: 36px minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, 1fr) 104px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.roster.wide { --cols: 36px minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .9fr) 104px; }
.roster-head, .roster-row > summary { display: grid; grid-template-columns: var(--cols); column-gap: 16px; align-items: center; padding: 0 20px; }
.roster-head { min-height: 38px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.roster-head > :first-child { grid-column: span 2; }
.roster-row + .roster-row { border-top: 1px solid var(--line); }
.roster-row > summary { list-style: none; min-height: 68px; padding-block: 12px; cursor: pointer; transition: background-color .15s; }
.roster-row > summary::-webkit-details-marker { display: none; }
.roster-row > summary:hover { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.roster-row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.roster-row[open] > summary { background: var(--surface-2); }
.roster-row .person-who { grid-area: auto; display: grid; gap: 1px; min-width: 0; }
.roster-row .person-who .small { overflow-wrap: anywhere; }
.roster-cell { min-width: 0; font-size: 13.5px; }
.roster-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.roster-open { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s, box-shadow .18s, transform .18s; }
.roster-open .i { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.roster-row > summary:hover .roster-open { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); color: var(--ink); }
.roster-row[open] .roster-open { border-color: var(--accent); color: var(--accent-text); }
.roster-row[open] .roster-open .i { transform: rotate(180deg); }
.roster-row.off .initials { background: var(--surface-2); color: var(--muted); }
.roster-row.off .person-name strong { color: var(--muted); }
.roster-empty { margin: 0; padding: 18px 20px; }
.manage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 14px 20px 18px; background: var(--surface-2); border-top: 1px solid var(--line); }
.manage-part { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.manage-part h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.manage-part h3 .i { width: 15px; height: 15px; color: var(--accent); }
.manage-part > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.manage-part > :last-child { margin-top: auto; margin-bottom: 0; }
.manage-part form { margin: 0; }
.manage-part form:not(.join) .btn { width: 100%; }
.manage-buttons { display: grid; gap: 8px; }
.manage-part .join select { flex: 1; min-width: 0; }
.manage-note { display: flex; align-items: center; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--ink-2); font-size: 13px; }
.manage > .manage-note { grid-column: 1 / -1; }
@media (max-width: 1440px) {
  .manage:has(> .manage-part:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .roster.wide { --cols: 36px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 104px; }
  .roster.wide .roster-tags, .roster.wide .roster-head > :nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .roster-head { display: none; }
  .roster-row > summary, .roster.wide .roster-row > summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; padding: 14px 16px; }
  .roster-cell, .roster.wide .roster-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .roster-cell::before { content: attr(data-label); min-width: 96px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .roster-open { grid-column: 3; grid-row: 1; width: 44px; min-height: 44px; padding: 0; }
  .roster-open .open-label { display: none; }
  .manage, .manage:has(> .manage-part:nth-child(4)) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .manage .btn, .manage select, .manage-note { min-height: 44px; }
  details.add > summary { flex-wrap: wrap; }
  details.add > summary .add-note { flex-basis: 100%; margin-left: 24px; }
}

/* Motion: calm and quick. Pages cross-fade while the sidebar and the header hold still; links to a section scroll
   to it; what opens unfolds; what can be clicked answers the pointer, lifting a little and pressing in. None of it
   for those whose system asks for less motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
  .side { view-transition-name: side; }
  .top { view-transition-name: top; }
  ::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: page-in .26s var(--ease) both; mix-blend-mode: normal; }
  ::view-transition-old(top), ::view-transition-new(top), ::view-transition-old(side), ::view-transition-new(side) { animation-duration: .2s; }

  .btn, .icon-btn, .menu-item, .nav a, .subnav a, .toc a, .jump, a.integ, a.role-card, a.profile-tile, .tile.go, .co,
  details.add > summary, details.menu > summary, .cnav .ic, .side-nav a .i, .menu-item .i {
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .18s, transform .18s var(--ease), filter .15s;
  }
  details.add, details.roster-row, details.sub { interpolate-size: allow-keywords; }
  details.add::details-content, details.roster-row::details-content, details.sub::details-content {
    block-size: 0; overflow-y: clip; transition: block-size .26s var(--ease), content-visibility .26s allow-discrete;
  }
  details.add[open]::details-content, details.roster-row[open]::details-content, details.sub[open]::details-content { block-size: auto; }
  details.menu[open] > .menu-pop, details.menu[open] > .phone-pop { animation: pop-in .16s var(--ease); }
  .menu-pop { transform-origin: top right; }
  .side-foot .menu-pop { transform-origin: bottom left; }
}
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):hover, .icon-btn:hover { transform: translateY(-1px); box-shadow: var(--lift); }
  .btn.primary:not(:disabled):hover { filter: none; background: color-mix(in srgb, var(--accent) 88%, #000000); border-color: color-mix(in srgb, var(--accent) 88%, #000000); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
  .btn:not(:disabled):active, .icon-btn:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .06s; }
  .tile.go:hover, .co:hover, a.integ:hover, a.role-card:hover, a.profile-tile:hover, .jump:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .roster-row > summary:hover .roster-open { transform: translateY(-1px); box-shadow: var(--lift); }
  .cnav-link:hover:not(.on) .ic { transform: translateY(-1px) scale(1.06); }
  .side-nav a:not(.on):hover .i { transform: translateX(1px); color: var(--hue); }
  .menu-item:hover .i { color: var(--accent); }
  .join .btn:not(:disabled):hover, .join .btn:not(:disabled):active { transform: none; box-shadow: none; }
}
/* a link to a section lands below the bar that stays on top */
html:has(> body.customer) { scroll-padding-top: 84px; }
html:has(> body.sided) { scroll-padding-top: 16px; }
@media (max-width: 620px) {
  html:has(> body.customer) { scroll-padding-top: 140px; }
  html:has(> body.sided) { scroll-padding-top: 76px; }
}

/* Under iApps in the customers' header, on a computer: pointing at it (or tabbing to it) shows a slim box per iApp,
   its icon then its name, to open it in a new tab. It opens after a moment and stays a moment after the pointer
   leaves, so passing over it does nothing; Escape closes it (hub.js). Phones and touch go to the iApps page */
.cnav-item { position: relative; display: flex; }
.cnav-link > .i-chevron { width: 14px; height: 14px; margin-left: -3px; color: var(--muted); transition: transform .2s var(--ease); }
.cnav-pop { display: none; }
@media (hover: hover) and (min-width: 621px) {
  .cnav-pop { display: block; position: absolute; left: -6px; top: calc(100% + 11px); z-index: 40; width: 352px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease .18s, transform .14s ease .18s, visibility 0s linear .32s; }
  /* a bridge over the gap, so the pointer keeps it open on its way down */
  .cnav-pop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
  .cnav-item:is(:hover, :focus-within):not(.shut) > .cnav-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease .09s, transform .2s var(--ease) .09s, visibility 0s linear .09s; }
  .cnav-item:is(:hover, :focus-within):not(.shut) > .cnav-link > .i-chevron { transform: rotate(180deg); color: var(--accent); }
}
.pop-head { display: grid; gap: 1px; padding: 0 2px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.pop-head strong { font: 700 13px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.pop-head span { color: var(--muted); font-size: 12.5px; }
.pop-empty { margin: 0 0 12px; color: var(--muted); }
/* slim boxes, one under another: the iApp's icon, its name, and the new-tab mark (or why it can't be opened) */
.app-boxes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.app-boxes li { display: flex; }
.app-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .18s, transform .18s var(--ease), background-color .15s; }
.app-box .tile-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.app-box .tile-icon .i { width: 16px; height: 16px; }
.app-box .tile-icon .mark { width: 80%; height: 80%; }
.app-box-name { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; line-height: 1.3; }
.app-box > .i { width: 14px; height: 14px; color: var(--muted); transition: color .15s; }
.app-box-note { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); }
a.app-box:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); box-shadow: var(--lift); transform: translateY(-1px); }
a.app-box:hover > .i { color: var(--accent); }
a.app-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-box.off { background: transparent; border-style: dashed; color: var(--ink-2); }
.app-box.off .tile-icon { background: var(--surface-2); color: var(--muted); }
.app-box.off .mark { filter: grayscale(1); opacity: .6; }
.pop-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pop-foot .btn { width: 100%; }
@media (max-width: 620px) {
  .cnav-item { display: contents; }
  .cnav-link > .i-chevron { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cnav-pop, .cnav-item:is(:hover, :focus-within) > .cnav-pop { transform: none; transition-property: opacity, visibility; }
}

/* the iApps icon's INVITE roundel keeps the logo's own colour: INVITE Orange, white where it sits on orange, and
   greyed with an iApp tile that isn't theirs */
.i-iapps .roundel { color: var(--accent); }
/* its fine corners and small roundel read smaller than a solid icon of the same size: drawn a quarter larger
   wherever it sits (scale, so a hover's transform still adds to it) */
.i.i-iapps { scale: 1.25; }
.cnav-link.on .ic .roundel { color: inherit; }
:is(.tile.off, .app-box.off) .roundel { color: inherit; }