/* AS4: opt-in presentation. Keep the shared profile/admin styles intact. */
body.pro-ux {
  --paper:#f5f7f4; --card:#fff; --field:#f5f8f6;
  --ink:#203a32; --muted:#596c64; --line:#d7e2db;
  --accent:#086a55; --accent-ink:#075442; --accent-soft:#e5f2e9;
  --pro-action-text:#fff; --pro-action-hover:#075442;
  --gold:#8a691e; --gold-soft:#f6efd9; --danger:#a52e2b;
  --pro-danger-soft:#fff2ef; --good:#176c4c; --hint:#425d70;
  --surface:var(--card); --surface-2:var(--field);
  --text:var(--ink); --text-2:var(--muted); --teal:var(--accent);
  --gold-tint:var(--gold-soft); --line-strong:#869c90;
  --focus:var(--accent); --shadow:0 2px 4px #183c2910,0 16px 42px #183c290a;
  color-scheme:light;
  padding:0; background:var(--paper); color:var(--ink);
  font:1rem/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
.pro-ux .serif { font-family:var(--serif); font-weight:500; color:var(--ink); }
.pro-ux h1 { letter-spacing:-.025em; text-wrap:balance; }
.pro-ux h2 { line-height:1.25; }
.pro-ux p,.pro-ux li,.pro-ux dd { overflow-wrap:anywhere; }
.pro-ux a { text-underline-offset:3px; }
.pro-ux :focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.pro-ux .pro-icon { flex:0 0 auto; vertical-align:middle; }
.pro-ux .pro-icon-tile {
  display:inline-grid; place-items:center; width:2.8rem; height:2.8rem;
  flex:0 0 auto; border:1px solid var(--line); border-radius:13px;
  background:var(--accent-soft); color:var(--accent-ink);
}
.pro-ux .pro-icon-tile-large { width:3.5rem; height:3.5rem; margin:0 0 1.25rem; border-radius:17px; }
.pro-ux .pro-icon-tile-large .pro-icon { width:1.8rem; height:1.8rem; }
.pro-ux .eyebrow { color:var(--accent-ink); font-size:.73rem; letter-spacing:.12em; }
.pro-ux .pro-intro { color:var(--muted); margin:.85rem 0 1.6rem; }
.pro-ux .pro-back {
  display:flex; align-items:center; gap:.45rem; width:fit-content;
  min-height:44px; font-size:.9rem; font-weight:600; margin:0 0 1.25rem;
}
.pro-ux .pro-back .pro-icon { width:1.15rem; height:1.15rem; }

/* Keep the site's navy, seal and existing navigation; lighten the page below. */
.pro-ux .site-header { background:#0f2a4a; border-bottom:1px solid #ffffff24; }
.pro-ux .site-header .wrap { min-height:80px; gap:1rem; }
.pro-ux .site-header .brand { color:#fff; gap:.85rem; }
/* Operator, 2026-09-17: the seal fills the header, the name is set in caps
   and the line beneath it is stretched to the same width. */
.pro-ux .site-header .brand-seal { width:66px; height:66px; }
.pro-ux .site-header .brand > span { display:block; }
.pro-ux .site-header .brand b { display:block; font-family:var(--sans); font-weight:700; font-size:1.7rem; text-transform:uppercase; letter-spacing:.04em; line-height:1; }
.pro-ux .site-header .brand small {
  display:block; margin-top:.06rem; font-size:.86rem; font-weight:600; line-height:1;
  text-transform:uppercase; color:#fff; letter-spacing:.14em;
}
.pro-ux .site-nav a,.pro-ux .site-header .link-button { color:#f1f6fc; min-height:44px; }
.pro-ux .site-nav .acct { border:1px solid #ffffff3d; }
.pro-ux .site-nav .profession-choice { color:#e0e8f0; }
.pro-ux .site-header :focus-visible { outline-color:#bce8d2; }
.pro-ux .menu-btn { color:#fff; min-height:44px; }
.pro-ux .mobile-menu .site-nav { background:#0f2a4a; }
.pro-ux .band { background:transparent; color:var(--muted); }
.pro-ux .band::after { display:none; }
.pro-ux .band .wrap { padding:1.15rem 1.25rem 0; }
.pro-ux .pro-site-label { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.pro-ux .site-content {
  width:100%; max-width:1120px; margin:0 auto; padding:2rem 1.25rem 4rem;
  min-height:60vh; background:transparent; border:0; border-radius:0; box-shadow:none;
}
.pro-ux .chrome-flashes { max-width:1080px; margin:1.15rem auto 0; padding:0 1.25rem; }
.pro-ux .flash { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }
.pro-ux .flash-error { background:var(--pro-danger-soft); color:var(--danger); }
.pro-ux .site-footer { margin-top:0; background:#0a1f38; color:#f3f6fa; }
.pro-ux .site-footer a,.pro-ux .site-footer h3 { color:#f3f6fa; }
.pro-ux .site-footer .legal { color:#c5d0dd; }

/* Form controls: readable labels and touch targets, including in dark mode. */
.pro-ux .btn {
  min-height:46px; padding:.7rem 1.15rem; gap:.65rem; border-radius:10px;
  font:600 .95rem/1.4 var(--sans); white-space:normal; text-align:center;
  justify-content:center; text-decoration:none;
}
.pro-ux .btn .pro-icon { width:1.2rem; height:1.2rem; }
.pro-ux .btn-primary { background:var(--accent); color:var(--pro-action-text); border-color:var(--accent); }
.pro-ux .btn-primary:hover { background:var(--pro-action-hover); color:var(--pro-action-text); border-color:var(--pro-action-hover); }
.pro-ux .btn-ghost { color:var(--accent-ink); border-color:var(--line-strong); background:var(--card); }
.pro-ux .btn-ghost:hover { background:var(--accent-soft); }
.pro-ux .btn:disabled { opacity:.6; cursor:not-allowed; }
.pro-ux .pro-wide-button { width:100%; }
.pro-ux .f label,.pro-ux .client-lookup-form > label { font-size:.9rem; font-weight:600; color:var(--ink); }
.pro-ux .in {
  min-height:48px; max-width:100%; background:var(--field); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:9px; padding:.7rem .85rem;
  font:1rem/1.5 var(--sans);
}
.pro-ux .in:focus { border-color:var(--accent); }
.pro-ux .in[aria-invalid="true"] { border:2px solid var(--danger); }
.pro-ux .hint,.pro-ux .help { color:var(--muted); line-height:1.55; }
.pro-ux .f > .hint { margin:.45rem 0 0; font-size:.83rem; }
.pro-ux .acceptbar { margin-top:1.3rem; }
.pro-ux .pro-field-error { color:var(--danger); font-size:.9rem; margin:.55rem 0 0; }
.pro-ux .error-summary { background:var(--pro-danger-soft); border-color:var(--danger); }
.pro-ux .error-summary b,.pro-ux .error-summary a { color:var(--danger); }
.pro-ux .pro-notice {
  padding:.9rem 1rem; background:var(--field); border:1px solid var(--line);
  border-radius:10px; font-size:.9rem;
}
.pro-ux .formpage { border-radius:18px; padding:2rem; box-shadow:var(--shadow); }
.pro-ux .formpage h1 { font-size:clamp(1.8rem,3.1vw,2.35rem); line-height:1.15; }
.pro-ux .formpage.narrow { max-width:560px; margin:1rem auto 0; }

/* Sign-in and code recovery use the same compact task card. */
.pro-ux .pro-auth-layout {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  max-width:980px; margin:1rem auto; gap:0; align-items:stretch;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow);
}
.pro-ux .pro-auth-layout .pro-auth-card { width:100%; border:0; border-radius:0; box-shadow:none; padding:2.6rem; }
.pro-ux .pro-auth-card .f { margin-top:1.3rem; }
.pro-ux .pro-auth-card h1 { max-width:17ch; }
.pro-ux .pro-auth-alternative { margin-top:1.6rem; padding-top:1.15rem; border-top:1px solid var(--line); font-size:.9rem; }
.pro-ux .pro-auth-alternative p { margin:.4rem 0; }
.pro-ux .pro-auth-alternative a { display:inline-block; padding:.2rem 0; font-weight:600; }
.pro-ux .pro-auth-aside { background:#123f36; color:#edf9f1; padding:2.8rem 2.3rem; display:flex; flex-direction:column; }
.pro-ux .pro-auth-aside .eyebrow { color:#b6dfca; }
.pro-ux .pro-auth-aside h2 { font-size:2.15rem; line-height:1.22; color:#f3fbf6; margin:.35rem 0 1.8rem; }
.pro-ux .pro-feature-list { list-style:none; margin:0; padding:0; display:grid; gap:1.3rem; }
.pro-ux .pro-feature-list li { display:flex; gap:.85rem; align-items:flex-start; }
.pro-ux .pro-feature-list .pro-icon { color:#ade0c5; margin-top:.15rem; }
.pro-ux .pro-feature-list b { display:block; font-size:.93rem; font-weight:600; }
.pro-ux .pro-feature-list small { display:block; font-size:.85rem; margin-top:.2rem; color:#c9e1d6; }
.pro-ux .pro-aside-foot { margin:auto 0 0; padding-top:2rem; font-size:.74rem; color:#c9e1d6; }
.pro-ux .pro-email-hint { font-size:.92rem; overflow-wrap:anywhere; }
.pro-ux .pro-email-hint strong { display:block; color:var(--ink); }
.pro-ux .code-input { width:100%; font-size:1.85rem; font-weight:600; letter-spacing:.24em; text-align:center; font-variant-numeric:tabular-nums; }
.pro-ux .pro-code-card .pro-intro { font-size:.94rem; }
.pro-ux .pro-recovery-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.pro-ux .pro-message-card > p { color:var(--muted); }

/* Preserve the profession photographs and joining copy. */
.pro-ux .pro-profession-entry { max-width:940px; margin:0 auto; padding:0 0 1rem; border-top:0; }
.pro-ux .pro-profession-entry > h1 { font-size:clamp(1.9rem,3.4vw,2.6rem); margin:0 0 .9rem; }
/* This page drops the chrome label into its own heading, so the band is empty. */
.pro-ux .band .wrap:empty { padding:.35rem 0 0; }
.pro-ux .pro-returning {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.75rem 1.5rem; padding:1rem 1.25rem; background:var(--card);
  border:1px solid var(--line); border-radius:14px; margin-bottom:1.8rem;
}
.pro-ux .pro-returning > span { display:flex; gap:.6rem; align-items:center; font-weight:500; }
.pro-ux .pro-returning > span .pro-icon { color:var(--accent); }
.pro-ux .pro-profession-entry .lead { max-width:65ch; color:var(--muted); font-size:1.03rem; margin:0 0 .9rem; }
/* Wide enough for the roster sentence to read as one line; it still wraps below. */
@media (min-width:1040px) {
  .pro-ux .pro-profession-entry .lead { max-width:none; white-space:nowrap; font-size:.86rem; }
}
.pro-ux .choose-instruction { margin:0 0 .8rem; font-weight:600; }
.pro-ux .pro-profession-entry .pro-returning { margin:1.8rem 0 0; }
.pro-ux .join-profession-cards { gap:1.25rem; }
.pro-ux .join-profession-card { padding:1.2rem; border-radius:16px; background:var(--card); box-shadow:var(--shadow); }
.pro-ux .join-profession-card:hover { border-color:var(--accent); background:var(--field); }
.pro-ux .profession-photo { max-width:none; width:100%; margin-bottom:1.15rem; border-radius:10px; }
.pro-ux .join-profession-card h2 { font:500 1.4rem/1.3 var(--serif); color:var(--ink); }
.pro-ux .hero { padding:1.4rem 0 2.5rem; gap:2.7rem; }
.pro-ux .hero h1 { font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.1; }
.pro-ux .herocard { background:var(--card); border-radius:18px; }
.pro-ux .entry .ic { display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); }
.pro-ux .entry .ic .pro-icon { width:1.2rem; height:1.2rem; }
.pro-ux .join-steps li,.pro-ux .checker { border-radius:14px; box-shadow:var(--shadow); }

/* Account: status, lookup and the familiar action order stay easy to scan. */
.pro-ux .account-home { max-width:960px; }
.pro-ux .account-identity { gap:.9rem; margin:0 0 1rem; }
.pro-ux .account-avatar { width:64px; height:64px; flex-basis:64px; border:1px solid var(--line); border-radius:16px; }
.pro-ux .account-whose { font-family:var(--serif); color:var(--ink); }
.pro-ux .account-head { border-bottom:0; margin:.8rem 0 1.25rem; padding-bottom:0; }
.pro-ux .account-status { padding:1rem 1.15rem; background:var(--field); border:1px solid var(--line); border-radius:12px; }
.pro-ux .account-status-line { font-size:.87rem; }
.pro-ux .account-status-line b { letter-spacing:0; }
.pro-ux .state-live { color:var(--good); }
.pro-ux .state-dark { color:var(--gold); }
.pro-ux .pro-lookup-card {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem 1rem;
  align-items:center; padding:1.3rem; margin:1.4rem 0 1.7rem;
  border:1px solid var(--line-strong); border-left:4px solid var(--accent);
  border-radius:14px; background:var(--accent-soft);
}
.pro-ux .pro-lookup-card h2 { margin:0 0 .25rem; font-size:1.45rem; }
.pro-ux .pro-lookup-card p { margin:0; color:var(--muted); font-size:.88rem; }
.pro-ux .pro-lookup-card > .btn { grid-column:2; justify-self:start; }
.pro-ux .account-lede { color:var(--muted); font-size:.92rem; }
.pro-ux .usermenu { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1.25rem 0 1.7rem; }
.pro-ux .usermenu li {
  position:relative; display:grid; grid-template-columns:2.8rem minmax(0,1fr);
  grid-template-rows:auto auto; gap:.2rem .8rem; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:1rem 1.8rem 1rem 1rem;
  min-height:5.5rem; background:var(--card);
}
.pro-ux .usermenu li::after {
  content:""; position:absolute; right:.8rem; top:calc(50% - 3px);
  width:6px; height:6px; border-top:1.5px solid var(--muted);
  border-right:1.5px solid var(--muted); transform:rotate(45deg); pointer-events:none;
}
.pro-ux .usermenu li:hover { border-color:var(--accent); background:var(--field); }
.pro-ux .usermenu .pro-icon-tile { grid-row:1/3; }
.pro-ux .usermenu li a { grid-column:2; font-size:.92rem; line-height:1.45; color:var(--ink); text-decoration:none; }
.pro-ux .usermenu li a::after { content:""; position:absolute; inset:0; border-radius:12px; }
.pro-ux .usermenu li a:focus-visible { outline:0; }
.pro-ux .usermenu li a:focus-visible::after { outline:3px solid var(--focus); outline-offset:3px; }
.pro-ux .usermenu li small { grid-column:2; line-height:1.45; font-size:.8rem; }
.pro-ux .listing-completeness { background:var(--field); padding:1rem 1.2rem; }
.pro-ux .listing-completeness-heading { align-items:center; }
.pro-ux .listing-completeness-heading h2 { font-size:1.2rem; }
.pro-ux .listing-completeness-heading p { font-size:.83rem; color:var(--muted); }
.pro-ux .pro-completeness-details > summary { min-height:44px; padding:.4rem 0; color:var(--accent-ink); font-size:.88rem; font-weight:600; cursor:pointer; }
.pro-ux .pro-completeness-details[open] > summary { margin-bottom:.55rem; }
.pro-ux .account-home-actions { margin-top:1.5rem; }
.pro-ux .account-home-actions button { min-height:44px; }
.pro-ux .account-spoke { max-width:850px; }
.pro-ux .pro-section-title { display:flex; gap:.8rem; align-items:center; margin:.4rem 0 1.3rem; }
.pro-ux .pro-section-title h1 { margin:0; }
.pro-ux .account-spoke .savebar { background:var(--card); border-top:1px solid var(--line); padding-top:1.2rem; }

/* Lookup remains a server form; declarations and their ruled reminders stay together. */
.pro-ux .client-lookup-page { max-width:820px; }
.pro-ux .client-lookup-form {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start;
  gap:.65rem 1rem; max-width:none; margin:1.5rem 0; padding:1.25rem;
  background:var(--field); border:1px solid var(--line); border-radius:13px;
}
.pro-ux .client-lookup-form > label,.pro-ux .client-lookup-form > .help { grid-column:1/-1; margin:0; }
.pro-ux .client-lookup-form .in { width:100%; font-size:1.15rem; letter-spacing:.12em; font-weight:600; background:var(--card); }
.pro-ux .client-lookup-form .btn { min-height:51px; }
.pro-ux .client-lookup-rule { font-size:.88rem; line-height:1.6; border-radius:0 10px 10px 0; }
.pro-ux .client-lookup-message,.pro-ux .pro-lookup-cleared { background:var(--field); border:1px solid var(--line); padding:1rem; border-radius:10px; }
.pro-ux .client-lookup-result { border-top:3px solid var(--accent); border-radius:12px; padding:1.35rem; }
.pro-ux .client-lookup-result h2 { font-size:1.7rem; margin:0; }
.pro-ux .client-lookup-result > p { font-size:.92rem; }
.pro-ux .client-lookup-result dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.pro-ux .client-lookup-result dl > div:nth-child(n+3) { grid-column:1/-1; }
.pro-ux .client-lookup-result dt { font-size:.82rem; line-height:1.5; }
.pro-ux .client-lookup-result dd { font-size:1.02rem; }
.pro-ux .client-lookup-result dd > span { display:block; font-size:.9rem; margin-top:.3rem; }

@media (max-width:800px) {
  .pro-ux .pro-auth-layout { max-width:560px; grid-template-columns:minmax(0,1fr); }
  .pro-ux .pro-auth-aside { padding:1.8rem 2rem; }
  .pro-ux .pro-auth-aside h2 { font-size:1.7rem; }
  .pro-ux .pro-auth-aside h2 br { display:none; }
  .pro-ux .usermenu { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px) {
  .pro-ux .site-header .wrap { min-height:72px; padding:0 1rem; gap:.6rem; }
  .pro-ux .site-header .brand-seal { width:52px; height:52px; }
  .pro-ux .site-header .brand b { font-size:1.3rem; }
  .pro-ux .site-header .brand small { display:block; font-size:.64rem; }
  .pro-ux .site-content { padding:1.3rem .85rem 2.5rem; }
  .pro-ux .band .wrap { padding:.9rem 1rem 0; }
  .pro-ux .formpage,.pro-ux .pro-auth-layout .pro-auth-card { padding:1.3rem; border-radius:14px; }
  .pro-ux .pro-auth-layout { margin:.3rem auto; border-radius:17px; }
  .pro-ux .pro-auth-layout .pro-auth-card { border-radius:0; }
  .pro-ux .pro-auth-aside { padding:1.6rem 1.3rem; }
  .pro-ux .pro-returning { padding:1rem; }
  .pro-ux .pro-returning .btn { width:100%; }
  .pro-ux .join-profession-cards { gap:.85rem; }
  .pro-ux .join-profession-card { padding:1rem; }
  .pro-ux .profession-photo { max-width:260px; }
  .pro-ux .pro-lookup-card { padding:1rem; }
  .pro-ux .pro-lookup-card > .btn { grid-column:1/-1; width:100%; }
  .pro-ux .pro-lookup-card h2 { font-size:1.25rem; }
  .pro-ux .usermenu li { padding:.9rem 1.65rem .9rem .8rem; }
  .pro-ux .account-status { padding:.8rem; }
  .pro-ux .client-lookup-form { grid-template-columns:minmax(0,1fr); padding:1rem; }
  .pro-ux .client-lookup-form > .btn { width:100%; }
  .pro-ux .client-lookup-result { padding:1rem; }
  .pro-ux .client-lookup-result dl { grid-template-columns:minmax(0,1fr); }
  .pro-ux .client-lookup-result dl > div { grid-column:1; }
  .pro-ux .pro-recovery-actions .btn { width:100%; }
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) body.pro-ux {
    --paper:#101d19; --card:#192a23; --field:#20342b; --ink:#e8f2e9;
    --muted:#b1c4b7; --line:#395144; --line-strong:#6d8976;
    --accent:#7ed5ac; --accent-ink:#9ce4bc; --accent-soft:#244a36;
    --pro-action-text:#102e1f; --pro-action-hover:#a4e6c4;
    --gold:#e0bf73; --gold-soft:#39331e; --danger:#ffb8ac;
    --pro-danger-soft:#3e2724; --good:#91ddad; --hint:#b9d4e5;
    --shadow:0 2px 4px #0002,0 16px 42px #0002; color-scheme:dark;
  }
}
:root[data-theme="dark"] body.pro-ux {
  --paper:#101d19; --card:#192a23; --field:#20342b; --ink:#e8f2e9;
  --muted:#b1c4b7; --line:#395144; --line-strong:#6d8976;
  --accent:#7ed5ac; --accent-ink:#9ce4bc; --accent-soft:#244a36;
  --pro-action-text:#102e1f; --pro-action-hover:#a4e6c4;
  --gold:#e0bf73; --gold-soft:#39331e; --danger:#ffb8ac;
  --pro-danger-soft:#3e2724; --good:#91ddad; --hint:#b9d4e5;
  --shadow:0 2px 4px #0002,0 16px 42px #0002; color-scheme:dark;
}
@media (prefers-reduced-motion:reduce) {
  .pro-ux *, .pro-ux *::before, .pro-ux *::after { animation:none; transition:none; scroll-behavior:auto; }
}
/* Account actions and financial references must fit narrow screens. */
.pro-ux .account-spoke .status-actions,
.pro-ux .draft-recovery { display: flex; flex-wrap: wrap; gap: .65rem; }
.pro-ux .draft-recovery p { flex-basis: 100%; }
.pro-ux .account-spoke .status-actions > *,
.pro-ux .account-spoke .btn { max-width: 100%; white-space: normal; }
.pro-ux .account-spoke .lockbox .row { flex-wrap: wrap; }
.pro-ux .payment-record { padding: 1rem 0; border-bottom: 1px solid var(--line, #ddd); overflow-wrap: anywhere; }
.pro-ux .payment-record p { margin: .35rem 0; }
.pro-ux .payment-record h3 { margin: 0 0 .5rem; }
.pro-ux .account-spoke dd { overflow-wrap: anywhere; }