/* ============================================================
   SAKORI — MOBILE PRODUCT LAYER
   ============================================================
   Loaded after styles.css and app.css. Everything that changes
   layout lives inside the `max-width: 768px` block below, so the
   desktop presentation is untouched.

   The only rules outside that block hide mobile-only components
   (tab bar, drawer scrim, sticky apply bar) on larger screens.
   ============================================================ */

.sk-tabbar,
.nav-scrim,
.nav-drawer-head,
.nav-drawer-extra,
.sk-navicon,
.sk-applybar,
.sk-collapse-toggle,
.sk-collapse-label,
.sk-nav-account-label {
  display: none;
}

/* Desktop: unwrap so .nav-links / .nav-actions stay flex children of .nav-menu. */
.nav-drawer-body {
  display: contents;
}

.home-flow {
  display: contents;
}

@media (max-width: 768px) {
  /* ==========================================================
     1. TOKENS & BASE
     ========================================================== */

  :root {
    --sk-gutter: 16px;
    --sk-appbar-h: 56px;
    --sk-tabbar-h: 58px;
    --sk-safe-b: env(safe-area-inset-bottom, 0px);
    --sk-card-radius: 16px;
    --sk-field-radius: 12px;
    --sk-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sk-shadow-raised: 0 6px 18px rgba(15, 23, 42, 0.09);
    --sk-shadow-bar: 0 -6px 20px rgba(15, 23, 42, 0.1);
    --sk-line: rgba(15, 23, 42, 0.08);
  }

  html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
  }

  body {
    letter-spacing: 0;
    line-height: 1.55;
    overflow-x: clip;
    padding-bottom: calc(var(--sk-tabbar-h) + var(--sk-safe-b));
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
  }

  body:has(.sk-applybar),
  body:has(.form-actions.sk-formbar) {
    padding-bottom: calc(72px + var(--sk-safe-b));
  }

  body:has(.sk-applybar) .sk-tabbar,
  body:has(.form-actions.sk-formbar) .sk-tabbar {
    display: none;
  }

  .container {
    padding-left: var(--sk-gutter);
    padding-right: var(--sk-gutter);
  }

  h1 {
    letter-spacing: -0.02em;
  }

  h2 {
    letter-spacing: -0.02em;
  }

  /* Comfortable default tap size for every button on a phone. */
  .btn {
    min-height: 46px;
    padding: 11px 18px;
    border-radius: var(--sk-field-radius);
    font-size: 0.9375rem;
    touch-action: manipulation;
  }

  .btn.small {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .btn.primary:hover,
  .btn.primary:active {
    transform: none;
  }

  /* ==========================================================
     2. APP BAR + DRAWER
     ========================================================== */

  .header {
    position: sticky;
    top: 0;
    z-index: 110;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--white);
    box-shadow: 0 1px 0 var(--sk-line);
  }

  /* Social row and the About/Contact/Blog strip move into the
     drawer and footer, freeing ~36px of pinned viewport. */
  .header-topbar {
    display: none;
  }

  .nav-bar {
    padding: 0;
  }

  .header .nav-container {
    min-height: var(--sk-appbar-h);
    gap: 4px;
    padding: 0 10px 0 var(--sk-gutter);
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand .brand-lockup {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
  }

  .brand-lockup-img {
    height: 1.7rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .nav-toggle-label {
    display: flex;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    color: var(--gray-800);
  }

  .nav-toggle-label i {
    width: 23px;
    height: 23px;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  .nav-toggle-input:checked ~ .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  body:has(.nav-toggle-input:checked) {
    overflow: hidden;
  }

  /* Slide-out panel. Specificity matches the styles.css rule it
     replaces so no !important is needed.

     Head and body are separate flex children: iOS WebKit (Chrome on
     iPhone uses it, laptop device mode does not) cannot combine
     position:sticky with flex order in one overflow scroller — the
     title bar paints on top of Government Jobs. */
  .header .nav-bar .nav-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1200;
    width: min(88vw, 340px);
    height: 100%;
    max-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--white);
    border: 0;
    box-shadow: -18px 0 44px rgba(15, 23, 42, 0.22);
    transform: translateX(102%);
    transition: transform var(--transition-base);
    overflow: hidden;
    overscroll-behavior: contain;
    visibility: hidden;
  }

  .header .nav-toggle-input:checked ~ .nav-menu {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px var(--sk-gutter);
    background: var(--white);
    border-bottom: 1px solid var(--sk-line);
  }

  .nav-drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 calc(20px + var(--sk-safe-b));
  }

  .nav-drawer-head .brand-lockup {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .nav-drawer-head .brand-lockup-img {
    height: 1.6rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--gray-700);
    cursor: pointer;
  }

  .nav-drawer-close i {
    width: 20px;
    height: 20px;
  }

  /* Account actions first, then browse links, then site links. */
  .nav-actions {
    order: 1;
    display: grid;
    gap: 10px;
    padding: 14px var(--sk-gutter);
    border-bottom: 1px solid var(--sk-line);
  }

  .nav-actions .btn {
    width: 100%;
  }

  .nav-actions .btn.small {
    min-height: 46px;
    font-size: 0.9375rem;
  }

  /* The bare profile link becomes a labelled row. */
  .nav-actions > a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--sk-field-radius);
    color: var(--gray-800);
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .sk-nav-account-label {
    display: inline;
  }

  .nav-actions .profile-icon {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
  }

  .nav-links {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--sk-gutter);
  }

  .nav-links a,
  .nav-drawer-extra a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid var(--sk-line);
    color: var(--gray-800);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .nav-links a:hover,
  .nav-drawer-extra a:hover {
    color: var(--accent-dark);
    border-bottom-color: var(--sk-line);
  }

  .nav-links a .sk-navicon,
  .nav-drawer-extra a .sk-navicon {
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: var(--gray-400);
  }

  .nav-drawer-extra {
    display: block;
    order: 3;
    padding: 6px var(--sk-gutter) 0;
  }

  .nav-drawer-extra > a:last-of-type {
    border-bottom: 0;
  }

  .nav-drawer-title {
    margin: 14px 0 2px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gray-400);
  }

  .nav-drawer-social {
    display: flex;
    gap: 8px;
    padding: 14px 0 4px;
  }

  .nav-drawer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    color: var(--gray-700);
  }

  .nav-drawer-social a i {
    width: 18px;
    height: 18px;
    color: currentColor;
  }

  .nav-drawer-social .social-x-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  /* ==========================================================
     3. BOTTOM TAB BAR
     ========================================================== */

  .sk-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding-bottom: var(--sk-safe-b);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--sk-line);
    box-shadow: var(--sk-shadow-bar);
  }

  .sk-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--sk-tabbar-h);
    padding: 7px 2px 8px;
    color: var(--gray-500);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
  }

  .sk-tab i {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }

  .sk-tab-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sk-tab[aria-current='page'] {
    color: var(--accent-dark);
  }

  .sk-tab[aria-current='page'] i {
    stroke-width: 2.4;
  }

  .sk-tab:active {
    background: var(--gray-100);
  }

  /* ==========================================================
     4. HOMEPAGE
     ========================================================== */

  /* Job content moves directly under the search box; the
     "Recently Posted" panel is the same list as "Latest Jobs"
     so only one copy is shown on a phone. */
  .home-flow {
    display: flex;
    flex-direction: column;
  }

  .home-flow > .hero {
    order: 1;
  }

  .home-flow > .sectors {
    order: 2;
  }

  .home-flow > .jobs {
    order: 3;
  }

  .home-flow > .recognition {
    order: 4;
  }

  .home-flow > .features {
    order: 5;
  }

  .home-flow > .cta {
    order: 6;
  }

  .hero-recent-wrap {
    display: none;
  }

  .hero {
    --hero-pad-y: 22px;
    padding: var(--hero-pad-y) 0 26px;
    background: linear-gradient(180deg, #eef4fb 0%, var(--gray-50) 100%);
    border-bottom: 1px solid var(--sk-line);
  }

  .hero-grid {
    display: block;
    gap: 0;
  }

  .hero-primary h1 {
    font-size: 1.6rem;
    line-height: 1.18;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
  }

  .hero-subtext {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 16px;
    color: var(--gray-600);
  }

  .job-search-form {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--sk-card-radius);
    box-shadow: var(--sk-shadow-raised);
    border-color: var(--gray-200);
  }

  .search-field {
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--sk-field-radius);
    background: var(--gray-50);
  }

  .search-field:last-of-type {
    border: 1.5px solid var(--gray-200);
  }

  .search-field:focus-within {
    border-color: var(--accent);
    background: var(--white);
  }

  .search-field input {
    padding: 13px 0;
    font-size: 16px;
    background: transparent;
  }

  .search-field input:focus-visible {
    outline: none;
  }

  .search-submit {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
  }

  .hero-toolbar {
    display: block;
    margin-top: 16px;
  }

  /* Horizontal chip rail keeps popular searches to one line. */
  .popular-searches {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 calc(-1 * var(--sk-gutter));
    padding: 2px var(--sk-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .popular-searches::-webkit-scrollbar {
    display: none;
  }

  .popular-label {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 15px;
    background: var(--white);
    border-color: var(--gray-200);
    color: var(--gray-800);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  .hero-toolbar .btn {
    width: 100%;
    margin-top: 12px;
  }

  /* Sector discovery: compact rows instead of tall cards. */
  .sectors {
    padding: 22px 0 4px;
    background: var(--gray-50);
  }

  .sectors h2 {
    font-size: 1.0625rem;
    margin-bottom: 12px;
  }

  .sector-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sector-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--white);
    border-color: var(--gray-200);
    border-radius: var(--sk-card-radius);
    box-shadow: var(--sk-shadow-card);
  }

  .sector-card:hover {
    transform: none;
  }

  .sector-icon {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 12px;
  }

  .sector-icon i {
    width: 21px;
    height: 21px;
  }

  .sector-card h3 {
    grid-column: 2;
    font-size: 0.9375rem;
    margin: 0 0 2px;
  }

  .sector-card p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-600);
  }

  .sector-link {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 0;
  }

  .sector-link i {
    width: 18px;
    height: 18px;
    color: var(--accent);
  }

  .sector-card:hover .sector-link i {
    transform: none;
  }

  /* Trust strip */
  .recognition {
    padding: 20px 0;
    background: var(--white);
    border-top: 1px solid var(--sk-line);
    border-bottom: 1px solid var(--sk-line);
  }

  .recognition-inner {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .recognition-badge {
    height: 58px;
    max-width: 92px;
    padding: 3px;
  }

  .recognition-text {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  /* Value props as rows */
  .features {
    padding: 22px 0;
    background: var(--gray-50);
  }

  .features h2 {
    font-size: 1.0625rem;
    margin-bottom: 12px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .feature {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--sk-card-radius);
  }

  .feature:hover {
    transform: none;
    background: var(--white);
    box-shadow: none;
  }

  .feature .icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    background: var(--accent-lighter);
    color: var(--accent-dark);
  }

  .feature .icon i {
    width: 20px;
    height: 20px;
  }

  .feature h4 {
    grid-column: 2;
    font-size: 0.9375rem;
    margin: 1px 0 3px;
  }

  .feature p {
    grid-column: 2;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0;
  }

  /* Employer CTA */
  .cta {
    padding: 28px 0 32px;
  }

  .cta h2 {
    font-size: 1.375rem;
    margin-bottom: 8px;
  }

  .cta p {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .cta .btn {
    width: 100%;
  }

  .cta .btn-group .btn {
    width: 100%;
  }

  .cta-actions {
    display: grid;
    gap: 10px;
  }

  /* ==========================================================
     5. JOB CARDS
     ========================================================== */

  .jobs {
    padding: 22px 0 6px;
    background: var(--gray-50);
  }

  .jobs h2 {
    font-size: 1.0625rem;
  }

  .section-heading {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .section-heading h2 {
    font-size: 1.0625rem;
    margin: 0;
  }

  .section-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .section-link i {
    width: 14px;
    height: 14px;
  }

  .jobs-grid,
  .listing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .job-card {
    padding: 14px;
    border-radius: var(--sk-card-radius);
    border-color: var(--gray-200);
    box-shadow: var(--sk-shadow-card);
  }

  .job-card:hover {
    transform: none;
    box-shadow: var(--sk-shadow-card);
  }

  .job-card:active {
    background: var(--gray-50);
  }

  /* `align-items: flex-start` in a column flex container makes the
     copy shrink to max-content and blow past the card on a phone.
     Stretch it and lift the sector badge above the title instead. */
  .job-card-head {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }

  .job-card-copy {
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
  }

  .job-sector-badge {
    align-self: flex-start;
    padding: 3px 9px;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .job-card h3.job-card-title,
  .job-card-title {
    font-size: 1.0625rem;
    line-height: 1.28;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
  }

  .job-card-company {
    font-size: 0.8125rem;
    gap: 5px;
  }

  .job-card-company i {
    width: 14px;
    height: 14px;
  }

  .job-card-meta {
    gap: 5px 12px;
    margin-bottom: 10px;
  }

  /* Pay is the deciding fact on mobile: own line, larger, first. */
  .job-meta-chip--pay {
    order: -1;
    width: 100%;
    margin-bottom: 1px;
    color: var(--primary);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .job-meta-chip--pay i {
    width: 16px;
    height: 16px;
    color: var(--success);
  }

  .job-meta-chip {
    font-size: 0.78125rem;
  }

  .job-meta-chip i {
    width: 14px;
    height: 14px;
  }

  .job-card-tags {
    gap: 5px;
    margin-bottom: 10px;
  }

  .job-card-tags .tag {
    padding: 3px 9px;
    font-size: 0.6875rem;
  }

  .job-card-footer {
    padding-top: 10px;
  }

  .job-card-cta {
    font-size: 0.84375rem;
  }

  /* ==========================================================
     6. PAGE CHROME
     ========================================================== */

  .page {
    padding: var(--sk-gutter) var(--sk-gutter) 26px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 16px;
  }

  .page-title {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }

  .page-lede {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* Four admin buttons in a nowrap row was the 682px overflow. */
  .page-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }

  .page-header-actions .btn {
    width: auto;
    min-width: 0;
  }

  .page-header-actions > .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .page-header-actions > .job-status {
    justify-self: start;
    grid-column: 1 / -1;
  }

  .breadcrumbs {
    margin-bottom: 10px;
  }

  .breadcrumbs ol {
    font-size: 0.75rem;
    align-items: center;
  }

  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .breadcrumbs li:last-child span {
    display: inline-block;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .panel {
    padding: var(--sk-gutter);
    border-radius: var(--sk-card-radius);
    border-color: var(--gray-200);
    box-shadow: var(--sk-shadow-card);
  }

  .panel + .panel {
    margin-top: 12px;
  }

  .panel-title {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  .prose {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .notice {
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: var(--sk-field-radius);
  }

  .notice p {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    border-radius: var(--sk-card-radius);
  }

  .banner .btn {
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
  }

  .btn-group {
    display: grid;
    gap: 10px;
  }

  .workspace-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .workspace-nav .btn {
    width: auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.875rem;
  }

  .workspace-nav > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* ==========================================================
     7. FILTERS / TOOLBARS (collapsible)
     ========================================================== */

  .filter-panel {
    padding: 12px;
    margin-bottom: 14px;
    border-radius: var(--sk-card-radius);
  }

  .filter-grid {
    gap: 10px;
  }

  /* Keyword + location stay visible; the rest sit behind a
     disclosure so results start near the top of the screen. */
  .sk-collapse-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--sk-field-radius);
    background: var(--gray-50);
    color: var(--gray-800);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
  }

  .sk-collapse-label i {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
    transition: transform var(--transition-fast);
  }

  .sk-collapse-toggle:checked ~ .sk-collapse-label i,
  .sk-collapse-toggle:checked + .sk-collapse-label i {
    transform: rotate(180deg);
  }

  .sk-collapse-label .sk-collapse-open,
  .sk-collapse-toggle:checked ~ .sk-collapse-label .sk-collapse-closed {
    display: none;
  }

  .sk-collapse-toggle:checked ~ .sk-collapse-label .sk-collapse-open {
    display: inline;
  }

  .sk-collapse-toggle:focus-visible ~ .sk-collapse-label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .sk-collapse-toggle:not(:checked) ~ .filter-grid > .input-group:nth-child(n + 3),
  .toolbar-form > .sk-collapse-toggle:not(:checked) ~ .input-group {
    display: none;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px !important;
  }

  .filter-actions .btn {
    width: auto;
  }

  .toolbar {
    display: block;
    margin-bottom: 16px;
  }

  .toolbar-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--sk-card-radius);
    box-shadow: var(--sk-shadow-card);
  }

  .toolbar-form > .btn {
    width: 100%;
  }

  .toolbar-form .sk-collapse-label {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .filter-panel .sk-collapse-label {
    margin-top: 4px;
  }

  .results-toolbar {
    gap: 8px;
    margin-bottom: 10px;
  }

  .results-count {
    font-size: 0.8125rem;
  }

  /* ==========================================================
     8. JOB DETAIL
     ========================================================== */

  .jd-header {
    padding: var(--sk-gutter);
    margin-bottom: 12px;
    border-radius: var(--sk-card-radius);
    border-color: var(--gray-200);
  }

  .jd-kicker {
    gap: 6px;
    margin-bottom: 10px;
  }

  .jd-kicker .badge {
    padding: 3px 10px;
    font-size: 0.6875rem;
  }

  .jd-header h1 {
    font-size: 1.375rem;
    line-height: 1.24;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .jd-company {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }

  .jd-meta {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 14px;
  }

  .jd-meta-label {
    font-size: 0.625rem;
    letter-spacing: 0.07em;
  }

  .jd-meta-value {
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  /* The sticky bar below carries these actions. */
  .jd-actions {
    display: none;
  }

  .jd-layout {
    gap: 12px;
  }

  .jd-aside {
    gap: 12px;
  }

  .jd-cta > .btn.primary,
  .jd-cta > .btn.secondary,
  .jd-cta > p.panel-muted {
    display: none;
  }

  .jd-cta > .btn {
    width: 100%;
  }

  .company-card-identity {
    gap: 12px;
    margin-bottom: 12px;
  }

  .avatar,
  .avatar-fallback {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .dl-list {
    gap: 10px;
  }

  .dl-list div dt {
    font-size: 0.6875rem;
  }

  .dl-list div dd {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  /* Sticky apply bar */
  .sk-applybar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 96;
    padding: 10px var(--sk-gutter) calc(10px + var(--sk-safe-b));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--sk-line);
    box-shadow: var(--sk-shadow-bar);
  }

  .sk-applybar-facts {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 44%;
  }

  .sk-applybar-pay {
    color: var(--primary);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sk-applybar-sub {
    color: var(--gray-500);
    font-size: 0.6875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sk-applybar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .sk-applybar .btn {
    min-height: 48px;
    white-space: nowrap;
  }

  .sk-applybar .btn.primary,
  .sk-applybar .btn.secondary {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 0.9375rem;
  }

  .sk-applybar .btn.ghost {
    flex: 0 0 auto;
    width: 48px;
    padding: 0;
  }

  .sk-applybar .btn.ghost i {
    width: 20px;
    height: 20px;
  }

  .sk-applybar-note {
    flex: 1 1 auto;
    margin: 0;
    color: var(--gray-700);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
  }

  /* ==========================================================
     9. FORMS
     ========================================================== */

  .input-group {
    margin-bottom: 14px;
  }

  .input-group label {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    letter-spacing: 0.005em;
  }

  /* 16px keeps iOS from zooming the viewport on focus. */
  .input-group input,
  .input-group select,
  .input-group textarea,
  .filter-row input,
  .filter-row select,
  .filter-form input,
  .filter-form select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--sk-field-radius);
    font-size: 16px;
  }

  .page,
  .form-grid,
  .form-section,
  .post-job-form,
  .admin-job-form,
  .admin-job-section,
  .form-row,
  .filter-row {
    min-width: 0;
    max-width: 100%;
  }

  .page.admin-job,
  .admin-job-form {
    overflow-x: clip;
  }

  .input-group textarea {
    min-height: 116px;
    line-height: 1.5;
  }

  .input-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px;
  }

  .input-group input[type='checkbox'] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .input-group label:has(input[type='checkbox']) {
    align-items: flex-start;
    min-height: 44px;
    padding: 8px 0;
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .field-hint {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .field-error {
    font-size: 0.75rem;
  }

  .password-wrap input {
    padding-right: 68px;
  }

  .password-toggle {
    right: 4px;
    min-width: 56px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.8125rem;
  }

  .file-field {
    display: block;
    padding: 14px;
    border-radius: var(--sk-field-radius);
    border-color: var(--gray-300);
    background: var(--gray-50);
  }

  .file-field input[type='file'] {
    font-size: 0.875rem;
  }

  .file-field input[type='file']::file-selector-button {
    min-height: 40px;
    margin-right: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: var(--white);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .file-name {
    margin-top: 8px;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
  }

  /* Sectioned form cards with automatic numbering */
  .post-job-form,
  .post-job-wrapper .post-job-form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .form-grid {
    gap: 12px;
    counter-reset: sk-formsection;
  }

  .form-section {
    padding: var(--sk-gutter);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--sk-card-radius);
    box-shadow: var(--sk-shadow-card);
  }

  .form-section:last-child {
    border: 1px solid var(--gray-200);
  }

  .form-section > .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: -2px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sk-line);
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .form-section > .section-title::before {
    counter-increment: sk-formsection;
    content: counter(sk-formsection);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-lighter);
    color: var(--accent-dark);
    font-size: 0.6875rem;
    letter-spacing: 0;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .form-row .input-group input {
    padding-left: 12px;
    padding-right: 12px;
  }

  .form-actions {
    display: grid;
    gap: 8px;
  }

  .form-actions .btn {
    width: 100%;
    order: 0;
  }

  /* Sticky submit rail: reachable from anywhere in a long form. */
  .form-actions.sk-formbar {
    position: sticky;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    margin: 4px calc(-1 * var(--sk-gutter)) calc(-1 * var(--sk-gutter));
    padding: 10px var(--sk-gutter) calc(10px + var(--sk-safe-b));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--sk-line);
    box-shadow: var(--sk-shadow-bar);
  }

  .form-actions.sk-formbar .btn {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 0;
    min-height: 46px;
  }

  .form-actions.sk-formbar .btn.primary {
    order: -1;
    flex-basis: 100%;
  }

  .form-actions.sk-formbar .btn.ghost:first-child:nth-last-child(2) {
    flex-basis: 100%;
  }

  .required-mark {
    font-weight: 800;
  }

  .req-kv {
    gap: 10px;
  }

  .req-kv-row {
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--sk-field-radius);
    background: var(--gray-50);
  }

  .req-kv-row input {
    min-height: 48px;
    font-size: 16px;
  }

  .req-kv-add,
  .req-kv-remove {
    width: 100%;
    min-height: 44px;
  }

  .admin-job-form {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
  }

  .admin-job-lede {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }

  .admin-job-kicker {
    font-size: 0.6875rem;
  }

  .admin-job-choices {
    gap: 8px;
    margin-bottom: 14px;
  }

  .admin-job-choice {
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: var(--sk-field-radius);
  }

  .admin-job-choice input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .admin-job-switch {
    gap: 12px;
    padding: 14px;
  }

  .admin-job-status-actions {
    display: grid;
    gap: 8px;
  }

  .admin-job-status-actions .btn {
    width: 100%;
  }

  /* ==========================================================
     10. LIST / ROW CARDS
     ========================================================== */

  /* Grid items default to min-width:auto, so a nowrap subtitle
     could stretch the card past the viewport (the 457px bug). */
  .row-card {
    padding: 14px;
    gap: 10px;
    border-radius: var(--sk-card-radius);
    border-color: var(--gray-200);
    box-shadow: var(--sk-shadow-card);
  }

  .row-card > * {
    min-width: 0;
  }

  .row-card + .row-card {
    margin-top: 10px;
  }

  .jobs-dashboard {
    gap: 10px;
  }

  .row-card-main h3 {
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .row-sub {
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .row-meta {
    gap: 6px 8px;
  }

  .row-meta .badge,
  .row-meta .job-status {
    padding: 4px 10px;
    font-size: 0.6875rem;
  }

  .row-meta .salary {
    font-size: 0.875rem;
  }

  .job-closes {
    font-size: 0.75rem;
    white-space: normal;
  }

  .row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sk-line);
  }

  .row-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.8125rem;
  }

  .row-actions > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .row-actions .status-select {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border-radius: var(--sk-field-radius);
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px;
  }

  .cover-letter {
    padding: 10px 12px;
    font-size: 0.875rem;
    line-height: 1.55;
    border-radius: var(--sk-field-radius);
    overflow-wrap: anywhere;
  }

  /* Stat strips */
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }

  .metric-card {
    padding: 10px 8px;
    text-align: center;
    border-radius: 14px;
    border-color: var(--gray-200);
  }

  .metric-card .metric-value {
    font-size: 1.3125rem;
  }

  .metric-card .metric-label {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .admin-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .admin-metric {
    padding: 14px;
    border-radius: 14px;
    border-color: var(--gray-200);
  }

  .admin-metric .metric-label {
    font-size: 0.625rem;
  }

  .admin-metric .metric-value {
    font-size: 1.5rem;
  }

  .admin-metric .placeholder-note {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .manager-sections {
    gap: 12px;
  }

  /* Stacked tables become cards */
  .table-stack tr {
    position: relative;
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    border-radius: 14px;
    background: var(--white);
  }

  .table-stack tbody tr:hover {
    background: var(--white);
  }

  .table-stack tr:last-child {
    margin-bottom: 0;
  }

  .table-stack td {
    gap: 12px;
    padding: 5px 0;
    align-items: baseline;
    font-size: 0.875rem;
  }

  .table-stack td::before {
    flex-shrink: 0;
    font-size: 0.6875rem;
  }

  .table-stack td.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sk-line);
  }

  .table-stack td.actions::before {
    display: none;
  }

  .table-stack td.actions .btn {
    width: auto;
    min-height: 42px;
  }

  .table-stack td.actions > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .history-list {
    gap: 12px;
  }

  .history-item {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .content-list {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .timeline-body strong {
    font-size: 0.9375rem;
  }

  /* Pagination */
  .pagination {
    gap: 6px;
    margin-top: 16px;
  }

  .pagination-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--sk-field-radius);
    font-size: 0.875rem;
  }

  .pagination-list {
    gap: 6px;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pagination-list::-webkit-scrollbar {
    display: none;
  }

  /* Empty states */
  .empty-state,
  .empty-state--v2 {
    padding: 26px 18px;
    border-radius: var(--sk-card-radius);
  }

  .empty-state-title {
    font-size: 1.0625rem;
  }

  .empty-state-text {
    font-size: 0.875rem;
    margin-bottom: 16px;
  }

  .empty-state-actions {
    display: grid;
    gap: 8px;
  }

  .empty-state-actions .btn {
    width: 100%;
  }

  /* ==========================================================
     11. ACCOUNT / APPLY
     ========================================================== */

  .account-grid,
  .account-grid--employer {
    gap: 12px;
  }

  .account-side {
    display: grid;
    gap: 12px;
  }

  .profile-preview {
    margin-bottom: 14px;
  }

  .profile-photo-preview {
    width: 84px;
    height: 84px;
  }

  .danger-zone {
    margin-top: 12px;
    padding: var(--sk-gutter);
    border-radius: var(--sk-card-radius);
  }

  .danger-zone h3 {
    font-size: 1rem;
  }

  .danger-zone p {
    font-size: 0.875rem;
  }

  .apply-layout {
    gap: 12px;
  }

  /* Role reminder above the form on a phone. */
  .apply-summary {
    order: -1;
  }

  .apply-summary strong {
    font-size: 1rem;
  }

  .apply-summary .jd-meta {
    grid-template-columns: 1fr 1fr;
  }

  .company-hero {
    gap: 14px;
    padding: var(--sk-gutter);
    margin-bottom: 12px;
    justify-items: center;
    text-align: center;
    border-radius: var(--sk-card-radius);
  }

  .company-hero .avatar--lg,
  .company-hero .avatar-fallback--lg {
    width: 68px;
    height: 68px;
    font-size: 1.25rem;
  }

  .company-hero h1 {
    font-size: 1.3125rem;
  }

  .company-hero .btn-group {
    width: 100%;
  }

  .moderation-layout {
    gap: 12px;
  }

  .decision-stack {
    gap: 10px;
  }

  .decision-stack .btn {
    width: 100%;
  }

  /* ==========================================================
     12. AUTH
     ========================================================== */

  .auth-body {
    align-items: flex-start;
    padding: 20px var(--sk-gutter) 28px;
  }

  .auth-brand {
    margin-bottom: 16px;
  }

  .auth-brand .brand-lockup-img {
    height: 2rem;
  }

  .auth-stage {
    gap: 12px;
  }

  .auth-card {
    padding: 18px var(--sk-gutter);
    border-radius: 18px;
    border-color: var(--gray-200);
  }

  .auth-role {
    margin-bottom: 8px;
    padding: 3px 9px;
    font-size: 0.6875rem;
  }

  .auth-card h1 {
    font-size: 1.375rem;
    letter-spacing: -0.025em;
  }

  .auth-card .auth-lede {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .auth-submit {
    min-height: 50px;
    font-size: 1rem;
  }

  .auth-footer,
  .auth-alt {
    font-size: 0.875rem;
    margin-top: 12px;
  }

  .auth-footer a,
  .auth-alt a,
  .auth-home a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }

  .auth-card .auth-legal {
    margin-top: 16px;
    padding-top: 12px;
  }

  .auth-legal {
    font-size: 0.8125rem;
    gap: 0.25rem 0;
  }

  .auth-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
  }

  .auth-agree {
    font-size: 0.78125rem;
  }

  .auth-hire,
  .auth-hire--float {
    padding: 16px;
    border-radius: 18px;
  }

  .auth-hire-art {
    margin-bottom: 10px;
  }

  .auth-hire-character,
  .auth-hire--float .auth-hire-character {
    width: min(100%, 124px);
  }

  .auth-hire-title,
  .auth-hire--float .auth-hire-title {
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }

  .auth-hire-lede,
  .auth-hire--float .auth-hire-lede {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .auth-hire-benefits {
    gap: 8px;
  }

  .auth-hire-benefits li {
    font-size: 0.84375rem;
    line-height: 1.4;
  }

  .auth-hire-actions {
    margin-top: 16px;
  }

  .auth-hire-cta {
    min-height: 48px;
  }

  .auth-hire-secondary {
    font-size: 0.84375rem;
    margin-top: 12px;
  }

  .auth-hire-secondary a {
    display: inline-block;
    padding: 4px 0;
  }

  .auth-hire--float {
    max-width: none;
  }

  /* ==========================================================
     13. ALERTS, DIALOGS, LOADING
     ========================================================== */

  .alert {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    width: calc(100% - 20px);
    min-width: 0;
    max-width: calc(100% - 20px);
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border-radius: 14px;
    font-size: 0.875rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  }

  .alert__icon {
    width: 1.9rem;
    height: 1.9rem;
  }

  .alert__close {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Confirm dialogs read as bottom sheets on a phone. */
  .sk-dialog {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 22px 22px 0 0;
  }

  .sk-dialog-form {
    padding: 8px var(--sk-gutter) calc(16px + var(--sk-safe-b));
  }

  .sk-dialog-form::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--gray-300);
  }

  .sk-dialog-title {
    font-size: 1.0625rem;
  }

  .sk-dialog-message {
    font-size: 0.9375rem;
    margin-bottom: 16px;
  }

  .sk-dialog-actions {
    display: grid;
    gap: 8px;
  }

  .sk-dialog-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .sk-dialog-actions .btn.danger,
  .sk-dialog-actions .btn.primary {
    order: -1;
  }

  .sk-dialog--media,
  .sk-dialog.sk-dialog--hire {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  .sk-dialog--media {
    max-width: calc(100% - 24px);
    width: calc(100% - 24px);
    padding: 0;
    border-radius: var(--radius-lg);
  }

  .sk-dialog.sk-dialog--hire {
    max-width: calc(100% - 32px);
    width: min(22.5rem, calc(100% - 32px));
    border-radius: 18px;
  }

  .sk-hire-modal {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .sk-hire-modal .sk-dialog-close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  .sk-hire-modal-title {
    font-size: 1.0625rem;
    padding-right: 2.25rem;
  }

  .sk-dialog-close {
    top: -52px;
    right: 0;
    width: 44px;
    height: 44px;
  }

  /* Loading buttons must not reflow the sticky bars. */
  .btn.loading::after {
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
  }

  /* ==========================================================
     14. CONTENT & LEGAL PAGES
     ========================================================== */

  .about-hero {
    padding: 26px 0 28px;
  }

  .about-hero h1 {
    font-size: 1.625rem;
    margin-bottom: 10px;
  }

  .about-hero .page-lede {
    font-size: 0.9375rem;
  }

  .about-hero .btn-group {
    margin-top: 18px;
  }

  .about-kicker {
    font-size: 0.6875rem;
  }

  .about-highlights {
    gap: 8px;
    margin-top: 18px;
  }

  .about-highlights li {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--sk-field-radius);
    font-size: 0.84375rem;
  }

  .about-section {
    padding: 26px 0;
  }

  .about-section-head {
    margin-bottom: 16px;
  }

  .about-section-head h2,
  .about-mission h2,
  .about-commitment h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }

  .about-split,
  .about-why {
    gap: 10px;
  }

  .about-card,
  .about-why-card {
    padding: var(--sk-gutter);
    border-radius: var(--sk-card-radius);
    border-color: var(--gray-200);
  }

  .about-card-icon,
  .about-why-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .about-card h3,
  .about-why-card h3 {
    font-size: 1.0625rem;
  }

  .about-card p,
  .about-why-card p {
    font-size: 0.875rem;
  }

  .about-card-link {
    min-height: 40px;
    margin-top: 10px;
    font-size: 0.875rem;
  }

  .about-commitment {
    gap: 16px;
  }

  .about-commitment .btn {
    width: 100%;
  }

  .contact-grid {
    gap: 12px;
  }

  .contact-grid .panel a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .content-hero h1 {
    font-size: 1.5rem;
  }

  .content-section + .content-section {
    margin-top: 24px;
  }

  .placeholder-page {
    padding: 26px 18px;
  }

  .placeholder-page h1 {
    font-size: 1.5rem;
  }

  .page.page--legal {
    overflow-x: clip;
  }

  .legal-hero {
    margin-bottom: 18px;
  }

  .legal-hero h1 {
    font-size: 1.625rem;
  }

  .legal-meta-row {
    gap: 8px;
    margin-top: 16px;
  }

  .legal-meta-row > div {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
  }

  .legal-layout {
    gap: 14px;
    min-width: 0;
    max-width: 100%;
  }

  /* Section index as a swipeable chip rail. */
  .legal-toc {
    position: sticky;
    top: calc(var(--sk-appbar-h) + env(safe-area-inset-top, 0px));
    z-index: 20;
    width: calc(100% + 2 * var(--sk-gutter));
    max-width: calc(100% + 2 * var(--sk-gutter));
    margin: 0 calc(-1 * var(--sk-gutter));
    padding: 8px var(--sk-gutter);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .legal-toc-title {
    display: none;
  }

  .legal-toc-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .legal-toc-list::-webkit-scrollbar {
    display: none;
  }

  .legal-toc-list li {
    flex: 0 0 auto;
  }

  .legal-toc-list a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.78125rem;
  }

  .legal-toc-list a.is-active {
    border-color: var(--accent-light);
  }

  .legal-doc.panel {
    padding: var(--sk-gutter);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .legal-section {
    scroll-margin-top: calc(var(--sk-appbar-h) + 62px);
    min-width: 0;
  }

  .legal-doc p,
  .legal-doc li,
  .legal-doc code {
    overflow-wrap: anywhere;
  }

  .legal-section + .legal-section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .legal-doc h2 {
    font-size: 1.0625rem;
  }

  .legal-doc h3 {
    font-size: 0.9375rem;
  }

  .legal-doc p,
  .legal-doc li {
    font-size: 0.875rem;
    line-height: 1.7;
  }

  .error-shell {
    padding: var(--sk-gutter);
  }

  .error-card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .error-card h1 {
    font-size: 1.375rem;
  }

  .error-message {
    font-size: 0.9375rem;
  }

  /* ==========================================================
     15. FOOTER
     ========================================================== */

  .footer {
    padding: 24px var(--sk-gutter) 18px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    padding-bottom: 18px;
    text-align: left;
  }

  .footer-col.footer-about {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
    margin-bottom: 12px;
  }

  .footer-brand .brand-lockup {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-brand .brand-lockup-img {
    height: 1.9rem;
  }

  .footer-tagline {
    font-size: 0.84375rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .footer-socials {
    justify-content: center;
    gap: 10px;
  }

  .footer-socials a {
    width: 42px;
    height: 42px;
  }

  .footer-heading {
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  .footer-links {
    gap: 0;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.84375rem;
  }

  .footer-bottom {
    padding-top: 14px;
    margin-top: 4px;
  }

  .footer-copyright {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .footer-legal {
    gap: 4px 14px;
    justify-content: center;
  }

  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.78125rem;
  }
}

/* ============================================================
   NARROW PHONES (320–360px)
   ============================================================ */

@media (max-width: 374px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .jd-meta,
  .apply-summary .jd-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sk-tab {
    font-size: 0.625rem;
  }

  .sk-tab i {
    width: 21px;
    height: 21px;
  }

  .hero-primary h1 {
    font-size: 1.4375rem;
  }

  .page-title {
    font-size: 1.3125rem;
  }

  .jd-header h1 {
    font-size: 1.25rem;
  }

  .job-card h3.job-card-title,
  .job-card-title {
    font-size: 1rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-heading {
    margin-bottom: 4px;
  }

  .footer-links a {
    justify-content: center;
  }

  .row-actions,
  .table-stack td.actions,
  .page-header-actions,
  .workspace-nav {
    grid-template-columns: 1fr;
  }

  .sk-applybar-facts {
    display: none;
  }

  .recognition-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .nav-bar .nav-menu,
  .nav-scrim {
    transition: none;
  }
}