/*
 * screens.css — the two shells and the five page compositions. Tokens only.
 * Mobile-first. Breakpoints 48rem / 64rem are the named literal exception.
 */

/* ---- Public shell -------------------------------------------------------- */
.site-header { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--colour-surface-raised); border-block-end: var(--hairline) solid var(--colour-border-hairline); }
.site-header .container { display: flex; align-items: center; gap: var(--space-4); min-height: calc(var(--control-height) + var(--space-4)); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: var(--logo-height); width: auto; }
.logo-lg img { height: var(--logo-height-lg); }
.site-nav { display: none; }
.site-nav a { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); color: var(--colour-text-secondary); font-weight: var(--weight-strong); text-decoration: none; }
.site-nav a:hover { background: var(--colour-surface-sunken); color: var(--colour-text-primary); }
.site-nav a[aria-current] { color: var(--colour-text-primary); }
.header-end { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.locale-switch { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; color: var(--colour-text-secondary); font-weight: var(--weight-strong); padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); }
.locale-switch:hover { background: var(--colour-surface-sunken); color: var(--colour-text-primary); }
/* Below 48rem the header cannot hold logo + locale switch + sign-in + menu (281px of controls in 343px, in Arabic).
   The locale switch stays — a wrong-locale landing needs one visible tap — and sign-in moves into the overlay nav. */
.site-header .header-signin { display: none; }
@media (min-width: 48rem) {
  .site-nav { display: flex; gap: var(--space-1); }
  .menu-btn { display: none; }
  .site-header .header-signin { display: inline-flex; }
}
main { flex: 1 1 auto; }
.site-footer { margin-block-start: auto; background: var(--colour-surface-raised); border-block-start: var(--hairline) solid var(--colour-border-hairline); padding-block: var(--space-7); }
.footer-grid { display: grid; gap: var(--space-5); }
.footer-grid h2 { font-size: var(--text-2); font-weight: var(--weight-strong); color: var(--colour-text-secondary); margin-block-end: var(--space-2); }
.footer-grid ul { display: grid; gap: var(--space-2); }
.footer-grid a { color: var(--colour-text-secondary); text-decoration: none; }
.footer-grid a:hover { color: var(--colour-text-primary); text-decoration: underline; }
.footer-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--colour-border-hairline); color: var(--colour-text-muted); font-size: var(--text-2); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- App shell (authenticated) — labelled rail on desktop, overlay on mobile */
.app { display: flex; flex: 1 1 auto; min-height: 100vh; }
.app-rail { display: none; }
.app-main { flex: 1 1 auto; min-width: 0; }
.app-bar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--colour-surface-raised); border-block-end: var(--hairline) solid var(--colour-border-hairline); }
.app-bar .container { display: flex; align-items: center; gap: var(--space-4); min-height: calc(var(--control-height) + var(--space-4)); }
.rail-nav { display: grid; gap: var(--space-1); }
.rail-nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-1); color: var(--colour-text-secondary); font-weight: var(--weight-strong); text-decoration: none; border-inline-start: var(--focus-width) solid transparent; }
.rail-nav a:hover { background: var(--colour-surface-sunken); color: var(--colour-text-primary); }
.rail-nav a[aria-current] { background: var(--colour-surface-sunken); color: var(--colour-text-link); border-inline-start-color: var(--colour-action-primary); }
.rail-foot { margin-block-start: auto; display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--colour-border-hairline); }
.rail-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
@media (min-width: 64rem) {
  .app-rail { display: flex; flex-direction: column; gap: var(--space-5); width: var(--rail-width); flex: none; position: sticky; inset-block-start: 0; height: 100vh; padding: var(--space-4); background: var(--colour-surface-raised); border-inline-end: var(--hairline) solid var(--colour-border-hairline); }
  .app-bar { display: none; }
}
.page { padding-block: var(--space-5) var(--space-8); }
.page-head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); }
.page-title { font-size: var(--text-6); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
@media (min-width: 48rem) { .page-title { font-size: var(--text-7); } .page { padding-block: var(--space-6) var(--space-9); } }

/* ---- Sections ------------------------------------------------------------ */
.section { padding-block: var(--space-7); }
.section + .section { border-block-start: var(--hairline) solid var(--colour-border-hairline); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }
.section-title { font-size: var(--text-6); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
.grid-2 { display: grid; gap: var(--space-4); }
.grid-3 { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 1. Homepage --------------------------------------------------------- */
.hero { padding-block: var(--space-7) var(--space-6); }
.hero-title { font-size: var(--text-6); font-weight: var(--weight-strong); line-height: var(--leading-heading); max-width: var(--measure-prose); }
.hero-lead { font-size: var(--text-4); color: var(--colour-text-secondary); max-width: var(--measure-prose); margin-block-start: var(--space-3); }
.search-panel { margin-block-start: var(--space-5); display: grid; gap: var(--space-4); }
.search-row { display: grid; gap: var(--space-3); }
.hero-note { font-size: var(--text-2); color: var(--colour-text-muted); }
@media (min-width: 48rem) {
  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero-title { font-size: var(--text-8); }
  .search-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto; align-items: end; }
  .search-panel .segmented { align-self: start; }
}
.steps { display: grid; gap: var(--space-5); }
.step-card { display: grid; gap: var(--space-2); align-content: start; }
.step-n { font-size: var(--text-6); font-weight: var(--weight-strong); line-height: var(--leading-heading); color: var(--colour-text-link); }
.step-title { font-size: var(--text-4); font-weight: var(--weight-strong); line-height: var(--leading-body); }
.step-body { color: var(--colour-text-secondary); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.split { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 48rem) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }

/* ---- 2. Jobs browse ------------------------------------------------------ */
.filter-bar { display: none; gap: var(--space-3); align-items: end; }
.filter-mobile { display: grid; gap: var(--space-3); }
@media (min-width: 64rem) {
  .filter-bar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .filter-mobile { display: none; }
}
.result-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); }
.result-line .field { flex-direction: row; align-items: center; gap: var(--space-2); }
.result-line .select { min-height: var(--control-height-sm); width: auto; }
.browse { display: grid; gap: var(--space-6); align-items: start; }
.browse-list { display: grid; gap: var(--space-3); }
.browse-rail { display: none; }
@media (min-width: 64rem) {
  .browse { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
  .browse-rail { display: block; position: sticky; inset-block-start: calc(var(--control-height) + var(--space-6)); }
}
.rail-links { display: grid; gap: var(--space-2); }
.rail-links a { color: var(--colour-text-secondary); text-decoration: none; padding-block: var(--space-1); }
.rail-links a:hover { color: var(--colour-text-primary); text-decoration: underline; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-block: var(--space-5); }

/* ---- 3. Job detail ------------------------------------------------------- */
.job-head { display: grid; gap: var(--space-4); padding-block: var(--space-5) var(--space-6); }
.job-head-title { font-size: var(--text-6); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
.job-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.job-head-actions .btn { flex: 1 1 auto; }
@media (min-width: 48rem) { .job-head-title { font-size: var(--text-7); } .job-head-actions .btn { flex: 0 0 auto; } }
.job-layout { display: grid; gap: var(--space-7); align-items: start; }
.job-aside { display: none; }
@media (min-width: 64rem) { .job-layout { grid-template-columns: minmax(0, 1fr) var(--rail-width); } .job-aside { position: sticky; inset-block-start: calc(var(--control-height) + var(--space-6)); display: grid; gap: var(--space-4); } }
.job-section { padding-block: var(--space-6); }
.job-section + .job-section { border-block-start: var(--hairline) solid var(--colour-border-hairline); }
.job-section h2 { font-size: var(--text-5); font-weight: var(--weight-strong); line-height: var(--leading-heading); margin-block-end: var(--space-4); }
.sticky-pay { display: grid; }
.sticky-pay .job-pay { font-size: var(--text-4); }

/* ---- 4 & 5. Forms in the app shell -------------------------------------- */
.form-page { max-width: var(--measure-prose); display: grid; gap: var(--space-5); }
.form-section { display: grid; gap: var(--space-4); padding-block: var(--space-5); }
.form-section + .form-section { border-block-start: var(--hairline) solid var(--colour-border-hairline); }
.form-section > h2, .form-section > legend { font-size: var(--text-5); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
.review { display: grid; gap: var(--space-3); }
.review dt { font-size: var(--text-2); color: var(--colour-text-muted); }
.review dd { font-weight: var(--weight-strong); }
.review-row { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--colour-border-hairline); }
.success { display: grid; gap: var(--space-5); max-width: var(--measure-prose); }
.success-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.success-actions .btn { flex: 1 1 auto; }
@media (min-width: 48rem) { .success-actions .btn { flex: 0 0 auto; } }
.question { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--hairline) solid var(--colour-border-hairline); border-radius: var(--radius-2); background: var(--colour-surface-raised); }
.question-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* ---- Skip link: hidden until focused ------------------------------------- */
.skip { position: absolute; inset-inline-start: var(--space-2); inset-block-start: var(--space-2); z-index: var(--z-toast); padding: var(--space-2) var(--space-3); background: var(--colour-surface-raised); border: var(--line-control) solid var(--colour-border-control); border-radius: var(--radius-1); transform: translateY(-200%); }
.skip:focus { transform: none; }