/* Product composition derived from CircleMetroUI/platforms/web/index.html,
   circlemetro.css and DESIGN.md. Generated tokens remain canonical and untouched.
   Four-column mosaics belong to discovery; reading and editing stay calm. */
:root { --jc-panel:var(--cm-color-surface); --jc-canvas:var(--cm-color-canvas); }
:root[data-theme="light"] { --jc-panel:color-mix(in srgb,var(--cm-color-accent-soft) 42%,var(--cm-color-surface)); --jc-canvas:color-mix(in srgb,var(--cm-color-accent-soft) 62%,var(--cm-color-canvas)); }
html[data-theme],html[data-theme] body,html[data-theme] .app-container.jc-metro { background:var(--jc-canvas); }
.jc-metro { --cm-color-text-secondary:var(--cm-color-text-primary); --cm-color-text-disabled:var(--cm-color-text-primary); }
.jc-metro p { line-height:1.65; }
.jc-metro :is(h1,h2,h3) { text-wrap:balance; }
.jc-metro .main-content { max-width:1240px; padding:40px 28px 64px; }
.jc-metro .top-bar { background:var(--jc-canvas)!important; border-color:var(--cm-color-outline)!important; }
.jc-metro .top-bar__content { max-width:1240px; min-height:76px; margin-inline:auto; padding:12px 28px; }
.jc-metro .jc-wordmark { font-size:24px; font-weight:650; line-height:1.05; letter-spacing:-.065em; gap:0; }
.jc-metro .jc-wordmark>.jc-wordmark-accent { font-weight:350; color:#00548f; }
:root[data-theme="dark"] .jc-metro .jc-wordmark>.jc-wordmark-accent { color:#56b4ff; }
.jc-metro .top-bar__logo .logo-icon { background:transparent; color:var(--cm-color-text-primary); }
.jc-metro .top-bar__logo .logo-icon svg { width:26px; height:26px; }
.jc-metro .jc-desktop-nav { gap:6px; }
.jc-metro .jc-desktop-nav a { border:0; background:transparent; border-radius:10px; padding:10px 14px; font-size:14px; }
.jc-metro .jc-desktop-nav a.active { background:var(--cm-color-accent-soft); color:var(--cm-color-accent-text); }
.jc-metro .jc-appearance :is(select,button) { min-height:42px; border-color:var(--cm-color-outline); border-radius:11px; font-size:13px; }
.jc-metro .jc-appearance-button { width:42px; }
.jc-metro .jc-icon { stroke-width:1.7; }

.jc-metro .bottom-nav__item--active { color:var(--cm-color-accent-text)!important; background:var(--cm-color-accent-soft)!important; }
.jc-metro .jc-footer { padding-top:24px; color:var(--cm-color-text-primary); }
.jc-metro .jc-review-entry { font-size:12px; width:fit-content; margin-left:28px; }
/* Pivots: one horizontal row, readable labels, native scrolling on small screens. */
.jc-metro .jc-workspace-nav,.jc-metro .jc-profile .jc-workspace-nav,.jc-metro .jc-tracker-nav {
 display:flex!important; align-items:center; gap:8px; padding:0 0 16px; margin-bottom:32px;
 border:0!important; border-bottom:1px solid var(--cm-color-outline)!important; border-radius:0; background:transparent!important;
 overflow-x:auto; max-width:100%;
}
.jc-metro .jc-workspace-nav :is(a,summary),.jc-metro .jc-tracker-nav a { flex:none; white-space:nowrap; padding:10px 14px; min-height:48px; font-size:15px; border:0; border-radius:12px; color:var(--cm-color-text-primary); text-decoration:none; }
.jc-metro .jc-workspace-nav a.active,.jc-metro .jc-tracker-nav a.active { background:var(--cm-color-accent); color:var(--cm-color-on-accent); }
.jc-metro .jc-workspace-nav:has(details) { overflow:visible; flex-wrap:wrap; }
/* Open screen headings follow the reference's screen-heading/resource-hero grammar. */
:root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) {
 display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 0 28px!important;
 margin:0 0 28px; border:0; border-radius:0; background:transparent; color:var(--cm-color-text-primary); text-align:left;
}
:root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) :is(h1,p,.jc-eyebrow,.header-stat-value,.header-stat-label) { color:var(--cm-color-text-primary)!important; }
:root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) h1 { max-width:17ch; margin:0 0 14px; font-size:clamp(40px,5vw,64px); font-weight:570; line-height:.99; letter-spacing:-.065em; }
:root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) p:not(.jc-eyebrow) { max-width:590px; margin:0; font-size:16px; }
.jc-metro .jc-eyebrow { display:block; font-size:11px; font-weight:720; letter-spacing:.13em; margin:0 0 16px; color:var(--cm-color-accent-text)!important; }
.jc-metro .jc-eyebrow::before { content:""; display:inline-block; width:7px; height:7px; margin:0 10px 1px 0; border-radius:50%; background:var(--cm-color-accent-text); }
:root[data-theme] .jc-metro .page-header .jc-eyebrow { color:var(--cm-color-accent-text)!important; }
:root[data-theme] .jc-metro .page-header :is(.jc-account-primary,.btn-primary,.tgn-btn-primary) { color:var(--cm-color-on-accent)!important; background:var(--cm-color-accent); }
:root[data-theme] .jc-metro .page-header :is(.btn-secondary,.tgn-btn-secondary,.back-btn) { color:var(--cm-color-accent-text)!important; background:var(--jc-panel); border:1px solid var(--cm-color-outline); }
.jc-metro :is(.header-actions,.jc-world-actions) { gap:10px; flex-wrap:wrap; }
.jc-metro :is(.jc-account-primary,.btn-primary,.tgn-btn-primary,.search-btn,.jc-button,.save-btn) { min-height:48px; font:600 14px/1.4 var(--cm-font-family); border-radius:14px; text-decoration:none; }
.jc-metro :is(a,button) { -webkit-tap-highlight-color:transparent; }
.jc-metro a[href] { text-decoration:none; }
.jc-metro a[href]:hover { text-decoration:none; }
.jc-metro :where(a[href]:not([class]):not([style])) { border-color:var(--cm-color-outline); border-radius:12px; background:var(--jc-panel); font-weight:600; font-size:14px; }
.jc-metro :is(h2,h3)>a[href]:not([class]) { display:inline; padding:0; background:transparent; border:0; font:inherit; color:var(--cm-color-accent-text); }
.jc-metro :is(button,a):focus-visible { outline:3px solid var(--cm-color-accent-text); outline-offset:4px; }
/* The discovery hero and its four-column, mixed-size live destinations. */
.jc-metro .main-content:has(> .jc-home-hero) { padding-block-start:12px; }
.jc-metro .jc-home-hero { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; padding:0 0 44px; align-items:start; }
.jc-metro .jc-home-copy { min-width:0; }
.jc-metro .jc-home-copy > .jc-eyebrow {
    border-block-start:2px solid var(--cm-color-accent-text);
    padding-block-start:9px;
}
.jc-metro .jc-home-copy > .jc-eyebrow::before {
    box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-color-accent) 20%,transparent);
}
.jc-metro .jc-home-copy > .jc-home-search {
    margin-block:0 12px;
    padding:10px;
    border:1px solid var(--cm-color-outline-strong);
    border-radius:var(--cm-radius-tile);
    background:var(--cm-color-tile);
    color:var(--cm-color-on-tile);
}
.jc-metro .jc-home-copy > .jc-home-search button {
    background:var(--cm-color-surface);
    color:var(--cm-color-accent-text);
}
.jc-metro .jc-home-copy > .jc-home-search button:focus-visible {
    outline-color:var(--cm-color-on-tile);
}
:root[data-theme="light"] .jc-metro .jc-home-copy > .jc-home-search {
    background:color-mix(in srgb,var(--cm-color-surface) 84%,var(--cm-color-accent));
    border-color:var(--cm-color-outline-strong);
    color:var(--cm-color-text-primary);
    box-shadow:0 8px 20px rgb(7 21 34 / .16), inset 0 1px 0 rgb(255 255 255 / .65);
}
@supports (backdrop-filter:blur(8px)) {
    @media (prefers-reduced-transparency:no-preference) {
        :root[data-theme="light"] .jc-metro .jc-home-copy > .jc-home-search {
            background:color-mix(in srgb,var(--cm-color-surface) 75%,var(--cm-color-accent) 16%);
            backdrop-filter:blur(8px) saturate(1.15);
        }
    }
}
:root[data-theme="light"] .jc-metro .jc-home-copy > .jc-home-search button {
    background:var(--cm-color-tile);
    color:var(--cm-color-on-tile);
}
:root[data-theme="light"] .jc-metro .jc-home-copy > .jc-home-search button:focus-visible {
    outline-color:var(--cm-color-accent-text);
}
.jc-metro .jc-home-copy .task-track { gap:6px; }
.jc-metro .jc-home-copy .task-reel {
    flex-basis:calc((100% - 12px) / 3);
    min-width:88px;
    min-height:88px;
    background:#153f60;
    color:#fff;
}
.jc-metro .jc-home-copy .task-reel:nth-child(2) { background:#503489; }
.jc-metro .jc-home-copy .task-reel:nth-child(3) { background:#00584e; }
.jc-metro .jc-home-copy .task-reel .task-location {
    position:static;
    width:18px;
    height:18px;
    margin-bottom:auto;
    background:transparent;
}
.jc-metro .jc-home-copy .task-reel .task-price { color:#fff; }

@media (max-width:480px) {
    .jc-metro .jc-home-copy > .jc-eyebrow { margin-bottom:9px; }
    .jc-metro .jc-home-copy > h1 { margin-bottom:10px; }
    .jc-metro .jc-home-copy > .jc-home-search { gap:8px; }
    .jc-metro .jc-home-copy > .jc-home-search input { padding-inline:9px; }
    .jc-metro .jc-home-copy > .jc-home-search button { padding-inline:10px; }
}
.jc-metro .jc-home-hero h1 { font-size:clamp(44px,calc(6.5vw - 10px),70px); font-weight:570; line-height:.98; letter-spacing:-.075em; margin:0 0 22px; }
.jc-metro .jc-home-search { margin-top:26px; gap:12px; }
.jc-metro .jc-home-search label { font-size:14px; font-weight:600; }
.jc-metro .jc-home-search input { margin-top:4px; background:var(--cm-color-surface); border-color:var(--cm-color-outline-strong); }
.jc-metro .jc-search-hint { font-size:13px!important; line-height:1.5; }
.jc-start-mosaic { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:128px; gap:10px; min-width:0; }
.jc-start-tile { grid-column:span 2; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding:20px; border-radius:var(--cm-radius-tile); color:var(--cm-color-on-tile)!important; background:var(--cm-color-tile); text-decoration:none; transition:transform 150ms ease; }
.jc-start-tile:hover { transform:translateY(-2px); }
.jc-start-tile--lead { grid-row:span 2; }
.jc-start-tile--wide { flex-direction:row; align-items:center; }
.jc-start-tile--compact { grid-column:span 1; padding:14px; }
.jc-start-tile strong { display:block; font-size:23px; font-weight:620; line-height:1.04; letter-spacing:-.04em; }
.jc-start-tile--lead strong { font-size:38px; font-weight:560; }
.jc-start-tile small { display:block; margin-top:10px; color:inherit; font-size:13px; line-height:1.4; }
.jc-start-tile--compact strong { font-size:15px; }
.jc-start-tile .jc-icon { width:26px; height:26px; }
.jc-tile-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; }
.jc-start-tile--soft { background:var(--cm-color-accent-soft); color:var(--cm-color-text-primary)!important; }
.jc-start-tile--soft .jc-icon { color:var(--cm-color-accent-text); }
.jc-metro .jc-home-section { padding-block:32px; }
.jc-metro .jc-section-heading h2 { font-size:32px; font-weight:570; letter-spacing:-.055em; }
.jc-metro .jc-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.jc-metro .jc-category-grid a { border:1px solid var(--cm-color-outline-strong); background:#00548f; color:#fff; font-size:15px; min-height:78px; }
.jc-metro .jc-category-grid a:nth-child(4n+2) { background:#5630a8; }
.jc-metro .jc-category-grid a:nth-child(4n+3) { background:#006c5c; }
.jc-metro .jc-category-grid a:nth-child(4n) { background:#a83d19; }
/* A small number of coloured metrics carry the first glance. Content lists rest. */
.jc-metro :is(.stats-section,.stats-grid,.jc-tracker-metrics) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:32px; }
.jc-metro :is(.stat-card,.jc-tracker-metrics>div) { min-height:128px; padding:20px; border:0; border-radius:var(--cm-radius-tile); background:var(--cm-color-accent-soft); color:var(--cm-color-text-primary); text-decoration:none; align-items:flex-start; }
.jc-metro :is(.stats-section,.stats-grid)>.stat-card:first-child { grid-column:span 2; background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-metro :is(.stats-section,.stats-grid)>.stat-card:first-child :is(.stat-value,.stat-label,.stat-icon) { color:inherit; }
.jc-metro .stats-section>.stat-card:last-child { background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-metro .stats-section>.stat-card:last-child :is(.stat-value,.stat-label,.stat-icon) { color:inherit; }
.jc-metro .stat-info { display:flex; flex-direction:column; gap:8px; }
.jc-metro .stat-value { font-size:44px; line-height:1; font-weight:500; letter-spacing:-.055em; }
.jc-metro .stat-label { font-size:14px; color:inherit; }
.jc-metro .stat-icon { color:var(--cm-color-accent-text); background:none; }
.jc-metro .jc-tracker-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.jc-metro .jc-tracker-metrics>div:first-child { background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-metro .dashboard-grid { gap:28px; }
:root[data-theme] .jc-metro :is(.dashboard-card,.jobs-section,.analytics-section,.activity-section,.tips-section) { padding:24px; background:var(--jc-panel); border:0; border-radius:var(--cm-radius-card); box-shadow:none; }
:root[data-theme] .jc-metro :is(.card-header,.section-header) { padding:0 0 16px; margin-bottom:8px; border-radius:0; background:transparent; border-bottom:1px solid var(--cm-color-outline); }
.jc-metro :is(.card-header,.section-header) h2 { font-size:25px; font-weight:570; letter-spacing:-.045em; }
.jc-metro .jc-workspace .quick-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
.jc-metro .jc-workspace :is(.action-btn,.action-card) { border:0; border-radius:var(--cm-radius-tile); background:var(--cm-color-accent-soft); color:var(--cm-color-text-primary); }
.jc-metro .jc-workspace :is(.action-btn,.action-card):first-child { background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-metro .jc-workspace :is(.action-btn,.action-card):first-child :is(.action-icon,.action-desc) { color:inherit; }
.jc-metro .recruiter-dashboard .quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.jc-metro .quick-actions-section>h2 { font-size:25px; font-weight:570; margin-top:0; }
/* Opaque reading surfaces. Section rhythm, rather than coloured borders, groups forms. */
:root[data-theme] .jc-metro :is(.jc-tracker-card,.jc-profile-panel,.form-section,.content-section,.settings-section,.candidate-card,.assessment-card,.credit-package,.plan-card,.info-card,.jc-featured-card,.jc-world-card,.preview-card) { background:var(--jc-panel); border:1px solid var(--cm-color-outline); border-radius:var(--cm-radius-card); box-shadow:none; }
:root[data-theme] .jc-metro :is(.jc-tracker-card,.jc-profile-panel,.form-section,.content-section)>h2:first-child { margin:0 0 18px; padding:0; border-radius:0; background:none; color:var(--cm-color-text-primary); font-size:25px; font-weight:570; letter-spacing:-.045em; }
.jc-metro :is(.jc-tracker-card,.jc-profile-panel,.form-section,.content-section)>h2:first-child::before { content:""; display:block; width:32px; height:4px; margin-bottom:16px; border-radius:2px; background:var(--cm-color-accent); }
.jc-metro :is(.jc-tracker-card,.jc-profile-panel) { padding:24px; }
.jc-metro .jc-employer-company-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.jc-metro .jc-employer-company-grid>aside { background:var(--cm-color-accent-soft); border-color:transparent; }
.jc-metro .jc-employer-company-grid dl { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.jc-metro .jc-employer-company-grid dt { color:var(--cm-color-accent-text); }
.jc-metro .jc-employer-company-grid dd { margin:0; }
.jc-metro .jc-tracker-list .jc-tracker-card { border-width:0 0 1px; border-radius:0; background:transparent; padding:24px 0; }
.jc-metro .jc-tracker-list { gap:0; }
.jc-metro .jc-employer-list .jc-tracker-card { border-left:4px solid var(--cm-color-accent); }
.jc-metro .jc-company-initial { background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-metro :is(.jc-tracker-title h2,.jc-world-card h2) { font-size:25px; font-weight:570; letter-spacing:-.045em; }
:root[data-theme] .jc-metro :is(.empty-state,.error-state,.jc-tracker-empty,.locked-profile,.jc-home-empty) { background:var(--cm-color-accent-soft); color:var(--cm-color-text-primary); border:0; border-radius:var(--cm-radius-card); padding:32px; }
.jc-metro .jc-tracker-empty h1 { font-size:clamp(36px,5vw,60px); font-weight:570; line-height:1.04; letter-spacing:-.06em; }
.jc-metro .jc-tracker-empty p { color:var(--cm-color-text-primary); }
.jc-metro .jc-tracker-toolbar { background:var(--cm-color-accent-soft); border-radius:var(--cm-radius-tile); padding:18px 20px; margin-block:20px; }
.jc-metro :is(input,select,textarea) { border-radius:12px; }
.jc-metro :is(.form-container,.section-content) { border:0; background:var(--jc-panel); }
.jc-metro .jc-world-search .search-header { display:block; max-width:900px; }
.jc-metro .jc-world-search .search-header h1 { font-size:clamp(40px,5vw,64px); max-width:17ch; margin-bottom:24px; }
.jc-metro .jc-search-targets { display:flex; gap:8px; margin:0 0 16px; }
.jc-metro .jc-search-targets button { background:var(--jc-panel); border:1px solid var(--cm-color-outline); min-height:44px; border-radius:12px; color:var(--cm-color-text-primary); padding:8px 14px; }
.jc-metro .jc-search-targets button[aria-pressed=true] { background:var(--cm-color-accent); color:var(--cm-color-on-accent); border-color:transparent; }
.jc-metro .jc-radius-options button { background:var(--jc-panel); border-color:var(--cm-color-outline); }
.jc-metro .jc-radius-options button[aria-pressed=true] { background:var(--cm-color-accent); color:var(--cm-color-on-accent); }
.jc-metro .jc-world-results { border-top:1px solid var(--cm-color-outline); padding-top:24px; }
.jc-metro .jc-world-results>.empty-state { text-align:left; }
.jc-metro .jc-world-card { padding:24px; margin-bottom:12px; }
/* Access is a composed page, not a form trapped inside a bordered card. */
.jc-access { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:72px; align-items:start; padding:28px 0; max-width:1100px; margin:auto; }
.jc-metro .jc-access-intro h1 { font-size:clamp(48px,5.8vw,76px); font-weight:570; line-height:.99; letter-spacing:-.07em; margin:0 0 24px; }
.jc-access-intro h1 span { color:var(--cm-color-accent-text); }
.jc-access-intro>p { max-width:440px; font-size:17px; }
.jc-access-steps { list-style:none; padding:0; margin:32px 0; }
.jc-access-steps li { display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--cm-color-outline); }
.jc-access-steps li>span { color:var(--cm-color-accent-text); font-size:13px; font-weight:650; }
.jc-access-steps strong { font-size:17px; }
.jc-access-steps p { margin:5px 0 0; font-size:14px; }
.jc-metro .jc-access-panel,.jc-metro .jc-access .jc-auth-card,.jc-metro .jc-access .jc-device-gate { min-width:0; width:100%; margin:0; padding:28px; background:var(--cm-color-accent-soft); border:0; border-radius:22px; }
.jc-metro .jc-access-panel>h2 { font-size:26px; font-weight:570; letter-spacing:-.04em; margin:0 0 24px; }
.jc-metro .jc-access .jc-auth-qr { margin:0 auto 24px; padding:20px; border-radius:18px; }
.jc-access .jc-auth-actions { display:flex; flex-direction:column; margin:24px 0 16px; gap:10px; }
.jc-access .jc-auth-actions>* { width:100%; flex:auto; }
.jc-access .jc-auth-actions .jc-account-primary { justify-content:space-between; }
.jc-metro .jc-access-note { display:flex; gap:10px; align-items:flex-start; font-size:13px!important; line-height:1.6; margin-top:24px; color:var(--cm-color-text-primary); }
.jc-access-note .jc-icon { flex:none; color:var(--cm-color-accent-text); }
.jc-metro .jc-access-panel label { font-size:14px; font-weight:600; }
.jc-metro .jc-access-panel input:not([type=checkbox]),.jc-metro .jc-access-panel select { background:var(--cm-color-surface); }
.jc-metro .jc-access-panel .jc-auth-consent { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:400; }
.jc-access-panel .jc-comparison { text-align:center; font-size:14px; }
.jc-comparison strong { display:block; margin-top:8px; font-size:28px; letter-spacing:.14em; color:var(--cm-color-accent-text); }
.jc-pair-ready { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--cm-color-tile); color:var(--cm-color-on-tile); border-radius:14px; padding:24px; }
.jc-pair-ready .jc-icon { width:56px; height:56px; margin-bottom:20px; }
.jc-metro .jc-pair-ready h2 { color:inherit; font-size:30px; margin:0; }
.jc-pair-ready p { font-size:14px; }
.jc-wallet-tile { min-height:280px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:28px; border-radius:14px; background:var(--cm-color-tile); color:var(--cm-color-on-tile); }
.jc-wallet-tile .jc-icon { width:40px; height:40px; }
.jc-wallet-tile strong { font-size:38px; line-height:1.02; letter-spacing:-.05em; font-weight:570; }
.jc-wallet-tile>span { font-size:14px; }
.jc-metro .jc-settings-links a { background:var(--cm-color-accent-soft); border:0; }
.jc-metro .jc-setting-toggle strong { color:var(--cm-color-text-primary); }
.jc-metro .jc-welcome { max-width:none!important; }
.jc-metro .jc-welcome>.jc-start-mosaic { grid-auto-rows:140px; }
/* Explicit foregrounds also cover legacy components and fixed inline colours. */
:root[data-theme=dark] .jc-metro :is(p,small,label,time,dt,dd,.stat-label,.description,.app-date,.activity-time,.expand-arrow) { opacity:1; }
:root[data-theme=dark] .jc-metro .aether-status-bar .expand-arrow { color:var(--cm-color-text-primary)!important; }
@media(min-width:1000px) {
 .jc-metro .dashboard-page .stats-section { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .jc-metro .recruiter-dashboard .stats-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media(max-width:900px) {
 .jc-metro .jc-home-hero { gap:28px; }
 .jc-access { gap:32px; }
 .jc-metro .jc-wordmark { font-size:22px; }
}
@media(max-width:767px) {
 .jc-metro .main-content { padding:26px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
 .jc-metro .top-bar__content { min-height:64px; padding:8px 16px; gap:10px; }
 .jc-metro .jc-wordmark { font-size:23px; }
 .jc-metro .jc-appearance select { max-width:76px; }
 .jc-metro .top-bar .btn-text { padding:8px 10px; font-size:13px; }
 .jc-metro .jc-workspace-nav { margin-bottom:26px; padding-bottom:12px; }
 .jc-metro .jc-workspace-nav :is(a,summary) { font-size:14px; padding:10px 12px; }
 :root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) { align-items:flex-start; flex-direction:column; gap:18px; padding-bottom:8px!important; margin-bottom:26px; }
 :root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) h1,.jc-metro .jc-world-search .search-header h1 { font-size:clamp(38px,10vw,48px); max-width:18ch; margin-bottom:12px; }
 :root[data-theme] .jc-metro :is(.page-header,.search-header,.matches-header) p:not(.jc-eyebrow) { font-size:15px; }
 .jc-metro .jc-eyebrow { font-size:10px; margin-bottom:14px; }
 .jc-metro .jc-home-hero { display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:0 0 28px; }
 .jc-metro .jc-home-hero h1 { font-size:clamp(36px,calc(12.5vw - 10px),52px); margin-bottom:18px; }
 .jc-metro .jc-home-search { margin-top:18px; }
 .jc-start-mosaic { grid-auto-rows:108px; gap:8px; }
 .jc-start-tile { padding:14px; gap:12px; }
 .jc-start-tile strong { font-size:21px; }
 .jc-start-tile--lead strong { font-size:32px; }
 .jc-start-tile small { font-size:12px; margin-top:8px; }
 .jc-start-tile--compact { padding:12px; }
 .jc-start-tile--compact strong { font-size:13px; }
 .jc-start-tile .jc-icon { width:22px; height:22px; }
 .jc-tile-top>span { font-size:10px; }
 .jc-metro .jc-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .jc-metro :is(.stats-section,.stats-grid,.jc-tracker-metrics) { gap:8px; margin-bottom:24px; }
 .jc-metro :is(.stats-section,.stats-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .jc-metro :is(.stats-section,.stats-grid)>.stat-card:first-child { grid-column:span 2; flex-direction:row; min-height:112px; align-items:center; }
 .jc-metro .stat-card:first-child .stat-info { flex:1; flex-direction:row; justify-content:space-between; align-items:center; gap:16px; }
 .jc-metro .stat-value { font-size:38px; }
 .jc-metro .stat-card { min-height:112px; padding:18px; }
 .jc-metro .stat-card.credits { grid-column:span 1; flex-direction:column; align-items:flex-start; }
 .jc-metro .stat-card.credits .stat-info { flex-direction:column; }
 .jc-metro .jc-tracker-metrics>div { padding:16px 12px; min-height:112px; }
 .jc-metro .jc-tracker-metrics strong { font-size:32px; }
 .jc-metro .jc-workspace .quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
 :root[data-theme] .jc-metro :is(.dashboard-card,.jc-profile-panel,.jc-tracker-card,.form-section,.content-section) { padding:20px; }
 .jc-metro .jc-tracker-list .jc-tracker-card { padding:24px 0; }
 .jc-metro .jc-employer-company-grid { grid-template-columns:1fr; }
 .jc-access { grid-template-columns:1fr; gap:24px; padding:0; }
 .jc-metro .jc-access-intro h1 { font-size:clamp(43px,11.8vw,58px); margin-bottom:18px; }
 .jc-access-intro>p { font-size:15px; margin-bottom:0; }
 .jc-access-steps { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 0; }
 .jc-access-steps li { gap:8px; padding:12px 0; flex-direction:column; }
 .jc-access-steps strong { font-size:15px; }
 .jc-access-steps p { font-size:13px; }
 .jc-metro .jc-access-panel,.jc-metro .jc-access .jc-auth-card,.jc-metro .jc-access .jc-device-gate { padding:20px; border-radius:18px; }
 .jc-metro .jc-access .jc-auth-qr { padding:16px; margin-bottom:18px; }
 .jc-metro .jc-access .jc-auth-qr img { width:208px; }
 .jc-metro .jc-access-note { font-size:12px!important; margin-top:18px; }
 .jc-access .jc-auth-actions { margin-top:20px; }
 .jc-wallet-tile { min-height:220px; padding:22px; }
 .jc-wallet-tile strong { font-size:32px; }
 .jc-pair-ready { min-height:220px; }
 .jc-metro .jc-welcome>.jc-start-mosaic { grid-auto-rows:104px; }
}
@media(max-width:360px) {
 .jc-metro .jc-wordmark { font-size:21px; }
 .jc-metro .jc-appearance-button { width:36px; }
 .jc-metro .jc-appearance select { max-width:66px; }
 .jc-metro .top-bar__actions { gap:4px; }
 .jc-start-tile--lead strong { font-size:28px; }
 .jc-start-tile strong { font-size:19px; }
 .jc-start-tile--compact strong { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .jc-start-tile { transition:none; }.jc-start-tile:hover { transform:none; } }
@media(forced-colors:active) { .jc-start-tile,.jc-wallet-tile,.jc-pair-ready { border:1px solid ButtonText; } }
.jc-metro .aether-status-bar .expand-arrow { color:var(--cm-color-text-primary)!important; }
.jc-metro .jc-workspace :is(.action-btn,.action-card):first-child .action-title { color:inherit; }
.jc-metro :is(.btn-primary,.tgn-btn-primary,.jc-account-primary,.search-btn):disabled { color:var(--cm-color-on-accent)!important; background:var(--cm-color-accent); opacity:1; border:1px dashed var(--cm-color-on-accent); }

/* Search is a compact vertical task flow at every width, never a squeezed flex row. */
.jc-metro .jc-world-search .search-header { display:block!important; }
.jc-metro .jc-world-search .search-header h1 { max-width:22ch; }
.jc-metro .candidate-profile-page .locked-profile .profile-header { background:none; border:0; }
.jc-metro .candidate-profile-page .locked-profile h1 { font-size:clamp(36px,5vw,60px); letter-spacing:-.06em; font-weight:570; }

/* Elevated editors share the same section rhythm and opaque reading material. */
.jc-metro .jc-workspace-modal :is(.modal-content,.modal) { background:var(--jc-panel); }
.jc-metro .jc-workspace-modal h2 { font-weight:570; letter-spacing:-.04em; }
.jc-metro .jc-workspace-modal h2::before { content:""; display:block; width:32px; height:4px; margin-bottom:14px; border-radius:2px; background:var(--cm-color-accent); }
/* Opaque editor backdrops keep inactive copy from becoming grey against black. */ .jc-metro :is(.jc-workspace-modal,.modal-overlay) { background:var(--jc-canvas); }
.jc-metro :is(.btn-secondary,.tgn-btn-secondary,.btn-outline,.back-btn) { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:11px 18px; color:var(--cm-color-text-primary); background:var(--cm-color-surface); border:1px solid var(--cm-color-outline-strong); border-radius:14px; font:600 14px/1.4 var(--cm-font-family); text-decoration:none; cursor:pointer; }

/* Circle Metro home and navigation */
.jc-metro .top-bar__logo .jc-wordmark { font-size:clamp(39px,calc(3.4vw + 10px),50px); line-height:1.05; }
.jc-metro .bottom-nav {
    inset-inline:8px;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    margin:0;
    padding:4px;
    gap:2px;
    background:var(--cm-color-surface)!important;
    border:1px solid var(--cm-color-outline);
    border-radius:var(--cm-radius-card);
}
.jc-metro .bottom-nav__item {
    min-width:0;
    border-radius:var(--cm-radius-control);
}
.jc-metro .bottom-nav__item[aria-current=page] {
    color:var(--cm-color-on-tile);
    background:var(--cm-color-tile);
}
.jc-metro .bottom-nav__item.jc-bottom-butler { justify-content:center; background:transparent; }
.jc-butler-orb {
    position:relative;
    isolation:isolate;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#08121c;
    color:#55baff;
    font-size:24px;
    font-weight:800;
    line-height:1;
}
.jc-butler-orb::before,
.jc-butler-orb::after {
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:inherit;
    pointer-events:none;
}
.jc-butler-orb::before {
    inset:2px;
    background:repeating-conic-gradient(#0794d5 0deg 3deg, transparent 3deg 12deg);
    mask-image:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.jc-butler-orb::after {
    inset:8px;
    border:1px solid #76cdff;
    background:radial-gradient(circle at 50% 30%, #14283a, #0a1723 72%);
    box-shadow:0 0 6px #1699e855;
}
.jc-bottom-butler:is(:hover,[aria-current=page]) .jc-butler-orb::after {
    border-color:#b4e4ff;
    box-shadow:0 0 8px #1699e8a6;
}
:root[data-theme="light"] .jc-butler-orb {
    background:#e4f4ff;
    color:#00548f;
}
:root[data-theme="light"] .jc-butler-orb::before {
    background:repeating-conic-gradient(#0078b8 0deg 3deg, transparent 3deg 12deg);
}
:root[data-theme="light"] .jc-butler-orb::after {
    border-color:#1475aa;
    background:radial-gradient(circle at 50% 30%, #fff, #d6edfc 72%);
    box-shadow:0 0 5px #0078b833;
}
:root[data-theme="light"] .jc-bottom-butler:is(:hover,[aria-current=page]) .jc-butler-orb::after {
    border-color:#00548f;
    box-shadow:0 0 8px #0078b866;
}
.jc-metro .jc-start-mosaic .jc-tile-candidate { background:#5630a8; color:#fff!important; }
.jc-metro .jc-start-mosaic .jc-tile-recruiter { background:#006c5c; color:#fff!important; }
.jc-metro .jc-start-mosaic .jc-tile-post { background:#a83d19; color:#fff!important; }
.jc-search-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
@media(max-width:767px) {
    .jc-metro .top-bar__logo { gap:6px; }
    .jc-metro .top-bar__logo .logo-icon { display:grid; width:28px; height:28px; }
    .jc-metro .top-bar__logo .logo-icon svg { width:24px; height:24px; }
    .jc-metro .top-bar__logo .jc-wordmark { font-size:clamp(26px,calc(8vw + 3px),42px); }
    .jc-metro .top-bar__actions .btn-text { display:none; }
    .jc-metro .jc-start-mosaic { grid-auto-rows:minmax(122px,auto); }
}
.jc-metro .jc-home-search {
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
}
.jc-metro .jc-home-search .jc-button { grid-column:auto; white-space:nowrap; }
@media(max-width:767px) {
    .jc-metro .jc-home-search .jc-button { min-height:48px; }
    .jc-metro .jc-home-search .jc-button .jc-icon { display:none; }
}

/* Home uses a square footprint, with the fourth tile spanning the base. */
.jc-metro .jc-home-stage > .jc-start-mosaic {
    aspect-ratio: 1;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.jc-home-stage > .jc-start-mosaic > .jc-tile-post {
    grid-column: 1 / -1;
    justify-content: flex-start;
}
@media (max-width: 767px) {
    .jc-home-stage > .jc-start-mosaic > .jc-start-tile {
        gap: 4px;
        padding: 10px;
    }
    .jc-home-stage > .jc-start-mosaic .jc-start-tile:not(.jc-start-tile--lead) strong {
        font-size: 18px;
    }
    .jc-home-stage > .jc-start-mosaic .jc-start-tile small {
        margin-top: 4px;
        line-height: 1.2;
    }
}

.jc-metro .jc-home-stage > .jc-start-mosaic > .jc-start-tile {
    border: 1px solid var(--cm-color-outline-strong);
}

.jc-metro .jc-home-stage > .jc-start-mosaic > .jc-start-tile:not(.jc-start-tile--lead) {
    background:var(--jc-home-tile-fill);
    color:#fff!important;
}
.jc-home-stage .jc-tile-candidate { --jc-home-tile-fill:#503489; }
.jc-home-stage .jc-tile-recruiter { --jc-home-tile-fill:#00584e; }
.jc-home-stage .jc-tile-post { --jc-home-tile-fill:#843817; }
:root[data-theme="dark"] .jc-home-stage .jc-tile-candidate { --jc-home-tile-fill:#39265f; }
:root[data-theme="dark"] .jc-home-stage .jc-tile-recruiter { --jc-home-tile-fill:#073e37; }
:root[data-theme="dark"] .jc-home-stage .jc-tile-post { --jc-home-tile-fill:#60301e; }


.jc-metro .jc-home-style > .page-header h1 span {
    color: var(--cm-color-accent-text);
}
:root[data-theme] .jc-metro .jc-home-style .jc-personal-panel {
    border: 2px solid var(--cm-color-text-primary);
    border-inline-start: 6px solid var(--cm-color-accent-text);
    margin-block-end: 14px;
}
.jc-metro .jc-home-style .jc-personal-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block-start: 12px;
}
.jc-metro .jc-home-style .jc-personal-tiles a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    padding: 12px;
    border: 2px solid #152536;
    box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff;
    border-radius: var(--cm-radius-tile);
    background: #00558e;
    color: #fff !important;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.jc-metro .jc-home-style .jc-personal-tiles a:nth-child(2) { background: #512b9a; }
.jc-metro .jc-home-style .jc-personal-tiles a:nth-child(3) { background: #00614e; }
.jc-metro .jc-home-style .jc-personal-tiles a:nth-child(4) { background: #a83d19; }
.jc-metro .jc-home-style .jc-personal-tiles a .jc-icon { width: 24px; height: 24px; }

.jc-metro .jc-home-style > .page-header {
    border-block-start: 4px solid var(--cm-color-accent-text);
    border-radius: var(--cm-radius-tile);
    padding-block-start: 12px;
}
:root[data-theme] .jc-metro .jc-home-style .jc-personal-panel {
    --jc-panel-accent: #00558e;
    border: 2px solid #152536;
    box-shadow: 0 0 0 1px #fff;
    overflow: clip;
}
:root[data-theme] .jc-metro .jc-home-style .jc-personal-panel > h2:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -6px -6px 16px;
    padding: 14px;
    border-radius: var(--cm-radius-control);
    background: var(--jc-panel-accent);
    color: #fff !important;
}
.jc-metro .jc-home-style .jc-personal-panel > h2:first-child::before { content: none; }
.jc-metro .jc-home-style .jc-personal-panel > h2 .jc-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
.jc-metro .jc-me-hub > .jc-personal-panel:nth-of-type(2),
.jc-metro .jc-settings-hub > .jc-personal-panel { --jc-panel-accent: #512b9a; }
.jc-metro .jc-me-hub > .jc-personal-panel:last-child,
.jc-metro .jc-settings-hub > .jc-personal-panel:last-child { --jc-panel-accent: #00614e; }
.jc-metro .jc-home-style .jc-personal-tiles a:nth-child(5) { background: #2547a1; }
.jc-metro .jc-home-style .jc-personal-tiles a:nth-child(6) { background: #713665; }
.jc-metro .jc-me-hub .jc-personal-tiles + button { margin-block-start: 14px; }
.jc-metro .jc-settings-hub .jc-settings-grid { display: block; }

.jc-metro .jc-settings-hub > .jc-location-panel { --jc-panel-accent: #00614e; }
.jc-metro .jc-settings-hub > .jc-discovery-panel { --jc-panel-accent: #512b9a; }
.jc-metro .jc-settings-hub > .jc-alert-panel { --jc-panel-accent: #2547a1; }

.jc-metro .jc-account-mosaic { display: grid; gap: 10px; }
.jc-metro .jc-account-mosaic > .jc-personal-panel:first-child { --jc-panel-accent: #512b9a; }
.jc-metro .jc-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-block: 8px;
}
.jc-metro .jc-setting-row > :is(label, select) { margin: 0; min-width: 0; }
.jc-metro .jc-account-mosaic .jc-personal-tiles > a:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .jc-metro .jc-account-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

/* Home follows the guide's bordered screen cards and compact section actions. */
.jc-metro .jc-home-section .jc-section-heading { flex-wrap:wrap; gap:10px 16px; }
.jc-metro .jc-home-section .jc-home-section-action {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:8px 12px;
    border:1px solid currentColor;
    border-radius:var(--cm-radius-control);
    color:var(--cm-color-accent-text);
    font-weight:650;
    text-decoration:none;
}
.jc-metro .jc-home-section .jc-home-section-action .jc-icon { width:16px; height:16px; }
:root[data-theme] .jc-metro [aria-labelledby="featured-title"] :is(.jc-home-empty,.jc-featured-card) {
    background:#00375f;
    color:#fff;
    border:1px solid var(--cm-color-outline-strong);
}
.jc-metro [aria-labelledby="featured-title"] :is(.jc-home-empty,.jc-featured-card) :is(h3,p,span,a) { color:#fff; }
.jc-metro [aria-labelledby="featured-title"] :is(.jc-home-empty,.jc-featured-card) a:focus-visible { outline-color:#fff; }

/* The desktop guide pairs an open hero with a framed tile stage. */
.jc-home-stage { min-width:0; }
@media (min-width:768px) {
    .jc-metro .jc-home-hero { align-items:center; }
    .jc-home-stage {
        padding:clamp(12px,2vw,24px);
        border:1px solid var(--cm-color-outline-strong);
        border-radius:var(--cm-radius-card);
        background:var(--cm-color-surface);
    }
}

/* The Home footer shares the same shell and wordmark as the header. */
:root[data-theme] .jc-metro .jc-footer:has(.jc-home-footer-brand) {
    box-sizing:border-box;
    width:100%;
    max-width:1240px;
    margin-inline:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:12px 20px;
    padding:16px clamp(16px,3vw,28px) 16px;
    border-top:1px solid var(--cm-color-outline);
    border-radius:0;
    background:var(--jc-canvas);
    color:var(--cm-color-text-primary);
}
:root[data-theme] .jc-metro .jc-footer:has(.jc-home-footer-brand) > span {
    color:var(--cm-color-text-primary);
}
:root[data-theme] .jc-metro .jc-footer a.jc-home-footer-brand {
    padding:0;
    border:0;
    background:transparent;
    color:var(--cm-color-text-primary);
}
:root[data-theme] .jc-metro .jc-footer:has(.jc-home-footer-brand) > a:focus-visible {
    outline-color:var(--cm-color-accent-text);
}

/* Device Lab quick controls: coloured controls on a glass surface with a solid fallback. */
:root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel {
    border:1px solid var(--cm-color-glass-stroke);
    background:var(--cm-color-surface-raised);
    box-shadow:0 8px 20px rgb(7 21 34 / .16);
}
:root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel > h2:first-child {
    margin:0 0 12px;
    padding:0;
    background:transparent;
    color:var(--cm-color-text-primary)!important;
}
.jc-metro .jc-settings-hub .jc-personal-panel > h2 .jc-icon {
    box-sizing:content-box;
    padding:6px;
    border-radius:var(--cm-radius-control);
    background:var(--jc-panel-accent);
    color:#fff;
}
.jc-metro .jc-settings-hub .jc-setting-row {
    margin:0;
    padding:3px 0;
    border-block-start:1px solid var(--cm-color-outline);
}
:root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel > .btn-secondary {
    border-color:transparent;
    background:var(--cm-color-tile);
    color:var(--cm-color-on-tile);
}
@supports (backdrop-filter:blur(8px)) {
    @media (prefers-reduced-transparency:no-preference) {
        :root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel {
            background:linear-gradient(145deg,var(--cm-color-surface-glass-tint),var(--cm-color-surface-glass-tint-edge));
            backdrop-filter:blur(var(--cm-glass-blur)) saturate(1.15);
        }
    }
}

:root[data-theme] .jc-metro .jc-home-copy .task-dialog {
    border:1px solid var(--cm-color-glass-stroke);
    background:var(--cm-color-surface-raised);
    color:var(--cm-color-text-primary);
    box-shadow:0 12px 28px rgb(7 21 34 / .28);
}
:root[data-theme] .jc-metro .jc-home-copy .task-dialog :is(h2,p) {
    color:var(--cm-color-text-primary)!important;
}
@supports (backdrop-filter:blur(8px)) {
    @media (prefers-reduced-transparency:no-preference) {
        :root[data-theme] .jc-metro .jc-home-copy .task-dialog {
            background:var(--cm-color-surface-glass-tint);
            backdrop-filter:blur(var(--cm-glass-blur)) saturate(1.15);
        }
    }
}

@media (max-width:480px) and (max-height:620px) {
    .jc-metro .main-content:has(> .jc-home-hero) { padding-block-start:6px; }
    .jc-metro .jc-home-copy > .jc-eyebrow { margin-bottom:6px; padding-block-start:5px; }
    .jc-metro .jc-home-copy > h1 { font-size:clamp(29px,8vw,36px); }
    .jc-metro .jc-home-copy > .jc-home-search { margin-bottom:4px; padding:6px 8px; }
    .jc-metro .jc-home-copy .task-reel { min-height:78px; padding:5px 7px; }
    .jc-metro .jc-home-copy .task-track { padding-block:0; }
}
:root[data-theme] .jc-metro .jc-settings-hub > .page-header {
    margin-bottom:12px;
}
:root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel {
    padding:12px;
    margin-bottom:10px;
}
:root[data-theme] .jc-metro .jc-settings-hub .jc-personal-panel > h2:first-child {
    margin-bottom:6px;
    font-size:19px;
}
.jc-metro .jc-settings-hub .jc-setting-row > select { min-height:44px; }
.jc-metro .jc-settings-hub .jc-personal-panel > p { margin-block:6px; }