/* Iconkind Admin — GENERATED by tools/build-qx-doors.mjs: sites/iconkind/v5/assets/css/iconkind.css, whole, then the door's own few rules. Do not hand-edit. */
/* iconkind — ADMIN-DOOR conformance stylesheet (admin.iconkind.com).
 *
 * This is NOT iconkind's public skin (that stays sites/iconkind/v5/assets/css/icon.css, untouched). It exists
 * only so tools/build-qx-doors.mjs can dress the login-gated console in iconkind's brand: it is the qxsuite.css
 * console format (sites/qxsuite/v5/assets/css/qxsuite.css), structure word-for-word, RECOLOURED to iconkind's
 * palette — a navy canvas with cream type and a coral accent (iconkind tokens, themes/icon.theme.json:
 * navy #2b3247, cream #fef6e8, coral #e07856). Only :root changes; every rule below is the shared console look.
 *
 * EVERY COLOUR IS HERE. The gradient stops of the mark (assets/svg/brand/mark.svg) name no colour and take their
 * stops from the three .qxp-stop-* classes below — so the one drawing is coral on this door.
 * PHONE FIRST — every rule starts at a phone and widens.
 */

:root {
  --qxp-bg: #161b27;            /* the ground — deep iconkind navy */
  --qxp-bg-2: #1e2534;          /* panels and the bar */
  --qxp-bg-3: #2b3247;          /* a panel that lifts off the one behind it — iconkind navy */
  --qxp-ink: #fef6e8;           /* headings and the wordmark — iconkind cream */
  --qxp-body: #d7cfbd;          /* running text — soft cream */
  --qxp-muted: #a79e8c;         /* captions, notes, the small print — warm muted */
  --qxp-hi: #ef9f7d;            /* the accent, light end: the strapline and the mark's first stop — coral light */
  --qxp-mid: #e07856;           /* the accent, middle: buttons and rules — iconkind coral */
  --qxp-low: #b85432;           /* the accent, dark end: the mark's tail — coral deep */
  --qxp-down: #c85a5a;          /* the other direction — a step that did not pass, and nothing else */
  --qxp-line: rgba(254, 246, 232, .10);
  --qxp-line-2: rgba(254, 246, 232, .18);
  --qxp-glow: rgba(224, 120, 86, .16);
  --qxp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45);
  --qxp-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qxp-wide: 1140px;
}

/* .qxp-wrap is width:100% with side padding; without border-box the padding is added to the width and the whole
 * page scrolls sideways on a phone, which is where this design starts. */
*, *::before, *::after { box-sizing: border-box; }

body {
  /* The engine's blocks.css sets body { padding: 2rem }, which frames a dark site in a light border. The bar
   * runs to the edge of the glass here, as it does in the drawing. */
  margin: 0;
  padding: 0;
  background: var(--qxp-bg);
  color: var(--qxp-body);
  font: 16px/1.6 var(--qxp-ui);
  -webkit-font-smoothing: antialiased;
}

.qxp-wrap { width: 100%; max-width: var(--qxp-wide); margin: 0 auto; padding: 0 18px; }

a { color: var(--qxp-hi); }
:focus-visible { outline: 2px solid var(--qxp-hi); outline-offset: 3px; border-radius: 4px; }

/* ── the mark ───────────────────────────────────────────────────────────────
 * mark.svg carries no colour: its three gradient stops are classed and coloured here, which is how one drawing
 * is green on this site and blue on QxSuite. */
.qxp-stop-a { stop-color: var(--qxp-hi); }
.qxp-stop-b { stop-color: var(--qxp-mid); }
.qxp-stop-c { stop-color: var(--qxp-low); }
.qxp-mark { display: block; width: 100%; height: 100%; }

/* EVERY SVG HOLDER IS A BLOCK, in one rule so a new one cannot slip through.
 * The builder wraps each drawing in a <span>, and a span is inline: width and height do nothing to it, so the
 * svg inside at width:100% resolves against the nearest block instead. That put a 108px mark at 900px and a
 * 24px module icon at card width. Both looked fine in the bar and the sister card — a flex or grid item is
 * blockified for free — which is exactly how the bug hid on two pages out of five. */
.qxp-brand-mark, .qxp-hero-mark, .qxp-sister-mark, .qxp-foot-mark, .qxp-card-icon { display: block; }

/* ── the bar ────────────────────────────────────────────────────────────────*/
.qxp-top { position: sticky; top: 0; z-index: 20; background: var(--qxp-bg-2);
  border-bottom: 1px solid var(--qxp-line); }
.qxp-top-inner { display: flex; align-items: center; gap: 14px; max-width: var(--qxp-wide); margin: 0 auto;
  padding: 11px 18px; }
.qxp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--qxp-ink); }
.qxp-brand-mark { width: 26px; height: 26px; flex: none; }
.qxp-brand-word { font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.qxp-brand-word b { font-weight: 700; }
.qxp-brand-word span { font-weight: 300; }
.qxp-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.qxp-nav a { display: inline-block; padding: 7px 10px; border-radius: 7px; font-size: 14px;
  color: var(--qxp-body); text-decoration: none; }
.qxp-nav a:hover, .qxp-nav a:focus-visible { color: var(--qxp-ink); background: var(--qxp-bg-3); }

/* ── the hero, as the brand sheet lays it out ───────────────────────────────
 * mark, name, strapline in spaced accent caps, a short rule, then the three words. */
.qxp-hero { padding: 46px 0 34px; background:
  radial-gradient(70% 60% at 50% 0%, var(--qxp-glow), transparent 70%); }
.qxp-hero-mark { width: 86px; height: 86px; margin: 0 auto 18px; }
.qxp-hero-head { margin: 0; text-align: center; color: var(--qxp-ink); font-size: 40px; line-height: 1.04;
  letter-spacing: -.02em; font-weight: 300; }
.qxp-hero-head b { font-weight: 700; }
.qxp-strap { margin: 12px 0 0; text-align: center; color: var(--qxp-hi); font-size: 12px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; }
.qxp-hero-rule { width: 64px; height: 1px; margin: 22px auto; background: var(--qxp-line-2); }
.qxp-values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 18px; color: var(--qxp-muted); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.qxp-values li:not(:last-child)::after { content: "/"; margin-left: 18px; color: var(--qxp-line-2); }
.qxp-hero-lede { margin: 26px auto 0; max-width: 640px; text-align: center; font-size: 17px;
  color: var(--qxp-body); }
.qxp-hero-acts { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.qxp-btn { display: inline-block; padding: 11px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  text-decoration: none; background: var(--qxp-mid); color: var(--qxp-bg); border: 1px solid transparent; }
.qxp-btn:hover, .qxp-btn:focus-visible { background: var(--qxp-hi); }
.qxp-btn-quiet { background: transparent; color: var(--qxp-ink); border-color: var(--qxp-line-2); }
.qxp-btn-quiet:hover, .qxp-btn-quiet:focus-visible { background: var(--qxp-bg-3); color: var(--qxp-ink); }

/* ── a section of the page ──────────────────────────────────────────────────*/
.qxp-section { padding: 42px 0; border-top: 1px solid var(--qxp-line); }
.qxp-section-quiet { background: var(--qxp-bg-2); }
.qxp-eyebrow { margin: 0 0 10px; color: var(--qxp-hi); font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; }
.qxp-head { margin: 0; color: var(--qxp-ink); font-size: 27px; line-height: 1.2; letter-spacing: -.015em;
  font-weight: 400; text-wrap: balance; }
.qxp-head-rule { width: 46px; height: 2px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--qxp-hi), var(--qxp-low)); }
.qxp-lede { margin: 16px 0 0; max-width: 62ch; font-size: 17px; }
.qxp-prose { max-width: 62ch; }
.qxp-prose p { margin: 0 0 14px; }
.qxp-prose p:last-child { margin-bottom: 0; }

/* ── the modules, one panel each ────────────────────────────────────────────*/
.qxp-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: 1fr; }
.qxp-card { background: var(--qxp-bg-2); border: 1px solid var(--qxp-line); border-radius: 12px; padding: 16px; }
.qxp-card-icon { width: 24px; height: 24px; color: var(--qxp-hi); }
.qxp-card-icon svg { width: 100%; height: 100%; display: block; }
.qxp-card-name { margin: 12px 0 6px; color: var(--qxp-ink); font-size: 16px; font-weight: 600; }
.qxp-card-text { margin: 0; font-size: 14.5px; color: var(--qxp-body); }

/* ── the drawn workspace, in the devices the mock-up shows it in ────────────
 * The second board in mood-board/qx presents each platform twice: a laptop labelled Desktop and a phone
 * labelled Mobile, side by side. That is the presentation here — the frames are CSS, the screens are the
 * drawings in assets/svg/scene, so nothing is a screenshot and nothing carries a figure. */
.qxp-devices { margin: 26px 0 0; display: grid; gap: 26px; align-items: end; }
.qxp-device-label { margin: 0 0 10px; color: var(--qxp-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; }

/* The laptop: a thin bezel round the screen, then the lid line and the base lip under it. */
.qxp-laptop { padding: 0 14px; }
.qxp-laptop-lid { background: var(--qxp-bg-3); border: 1px solid var(--qxp-line-2); border-radius: 12px 12px 4px 4px;
  padding: 10px 10px 12px; box-shadow: var(--qxp-shadow); }
.qxp-laptop-base { height: 10px; width: calc(100% + 28px); margin-left: -14px; border-radius: 0 0 10px 10px;
  background: var(--qxp-bg-3); border: 1px solid var(--qxp-line-2); border-top: 0; }
.qxp-laptop-base::after { content: ""; display: block; width: 16%; height: 3px; margin: 0 auto;
  border-radius: 0 0 3px 3px; background: var(--qxp-line-2); }

/* The phone: a thicker bezel, a deeper radius and the notch along the top. */
.qxp-phone-body { max-width: 240px; margin: 0 auto; background: var(--qxp-bg-3);
  border: 1px solid var(--qxp-line-2); border-radius: 26px; padding: 9px; box-shadow: var(--qxp-shadow);
  position: relative; }
.qxp-phone-body::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 13px; border-radius: 0 0 9px 9px; background: var(--qxp-bg); z-index: 1; }

.qxp-scene { display: block; width: 100%; height: auto; border-radius: 6px; }
.qxp-phone-body .qxp-scene { border-radius: 18px; }
.qxp-frame-cap { margin: 16px 2px 2px; color: var(--qxp-muted); font-size: 12.5px; }
.qxp-scene-win { fill: var(--qxp-bg-3); stroke: var(--qxp-line-2); }
.qxp-scene-line { stroke: var(--qxp-line); fill: none; }
.qxp-scene-grid { stroke: var(--qxp-line); fill: none; stroke-dasharray: 3 6; }
.qxp-scene-chip { fill: var(--qxp-line-2); }
.qxp-scene-chip2 { fill: var(--qxp-line); }
.qxp-scene-rail { fill: var(--qxp-line); }
.qxp-scene-on { fill: var(--qxp-mid); }
.qxp-scene-row { stroke: var(--qxp-line-2); fill: none; }
.qxp-scene-row2 { stroke: var(--qxp-line); fill: none; }
.qxp-up { fill: var(--qxp-hi); }
.qxp-up-line { stroke: var(--qxp-hi); fill: none; }
.qxp-down { fill: var(--qxp-down); }
.qxp-down-line { stroke: var(--qxp-down); fill: none; }
.qxp-node { fill: var(--qxp-bg-2); stroke: var(--qxp-line-2); }
.qxp-node-on { stroke: var(--qxp-mid); }
.qxp-node-dot { fill: var(--qxp-mid); }
.qxp-tile { fill: var(--qxp-bg-2); stroke: var(--qxp-line); }
.qxp-flow { stroke: var(--qxp-line-2); fill: none; }
.qxp-flow-head { fill: var(--qxp-line-2); stroke: none; }

/* ── the honest note ────────────────────────────────────────────────────────
 * Every page carries one. The platform is being built; the site says so rather than implying otherwise. */
.qxp-note { margin: 26px 0 0; border-left: 2px solid var(--qxp-mid); padding: 2px 0 2px 14px; }
.qxp-note-head { display: block; color: var(--qxp-ink); font-size: 14px; font-weight: 600; }
.qxp-note-text { margin: 6px 0 0; font-size: 14.5px; color: var(--qxp-muted); }

/* ── the other platform ─────────────────────────────────────────────────────*/
.qxp-sister { display: block; margin: 24px 0 0; text-decoration: none; background: var(--qxp-bg-3);
  border: 1px solid var(--qxp-line); border-radius: 12px; padding: 18px; }
.qxp-sister:hover, .qxp-sister:focus-visible { border-color: var(--qxp-line-2); }
.qxp-sister-mark { width: 34px; height: 34px; }
/* The sister card points at the OTHER platform, whose accent is not this one's. Painting its mark in this
 * site's green (or blue) would be recolouring somebody else's brand, so it takes the monochrome lockup the
 * brand sheet provides. */
.qxp-sister-mark .qxp-stop-a, .qxp-sister-mark .qxp-stop-b { stop-color: var(--qxp-ink); }
.qxp-sister-mark .qxp-stop-c { stop-color: var(--qxp-muted); }
.qxp-sister-name { margin: 12px 0 4px; color: var(--qxp-ink); font-size: 18px; font-weight: 600; }
.qxp-sister-text { margin: 0; color: var(--qxp-body); font-size: 14.5px; }
.qxp-sister-go { display: inline-block; margin: 10px 0 0; color: var(--qxp-hi); font-size: 14px;
  font-weight: 600; }

/* ── steps, for the approach page ───────────────────────────────────────────*/
.qxp-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.qxp-step { background: var(--qxp-bg-2); border: 1px solid var(--qxp-line); border-radius: 12px; padding: 18px; }
.qxp-step-n { color: var(--qxp-hi); font-size: 12px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; }
.qxp-step-name { margin: 8px 0 8px; color: var(--qxp-ink); font-size: 20px; font-weight: 500; }
.qxp-step-text { margin: 0; font-size: 15.5px; }

/* ── the footer ─────────────────────────────────────────────────────────────*/
.qxp-foot { border-top: 1px solid var(--qxp-line); background: var(--qxp-bg-2); padding: 30px 0 38px;
  margin-top: 8px; }
.qxp-foot-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.qxp-foot-mark { width: 22px; height: 22px; flex: none; }
.qxp-foot-word { color: var(--qxp-ink); font-size: 15px; }
.qxp-foot-word b { font-weight: 700; }
.qxp-foot-word span { font-weight: 300; }
.qxp-foot-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.qxp-foot-links a { padding: 6px 8px; border-radius: 6px; color: var(--qxp-body); font-size: 14px;
  text-decoration: none; }
.qxp-foot-links a:hover, .qxp-foot-links a:focus-visible { color: var(--qxp-ink); background: var(--qxp-bg-3); }
.qxp-foot-rule { height: 1px; margin: 22px 0; background: var(--qxp-line); }
.qxp-foot-small { margin: 0; color: var(--qxp-muted); font-size: 13px; max-width: 72ch; }
.qxp-foot-small + .qxp-foot-small { margin-top: 10px; }
.qxp-umbrella { margin: 14px 0 0; color: var(--qxp-muted); font-size: 12px; }
/* The logotype keeps its own casing; only the line after it is set in spaced caps, as on the brand sheet.
 * text-transform over the whole string turned "Qx" into "QX", which is somebody else's brand. */
.qxp-umbrella b { color: var(--qxp-body); font-weight: 700; }
.qxp-umbrella span { margin-left: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* ── wider than a phone ─────────────────────────────────────────────────────*/
@media (min-width: 620px) {
  .qxp-hero { padding: 64px 0 46px; }
  .qxp-hero-mark { width: 124px; height: 124px; }
  .qxp-hero-head { font-size: 56px; }
  .qxp-head { font-size: 32px; }
  .qxp-grid { grid-template-columns: 1fr 1fr; }
  .qxp-steps { grid-template-columns: repeat(3, 1fr); }
  .qxp-sister { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; }
  .qxp-sister-name { margin-top: 0; }
}
@media (min-width: 900px) {
  .qxp-section { padding: 58px 0; }
  .qxp-hero-head { font-size: 66px; }
  .qxp-grid { grid-template-columns: repeat(4, 1fr); }
  .qxp-hero-mark { width: 140px; height: 140px; }
  .qxp-devices { grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; }
  .qxp-frame { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── THE DOOR — GENERATED by tools/build-qx-doors.mjs and appended to the parent's stylesheet. ──
   Only what a door has and the public site has not: its name beside the wordmark, and the
   parent's clothes for the ENGINE's sign-in form (auth.login) and account menu
   (auth.account-menu). Every colour is the parent's token. */
.qxd-tag { margin-left: 2px; padding: 2px 8px; border: 1px solid var(--qxp-line-2); border-radius: 999px;
  color: var(--qxp-hi); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.qxp-top .qx-link.qxp-brand { min-height: 44px; }
/* The bar's row is a block of its own here (a V5 container inside a V5 container), so it is told
   to take the width the parent's bar has: the brand at one end, the account at the other. */
.qxp-top > .qxp-top-inner { width: 100%; }
.qxp-brand .qx-html-content { display: block; }
.qxp-brand .qx-html-content.qxp-brand-mark { line-height: 0; }

/* the account menu, where the parent's nav is */
.qxp-nav .auth-whoami-name { margin: 0; color: var(--qxp-muted); font-size: 13px; max-width: 34vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qxp-nav .auth-logout, .qxp-nav .qx-link.auth-signin-link, .qxp-nav .qx-link.qxd-public { display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 14px; text-decoration: none; color: var(--qxp-body); }
.qxp-nav .auth-logout { border: 1px solid var(--qxp-line-2); background: transparent; color: var(--qxp-ink); cursor: pointer; }
.qxp-nav .auth-logout:hover, .qxp-nav .auth-logout:focus-visible,
.qxp-nav .qx-link.auth-signin-link:hover, .qxp-nav .qx-link.qxd-public:hover { background: var(--qxp-bg-3); color: var(--qxp-ink); }
/* A phone has room for the mark, the name and the way out. Who is signed in is said on the page. */
@media (max-width: 640px) {
  .qxp-nav .auth-whoami-name, .qxp-nav .qx-link.qxd-public { display: none; }
}

/* the panel a door's page is, and the sign-in form in it */
.qxd-panel { max-width: 27rem; margin: 0 auto; padding: 46px 18px 64px; }
.qxd-small { margin: 18px 0 0; color: var(--qxp-muted); font-size: 13px; }
.qxd-panel .auth-login, .qxd-panel .auth-register, .qxd-panel .auth-recovery { margin: 26px 0 0; }
.qxd-panel .auth-login > .qx-heading, .qxd-panel .auth-register > .qx-heading, .qxd-panel .auth-recovery > .qx-heading { margin: 0 0 4px; color: var(--qxp-ink); font-size: 18px; font-weight: 600; }
.qxd-panel .auth-recovery > .qx-heading ~ .qx-heading { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--qxp-line); align-self: stretch; }
.qxd-panel .qx-text.auth-forgot-status, .qxd-panel .qx-text.auth-reset-status { align-self: stretch; margin: 0; min-height: 1.4em; color: var(--qxp-ink) !important; font-size: 14px; }
/* said once, when it is true: the email was confirmed, or the link was no longer good */
.qxd-note { margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--qxp-line-2); border-left: 3px solid var(--qxp-hi); border-radius: 9px; color: var(--qxp-ink); font-size: 14px; }
/* what the register form asks for, said before it is asked */
.qxd-panel .auth-register > .qx-text { margin: 0; color: var(--qxp-body) !important; font-size: 14px; line-height: 1.5; }
.qxd-panel .qx-link.qxd-link { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 0; color: var(--qxp-hi); font-size: 14px; }
.qxd-panel .qx-link.qxd-link:hover, .qxd-panel .qx-link.qxd-link:focus-visible { color: var(--qxp-ink); }
.qxd-panel .qx-form { align-self: stretch; display: grid; gap: 14px; }
.qxd-panel .qx-form__row { display: grid; gap: 6px; }
.qxd-panel .qx-form__label { color: var(--qxp-body); font-size: 13px; font-weight: 500; }
.qxd-panel .qx-form__required { color: var(--qxp-muted); }
.qxd-panel .qx-form__field { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--qxp-line-2); border-radius: 9px;
  background: var(--qxp-bg-2); color: var(--qxp-ink); font: inherit; font-size: 16px; }
.qxd-panel .qx-form__field:focus-visible { outline: 2px solid var(--qxp-hi); outline-offset: 1px; }
.qxd-panel .qx-form__field-error, .qxd-panel .qx-form__errors { color: var(--qxp-down); font-size: 13px; }
.qxd-panel .qx-form__field-error:empty { display: none; }
.qxd-panel .qx-form__submit { width: 100%; min-height: 46px; border: 1px solid var(--qxp-mid); border-radius: 9px; background: var(--qxp-mid);
  color: var(--qxp-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.qxd-panel .qx-form__submit:hover, .qxd-panel .qx-form__submit:focus-visible { background: var(--qxp-hi); color: var(--qxp-bg); }
.qxd-panel .qx-form__submit[disabled] { opacity: .6; cursor: progress; }
/* The engine's error line reads "⚠ " before anything has gone wrong: its format wraps an empty
   value (asked of the engine, NOTEBOARD C65). The sign is taken off here, so an empty line is an
   empty line — it keeps its height, and the form does not jump when the words arrive. */
.qxd-panel .qx-text.auth-error, .qxd-panel .auth-register > .qx-text.auth-reg-error { align-self: stretch; margin: 0; min-height: 1.4em; color: var(--qxp-down) !important; font-size: 14px; line-height: 1.4; }
.qxd-panel .qx-text.auth-error::first-letter, .qxd-panel .qx-text.auth-reg-error::first-letter { font-size: 0; }

/* ── the Menu disclosure — copied from qxstrategy.css by tools/build-qx-doors.mjs ── */
/* ── top menu: Favourites + Menu disclosure (iconkind header format, dark palette) ── */
.qxp-topright { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.qxp-menu { position: static; }
.qxp-menu > summary { list-style: none; }
.qxp-menu > summary::-webkit-details-marker { display: none; }
.qxp-menu-button, .qxp-action { box-sizing: border-box; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--qxp-line-2); border-radius: .6rem; background: var(--qxp-bg-3); color: var(--qxp-ink); cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease; }
@media (hover: hover) { .qxp-menu-button:hover, .qxp-action:hover { border-color: var(--qxp-hi); } }
.qxp-menu-button:focus-visible, .qxp-action:focus-visible { outline: 2px solid var(--qxp-hi); outline-offset: 2px; }
.qxp-menu[open] .qxp-menu-button { border-color: var(--qxp-hi); }
.qxp-action svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qxp-action-word, .qxp-menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qxp-menu-icon { position: relative; display: block; width: 1.15rem; height: .55rem; border-top: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
.qxp-menu[open] .qxp-menu-icon { border-color: transparent; }
.qxp-menu[open] .qxp-menu-icon::before, .qxp-menu[open] .qxp-menu-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.6px solid currentColor; }
.qxp-menu[open] .qxp-menu-icon::before { transform: rotate(45deg); }
.qxp-menu[open] .qxp-menu-icon::after { transform: rotate(-45deg); }
.qxp-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 2rem;
  padding: 1.6rem max(18px, calc((100% - var(--qxp-wide)) / 2)) 2rem; background: var(--qxp-bg-2); border-bottom: 1px solid var(--qxp-line);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .65); }
@media (max-width: 46rem) { .qxp-menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; max-height: calc(100vh - 4rem); overflow-y: auto; } }
.qxp-menu-account { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; padding: .1rem 0 1rem;
  border-bottom: 1px solid var(--qxp-line); color: var(--qxp-ink); text-decoration: none; font-size: 1rem; }
.qxp-menu-account svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qxp-menu-account:hover { color: var(--qxp-hi); }
.qxp-menu-h { margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--qxp-line); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qxp-hi); }
.qxp-menu-link { display: block; padding: .5rem .6rem; margin: 0 -.6rem; border-radius: 8px; font-size: 1rem; line-height: 1.3; color: var(--qxp-body); text-decoration: none; transition: background-color .12s ease, color .12s ease; }
.qxp-menu-link:hover, .qxp-menu-link:focus-visible { color: var(--qxp-hi); background: var(--qxp-bg-3); }

/* ── top menu (iconkind format) in the header bar: the menu host, the auth cluster ── */
/* every tap in the bar and the panel is a 44px target on a phone (the public site's 2.5rem button and
   1rem links fall short at a 16px base; the gate's phone check counts them) */
.qxp-menu-button, .qxp-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.qxp-menu-link { display: flex; align-items: center; min-height: 44px; }
.qxp-topright > .qx-html-content { display: inline-flex; align-items: center; }
.qxp-topright > .qxp-nav { margin-left: 0; overflow: visible; }
/* The signed-in user: a person icon in the bar (reuses .qxp-action's framed box), tapped to drop a
   small panel with the email + Sign out. The panel anchors to the icon and dismisses with Close. */
.qxp-user { position: relative; display: inline-flex; }
.qxp-user-btn { cursor: pointer; }
.qxp-user-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; min-width: 14rem;
  display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1rem 1rem;
  background: var(--qxp-bg-2); border: 1px solid var(--qxp-line-2); border-radius: 12px;
  box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.28); }
.qxp-user-who { margin: 0; color: var(--qxp-muted); font-size: 13px; line-height: 1.4; word-break: break-all;
  padding-bottom: .7rem; border-bottom: 1px solid var(--qxp-line); }
.qxp-user-logout { width: 100%; min-height: 40px; border: 1px solid var(--qxp-line-2); border-radius: 9px;
  background: transparent; color: var(--qxp-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.qxp-user-logout:hover, .qxp-user-logout:focus-visible { border-color: var(--qxp-hi); background: var(--qxp-bg-3); }
.qxp-user-dismiss { align-self: center; border: 0; background: transparent; color: var(--qxp-muted); font: inherit;
  font-size: 12px; letter-spacing: .04em; cursor: pointer; padding: .2rem .4rem; }
.qxp-user-dismiss:hover, .qxp-user-dismiss:focus-visible { color: var(--qxp-ink); }