/* ==========================================================================
   Optix — application stylesheet
   Hand-written CSS3. No framework, no preprocessor, no build step (INF-001).

   Token values come from README.md and CLAUDE.md and are authoritative.
   Do NOT introduce new hues: derive tints from the two brand golds. The card
   shadow below is the ONLY elevation in the system.

   Layout uses flex/grid with `gap`. No margin-stacking (project convention).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Lato (INF-002, SEC-022).
   Served from our own origin so the CSP can keep third-party origins closed.
   Fetched as woff2 for the four weights the design uses: 300/400/700/900.
   `font-display: swap` so text paints immediately rather than blocking.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/lato-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/lato-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/lato-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/lato-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* latin-ext, so accented company names render correctly (SEC-013 keeps utf8mb4 end to end) */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/lato-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lato-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lato-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/lato-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------------------
   Design tokens (README.md). The palette and spacing live here as custom
   properties on :root, per the project convention.
   -------------------------------------------------------------------------- */
:root{
  /* Colour */
  --page:#F5F5F5;
  --surface:#fff;
  --text:#111;
  --muted:rgba(0,0,0,.6);
  --muted-2:rgba(0,0,0,.45);
  --hairline:rgba(0,0,0,.07);
  --input-border:rgba(0,0,0,.14);
  --gold:#CDA921;          /* portal brand */
  --gold-hover:#998020;
  --gold-admin:#8a7414;    /* admin links */
  --focus-ring:rgba(195,176,19,.12);

  /* Alerts — the four project-standard types. Exact values, do not adjust. */
  --info-text:#333;        --info-bg:#F1F3F5;                --info-border:#33333357;
  --success-text:#1d7a33;  --success-bg:rgba(47,158,68,.09);  --success-border:#1d7a3369;
  --warning-text:#C58223;  --warning-bg:#FFF3E2;              --warning-border:rgba(197,130,35,.76);
  --danger-text:#b02a2a;   --danger-bg:#f8d7da;               --danger-border:#b02a2a80;

  /* Radii */
  --r-toolbar:8px; --r-input:11px; --r-button:13px; --r-nav:14px; --r-card:18px;

  /* The only elevation in the system. Do not add another shadow. */
  --shadow-card:0 10px 30px rgba(20,30,50,.05);

  /* Spacing scale */
  --s-1:8px; --s-2:10px; --s-3:12px; --s-4:14px; --s-5:18px; --s-6:20px;

  /* Type */
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* INF-116: minimum supported viewport. Below this the layout is unsupported. */
  --min-viewport:1280px;
}

*{box-sizing:border-box}

/* The [hidden] attribute must actually hide.
   A browser's own `[hidden]{display:none}` lives in the UA stylesheet, so ANY
   author rule that sets `display` — `.pdrow{display:flex}`, `.rxgrid{display:grid}`
   — outranks it and the element stays on screen while `el.hidden` is true. Every
   `.prop('hidden', …)` toggle in the client code depends on this rule, so it is
   declared once, here, rather than fought per component. */
[hidden]{display:none!important}

body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--gold);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--gold-hover)}

input,select,textarea,button{font-family:inherit}

/* Global focus treatment. Never `outline` — the design uses a gold border plus
   a soft ring, and it must be visible on every focusable thing (INF-006). */
:where(input,select,textarea,button,a,[tabindex]):focus-visible{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Card — 18px radius, the single shadow.
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:var(--s-6);
}

/* --------------------------------------------------------------------------
   Centred single-card pages: 404, 500, 419, maintenance, admin sign-in,
   installer steps. Mirrors the shipped auth-card pattern.
   -------------------------------------------------------------------------- */
body.is-centred{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.centred{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-5);
  width:100%;
  max-width:420px;
}
.centred__logo{display:block;height:21px;width:85px}
.centred__card{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  text-align:center;
  padding:26px 24px;
}
.centred__title{font-size:19px;font-weight:800;margin:0;line-height:1.3}
.centred__body{display:flex;flex-direction:column;gap:var(--s-3);align-items:center}
.centred__meta{margin:0;font-size:11px;color:var(--muted-2)}

.muted{margin:0;color:var(--muted);font-size:14px}
.mono{font-family:var(--mono);font-size:13px}
.ref{
  margin:0;
  background:var(--page);
  border-radius:var(--r-button);
  padding:10px 14px;
  color:var(--text);
  word-break:break-all;
}

/* --------------------------------------------------------------------------
   Buttons. Minimum target 44x44 (INF-006).
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:44px;
  padding:12px 18px;
  border-radius:var(--r-button);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn--primary{background:#333;color:#fff}
.btn--primary:hover{background:#111;color:#fff}
.btn--secondary{background:var(--surface);border-color:var(--gold);color:var(--gold)}
.btn--secondary:hover{color:var(--gold-hover);border-color:var(--gold-hover)}
.btn--tertiary{background:transparent;color:rgba(0,0,0,.5)}
.btn--tertiary:hover{color:var(--text)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* --------------------------------------------------------------------------
   Alerts — the four types, exact values from CLAUDE.md / spec 20.2.
   Each conveys meaning by text and border as well as colour, so state is never
   colour-only (INF-006).
   -------------------------------------------------------------------------- */
.alert{
  border-radius:var(--r-input);
  padding:12px 14px;
  font-size:13px;
  text-align:left;
  width:100%;
}
.alert--info{color:var(--info-text);background:var(--info-bg);border:1px solid var(--info-border)}
.alert--success{color:var(--success-text);background:var(--success-bg);border:1px solid var(--success-border)}
.alert--warning{color:var(--warning-text);background:var(--warning-bg);border:1px solid var(--warning-border)}
.alert--danger{color:var(--danger-text);background:var(--danger-bg);border:1px solid var(--danger-border)}

/* --------------------------------------------------------------------------
   Global AJAX loader (INF-022). Implemented once, centrally; never per call
   site. Hidden via the [hidden] attribute so JS toggles state, not styles.
   -------------------------------------------------------------------------- */
/* INF-022a — a full-viewport overlay that blocks pointer input for the
   duration of every foreground request, with the prototype's ring spinner
   (`spinnerStyle` in the design file, scaled up) centred on it. It sits above
   the confirmation dialog so nothing under it can be clicked while a request
   is in flight, and below the toasts so a result is never covered. */
.ajax-loader{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,245,245,.55);
  cursor:progress;
  z-index:9999;
}
.ajax-loader[hidden]{display:none}
.ajax-loader__spinner{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.15);
  border-top-color:#333;
  animation:optix-spin .8s linear infinite;
}
@keyframes optix-spin{to{transform:rotate(360deg)}}

/* INF-022b — the confirmation dialog: the prototype's centred modal with an
   icon disc, heading, body and a Cancel / confirm pair, replacing
   window.confirm(). One elevation only (the card shadow). */
.dialog{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(17,17,17,.38);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:9000;
}
.dialog[hidden]{display:none}
.dialog__panel{
  width:400px; max-width:100%;
  border-radius:22px;
  padding:26px 26px 22px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.dialog__icon{
  width:52px; height:52px; flex:none; border-radius:50%;
  background:var(--info-bg);
  display:flex; align-items:center; justify-content:center;
}
.dialog__title{margin:0;font-size:17px;font-weight:900;line-height:1.3}
.dialog__body{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.dialog__actions{display:flex;gap:10px;width:100%;margin-top:6px}
.dialog__actions .btn{flex:1;justify-content:center;padding:11px 16px;font-size:15px}
/* The destructive confirm button, solid, as the prototype draws "Delete wizard". */
.btn--danger-fill{background:var(--danger-text);border-color:var(--danger-text);color:#fff}
.btn--danger-fill:hover{background:#8f2020;border-color:#8f2020;color:#fff}

/* Respect a user's reduced-motion preference (INF-006 accessibility baseline). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --------------------------------------------------------------------------
   Form controls. Shared by setup now and by every form from Phase 3 on.
   Radii from the token set: 11px inputs, 13px buttons.
   -------------------------------------------------------------------------- */
.label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:0;
}
.input{
  width:100%;
  min-height:44px;                 /* INF-006 touch target */
  padding:11px 13px;
  border:1px solid var(--input-border);
  border-radius:var(--r-input);
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder{color:rgba(0,0,0,.32)}
.help{margin:0;font-size:11px;color:rgba(0,0,0,.5)}

/* --------------------------------------------------------------------------
   Setup / installer.
   The one exception to the single centred card: a multi-step sequence, so it
   borrows the constructor's numbered step framing and uses the auth-card
   styling for each step body (design decision, 6 September 2026).
   -------------------------------------------------------------------------- */
body.is-setup{
  min-height:100vh;
  padding:40px 24px 72px;
  display:flex;
  justify-content:center;
}
.setup{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  width:100%;
  max-width:640px;
}
.setup__logo{height:21px;width:85px}
.setup__title{margin:0;font-size:24px;font-weight:900;letter-spacing:-.01em}
.setup__lead{max-width:52ch}
.setup__alert{width:100%}
.setup__card{display:flex;flex-direction:column;gap:var(--s-4)}

/* Numbered step marker, echoing the constructor's step cards. */
.setup__step{display:flex;align-items:flex-start;gap:var(--s-3)}
.setup__num{
  flex:none;
  width:26px;height:26px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--page);
  border:1px solid var(--hairline);
  font-size:12px;font-weight:700;
}
.setup__h2{margin:0;font-size:15px;font-weight:700}

/* Environment checks: one alert row per check, so pass/fail is legible at a
   glance and is never conveyed by colour alone (INF-006) — each row carries its
   own label and detail text. */
.setup__checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.setup__checks .alert{display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline}
.setup__detail{font-size:12px;opacity:.85;text-align:right}
.setup__steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.setup__form{display:flex;flex-direction:column;gap:var(--s-2);align-items:stretch}
.setup__form .btn{align-self:flex-start;margin-top:var(--s-2)}

/* --------------------------------------------------------------------------
   Auth screens (sign in, sign up, OTP, forgot, reset).
   The centred card the prototypes ship; the same pattern the error and
   maintenance pages reuse.
   -------------------------------------------------------------------------- */
/* Metrics below are the prototype's own: 56px top padding, 22px stack gap,
   a 122x30 logo, a 22px-radius card of 400px (460px for sign-up) with 28px
   padding and a 15px internal gap. */
body.is-auth{
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-y:auto;
}
.auth{
  display:flex;flex-direction:column;align-items:center;
  gap:22px;
  width:100%;
  padding:56px 20px 40px;
}
.auth__logo{height:30px;width:122px}

/* The auth card is the ONE surface that departs from the 18px card radius:
   the prototype draws it at 22px with a slightly deeper shadow. */
.auth__card{
  width:400px;max-width:100%;
  background:var(--surface);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(20,30,50,.07);
  padding:28px;
  display:flex;flex-direction:column;gap:15px;
}
.auth__card--wide{width:460px}
.auth__title{margin:0;font-size:19px;font-weight:800;line-height:1.3;text-align:center}
.auth__lead{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.auth__lead--centred{text-align:center}
.auth__centred{display:flex;flex-direction:column;gap:16px;text-align:center}
.auth__form{display:flex;flex-direction:column;gap:15px}
.auth__submit{width:100%}
/* The explanatory line under a primary action, e.g. the one-time-code note. */
.auth__note{margin:0;font-size:12px;color:rgba(0,0,0,.5);text-align:center;padding:0 32px;line-height:1.5}
.auth__centred .auth__note{padding:0}
.auth__rule{height:1px;background:rgba(0,0,0,.07)}
.auth__foot{margin:0;font-size:14px;text-align:center;color:var(--muted)}
.auth__strong{font-weight:700}
/* "← Back to sign in" is deliberately quiet, not a gold link. */
.auth__back{margin:0;font-size:12px;text-align:center}
.auth__back a{color:rgba(0,0,0,.5);font-weight:700}
.auth__back a:hover{color:var(--text)}
.auth__protected{margin:0;font-size:11px;color:rgba(0,0,0,.35)}

/* reCAPTCHA v2 (SEC-024). Google's widget is a fixed-size iframe that cannot
   be restyled, so it is centred at its native width rather than stretched. */
.captcha{display:flex;justify-content:center;min-height:78px}

.field{display:flex;flex-direction:column;gap:5px}
/* The required-field asterisk beside a label (API Key, 9.4). */
.req{color:var(--danger-text)}
.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.field__aside{font-size:12px;font-weight:600}
/* Two fields sharing a row (sign-up: contact name + phone). */
.field__pair{display:flex;gap:12px}
.field__pair .field{flex:1;min-width:0}
/* A hint that belongs to the row above it, pulled tight against it. */
.help--tight{margin-top:-6px}

/* Terms acceptance (AUTH-001). 44px target via padding, not a taller box. */
.check{display:flex;align-items:flex-start;gap:var(--s-2);font-size:13px;color:var(--muted);
  line-height:1.5;padding:6px 0;cursor:pointer}
.check input{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:var(--gold);cursor:pointer}

/* Password strength meter — advisory only (AUTH-002).
   The adjacent label states the level in words, so the meaning never depends
   on the bar's colour (INF-006). */
.meter__row{display:flex;align-items:center;gap:10px}
.meter__row .meter{flex:1}
.meter__label{font-size:11px;font-weight:700;color:var(--muted-2);white-space:nowrap}
.meter{height:5px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden}
.meter__bar{display:block;height:100%;width:0;border-radius:99px;background:var(--muted-2);
  transition:width .15s ease,background .15s ease}
.meter [data-score="1"],.meter__bar[data-score="1"]{width:20%}
.meter__bar[data-score="0"]{width:8%;background:var(--danger-text)}
.meter__bar[data-score="1"]{width:25%;background:var(--danger-text)}
.meter__bar[data-score="2"]{width:45%;background:var(--warning-text)}
.meter__bar[data-score="3"]{width:65%;background:var(--warning-text)}
.meter__bar[data-score="4"]{width:85%;background:var(--success-text)}
.meter__bar[data-score="5"]{width:100%;background:var(--success-text)}

/* OTP: six boxes presenting a single value (AUTH-006a). */
.otp{display:flex;gap:var(--s-2);justify-content:space-between}
.otp__box{
  width:52px;height:52px;flex:1 1 52px;min-width:44px;
  text-align:center;font-size:20px;font-weight:700;
  border:1px solid var(--input-border);border-radius:var(--r-input);
  background:var(--surface);color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
}

/* ==========================================================================
   My Account shell (section 9)
   Full-height flex column, overflow hidden; top bar, then sidebar + scrolling
   content. Only the content region is replaced on an AJAX switch (ACC-001).
   ========================================================================== */
body.is-app{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* Top bar carries the logo, a hairline divider and the label — nothing on the
   right. Identity and sign-out sit at the foot of the sidebar (prototype). */
.topbar{
  display:flex; align-items:center; gap:var(--s-4);
  height:58px; padding:0 22px; flex:none;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar__logo{height:21px;width:85px;flex:none}
.topbar__divider{width:1px;height:20px;background:rgba(0,0,0,.1);flex:none}
.topbar__label{font-size:14px;font-weight:700}
.topbar__spacer{flex:1}

.shell{flex:1;display:flex;min-height:0}

/* Sidebar: 246px, per the prototype. The nav scrolls; the identity footer is
   pinned to the bottom by `margin-top:auto`. */
.sidebar{
  width:246px; flex:none;
  background:var(--surface);
  border-right:1px solid rgba(0,0,0,.07);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:var(--s-3);
  min-height:0;
}
.sidebar__nav{display:flex;flex-direction:column;gap:var(--s-3);overflow-y:auto;min-height:0}
.navitem{
  display:flex; align-items:center; gap:var(--s-2);
  padding:10px 12px; border-radius:var(--r-nav);
  font-size:14px; font-weight:500; line-height:1.3;
  color:rgba(0,0,0,.65);
  border:1px solid transparent;
  min-height:44px;                      /* INF-006 touch target */
  transition:background .15s ease;
}
.navitem:hover{background:#f5f5f5;color:var(--text)}
/* Active state carries weight, a tinted ground AND a border, so it is never
   conveyed by colour alone (INF-006). The soft gold glow is the prototype's
   own value for this control and is not a new elevation for cards. */
.navitem.is-active{
  font-weight:700;
  color:#333;
  background:#f5f1ce;
  border-color:#CDA92138;
  box-shadow:#CDA92138 0 4px 30px;
}
.navitem .icon{flex:none;opacity:.75}
.navitem.is-active .icon{opacity:1}

/* --------------------------------------------------------------------------
   Sidebar footer — avatar, company, contact, sign-out (prototype).
   -------------------------------------------------------------------------- */
.sidebar__foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.07);
  flex:none;
}
.who{display:flex;align-items:center;gap:var(--s-2);padding:0 4px;min-width:0}
.who__avatar{
  width:38px;height:38px;flex:none;
  border-radius:50%;
  background:#f5f5f5;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.who__text{flex:1;min-width:0;display:flex;flex-direction:column}
.who__name{
  margin:2px 0;
  font-size:14px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.who__contact{
  font-size:12px;color:#00000073;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* A square icon-only control. Drawn at the prototype's 36px, but its hit area
   is expanded to 44x44 by a transparent overlay so INF-006's touch-target
   minimum is met without changing what the design draws. */
.iconbtn{
  position:relative;
  width:36px;height:36px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:var(--surface);
  color:rgba(0,0,0,.5);
  border-radius:var(--r-input);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.iconbtn::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.iconbtn--danger:hover{color:var(--danger-text);border-color:var(--danger-text)}

.content{flex:1;overflow-y:auto;background:var(--page);display:flex;flex-direction:column}
.content:focus{outline:none}
.content__inner{
  flex:1;
  padding:34px 32px 72px;
  display:flex; flex-direction:column; align-items:center;
}
.content__inner > *{width:100%;max-width:980px}

/* ACC-002 — trial banner, on every section. Solid brand gold with white text,
   exactly as the prototype draws it — not one of the four alert styles. */
.trialbar{
  display:flex; align-items:center; gap:var(--s-3);
  padding:11px 22px; flex:none;
  background:var(--gold);
  color:#fff;
}
.trialbar__mark{
  width:20px;height:20px;flex:none;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;
}
.trialbar__note{font-size:12px;color:rgba(255,255,255,.75)}
.trialbar__spacer{flex:1}
.trialbar__cta{
  flex:none;
  background:#fff;color:var(--gold);
  border-radius:var(--r-input);
  padding:7px 14px;
  font-size:12px;font-weight:700;
  /* INF-006: the strip is 42px tall, so the control is padded to a 44px hit
     area rather than being drawn taller than the prototype's chip. */
  display:inline-flex;align-items:center;min-height:28px;
  position:relative;
}
.trialbar__cta::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.trialbar__cta:hover{color:var(--gold-hover)}
.trialbar__text{font-size:14px;font-weight:600;line-height:1.5}

/* Section head: the prototype sets 20px/800 and stacks a section's blocks with
   an 18px gap. */
.section__head{margin:0}
.section__title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.section__sub{margin:0;font-size:15px;font-weight:700}
.section__spacer{flex:1}
.content__inner{gap:18px}

/* Cards stack down the content column with gap, never margins. */
.content__inner > .card + .card,
.content__inner > section + section{margin-top:var(--s-5)}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.row--between{justify-content:space-between}

.btn--sm{min-height:38px;padding:9px 14px;font-size:13px}

.input--mono{font-family:var(--mono);border-radius:var(--r-button)}

/* --------------------------------------------------------------------------
   API Key (9.4)
   -------------------------------------------------------------------------- */
.keyrow{display:flex;gap:var(--s-1);align-items:center;flex-wrap:wrap}
.keyrow .input{flex:1;min-width:0}
.keyrow--regen{gap:var(--s-3)}
/* The key itself: a read-only mono field on the page ground, per the design. */
.keyrow__value{
  flex:1;min-width:0;
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--r-button);
  padding:11px 13px;
  font-family:var(--mono);font-size:14px;
  /* Enough leading that an underscore in the key prefix is not clipped by the
     overflow box — `optx_live_…` must read exactly as it will be pasted. */
  line-height:1.5;
  background:var(--page);
  color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-height:44px;                      /* INF-006 touch target */
}
.keyrow .btn{flex:none;padding:0 14px;min-height:44px;font-size:15px}
.btn--quiet.btn{font-weight:600}
/* Rotation is destructive, so it is drawn in the danger palette rather than as
   a primary action (API-013). */
.btn--danger-outline{background:var(--surface);border-color:rgba(176,42,42,.5);color:var(--danger-text);
  padding:9px 16px;font-size:15px}
.btn--danger-outline:hover{background:#b02a2a1c;color:var(--danger-text)}

/* Currency picker: symbol tile, select, worked example. */
.currow{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.currow__sym{
  width:52px;height:44px;flex:none;
  border-radius:var(--r-button);
  background:#f5f1ce;
  border:1px solid rgba(195,176,19,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:#8a7413;
}
.currow__select{flex:1;min-width:240px}
.currow__select select{width:100%;padding:12px 38px 12px 13px;border-radius:var(--r-button);font-weight:600}
.currow__example{white-space:nowrap}

/* --------------------------------------------------------------------------
   Account Info (9.5) — the email card.
   -------------------------------------------------------------------------- */
.emailrow{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.emailrow__value{font-size:14px;font-weight:600}
.emailedit{display:flex;flex-direction:column;gap:var(--s-3);
  border-top:1px solid var(--hairline);padding-top:var(--s-4)}

.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rows__item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:12px 0; border-top:1px solid var(--hairline);
}
.rows__item:first-child{border-top:0}
.rows__item p{margin:2px 0 0}
/* A row's text block and its right-aligned timestamp (Security, 9.6). */
.rows__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rows__title{margin:0!important;display:flex;align-items:center;gap:var(--s-2);
  font-size:14px;font-weight:600;flex-wrap:wrap}
.rows__when{flex:none;font-size:12px;color:var(--muted-2);white-space:nowrap}

/* Status chip — the prototype's 10px uppercase pill. Meaning is carried by the
   word inside it as well as the colour (INF-006). */
.chip{
  display:inline-block;flex:none;
  padding:3px 8px;border-radius:var(--r-toolbar);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.chip--published,.chip--active{color:var(--success-text);background:rgba(47,158,68,.12);border:1px solid #1d7a338f}
.chip--draft{color:rgba(0,0,0,.55);background:rgba(0,0,0,.07);border:1px solid #696969a8}
/* Q51: a published wizard with saved changes that are not live yet. The warning
   palette, its text a darker shade of the same hue so small text keeps AA (5.4:1). */
.chip--pending{color:#8a5a12;background:#FFF3E2;border:1px solid rgba(197,130,35,.76)}

.empty{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.empty__title{margin:0;font-size:15px;font-weight:700}

/* INF-116: 1280px is the supported floor. Wide content scrolls inside its own
   container so the page body never scrolls sideways. */
.content__inner table,
.content__inner .scroll-x{display:block;max-width:100%;overflow-x:auto}

/* --------------------------------------------------------------------------
   Wizards list (9.1)
   -------------------------------------------------------------------------- */
.section__head--row{display:flex;align-items:center;gap:var(--s-4)}

/* Publish-quota chip beside the section title. The prototype's own two states:
   a mauve "within limit" and the standard warning amber at the cap. */
.quota{
  flex:none;
  font-size:11px;font-weight:700;
  border-radius:9px;padding:4px 9px;
  text-transform:uppercase;letter-spacing:.04em;
  cursor:default;
  color:#b65dd9;background:#f5daff;border:1px solid #d99bf1;
}
.quota--full{color:var(--warning-text);background:var(--warning-bg);border-color:#c58223c2}

/* Toolbar: search left, sort right. */
.toolbar{display:flex;gap:var(--s-2);align-items:center}
.searchfield{
  flex:1;max-width:340px;
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;
  border:1px solid var(--input-border);
  border-radius:var(--r-button);
  background:var(--surface);
  min-height:44px;                      /* INF-006 touch target */
}
.searchfield:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--focus-ring)}
.searchfield svg{flex:none}
.searchfield input{
  flex:1;min-width:0;
  border:none;outline:none;box-shadow:none;background:transparent;
  font-size:14px;
}
.searchfield input:focus-visible{border:none;box-shadow:none}
.sortby{display:flex;align-items:center;gap:var(--s-2)}
.sortby__label{font-size:12px;color:rgba(0,0,0,.5);white-space:nowrap}
/* A native select plus the prototype's own chevron; `appearance:none` removes
   the platform arrow so the two never both show. */
.selectwrap{position:relative;display:flex;align-items:center}
.selectwrap select{
  padding:9px 36px 9px 12px;
  border:1px solid var(--input-border);
  border-radius:var(--r-button);
  font-size:14px;background:var(--surface);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  min-height:44px;                      /* INF-006 touch target */
}
.selectwrap svg{position:absolute;right:11px;pointer-events:none}
/* A select that is a field's whole control fills the field, so its chevron
   sits against the control rather than floating at the far right. */
.field > .selectwrap{width:100%}
.field > .selectwrap select{flex:1;min-width:0;width:100%}

/* Empty state: a dashed gold frame, centred, with its own call to action. */
.emptystate{
  border:1.5px dashed rgba(195,176,19,.3);
  border-radius:22px;
  padding:48px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  background:rgba(255,255,255,.5);
}
.emptystate__title{margin:0;font-size:15px;font-weight:700}
.emptystate__body{margin:0;font-size:14px;color:rgba(0,0,0,.5)}
.emptystate .btn{margin-top:6px}

/* Wizard cards. 22px radius and a gold hover edge, per the prototype — the
   same surface as .card but with the list's own hover affordance. */
.wizgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wizcard{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(20,30,50,.07);
  padding:16px 18px;
  display:flex;flex-direction:column;gap:var(--s-2);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.wizcard:hover{border-color:var(--gold);box-shadow:#CDA92114 0 10px 30px}
.wizcard__head{display:flex;align-items:flex-start;gap:var(--s-2)}
.wizcard__name{flex:1;margin:0;font-size:15px;font-weight:700;line-height:1.35;word-break:break-word}
.wizcard__steps{margin:0;font-size:12px;color:rgba(0,0,0,.5)}
.wizcard__dates{display:flex;gap:14px;font-size:11px;color:var(--muted-2)}
.wizcard__actions{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:auto;padding-top:4px;align-items:stretch}
.wizcard__pending{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2)}
.wizcard__pending .btn{min-height:44px}
/* Forms in the action row are layout-transparent so their button participates
   in the row's flex sizing directly. */
.wizcard__actions form{display:flex}
/* The two text actions share the row and never shrink below their label —
   a published card also carries the WIZ-057 embed control, and a clipped
   "Unpublish" is worse than letting the icon buttons wrap. */
.btn--flex{flex:1 1 auto;min-width:88px}
.btn--full{width:100%}

/* Card-action button variants, all at the prototype's 11px radius and 7px
   vertical padding rather than the page's larger primary button. */
.wizcard__actions .btn{min-height:34px;padding:7px 10px;border-radius:var(--r-input);font-size:15px;white-space:nowrap}
.wizcard__actions .iconbtn{width:36px;height:auto;align-self:stretch}
/* A text control that reads as a link but is a real <button>. Padded to a
   44px hit area without being drawn that tall (INF-006). */
.linkbtn{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  border:none;background:none;padding:0;
  font-size:12px;font-weight:700;color:var(--gold);
  cursor:pointer;text-align:left;
  transition:color .15s ease;
}
.linkbtn::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.linkbtn:hover{color:var(--gold-hover)}

.btn--gold-outline{background:var(--surface);border-color:var(--gold);color:var(--gold)}
.btn--gold-outline:hover{background:#f5f1ce;color:var(--gold)}
.btn--quiet{background:var(--surface);border-color:var(--input-border);color:rgba(0,0,0,.65)}
.btn--quiet:hover{border-color:var(--text);color:var(--text)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-hover);color:#fff}
.iconbtn--dark:hover{border-color:var(--text);color:var(--text)}
.btn--danger{color:var(--danger-text)}
.btn--danger:hover{color:var(--danger-text);background:var(--danger-bg)}

/* An inline notice card: heading, body and an action, on the alert palettes. */
.notice{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-radius:22px;padding:14px 18px;
}
.notice__text{flex:1;min-width:300px;display:flex;flex-direction:column;gap:4px}
.notice__title{margin:0;font-size:14px;font-weight:700}
.notice__body{margin:0;font-size:12px;line-height:1.55}
/* BIL-003: the alert names each unpublished wizard. */
.notice__list{margin:0;padding-left:18px;font-size:12px;line-height:1.55}
.notice--warning{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning-text)}
.btn--warning{background:var(--warning-bg);border-color:#c58223c2;color:var(--warning-text)}
.btn--warning:hover{background:#f7dfbd;color:var(--warning-text);border-color:#c58223c2}

/* ==========================================================================
   Wizard Constructor (WIZ-026a to WIZ-026s)
   A full-viewport working surface that replaces the My Account layout: its own
   top bar, its own two-pane body, no account navigation rail.
   ========================================================================== */
body.is-constructor{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* WIZ-026b — fixed top bar; the panes below scroll independently. */
.ctopbar{
  display:flex; align-items:center; gap:var(--s-3);
  height:58px; padding:0 18px; flex:none;
  background:var(--surface); border-bottom:1px solid var(--hairline);
}
.ctopbar__logo{height:21px;width:85px;flex:none}
/* "All wizards" — the prototype's bordered pill, with its own margins that set
   this control apart from the logo block and the name field either side. */
.backbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:36px;padding:0 13px;flex:none;
  border:1px solid var(--input-border);
  background:var(--surface);
  color:rgba(0,0,0,.65);
  border-radius:var(--r-input);
  font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;
  margin-left:20px;margin-right:50px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  position:relative;
}
/* INF-006: 44px hit area without drawing the pill taller than the design. */
.backbtn::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.backbtn:hover{border-color:var(--text);color:var(--text)}
.ctopbar__label{font-size:14px;font-weight:700;white-space:nowrap}
.ctopbar__spacer{flex:1}
.ctopbar__name{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.ctopbar__name .label{white-space:nowrap}
.ctopbar__name .input{min-height:36px;padding:7px 11px;width:260px}

/* WIZ-026o — exactly two save states, each with a non-colour-only marker. */
.savestate{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.savestate__dot{width:8px;height:8px;border-radius:50%;flex:none}
.savestate[data-save-state="saved"]{color:var(--success-text)}
.savestate[data-save-state="saved"] .savestate__dot{background:var(--success-text)}
.savestate[data-save-state="unsaved"]{color:var(--warning-text);font-weight:700}
/* A ring rather than a filled dot, so the two states differ in shape as well
   as colour (INF-006). */
.savestate[data-save-state="unsaved"] .savestate__dot{
  background:transparent;border:2px solid var(--warning-text)}

.cbar{border-radius:0;border-left:0;border-right:0;border-top:0}

.cbody{flex:1;display:flex;min-height:0}

/* WIZ-026d — the left rail, roughly 290px, is the wizard flow. */
.crail{
  width:290px; flex:none; overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--hairline);
  padding:16px 14px; display:flex; flex-direction:column; gap:var(--s-2);
}
.crail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.crail__add{width:100%;border-style:dashed}

/* WIZ-026e — step cards, with a connector making the flow read as a sequence. */
.stepcard{
  position:relative;
  display:flex; align-items:flex-start; gap:var(--s-2);
  padding:10px 12px; min-height:44px;
  border:1px solid var(--hairline); border-radius:var(--r-nav);
  background:var(--surface); cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.stepcard + .stepcard::before{
  content:''; position:absolute; top:-9px; left:23px;
  width:1px; height:8px; background:rgba(0,0,0,.14);
}
.stepcard:hover{background:#fafafa}
/* Selected is distinguished by border AND background, not colour alone. */
.stepcard.is-selected{border-color:var(--gold);background:rgba(205,169,33,.10)}
.stepcard__num{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--page); border:1px solid var(--hairline);
}
.stepcard__main{min-width:0;flex:1}
/* WIZ-026h as amended (Q57b): the card is two controls side by side, never one
   inside the other — the grip that moves it, and the body that selects it. */
.stepcard__body{display:flex;align-items:flex-start;gap:var(--s-2);flex:1;min-width:0;border-radius:var(--r-input)}
.stepcard__body:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(195,176,19,.12)}
/* The grip: a 44 x 44 target (INF-006) that reaches into the card's padding,
   so the card is no wider for it. */
.grip{
  flex:none; width:44px; height:44px; margin:-10px -10px -10px -12px; padding:0;
  display:grid; place-items:center; border:1px solid transparent; border-radius:var(--r-input);
  background:transparent; color:var(--muted-2); cursor:grab; touch-action:none;
}
.grip:hover{color:var(--text)}
.grip:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(195,176,19,.12)}
.optcard__head .grip{margin:-12px -6px -12px -12px}
/* While dragging: the item follows the pointer, a gold line shows where it lands. */
.is-dragging{position:relative;z-index:5;opacity:.85;cursor:grabbing}
.is-dragging .grip{cursor:grabbing}
.is-drop-before::after,.is-drop-after::after{
  content:''; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--gold);
}
.is-drop-before::after{top:-6px}
.is-drop-after::after{bottom:-6px}
.crail__msg{font-size:12px}
/* Read by screen readers, not shown. */
.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}
/* Truncated with an ellipsis, never wrapped to a third line. */
.stepcard__title{
  margin:0; font-size:13px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.stepcard__meta{margin:4px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stepcard__count{font-size:11px;color:var(--muted-2)}
.stepcard__err{
  flex:none; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  color:#fff; background:var(--danger-text);
}
.depchip{
  display:inline-block; margin-top:4px; padding:2px 7px; border-radius:99px;
  font-size:10px; color:var(--muted); background:var(--page);
  border:1px solid var(--hairline); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* WIZ-026f — the four type badges, consistently coloured wherever they appear. */
.badge{
  display:inline-block; padding:2px 6px; border-radius:5px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.badge--single{background:#FF9264;color:#fff}
.badge--multi{background:#DE65FD;color:#fff}
.badge--rx{background:#111;color:#fff}
.badge--review{background:rgba(0,0,0,.10);color:var(--muted)}

/* WIZ-026d — the editor pane, ~760px readable measure, centred, own scroll. */
.ceditor{flex:1;overflow-y:auto;padding:28px 32px 96px;display:flex;flex-direction:column;
  align-items:center;gap:var(--s-5)}
.ceditor:focus{outline:none}
.ceditor > *{width:100%;max-width:760px}
.ceditor__head{display:flex;align-items:center;gap:var(--s-2)}
.ceditor__pos{font-size:13px;font-weight:700}
.ceditor__spacer{flex:1}

/* Option cards and controls */
.optcard{position:relative;border:1px solid var(--hairline);border-radius:var(--r-input);padding:14px;
  display:flex;flex-direction:column;gap:var(--s-3)}
.optcard__head{display:flex;align-items:center;gap:var(--s-2)}
.btn--dashed{border:1px dashed var(--input-border);background:transparent;color:var(--muted);width:100%}
.btn--dashed:hover{border-color:var(--gold);color:var(--gold)}

/* Segmented controls — keyboard reachable, state not colour-only (WIZ-026r).
   The prototype does NOT join these into one bar: they are separate pills in a
   flex row, each `flex:none` so it is exactly as wide as its own label. A
   joined bar let the last button absorb the leftover width, which is why
   "Send It Later", "Custom image" and "Color swatches" came out oversized. */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg--tight{gap:6px}
.seg__btn{
  flex:none;
  padding:8px 14px;
  border-radius:var(--r-input);
  font-size:14px; font-weight:700;
  background:var(--surface);
  color:rgba(0,0,0,.6);
  border:1px solid var(--input-border);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  /* INF-006: a 44px hit area without drawing the pill taller than the design. */
  position:relative;
}
.seg__btn::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
/* Selected carries a heavier gold border AND a tint AND stays labelled, so the
   state is never colour-only (INF-006). */
.seg__btn.is-on{
  border:1.5px solid rgb(199,169,55);
  background:rgba(195,176,19,.08);
  color:#333;
}

.counter{font-size:11px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.counter.is-near{color:var(--warning-text);font-weight:700}
.field__err{margin:0}
.has-error{border-color:var(--danger-text)}

.input--sm{min-height:36px;padding:7px 10px;font-size:13px}
.input--hex{width:96px;font-family:var(--mono)}
.swatchpv{
  width:32px;height:32px;flex:none;border-radius:8px;
  border:1px solid rgba(0,0,0,.18);       /* WIZ-013: near-white must stay visible */
  background-size:cover;background-position:center;
}

.deppicker{padding-left:var(--s-3);border-left:2px solid var(--hairline)}
.depgroup{display:flex;flex-direction:column;gap:4px}

/* The Constructor's two previews (RND-168): frames of the wizard's own
   document, styled by the wizard's stylesheet. The frame takes the height its
   document reports, set by constructor-previews.js. */
.cpreview__frame{width:100%;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}

/* The add-step picker (WIZ-026g) */
.cmodal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:100}
.cmodal[hidden]{display:none}
.cmodal__panel{width:min(420px,92vw);display:flex;flex-direction:column;gap:var(--s-2)}
.pick{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:12px 14px;min-height:44px;text-align:left;cursor:pointer;
  border:1px solid var(--hairline);border-radius:var(--r-input);background:var(--surface);
  transition:border-color .15s ease,background .15s ease;
}
.pick:hover:not(:disabled){border-color:var(--gold);background:rgba(205,169,33,.06)}
.pick:disabled{opacity:.55;cursor:not-allowed}

/* TinyMCE sits inside our cards; soften its default chrome to match. */
.tox-tinymce{border:1px solid var(--input-border)!important;border-radius:var(--r-input)!important}
.tox .tox-toolbar__primary{background:var(--page)!important}

/* WIZ-026s — responsive floor. Below the 1280px supported minimum (INF-116)
   the layout is unsupported, but must degrade rather than break: at ~1100px the
   rail becomes a step selector above the editor instead of compressing into
   unusability, and no control drops below a 44px target. */
@media (max-width:1100px){
  .cbody{flex-direction:column}
  .crail{
    width:auto; flex:none; max-height:180px;
    border-right:0; border-bottom:1px solid var(--hairline);
  }
  .crail__list{flex-direction:row;overflow-x:auto;gap:var(--s-2)}
  .stepcard{min-width:220px}
  .stepcard + .stepcard::before{display:none}
  .ceditor{padding:20px 18px 72px}
}

/* --------------------------------------------------------------------------
   Usage Statistics (9.2)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Usage Statistics (9.2) — filter bar, KPI tiles, line chart.
   -------------------------------------------------------------------------- */

/* A titled panel used for the trial explainer: card surface, gold hairline. */
.panel{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:22px}
.panel--gold{border:1px solid rgba(195,176,19,.22)}
.panel__title{margin:0;font-size:14px;font-weight:700}
.panel__body{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

.filterbar{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:14px 18px;border-radius:22px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(20,30,50,.07);
}
.filterbar__wizard{min-width:240px}
.filterbar .selectwrap select{width:100%}
/* The bar's controls are shorter than a page input but keep a 44px hit area
   through padding rather than height (INF-006). */
.input--compact{min-height:44px;padding:8px 10px;font-size:14px}

/* KPI tiles: a coloured icon badge beside the value and its label. The label
   states the meaning, so the badge colour is decoration only (INF-006). */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{
  display:flex;align-items:center;gap:13px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(20,30,50,.06);
  padding:14px 16px;
}
.kpi__badge{
  width:44px;height:44px;flex:none;
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
/* The prototype's own tile colours, one per metric. */
.kpi__badge--loads{background:#FFD600}
.kpi__badge--completed{background:#49C561}
.kpi__badge--rate{background:#f34ba7}
.kpi__badge--allowance{background:var(--gold)}
.kpi__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.kpi__value{margin:0;font-size:21px;font-weight:800;line-height:1.15}
.kpi__label{font-size:13px;color:rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__sub{font-size:14px;font-weight:400;color:var(--muted-2)}

/* Chart card. */
.chartcard{display:flex;flex-direction:column;gap:14px;border-radius:22px;padding:18px 20px}
.chartcard__head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chartcard__title{margin:0;font-size:16px;font-weight:800}
.radio{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.radio input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}

/* Line chart. The SVG stretches; the gutter and axis are ordinary boxes so the
   labels never scale with it. */
.linechart{display:flex;gap:10px}
.linechart__gutter{width:46px;flex:none;position:relative;height:250px}
.linechart__tick{position:absolute;right:0;transform:translateY(-50%);font-size:12px;color:var(--muted-2)}
.linechart__body{flex:1;min-width:0;display:flex;flex-direction:column}
.linechart__plot{position:relative;height:250px}
.linechart__grid{position:absolute;left:0;right:0;height:1px;background:rgba(0,0,0,.06)}
.linechart__plot svg{position:absolute;inset:0;width:100%;height:100%}
.linechart__axis{display:flex;margin-top:9px}
.linechart__x{flex:1;min-width:0;text-align:center;font-size:12px;color:rgba(0,0,0,.4);white-space:nowrap;overflow:visible}
.legend{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.legend__swatch{width:11px;height:11px;border-radius:50%;background:#F7DA00;flex:none}

/* The chart's accessible companion, collapsed by default. */
.datatable summary{font-size:13px;color:var(--muted);cursor:pointer}
.datatable[open] summary{margin-bottom:var(--s-2)}

.chart{width:100%;height:120px;min-width:320px}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table caption{text-align:left;padding-bottom:6px}
.table th{
  text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted-2);padding:8px 10px 8px 0;
  border-bottom:1px solid var(--hairline);white-space:nowrap;
}
.table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hairline)}
.table tr:last-child td{border-bottom:0}

/* Billing plan cards (9.3) */
/* --------------------------------------------------------------------------
   Billing & Usage (9.3) — trial card, billing-period switch, plan grid.
   -------------------------------------------------------------------------- */
.billcard{border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:15px}
.billcard__row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.billcard__main{display:flex;flex-direction:column;gap:5px;flex:1;min-width:280px}
.billcard__title{margin:0;font-size:15px;font-weight:800}
.billcard__body{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.billcard__figure{text-align:right}
.billcard__figure p{margin:0}
/* The small uppercase caption the prototype uses above a figure or a block. */
.billcard__flabel{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2)}
.billcard__famount{font-size:22px;font-weight:800;color:#333}
.billcard__fdate{font-size:11px;color:rgba(0,0,0,.5)}
.billcard__rule{height:1px;background:var(--hairline)}
.billcard__block{display:flex;flex-direction:column;gap:4px}
.billcard__pick{margin:0;font-size:15px;font-weight:700}
.billcard__pickbody{margin:0;font-size:12px;color:rgba(0,0,0,.55);line-height:1.55}
.billcard__fnote{font-size:11px;color:rgba(0,0,0,.5);max-width:190px;line-height:1.5;margin-top:2px!important}

/* Paying state — the "Current plan" line and its pinned-pricing note. */
.planline{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.planline__row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;row-gap:4px}
.planline__name{font-size:22px;font-weight:800;white-space:nowrap}
.planline__div{width:0;height:22px;border-left:1px solid var(--hairline);margin:0 7px;align-self:center}
.planline__price{font-size:22px;font-weight:800;color:#333;white-space:nowrap}
.planline__per{font-size:12px;color:rgba(0,0,0,.5);font-weight:600}
.planline__cycle{font-size:11px;font-weight:700;color:#333;white-space:nowrap}
.planline__limits{margin:0;font-size:12px;color:rgba(0,0,0,.5)}
.planline__locked{display:flex;align-items:flex-start;gap:6px;margin-top:3px!important;
  font-size:11px;color:rgba(0,0,0,.5);line-height:1.5;max-width:420px}
.planline__locked .icon{flex:none;color:rgba(0,0,0,.4);margin-top:2px}

/* Allowance meter (USE-012). The counts either side carry the meaning; the bar
   is decoration, so nothing is conveyed by the graphic alone (INF-006). */
.usage{display:flex;flex-direction:column;gap:var(--s-1)}
.usage__head{display:flex;align-items:baseline;gap:var(--s-2)}
.usage__count{font-size:14px;font-weight:700}
.usage__left{font-size:12px;color:rgba(0,0,0,.5)}
.usage__track{height:12px;background:rgba(0,0,0,.07);border-radius:9px;overflow:hidden}
.usage__bar{display:block;height:100%;background:#333;border-radius:9px;transition:width .25s ease}
.usage__foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2)}

.overrun__title{margin:0;font-size:14px;font-weight:800}

/* Change-you-selected panel (BIL-014). */
.quote__leg{display:flex;flex-direction:column;gap:3px;min-width:0}
.quote__value{margin:0;font-size:15px;font-weight:700}
.quote__arrow{align-self:center;font-size:18px;color:var(--muted-2)}
/* An alert used inline inside a card: the four mandated palettes, at the
   prototype's tighter type and 13px radius. */
.alert--note{margin:0;font-size:12px;border-radius:var(--r-button);padding:11px 13px;line-height:1.55}

/* Billing-period switch (BIL-026). */
.cycle__head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.cycle__state{font-size:12px;font-weight:700;color:#333}
.chip--save{color:#fff;background:#1BBC9B;border:1px solid #1BBC9B}
.chip--pop{color:#b65dd9;background:#f5daff;border:1px solid #d99bf1}
.cycle__options{display:flex;gap:var(--s-2);flex-wrap:wrap}
.cycle{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;
  border-radius:var(--r-nav);
  border:1px solid var(--input-border);
  background:var(--surface);
  font-size:14px;font-weight:600;
  cursor:pointer;
  min-height:44px;                      /* INF-006 touch target */
}
/* Selected carries a heavier gold border AND a tint AND its own radio state,
   so it is never conveyed by colour alone (INF-006). */
.cycle.is-on{border:1.5px solid var(--gold);background:rgba(195,176,19,.06)}
.cycle input{width:16px;height:16px;flex:none;accent-color:var(--gold);cursor:pointer}
.cycle__text{display:flex;flex-direction:column}
.cycle__sub{font-size:11px;font-weight:400;color:rgba(0,0,0,.55);margin-top:2px}

/* Plan grid. */
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.plancard{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:var(--s-2);
}
.plancard.is-picked,.plancard.is-recommended{border-color:var(--gold)}
.plancard__head{display:flex;align-items:flex-start;gap:var(--s-2)}
.plancard__name{flex:1;margin:0;font-size:15px;font-weight:700}
.plancard__price{margin:0;font-size:22px;font-weight:800;color:#333;white-space:nowrap}
.plancard__per{font-size:12px;color:rgba(0,0,0,.5);font-weight:600}
.plancard__save{margin:0;font-size:12px;font-weight:700;color:var(--success-text)}
.plancard__foot{margin-top:auto;padding-top:var(--s-2);display:flex;flex-direction:column;gap:6px}
.chip--trial{color:var(--gold-admin);background:rgba(205,169,33,.16);border:1px solid rgba(205,169,33,.5)}

/* Payments & invoices: copy left, action right, on one row. */
.payrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:22px;padding:18px 20px}
.payrow__text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:260px}
.payrow__body{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.payrow .btn{flex:none;padding:11px 18px;font-size:15px}

/* --------------------------------------------------------------------------
   ADM-070b — the read-only impersonation banner.

   It lives in app.css, not admin.css, because the screen it appears on is the
   CUSTOMER portal: ADM-070 renders exactly what the customer sees, with this
   bar added. Warning colours and an unmissable position above the top bar —
   an admin who forgets they are inside a customer's account is the failure
   this banner exists to prevent, so it is never dismissible.
   -------------------------------------------------------------------------- */
.impersonation{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:10px 20px;
  font-size:13px;
  color:var(--warning-text);
  background:var(--warning-bg);
  border-bottom:1px solid var(--warning-border);
}
.impersonation__text{flex:1}
.impersonation__dot{
  width:9px;height:9px;flex:none;
  border-radius:50%;
  background:var(--warning-text);
}
/* The read-only wrapper must be invisible: a fieldset brings a border, padding
   and a margin of its own, and this one exists only to disable controls. */
.impersonation__inert{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
  display:contents;
}

/* Multi-currency support (API-014–API-020). */
.checkbox{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:14px}
.checkbox input{width:18px;height:18px;flex:none;accent-color:var(--gold);cursor:pointer}
.checkbox__label{cursor:pointer}

.rates-table{display:flex;flex-direction:column;gap:1px;border:1px solid rgba(0,0,0,.12);border-radius:var(--r-input);overflow:hidden;background:rgba(0,0,0,.04)}
.rates-table__head,.rates-table__row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1fr) 44px;gap:0}
.rates-table__head{background:rgba(0,0,0,.05);font-weight:700;font-size:12px;color:rgba(0,0,0,.6);text-transform:uppercase;letter-spacing:.5px}
.rates-table__col{padding:12px 14px;display:flex;align-items:center}
.rates-table__head .rates-table__col{padding:10px 14px;font-size:11px}
.rates-table__row{border-top:1px solid rgba(0,0,0,.08);background:#fff}
.rates-table__row:first-of-type{border-top:0}
.rates-table__col input{width:100%;font-size:14px}
.rates-table__col--action{justify-content:center;padding:8px}

.rates-table__actions{display:flex;gap:var(--s-1);margin-top:var(--s-1)}
.rates-table__actions button{display:flex;align-items:center;gap:6px;font-size:14px}

/* API-015a: number input with 4 decimal place step. */
[data-rate-input]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Small select wrapper for currency dropdowns in rates table. */
.selectwrap--sm{width:100%}
.selectwrap--sm select{font-size:14px;padding:9px 11px;height:auto;width:100%}

/* ==========================================================================
   Wizard's Design (9.7, RND-160 to RND-165). No prototype exists for this
   section (Q30c): the settings use the portal's own field, select, segmented
   control and alert components; these rules only lay them out. The preview
   beside them is an iframe styled by the wizard's own stylesheet (RND-165).
   ========================================================================== */
.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:28px;align-items:start}
.design-settings{max-width:560px}
/* A colour: the native picker (RND-162, INF-017), its value in monospace, and
   for a translucent colour its opacity. 44 px targets (INF-006). */
.design-colour{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.design-colour__picker{width:44px;height:44px;padding:3px;border:1px solid var(--input-border);border-radius:var(--r-input);background:var(--surface);cursor:pointer}
.design-colour__picker:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--focus-ring)}
.design-colour__hex{font-family:var(--mono);font-size:13px;color:var(--text);min-width:72px}
/* A whole number with its unit written right after it ("px", "%"). */
.design-unit{display:inline-flex;align-items:center;gap:var(--s-1);font-size:14px;color:var(--muted)}
.design-unit__label{font-size:13px}
.design-number{width:96px;font-variant-numeric:tabular-nums}
.design-number.input--sm{width:72px;min-height:44px}
.design-warnings:empty{display:none}
/* The preview stays in view while the settings scroll. */
.design-preview{position:sticky;top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-1)}
/* Its height is set to the sample's own by wizard-design.js; 480px until then. */
.design-preview__frame{width:100%;height:480px;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}

/* ==========================================================================
   Usage Statistics — the funnel panels (USE-010, RND-106). Measurements and
   colours from the prototype's "Where Sessions End" and "Top Wizards By
   Sessions" cards; drawn by usage-chart.js.
   ========================================================================== */
.kpi__badge--sessions{background:#1BBC9B}
.kpi__badge--steps{background:#FF9264}
.kpi__badge--time{background:#CDA921}
.funnelgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:14px}
/* The donut: at most 250px, its hovered segment's share in the middle. */
.donutchart{display:flex;flex-direction:column;gap:14px;align-items:center}
.donutchart__ring{position:relative;width:100%;max-width:250px}
.donutchart__ring svg{display:block;width:100%;height:auto}
.donutchart__ring circle{cursor:pointer;transition:stroke-width .18s ease}
.donutchart__centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 52px;text-align:center;pointer-events:none}
.donutchart__pct{font-size:23px;font-weight:800;line-height:1}
.donutchart__label{font-size:11px;color:rgba(0,0,0,.5);line-height:1.3}
.donutchart__count{font-size:11px;font-weight:700;color:rgba(0,0,0,.75)}
.donutchart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px}
.legend__item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.legend--stack{gap:16px;flex-wrap:wrap}
.legend__square{width:11px;height:11px;border-radius:3px;flex:none}
.legend__square--completed,.stackchart__seg--completed{background:#F9E27E}
.legend__square--mid,.stackchart__seg--mid{background:#F5B300}
.legend__square--step1,.stackchart__seg--step1{background:#E45B5B}
@media (prefers-reduced-motion:reduce){.donutchart__ring circle{transition:none}}
/* The bars: a 38px gutter of ticks, a 250px plot, the wizards' names below. */
.stackchart{display:flex;gap:10px}
.stackchart__gutter{width:38px;flex:none;position:relative;height:250px}
.stackchart__body{flex:1;min-width:0;display:flex;flex-direction:column}
.stackchart__plot{position:relative;height:250px}
.stackchart__bars{position:absolute;inset:0;display:flex;gap:6px;align-items:flex-end}
.stackchart__col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.stackchart__seg{width:48%;max-width:46px;flex:none;cursor:pointer}
.stackchart__seg--step1{border-radius:4px 4px 0 0}
.stackchart__seg--completed{border-radius:0 0 4px 4px}
.stackchart__names{display:flex;gap:6px;margin-top:9px}
.stackchart__name{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center;font-size:12px;color:rgba(0,0,0,.5);line-height:1.35}
.stackchart__name > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stackchart__total{font-size:11px;color:rgba(0,0,0,.35)}
.stackchart__tip{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:2}