/* Shell: a dark top bar with an "All tools" menu below 1100px, a fixed ink
   column on desktop. Tool pages keep one compact heading, then the controls. */
.site-header{position:relative;min-height:64px;padding:10px max(24px,calc((100vw - 1440px)/2));flex-wrap:nowrap;gap:16px}
.site-header .brand{min-height:44px}
.tools-toggle{display:flex;align-items:center;gap:14px;min-height:42px;padding:8px 14px;border:1px solid #ffffff2b;border-radius:6px;background:transparent;color:var(--on-ink);font-size:13px;font-weight:500;flex:none}
.tools-toggle>span{font-size:16px;line-height:1}
.tools-toggle[aria-expanded=true]{background:#ffffff14}
.site-header .tool-navigation{position:absolute;right:14px;top:calc(100% + 6px);z-index:50;display:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;width:300px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px);overflow:auto;padding:8px;background:var(--sidebar);border:1px solid #ffffff1f;border-radius:10px;box-shadow:0 24px 48px -16px #0000008c}
.tools-toggle[aria-expanded=true]+.tool-navigation{display:flex}
.tool-navigation a,.tool-navigation .nav-current{display:flex;align-items:center;min-height:42px;padding:9px 12px;border-radius:6px;line-height:1.35;color:var(--on-ink);text-decoration:none;font-size:13.5px}
.tool-navigation a:hover,.tool-navigation a:focus-visible{background:#ffffff12}
.tool-navigation .nav-current{background:var(--paper);color:var(--ink);font-weight:600}
.tool-navigation .nav-group:first-child{margin-top:4px}
.lookup-main,.promotion-main,.qual-main{padding-top:24px}
.page-heading{gap:12px 24px;flex-wrap:nowrap;margin:0 0 18px;align-items:center}
.page-heading>div:first-child{min-width:0}
.page-heading h1,.promotion-main .page-heading h1{font-size:32px;margin:0;line-height:1.15}
.heading-actions{flex:none;width:auto;gap:12px}
.heading-actions .button{min-height:42px;white-space:nowrap}
.source-warnings{display:grid;gap:8px;margin-bottom:16px}
.source-warnings[hidden]{display:none}
.source-warnings .stale{margin:0;padding:11px 14px;background:var(--alert);color:var(--alert-ink);border-left:3px solid var(--alert-line);border-radius:4px;font-size:13px}
.tool-info{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.tool-info>summary{width:fit-content;min-height:44px;align-content:center;color:var(--brand);font-weight:600;cursor:pointer}
.tool-info-body{display:grid;gap:14px;padding:14px 0 0;max-width:1100px;color:var(--muted);line-height:1.65}
.tool-info-body p,.tool-info-body .usage-note,.tool-info-body .coding-footer-note{margin:0}
.tool-info-body .freshness{margin:0;gap:6px 20px}
.tool-info-body .source-link{white-space:normal}
.coding-panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:14px 20px}
.coding-panel-head h2{font-size:20px}
.tool-shortcut{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
.coding-bookmark{min-height:0;margin:0 0 14px}
.coding-bookmark:empty{display:none}
.coding-questions{padding:18px 20px}
.coding-layout{gap:24px}
.qual-search{padding-top:20px}
.lookup-controls{padding-top:18px}
.mode-help{padding-top:12px}

/* Home */
.home-main{container:home / inline-size;padding-top:40px;padding-bottom:64px;max-width:1160px}
.home-hero{max-width:760px}
.home-main h1{font-size:clamp(38px,5vw,58px);margin:12px 0 16px}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.tools-grid .tool-card{margin:0;max-width:none}
@container home (min-width:940px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.home-hero>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.home-hero>:nth-child(2){animation-delay:.05s}.home-hero>:nth-child(3){animation-delay:.1s}.home-hero>:nth-child(4){animation-delay:.15s}
.tool-group{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.18s}
.tool-group:nth-of-type(2){animation-delay:.26s}.tool-group:nth-of-type(3){animation-delay:.34s}
@media(max-width:760px){.page-heading{align-items:flex-start;gap:12px}.page-heading h1,.promotion-main .page-heading h1,.qual-main .page-heading h1{font-size:28px}.tools-grid{grid-template-columns:1fr}.heading-actions{justify-content:flex-end}}
@media(max-width:560px){.site-header{padding:10px 14px;min-height:60px}.brand{font-size:16px;gap:8px}.brand-mark{width:30px;height:30px;font-size:12px}.tools-toggle{gap:12px;padding:8px 10px}.lookup-main,.promotion-main,.qual-main{padding-top:18px}.page-heading{flex-wrap:wrap;gap:10px;margin-bottom:16px}.page-heading>div:first-child{flex:1 1 210px}.heading-actions{width:auto;justify-content:flex-start}.page-heading h1,.promotion-main .page-heading h1,.qual-main .page-heading h1{font-size:28px}.heading-actions .button{min-height:44px}.home-main{padding:28px 20px 40px}.tools-grid{gap:12px;margin-top:16px}.coding-panel-head{padding:12px 18px}.coding-questions{padding:16px 18px}.qual-search{padding-top:18px}.source-warnings{margin-bottom:14px}}

/* Persistent navigation and compact worksheets on laptop / desktop screens. */
.sidebar-label{display:none}
.eligibility-card h3{font:500 21px/1.2 var(--serif);margin:0;letter-spacing:-.015em}
.lookup-main,.promotion-main,.qual-main{container:tool / inline-size}
.place-detail:empty{display:none}
@media screen and (min-width:1100px){
  :root{--sidebar-width:224px}
  body{padding-left:var(--sidebar-width)}
  .site-header{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100dvh;min-height:0;padding:20px 12px 18px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto;border-right:1px solid var(--sidebar-line);z-index:40}
  .site-header .brand{font-size:17px;gap:10px;min-height:44px;flex-shrink:0;padding:0 8px}
  .site-header .brand-mark{width:32px;height:32px;font-size:13px;flex-shrink:0}
  .tools-toggle{display:none}
  .site-header .tool-navigation{display:flex;flex-shrink:0;position:static;width:100%;max-width:none;max-height:none;overflow:visible;padding:0;margin-top:10px;gap:2px;border:0;border-radius:0;box-shadow:none;background:transparent}
  .tool-navigation a,.tool-navigation .nav-current{min-height:36px;padding:7px 10px;font-size:13px;border-radius:6px}
  .tool-navigation .nav-current,.tool-navigation [aria-current=page]{color:var(--ink);background:var(--paper);font-weight:600}
  .tool-navigation a:hover,.tool-navigation a:focus-visible{background:#ffffff12}
  .sidebar-foot{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding:16px 10px 0;border-top:1px solid var(--sidebar-line);font-size:11px;line-height:1.5;color:var(--on-ink-muted)}
  .sidebar-foot strong{color:var(--on-ink);font-weight:500}
  .sidebar-foot a{margin-top:8px;color:var(--on-ink);text-decoration:none;font-weight:500}
  .sidebar-foot a:hover,.sidebar-foot a:focus-visible{text-decoration:underline;text-underline-offset:3px}
  .sidebar-foot a+a{margin-top:3px}
  .nav-extra{display:none!important}
  .tool-page .home-extras{grid-template-columns:1fr 1fr}
  .skip-link{left:calc(var(--sidebar-width) + 12px);z-index:60}
}
@media screen and (min-width:900px){
  :root{--work-gap:14px}
  .lookup-main,.promotion-main,.qual-main{max-width:1500px;padding:18px 22px 36px}
  .page-heading{margin-bottom:14px;min-height:44px;gap:12px 20px}
  .page-heading h1,.promotion-main .page-heading h1,.qual-main .page-heading h1{font-size:27px}
  .site-footer{padding:18px 22px;max-width:1500px}
  .filters{padding:16px 18px;gap:14px 18px}
  .filter-footer{padding:10px 18px}
  .lookup-controls{padding:16px 18px 0;gap:12px}
  .mode-help{padding:10px 18px 0}
  .results-toolbar{margin-top:18px;margin-bottom:12px}
  .qual-search{padding:16px 18px 0;gap:6px}
  .qual-search p{margin:0}
  .qual-workspace{margin-top:20px;gap:20px;grid-template-columns:280px minmax(0,1fr)}
  .reader-empty{padding:28px;gap:18px}
  .reader-empty h2{font-size:28px}
  .role-card{padding:14px;gap:6px}
  .home-main{padding:40px 28px 56px}
  .home-intro{font-size:17px}
  .promotion-main{--space:14px;--section-gap:16px}
  .setup-bar{gap:16px;margin-bottom:16px}
  .field{gap:6px}
  .field-caption{margin-bottom:6px}
  .position-grid{gap:18px;align-items:start}
  .position-card,.mpr-main .position-card,.action-main .position-card{padding:18px;gap:var(--work-gap)}
  .card-heading{gap:12px}
  .card-number{width:30px;height:30px;font-size:11px}
  .position-card h2,.conversion h2{font-size:22px}
  .card-heading p{margin-top:4px}
  .grade-row,.occupation-pair{gap:12px}
  .place-controls,.occupation-fields,.stack,.action-main .position-card>div[id]{gap:12px}
  .place-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end}
  .place-controls>.place-detail{grid-column:1 / -1}
  .place-top{gap:10px;min-width:0}
  .place-top .field{min-width:0}
  .place-top .text-button{width:76px;flex:none;white-space:normal;line-height:1.3;min-height:44px;text-align:left}
  .occupation-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .occupation-fields>.field:not(:first-child),.occupation-fields>.coverage-detail{grid-column:1 / -1}
  .occupation-fields .occupation-pair{min-width:0}
  .place-picker summary{min-width:0}
  .place-detail,.coverage-detail{line-height:1.5}
  .coverage-detail{padding:10px 12px}
  .inherited,.mpr-main .inherited{padding:10px 12px;gap:10px;line-height:1.5}
  .calculation-controls,.mpr-main .calculation-controls{padding:16px 0 20px;gap:18px}
  .calculation-controls .primary{min-height:44px;padding:10px 16px;gap:16px}
  .calculation-controls>div{gap:18px}
  .calculation-controls p{max-width:380px}
  .conversion{padding:18px;margin-top:16px;gap:12px}
  .promotion-main .notice{margin-bottom:16px}
  #main .pay-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
  .pay-fields>:is(.grade-row,.occupation-pair,.place-detail,.coverage-detail),.pay-fields>.field:has(select[id$='-plan']),.pay-fields.locality-fields>.place-picker{grid-column:1 / -1}
  .mpr-main .prior-pay-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;gap:12px}
  .prior-pay-row:has(>#history-year-field[hidden])>#prior-grade-step{grid-column:1 / -1}
  .mpr-main .destination-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
  #main #target-controls.pay-fields,#target-controls>.grade-row{display:contents}
  #target-controls>:is(.occupation-pair,.place-detail,.coverage-detail),#target-controls>.field:has(select[id$='-plan']){grid-column:1 / -1}
  #target-controls>.place-picker{grid-column:span 2}
  .mpr-main .eligibility-card{display:grid;grid-template-columns:1fr auto;padding:14px;margin-top:2px;gap:10px;background:var(--soft);border-radius:8px}
  .eligibility-card h3{font:500 19px/1.2 var(--serif);margin:0}
  .mpr-main .eligibility-card>div{gap:0;align-self:center}
  .mpr-main .eligibility-card>.field{grid-column:1 / -1;grid-row:2}
  .mpr-main .eligibility-card>details:not([open]){grid-column:2;grid-row:1}
  .mpr-main .eligibility-card>details[open]{grid-column:1 / -1}
  .mpr-main .eligibility-card>details>summary{min-height:44px;align-content:center}
  .mpr-main .eligibility-notes{padding-top:12px;gap:12px}
  .action-main #wage-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
  .action-main #wage-controls>.place-picker,.action-main #wage-controls>.place-detail,.action-main #wage-controls>.check-field,.action-main #wage-controls>.grade-row{grid-column:1 / -1}
  .action-main .table-confirmation{margin-top:16px}
  .coding-layout{grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:20px}
  .coding-panel-head{padding:10px 16px;gap:4px 12px}
  .coding-panel-head h2{font-size:19px}
  .coding-questions{padding:16px}
  .coding-field{margin-bottom:16px}
  .coding-field>span,.coding-field legend{margin-bottom:6px}
  .coding-occupation{padding:14px 16px;margin-top:16px}
  .coding-placeholder{min-height:230px;padding:30px 28px}
  .coding-placeholder h2{font-size:27px}
  .coding-summary{padding:20px}
  .coding-result-body{padding:20px}
  .coding-output-actions{padding:14px 20px}
}
/* Adapt to the actual working width left beside navigation. */
@container tool (max-width:1000px){
  .gs-filters,.qual-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gs-filters .filter:nth-child(2),.qual-filters .filter:nth-child(2){grid-column:span 2}
}
@container tool (max-width:760px){
  .position-grid{grid-template-columns:1fr}
  .occupation-fields{display:flex;flex-direction:column}
}
@container tool (max-width:700px){
  .gs-filters,.qual-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-filters .filter:nth-child(2),.qual-filters .filter:nth-child(2){grid-column:auto}
  .gs-filters .filter:nth-child(3){grid-column:span 2}
}
@container tool (max-width:560px){
  .gs-filters,.qual-filters{grid-template-columns:1fr}
  .gs-filters .filter:nth-child(2),.gs-filters .filter:nth-child(3),.qual-filters .filter:nth-child(2){grid-column:auto}
}

.prior-pay-row:not(:has(>:not([hidden]))){display:none}
@media screen and (max-width:899px){.destination-fields,.prior-pay-row{display:flex;flex-direction:column;gap:20px}}


/* Short guide below each tool: what it does, in the words people search for. */
.tool-guide{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);max-width:1100px;grid-column:1/-1}
.tool-guide h2{margin:0 0 16px;font:500 21px/1.2 var(--serif);color:var(--ink)}
.tool-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px 34px}
.tool-guide-grid:has(>:nth-child(4)){grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.tool-guide h3{margin:0 0 5px;font:600 14px/1.35 var(--sans);color:var(--ink)}
.tool-guide p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.tool-guide-related{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px!important}
.tool-guide-related span{color:var(--muted)}
.tool-guide-related a{color:var(--brand);font-weight:600;text-underline-offset:3px}
@media print{body{padding-left:0;background:#fff}.site-header,.sidebar-label,.tools-toggle,.tool-info,.tool-guide,.source-warnings,.sidebar-foot{display:none!important}.lookup-main,.promotion-main,.qual-main{container-type:normal}.eligibility-card h3{font-size:20px}}

.app-status{margin:12px 22px 0;max-width:1460px}
@media(max-width:560px){.app-status{margin:12px 14px 0}}
@media print{.app-status{display:none!important}}