/* File: web/assets/rx.css — the redesigned customer surfaces ("Relax and Apply Redesign"
 * design canvas, 2026-08-31: https://claude.ai/artifact/MyrRhSSVDM9o4XFMHrHRYF).
 *
 * A LAYER on top of style.css, not a replacement. Every rule is scoped under `html.rx`, so a
 * page opts in with one class and a page without it is byte-for-byte unaffected. That scoping
 * is what lets the dashboard carry this file while the operator's view stays exactly as it
 * was: dashboard.html ships `class="rx"`, and dashboard.js takes it off again for the
 * operator (see applyRoleGate there). Onboarding, /jobs, /application and /pricing opt in
 * statically.
 *
 * What the canvas changes, and so all this file does:
 *   - Dark leads. Same token NAMES as style.css, so a component is written once; the light
 *     theme still works when the viewer picks it (theme.js sets data-theme="light").
 *   - Three faces, three jobs: Space Grotesk (display), Inter Tight (UI), IBM Plex Mono
 *     (evidence — timestamps, counts, portal names, eyebrow labels). SELF-HOSTED: the app
 *     pages' CSP is `default-src 'self'`, so Google Fonts cannot load here.
 *   - One stroke icon set (assets/icons.svg) instead of emoji.
 *   - One elevation: shadows only on things that float (toasts, dropdowns).
 *   - One banner component, five severities, each with an icon AND a word — colour never
 *     carries meaning alone. */

@font-face { font-family: "Space Grotesk"; src: url("/assets/font-space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/font-inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/font-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/font-plex-mono-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }

html.rx {
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-btn: 10px;
  --shadow-sm: none;
}
/* Dark unless the viewer explicitly chose light. style.css only goes dark on an explicit
   choice or a dark OS; the canvas makes dark the default for these surfaces. */
html.rx:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #0a0b0e; --bg-soft: #121419; --panel: #15171d; --panel-2: #1c1f27; --panel-3: #242834;
  --border: #282c36; --border-soft: #1f222b; --text: #f1f2f5; --muted: #99a0ad; --faint: #69707f;
  --accent: #818cf8; --accent-soft: #a5acfb; --accent-ink: #0b0c10; --blue: #60a5fa; --orange: #fb923c;
  --amber: #fbbf24; --ok: #34d399; --warn: #fbbf24; --err: #f87171;
  --nav-bg: rgba(10,11,14,.78); --glow: rgba(129,140,248,.16);
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 20px 44px -22px rgba(0,0,0,.7);
}

html.rx body { font-family: var(--font); letter-spacing: -.005em; background: var(--bg); -webkit-font-smoothing: antialiased; }
html.rx body::before, html.rx body::after { display: none; } /* style.css's ambient glows */
html.rx h1, html.rx h2, html.rx h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
html.rx h1 { letter-spacing: -.038em; }

/* ── icons ─────────────────────────────────────────────────────────────── */
.ic { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; color: inherit; }
.ic.sm { width: 15px; height: 15px; vertical-align: -2px; }
.ic.lg { width: 22px; height: 22px; }
/* Tabs carry BOTH the old emoji and the new icon; exactly one is ever visible, so the
   operator view (no .rx) is unchanged. */
.ic-rx { display: none; }
html.rx .ic-rx { display: inline-block; }
html.rx .ic-emoji { display: none; }

/* ── type helpers ──────────────────────────────────────────────────────── */
.rx-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.rx-mono { font-family: var(--font-mono); }

/* ── nav ───────────────────────────────────────────────────────────────── */
html.rx .nav { background: var(--nav-bg); border-bottom: 1px solid var(--border-soft); }
html.rx .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
html.rx .brand .dot { background: var(--ok); box-shadow: none; }

/* ── controls ──────────────────────────────────────────────────────────── */
html.rx .btn { border-radius: var(--radius-btn); font-weight: 600; box-shadow: none; min-height: 40px; }
html.rx .btn:hover { transform: none; }
html.rx .btn.primary:hover { box-shadow: none; }
html.rx .btn:focus-visible, html.rx a:focus-visible, html.rx button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.rx .btn.danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
html.rx .field input, html.rx .field select, html.rx .field textarea { border-radius: var(--radius-sm); background: var(--bg-soft); }
html.rx .panel, html.rx .connect, html.rx .stat { box-shadow: none; }
html.rx .panel { border-radius: var(--radius); }
html.rx .pill { font-family: var(--font-mono); font-weight: 500; letter-spacing: .01em; }
html.rx .msg { border-radius: var(--radius-sm); }

/* ── banner: one component, five severities ────────────────────────────── */
.rx-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; background: var(--panel); margin: 0 0 18px; }
.rx-banner > .ic { width: 20px; height: 20px; }
.rx-banner strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.rx-banner p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.rx-banner .rx-banner-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rx-banner.is-err { border-left-color: var(--err); } .rx-banner.is-err > .ic { color: var(--err); }
.rx-banner.is-warn { border-left-color: var(--warn); } .rx-banner.is-warn > .ic { color: var(--warn); }
.rx-banner.is-info { border-left-color: var(--accent); } .rx-banner.is-info > .ic { color: var(--accent); }
.rx-banner.is-ok { border-left-color: var(--ok); } .rx-banner.is-ok > .ic { color: var(--ok); }
.rx-banner.is-quiet { border-left-color: var(--faint); } .rx-banner.is-quiet > .ic { color: var(--faint); }
.rx-banner .rx-banner-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
@media (max-width: 640px) {
  .rx-banner { grid-template-columns: auto minmax(0, 1fr); }
  .rx-banner .rx-banner-act { grid-column: 1 / -1; justify-content: stretch; }
  .rx-banner .rx-banner-act .btn { flex: 1; }
}

/* ── skeleton + toast ──────────────────────────────────────────────────── */
.rx-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: rxShimmer 1.4s linear infinite; }
@keyframes rxShimmer { to { background-position: -200% 0; } }
.rx-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; box-shadow: var(--shadow); }
.rx-toast .ic { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .rx-skel { animation: none; } }

/* ═════════════════════════════════════════════════════════════════════════
   Onboarding — the step spine (artboards 03 + 04)
   ═════════════════════════════════════════════════════════════════════════ */
html.rx #wizard.wrap { max-width: 1180px; }
html.rx #wizard:not(.hidden) { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; align-items: start; padding-top: 28px; padding-bottom: 48px; }
html.rx .ob-spine { position: sticky; top: 84px; padding: 28px 30px 26px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); display: flex; flex-direction: column; }
html.rx .ob-spine .ob-head { margin: 0 0 22px; text-align: left; }
html.rx .ob-spine .ob-head h1 { font-size: 13px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
html.rx .ob-spine .ob-head p { font-size: 13px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
html.rx .ob-spine-foot { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: 12.5px; line-height: 1.65; }
html.rx .ob-body { padding: 8px 0 0 64px; min-width: 0; }
html.rx .ob-body > .panel { background: transparent; border: 0; padding: 0; margin: 0; max-width: 680px; }
html.rx .ob-body > .panel > h3 { font-family: var(--font-display); font-size: 36px; line-height: 1.1; letter-spacing: -.038em; margin: 0 0 12px; display: block; }
html.rx #wizard .ob-body .note { font-size: 15.5px; line-height: 1.6; }
html.rx .ob-body > .panel > .note:first-of-type { margin-bottom: 30px; }

/* The rail, re-drawn as a vertical spine: numbered disc, connector line, label + status. */
html.rx .ob-rail { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; background: none; border: 0; overflow: visible; }
html.rx .ob-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left; padding: 10px 0; border: 0; background: none; border-radius: 0; color: var(--text); font: inherit; cursor: pointer; position: relative; min-height: 58px; width: 100%; }
html.rx .ob-step:hover:not(:disabled) { background: none; }
html.rx .ob-step:hover:not(:disabled) .ob-step-label { color: var(--accent-soft); }
html.rx .ob-step:disabled { opacity: 1; cursor: default; }
html.rx .ob-step:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 42px; bottom: -6px; width: 1px; background: var(--border); }
html.rx .ob-step.is-done:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 35%, transparent); }
html.rx .ob-step .ob-tick { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--faint); background: transparent; margin: 0; }
html.rx .ob-step.is-done .ob-tick { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 42%, transparent); color: var(--ok); }
html.rx .ob-step[aria-current="step"] .ob-tick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--glow); font-weight: 600; }
html.rx .ob-step .ob-tick .ic { width: 13px; height: 13px; stroke-width: 2.4; }
html.rx .ob-step-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
html.rx .ob-step-label { font-size: 15px; font-weight: 600; color: var(--text); transition: color .15s; }
html.rx .ob-step:not(.is-done):not([aria-current="step"]) .ob-step-label { color: var(--muted); }
html.rx .ob-step-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.rx .ob-step.is-done .ob-step-sub { color: var(--ok); }
html.rx .ob-step[aria-current="step"] .ob-step-sub { color: var(--accent); }

/* Tags, pills and the unlock tile in the canvas vocabulary. */
html.rx .ob-tags { border-radius: var(--radius-sm); background: var(--bg-soft); border-color: var(--border); }
html.rx .ob-tag { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; }
html.rx .ob-pill { border-radius: 999px; font-family: var(--font-mono); font-size: 12.5px; }
html.rx .ob-pill.is-on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--text); }
html.rx .ob-unlock { border-radius: var(--radius); background: var(--panel); border-color: var(--border); }
html.rx .ob-unlock-tile { background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); border-radius: 14px; }
html.rx .ob-unlock-tile b { font-family: var(--font-display); }
html.rx .ob-unlock-tile span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
html.rx .ob-more { border-radius: var(--radius-sm); background: var(--panel); }
html.rx .ob-file { font-family: var(--font-mono); font-size: 13px; }
html.rx .ob-welcome h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; }
html.rx .ob-kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; }
html.rx .ob-need { border-radius: var(--radius); background: var(--panel); box-shadow: none; }

/* Résumé read-back (artboard 04): what the parser was unsure of, before what read cleanly. */
.rx-readback { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin: 0 0 22px; overflow: hidden; }
.rx-readback-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rx-readback-head .ic { color: var(--ok); }
.rx-readback.is-unsure .rx-readback-head .ic { color: var(--warn); }
.rx-readback dl { margin: 0; }
.rx-readback-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; }
.rx-readback-row:last-child { border-bottom: 0; }
.rx-readback-row dt { color: var(--muted); font-size: 13px; }
.rx-readback-row dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.rx-readback-row dd.is-missing { color: var(--warn); }
.rx-readback-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-readback-skills span { padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; }
@media (max-width: 640px) { .rx-readback-row { grid-template-columns: 1fr; gap: 3px; } }

@media (max-width: 900px) {
  html.rx #wizard:not(.hidden) { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  html.rx .ob-spine { position: static; padding: 16px 16px 12px; margin-bottom: 22px; }
  html.rx .ob-spine-foot { display: none; }
  html.rx .ob-spine .ob-head { margin-bottom: 10px; }
  html.rx .ob-rail { flex-direction: row; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
  html.rx .ob-rail::-webkit-scrollbar { display: none; }
  html.rx .ob-step { width: auto; flex: 0 0 auto; min-height: 0; padding: 4px 0; scroll-snap-align: start; grid-template-columns: 26px auto; gap: 10px; }
  html.rx .ob-step::after { display: none; }
  html.rx .ob-step-sub { display: none; }
  html.rx .ob-step-label { font-size: 14px; }
  html.rx .ob-body { padding: 0; }
  html.rx .ob-body > .panel > h3 { font-size: 28px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Dashboard (customer face) — artboards 05–08
   ═════════════════════════════════════════════════════════════════════════ */
/* The dashboard has its OWN palette (--dash-*, style.css .dashboard-page) that follows the OS,
   so on a light-OS machine it went light under rx's forced dark: dark ink on a dark page.
   Point it at the rx tokens instead, so one theme decision drives the whole page. The doubled
   class out-ranks style.css's `:root:not([data-theme]) .dashboard-page` (0,3,0). */
html.rx body.dashboard-page.dashboard-page {
  --dash-bg: var(--bg); --dash-panel: var(--panel); --dash-panel-solid: var(--panel);
  --dash-border: var(--border); --dash-border-hot: color-mix(in srgb, var(--accent) 45%, transparent);
  --dash-text: var(--text); --dash-muted: var(--muted); --dash-faint: var(--faint);
  --dash-violet: var(--accent); --dash-cyan: var(--blue); --dash-green: var(--ok);
  --dash-amber: var(--amber); --dash-red: var(--err);
  background: var(--bg);
}
html.rx .ambient-canvas, html.rx .noise { display: none; }
html.rx .dash-tabs { background: var(--bg-soft); box-shadow: none; backdrop-filter: none; border-color: var(--border-soft); }
html.rx .dash-tab-group { background: transparent; border-color: transparent; }
html.rx .dashboard-shell { max-width: var(--maxw); }
html.rx .head-orb { display: none; }
html.rx .dash-head h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
html.rx .dash-head h1 .text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--muted); }
html.rx .dash-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
html.rx #dashSub { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); }
html.rx .dash-tabs { border-bottom: 1px solid var(--border-soft); }
html.rx .dash-tab { border-radius: 10px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
html.rx .dash-tab.active { background: var(--panel-2); color: var(--text); box-shadow: none; }
html.rx .dash-tab-group-label { font-family: var(--font-mono); letter-spacing: .12em; }
html.rx .stat::after { display: none; }
html.rx .stat .label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; font-size: 11px; }
html.rx .stat .value { font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; }
html.rx .stat-icon, html.rx .stat-shine, html.rx .radar-mark { display: none; }
html.rx .panel-kicker { font-family: var(--font-mono); letter-spacing: .12em; }
html.rx table.log thead th { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; background: var(--bg-soft); }
html.rx table.log tbody tr:nth-child(even) { background: transparent; }
html.rx table.log th, html.rx table.log td { border-right: 0; padding: 15px 24px; }
html.rx .apps-head h2 { font-size: 30px; }
html.rx .apps-lede { font-size: 15px; color: var(--muted); max-width: 720px; }
html.rx .apps-empty { border-radius: var(--radius); border: 1px dashed var(--border); background: transparent; color: var(--muted); }
html.rx .apps-view-btn { border-radius: 999px; font-family: var(--font-mono); font-size: 12.5px; }

/* First run (artboard 05): armed, when the first sweep is, what is queued, what each tab is for. */
.rx-firstrun { margin: 0 0 22px; }
.rx-firstrun-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.rx-firstrun-armed { padding: 28px 30px; }
.rx-armed-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); margin-bottom: 14px; }
.rx-armed-tag::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.rx-armed-tag.is-idle { color: var(--warn); }
.rx-armed-tag.is-idle::before { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.rx-firstrun-armed h2 { font-size: 30px; margin: 0 0 10px; line-height: 1.15; }
.rx-firstrun-armed p { color: var(--muted); margin: 0 0 20px; font-size: 15px; line-height: 1.6; max-width: 520px; }
.rx-firstrun-armed .rx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rx-queue { border-left: 1px solid var(--border-soft); background: var(--bg-soft); padding: 22px 24px; }
.rx-queue-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.rx-queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; }
.rx-queue-row:last-child { border-bottom: 0; }
.rx-queue-row b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.rx-queue-row span { font-family: var(--font-mono); font-size: 12px; color: var(--faint); min-width: 56px; text-align: right; }
.rx-queue-row .rx-q-name { font-family: var(--font); font-size: 14.5px; text-align: left; color: var(--text); min-width: 0; }
.rx-queue-row .rx-q-name.off { color: var(--faint); }
.rx-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rx-explain > div { border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 20px; }
.rx-explain strong { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.rx-explain strong .ic { color: var(--faint); }
.rx-explain p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 860px) {
  .rx-firstrun-hero { grid-template-columns: 1fr; }
  .rx-queue { border-left: 0; border-top: 1px solid var(--border-soft); }
  .rx-explain { grid-template-columns: 1fr; }
  .rx-firstrun-armed { padding: 22px 20px; }
  .rx-firstrun-armed h2 { font-size: 24px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   /jobs and /application — detail pages (artboards 09 + 10)
   Restyled through their own class names; their scripts are unchanged.
   ═════════════════════════════════════════════════════════════════════════ */
html.rx main.wrap h1 { line-height: 1.1; }
html.rx .jb-card, html.rx .ap-card, html.rx .ap-section { border-radius: var(--radius); box-shadow: none; }

/* Phone nav: brand + theme toggle + two links did not fit in 375px on /jobs (46px of
   horizontal page scroll). Tighter link padding, and the brand may shrink before the links do. */
@media (max-width: 480px) {
  html.rx .nav .wrap { gap: 8px; padding-left: 16px; padding-right: 16px; }
  html.rx .nav .brand { min-width: 0; font-size: 14px; }
  html.rx .nav .links { gap: 0; flex-shrink: 0; }
  html.rx .nav .links a:not(.btn) { padding: 7px 7px; font-size: 13px; }
  html.rx .nav .brand-logo { display: none; }
}

/* Tracker summary (artboard 07) — tracker.js renderSummary(). Drawn for everyone who loads
   tracker.js, so styled without the html.rx scope; the tokens resolve on either theme. */
.trk-summary:empty { display: none; }
.trk-summary { margin: 0 0 22px; }
.trk-sum-title { font-family: var(--font-display, inherit); font-size: 24px; letter-spacing: -.03em; margin: 0 0 14px; }
.trk-sum-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.trk-sum-grid-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.trk-sum-card { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 18px 20px; min-width: 0; }
.trk-sum-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.trk-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; align-items: end; height: 110px; border-bottom: 1px solid var(--border); }
.trk-bar { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.trk-bar i { display: block; width: 100%; height: var(--h, 0%); background: var(--accent); border-radius: 4px 4px 0 0; }
.trk-bar:hover i { background: var(--accent-soft); }
.trk-sum-axis { display: flex; justify-content: space-between; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--faint); margin-top: 8px; }
.trk-portal { margin-bottom: 12px; }
.trk-portal:last-child { margin-bottom: 0; }
.trk-portal-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.trk-portal-head span { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); }
.trk-portal-track { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.trk-portal-track i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: 999px; }
.trk-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.trk-step { border-left: 1px solid var(--border); padding-left: 12px; }
.trk-step:first-child { border-left: 0; padding-left: 0; }
.trk-step b { display: block; font-family: var(--font-display, inherit); font-size: 26px; letter-spacing: -.03em; }
.trk-step span { font-size: 12.5px; color: var(--muted); }
.trk-saved b { display: block; font-family: var(--font-display, inherit); font-size: 34px; letter-spacing: -.035em; }
.trk-saved span { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--faint); }
@media (max-width: 760px) {
  .trk-sum-grid, .trk-sum-grid-2 { grid-template-columns: 1fr; }
  .trk-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .trk-step:nth-child(4) { border-left: 0; padding-left: 0; }
}

/* Application detail (artboard 10) — application.js renderDetail(). */
html.rx .ap-back { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
html.rx .ap-crumb-tail { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
html.rx .ap-detail-head { margin: 18px 0 22px; }
html.rx .ap-detail-tags { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
html.rx .ap-portal-tag { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
html.rx .ap-detail-head h1 { font-size: clamp(30px, 4vw, 42px); margin: 0 0 10px; }
html.rx .ap-detail-meta { color: var(--muted); }
html.rx .ap-verdict { border-radius: var(--radius); }
html.rx .ap-section { border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); padding: 22px 24px; margin: 0 0 16px; }
html.rx .ap-section > h2 { font-size: 19px; margin: 0 0 6px; }
.ap-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ap-detail-col { min-width: 0; }
@media (max-width: 860px) { .ap-detail-grid { grid-template-columns: 1fr; } }
/* "Print or save as PDF" — the record as a document: no chrome, no buttons, light ink. */
@media print {
  html.rx { color-scheme: light; }
  html.rx body { background: #fff; color: #111; }
  html.rx .nav, html.rx .ap-back, html.rx .ap-crumb-tail, html.rx .ap-row-actions, html.rx #themeToggle { display: none !important; }
  html.rx .ap-section, html.rx .ap-verdict { background: #fff; border-color: #ccc; break-inside: avoid-page; }
  html.rx .ap-detail-grid { grid-template-columns: 1fr; }
  html.rx * { color: #111 !important; }
}
html.rx .ap-verdict { margin-bottom: 16px; }
html.rx .ap-resume-doc { font-family: var(--font); font-size: 14.5px; line-height: 1.6; }

/* Job detail (artboard 09) — jobs.js openDetail(). */
main.is-detail > :not(#jobDetail) { display: none !important; }
.job-title-link { color: inherit; text-decoration: none; }
.job-title-link:hover { color: var(--accent-soft); }
.jd-crumb { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--faint); margin: 8px 0 22px; }
.jd-crumb a { color: var(--muted); }
.jd-head { margin-bottom: 24px; }
.jd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.jd-tag { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.jd-head h1 { font-size: clamp(30px, 4vw, 42px); margin: 0 0 8px; line-height: 1.1; }
.jd-sub { color: var(--muted); margin: 0; font-size: 16px; }
.jd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.jd-main, .jd-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.jd-side { position: sticky; top: 84px; }
.jd-card { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 22px 24px; }
.jd-card h2 { font-size: 18px; margin: 0 0 12px; }
.jd-reasons { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }
.jd-note { color: var(--faint); font-size: 14px; margin: 10px 0 0; }
.jd-body p { color: var(--text); line-height: 1.7; margin: 0 0 12px; }
.jd-posting { display: inline-block; margin-top: 6px; font-size: 14px; }
.jd-state { display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.jd-state-queued, .jd-state-applying { color: var(--accent); }
.jd-state-applied { color: var(--ok); }
.jd-state-failed { color: var(--err); }
.jd-status p { margin: 0 0 14px; color: var(--text); line-height: 1.55; }
.jd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jd-send { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.6; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
@media (max-width: 900px) {
  .jd-grid { grid-template-columns: 1fr; }
  .jd-side { position: static; order: -1; }
}
.jd-score { display: flex; align-items: center; gap: 10px; margin: 0; }
.jd-score-pct { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--muted); }

/* Roles step: pay floor + never-apply list. */
.ob-optional { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-left: 6px; font-weight: 400; }
.ob-money { display: flex; align-items: center; gap: 8px; max-width: 360px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-soft); padding: 0 12px; }
.ob-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.ob-money span { color: var(--muted); }
.ob-money .ob-money-unit { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--faint); white-space: nowrap; }
.ob-money input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 11px 0 !important; }
/* Workday form sections (qaKind 'form-sections'): the label is a section name, not a question. */
.ap-qa-sections .ap-q { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
/* The sign-in card's decorative orbit pokes <1px past a 375px viewport; clip, don't scroll. */
html.rx body.dashboard-page { overflow-x: clip; }
@media (max-width: 520px) { .trk-sum-head { flex-direction: column; gap: 2px; } }

/* jobs.css / application.css zero the .wrap side padding (`padding: 28px 0 …`), so on a phone
   the content ran edge to edge. Restore a gutter. */
html.rx .jobs-wrap, html.rx .ap-wrap { padding-left: 22px; padding-right: 22px; }
@media (max-width: 640px) { html.rx .jobs-wrap, html.rx .ap-wrap { padding-left: 16px; padding-right: 16px; } }
/* A component `display:` rule (e.g. .jobs-status { display: flex }) must never beat the hidden
   attribute — that left "Loading your matched roles…" on screen after the roles had loaded. */
html.rx [hidden] { display: none !important; }
.ap-emails-other { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ap-emails-other > summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.ap-emails-other > summary:hover { color: var(--text); }
/* The breadcrumb wraps on a phone; keep its two halves on one tight line box. */
html.rx .ap-back { display: inline; margin: 0; line-height: 1.7; }
html.rx .ap-crumb-tail { line-height: 1.7; }

/* Customer app sign-in (dashboard.html): one centered card — the console's two-column
   "command center" hero is not on this page. */
html.rx .rx-signin { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - 64px); padding: 12vh 16px 40px; }
html.rx .rx-signin .connect-card { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
html.rx .rx-signin h2 { font-size: 28px; margin: 0 0 10px; line-height: 1.15; }
html.rx .rx-signin p { color: var(--muted); margin: 0 0 22px; }
html.rx .rx-signin .connect-button { width: 100%; justify-content: center; }
html.rx .rx-signin .note { margin: 18px 0 0; font-size: 14px; }
html.rx .nav .brand .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }