:root {
  --navy: #071a2f;
  --navy-soft: #102844;
  --navy-deep: #04101c;
  --gold: #c9a227;
  --gold-soft: #e6c766;
  --white: #ffffff;
  --light: #f5f3ee;
  --text: #1f2933;
  --text-muted: #55636f;
  --hairline: rgba(7, 26, 47, 0.1);
  --hairline-dark: rgba(255, 255, 255, 0.14);
  --radius: 10px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--light);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* <code> is used inline across the legal pages for file paths and
   technical terms (e.g. docs/compliance/LEGAL_REVIEW_CHECKLIST.md) -
   a single unbroken token with no spaces for the browser's normal
   word-wrap to break at. Without this, confirmed live: it silently
   pushed the page wider on every narrow viewport rather than wrapping,
   even though the visible text still LOOKED like it fit (the overflow
   was the invisible few extra pixels of the unbroken token, not
   visible clipped text) - exactly the reported "wobbles even though
   text appears to fit" symptom. Site-wide, not page-scoped: any future
   <code> usage anywhere gets the same protection automatically. */
code {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  width: min(1160px, 92%);
  max-width: 100%;
  margin: 0 auto;
}
.narrow { width: min(720px, 92%); }

/* ==================================================
   HEADER - stacked mobile layout from the outset (not an
   afterthought): a wide logo lockup and a 44px tap-target
   toggle cannot share one row on a narrow phone without one
   of them shrinking below a usable/legible size.
================================================== */
.site-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 12px;
}
/* --brand-w is the ONE shared width the wordmark and tagline both
   measure against, so their visual edges align exactly rather than
   two independently-sized elements coincidentally lining up. Fixed
   px (not vw-clamped) deliberately: a fluid clamp would desync the
   two at in-between viewport widths, since the tagline's own natural
   text width doesn't scale the same way the image does. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  --brand-w: 213px;
}
/* The source JPG bakes in its own tiny, illegible tagline row (see
   0808b039's measurement note above) - rather than trying to enlarge
   that raster text, this crops it out entirely (keeping only the
   LAURUS / GROUP RECRUITMENT wordmark) and the real tagline below is
   genuine, accessible, legible HTML text. The crop height is a fixed
   proportion of the rendered width (200/600 of the image's own
   600x285 pixels - measured to end just after the ••• divider and
   well before the baked tagline row starts). */
.brand-mark-crop {
  width: var(--brand-w);
  height: calc(var(--brand-w) * 200 / 600);
  overflow: hidden;
  display: block;
}
.brand-mark {
  display: block;
  width: 100%;
  height: auto;
}
/* Width matches the wordmark's own VISIBLE content box, not its full
   (padded) image box: pixel-measured, the visible LAURUS/GROUP
   RECRUITMENT content spans x:17-579 of the 600px-wide source (a
   left-heavier crop, 17px vs 21px) - 562/600 of --brand-w is that
   same visible span, so the tagline's box is exactly as wide as what
   the eye actually sees above it, not the invisible navy padding
   either side of it. letter-spacing tightened from the previous 1.2px
   specifically so --brand-w only needed a modest increase (193px to
   232px on desktop) rather than a large one to fit the tagline. */
.brand-tagline {
  width: calc(var(--brand-w) * 562 / 600);
  margin: 4px auto 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
nav#site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--navy-soft);
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  transition: max-height 0.25s ease, visibility 0.25s ease;
}
nav#site-nav.is-open { max-height: 360px; visibility: visible; }
nav#site-nav a {
  padding: 15px 6%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
nav#site-nav a:hover { color: var(--gold-soft); }

.nav-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Compact mobile header - the full branded lockup (logo + tagline)
   shows at initial load and after any deliberate top-of-page
   navigation (main.js's own scroll listener removes .is-compact
   whenever scrollY returns to 0, e.g. after ScrollFocus.toTop()), but
   collapses to a small logo + the menu control once the visitor
   actually scrolls - the full ~166px-tall stacked lockup was eating a
   disproportionate share of a short mobile viewport for the entire
   session otherwise. Desktop (min-width: 800px below) never gets an
   .is-compact rule at all, so this has zero effect there regardless of
   scroll position - the row layout at that width is already compact
   enough that shrinking it further isn't "clearly beneficial". */
@media (max-width: 799px) {
  .site-header.is-compact .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 12px;
  }
  .site-header.is-compact .brand { --brand-w: 110px; }
  .site-header.is-compact .brand-tagline { display: none; }
  .site-header.is-compact .nav-toggle { margin: 0; }
}

@media (min-width: 800px) {
  .site-header { position: sticky; }
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    min-height: 114px;
  }
  /* justify-content: flex-start keeps the (now column-stacked) brand
     lockup left-aligned instead of centred, matching the row layout;
     align-items: flex-start left-aligns the crop + tagline within it. */
  .brand { justify-content: flex-start; align-items: flex-start; --brand-w: 232px; }
  .brand-tagline {
    text-align: left;
    font-size: 12px;
    margin-left: calc(var(--brand-w) * 17 / 600); /* matches the wordmark's own measured left padding exactly */
  }
  .nav-toggle { display: none; }
  nav#site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    max-height: none;
    visibility: visible;
    overflow: visible;
    background: none;
    border-bottom: none;
  }
  nav#site-nav a {
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    font-size: 0.78rem;
  }
  nav#site-nav a:hover { border-bottom-color: var(--gold); }
}

/* ==================================================
   HERO
================================================== */
.hero {
  background: linear-gradient(rgba(7,26,47,0.88), rgba(7,26,47,0.88)), radial-gradient(circle at top right, #26476a, var(--navy));
  color: var(--white);
  padding: 56px 0 60px;
}
.hero-content { max-width: 760px; }
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  font-weight: 700;
}
h1 {
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1.1;
  margin: 14px 0 18px;
  letter-spacing: -1px;
  font-weight: 800;
  overflow-wrap: break-word;
}
.hero-text {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.7;
  color: #d8e2f0;
  margin: 0 0 28px;
}

.button {
  display: inline-block;
  margin: 0 12px 12px 0;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.button.primary {
  background: var(--gold);
  color: var(--navy);
}
.button.primary:hover { background: var(--gold-soft); transform: translateY(-1px); }
/* Secondary is used almost everywhere on a WHITE/light card or panel
   background (.portal-auth-panel, .portal-card) - a semi-transparent
   white border with white text there was genuinely near-invisible
   (confirmed visually: "Continue with Google" was barely readable on
   the Staff Sign In panel). Solid, high-contrast navy is the correct
   default; the one genuinely dark context (the signed-in LOS
   dashboard) gets its own override below, not the other way round,
   since it's the minority case. */
.button.secondary {
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
}
.button.secondary:hover { background: var(--navy); color: var(--white); }
.los-admin-page .button.secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: transparent;
}
.los-admin-page .button.secondary:hover { background: transparent; border-color: var(--gold); color: var(--gold-soft); }

/* Real disabled buttons (the `disabled` attribute, e.g. "Submit profile
   for review" before the essential sections are done) previously had
   NO dedicated style at all - only the browser's own inconsistent
   default dimming. This makes "can't click this yet" visually obvious
   everywhere, on top of the existing text/aria-describedby explanation
   pattern for WHY. */
.button:disabled,
.button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* A clear, distinct look for destructive actions (Withdraw application,
   Withdraw sharing authorisation, account closure) - never the same
   gold primary or plain secondary treatment as a routine action. */
.button.destructive {
  border: 1px solid #a3312c;
  color: #a3312c;
  background: transparent;
}
.button.destructive:hover { background: #a3312c; color: var(--white); }
.los-admin-page .button.destructive { color: #ff8f87; border-color: #a3312c; }
.los-admin-page .button.destructive:hover { background: #a3312c; color: var(--white); }

/* ~44x44px minimum touch target on mobile (WCAG 2.5.5 / iOS HIG
   guidance) - .button's desktop padding already clears this in most
   cases, but small icon-only or short-label buttons didn't. */
@media (max-width: 480px) {
  .button {
    min-height: 44px;
    min-width: 44px;
    padding: 13px 22px;
  }
  .link-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Loading state: applied via JS (button.classList.add("is-loading"))
   alongside `disabled` while an async save/submit is in flight - never
   text alone, so a colour-blind or low-vision user still gets a
   distinct visual (reduced opacity + a spinner glyph via ::after),
   respecting reduced-motion. */
.button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: inherit;
  animation: button-spin 0.7s linear infinite;
}
.button.primary.is-loading::after { border-color: var(--navy); border-top-color: transparent; }
.button.secondary.is-loading::after { border-color: var(--navy); border-top-color: transparent; }
.los-admin-page .button.secondary.is-loading::after { border-color: var(--white); border-top-color: transparent; }
@keyframes button-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .button.is-loading::after { animation: none; }
  .button, .button.primary:hover { transition: none; }
}

/* `.button { display: inline-block }` above has the same specificity as
   the browser's default `[hidden] { display: none }` rule, and author
   styles win that tie regardless of source order - so a hidden button
   using this class stayed visible (found via the candidate portal's
   submit-for-review button not actually hiding after submission).
   Restores the attribute's normal effect for every current and future
   hidden button on the site. */
.button[hidden] { display: none; }

/* Consistent keyboard focus treatment - .route-card already had its own
   custom focus-visible ring; these elements previously fell back to the
   browser default only. Matches the same gold accent, doesn't change
   anything for mouse/touch users. */
.button:focus-visible,
nav#site-nav a:focus-visible,
.contact-block a:focus-visible,
.footer a:focus-visible,
.los-back-link:focus-visible,
.los-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==================================================
   SECTION BASICS
================================================== */
.section { padding: 48px 0; }
.eyebrow + h2 { margin-top: 6px; }
h2 {
  color: var(--navy);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 6px 0 0;
  overflow-wrap: break-word;
}
.dark h2 { color: var(--gold-soft); }
.section-lead {
  max-width: 620px;
  color: var(--text-muted);
  font-size: 1rem;
  margin: 14px 0 0;
}
.dark .section-lead { color: #b9c6d4; }
.dark p { color: #c7d3e0; }
.narrow p { max-width: 640px; line-height: 1.75; }

.dark {
  background: var(--navy);
  color: var(--white);
}

.section-centered { text-align: center; }
.section-centered .section-lead,
.section-centered p { margin-left: auto; margin-right: auto; }
.section-centered .section-actions { margin-top: 26px; }

/* ==================================================
   HOMEPAGE - TWO ROUTES (candidate / employer)
================================================== */
.route-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
.route-card {
  display: block;
  min-width: 0;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(201, 162, 39, 0.25);
}
.route-card:hover,
.route-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 39, 0.55);
}
.route-card .eyebrow { margin: 0 0 10px; }
.route-card h3 {
  color: var(--white);
  font-size: 1.4rem;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.route-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
.route-card-cta {
  display: block;
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 700px) {
  .route-choice { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ==================================================
   VALUE LISTS (Candidates / Employers pages)
================================================== */
.value-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--hairline-dark);
}
.dark .value-list { border-top-color: var(--hairline-dark); }
.value-item {
  padding: 22px 0 22px;
  border-bottom: 1px solid var(--hairline-dark);
}
.value-item h3 {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.value-item p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.dark .value-item h3 { color: var(--white); }
.dark .value-item p { color: rgba(255, 255, 255, 0.72); }

@media (min-width: 700px) {
  .value-list { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline-dark); }
  .value-item {
    padding: 24px 22px 8px 0;
    border-bottom: none;
    border-left: 1px solid var(--hairline-dark);
    padding-left: 22px;
  }
  .value-item:first-child { border-left: none; padding-left: 0; }
}

/* ==================================================
   PORTAL COMING SOON
================================================== */
.portal-panel {
  background: var(--navy);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
  margin-top: 28px;
}
.portal-panel h1 { color: var(--white); }
.portal-panel p {
  max-width: 520px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}
.portal-feature-list {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  max-width: 420px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.portal-feature-list li {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
}
.portal-panel .button { margin-top: 26px; }

/* ==================================================
   MISC / FOOTER
================================================== */
.contact-block {
  margin-top: 28px;
  display: grid;
  gap: 4px;
}
.contact-block a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.dark .contact-block a { color: var(--gold-soft); }
.contact-block a:hover { text-decoration: underline; }

.footer {
  background: var(--navy-soft);
  color: var(--white);
  padding: 30px 0 26px;
}
.footer-group {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.footer p {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.footer a:hover { color: var(--gold-soft); }
.footer-parent {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
}
.footer-parent a { color: var(--gold-soft); font-weight: 700; }
.footer-legal {
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}
.footer-legal a { color: rgba(255, 255, 255, 0.82); }
.small { color: var(--gold); font-size: 0.78rem; }

@media (max-width: 480px) {
  .hero-text { font-size: 0.95rem; }
  h2 { font-size: 1.5rem; }
}

/* ==================================================
   LOS RECRUITMENT - internal operational dashboard shell.
   Mirrors the visual language already established by the Podium
   Control Centre (los-admin.html, podium-vehicle-solutions-website
   repo) - same structure/naming, but built entirely on this
   project's own navy/gold/cream tokens and with zero dependency on
   Podium's code, styles or data. Not linked from the public nav.
================================================== */
.los-admin-page {
  background:
    radial-gradient(circle at 16% 0%, rgba(31, 88, 176, 0.16), transparent 35%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  overflow-x: hidden;
  padding-bottom: 40px;
}

.los-admin-hero,
.los-section {
  padding: 22px 6%;
}

.los-admin-hero .container,
.los-section .container {
  max-width: 1180px;
  margin: 0 auto;
}

.los-admin-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.los-prototype-badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.12);
  color: var(--gold-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.los-admin-page h1,
.los-hero-heading {
  color: var(--white);
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 6.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.los-admin-intro {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 640px;
}

.los-back-link {
  display: inline-block;
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.los-back-link:hover { color: var(--gold); }

.los-section h2 {
  color: var(--white);
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 4.8vw, 1.7rem);
}

.los-lite-panel-header { margin-bottom: 14px; }

.los-demo-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Tab navigation between dashboard views - horizontally scrollable so
   six tabs stay usable on a 390px screen without wrapping awkwardly. */
.los-tab-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.los-tab-nav-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 6%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.los-tab-nav-inner::-webkit-scrollbar { display: none; }

.los-tab {
  appearance: none;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.los-tab:hover { color: var(--white); }
.los-tab[aria-selected="true"] {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.4);
  color: var(--gold-soft);
}

.los-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.los-summary-card,
.los-enquiry-table-wrap {
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.los-summary-card { padding: 14px; }

.los-summary-card span {
  display: block;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.los-summary-card strong {
  display: block;
  margin-top: 4px;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1.1;
}

.los-summary-card small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
}

.los-enquiry-table-wrap { overflow-x: auto; }

.los-enquiry-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.los-enquiry-table th,
.los-enquiry-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.los-enquiry-table th {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.los-enquiry-table td {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}

.los-enquiry-table tr:last-child td { border-bottom: 0; }

.los-empty-row td {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  white-space: normal;
}

/* Application pipeline stepper - purely structural for V1, every stage
   reads 0 since there is no backend/data yet. */
.los-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 18px 0 8px;
}

.los-pipeline-stage {
  flex: 1 1 120px;
  padding: 14px 12px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  text-align: center;
}

.los-pipeline-stage span {
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.los-pipeline-stage strong {
  display: block;
  margin-top: 6px;
  color: var(--white);
  font-size: 1.3rem;
}

.los-pipeline-arrow {
  display: none;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.1rem;
}

.los-empty-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 700px) {
  .los-summary-grid { grid-template-columns: repeat(3, 1fr); }
  .los-pipeline-arrow { display: flex; }
}

@media (min-width: 1024px) {
  .los-summary-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ==================================================
   EMPLOYER PORTAL - reuses the .los-* dashboard components above
   (KPI cards, data tables, prototype badge) rather than a second
   dashboard system. These two rules are the only genuinely new
   pieces: a read-only field list (Company Profile has no form yet)
   and a visibly inert control for actions with no safe fallback.
================================================== */
.employer-field-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  overflow: hidden;
}

.employer-field-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.employer-field-row:last-child { border-bottom: 0; }

.employer-field-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.86rem;
  font-weight: 700;
}

.employer-field-value {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.86rem;
  font-style: italic;
  text-align: right;
}

/* The longest rows (e.g. "Company summary" / "Not yet provided") don't
   both fit on one line at 390px - measured ~341px needed vs ~311px
   available. Stack instead of letting them squeeze/wrap unevenly. */
@media (max-width: 480px) {
  .employer-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .employer-field-value { text-align: left; }
}

.button.disabled {
  display: inline-block;
  margin: 0 12px 12px 0;
  padding: 14px 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: not-allowed;
  user-select: none;
}

.employer-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.employer-action-card {
  padding: 16px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

.employer-action-card h4 {
  color: var(--white);
  font-size: 0.96rem;
  margin: 0 0 6px;
}

.employer-action-card p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.employer-action-card .button,
.employer-action-card .button.disabled {
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-size: 0.76rem;
}

.employer-soon-tag {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .employer-action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .employer-action-grid { grid-template-columns: repeat(3, 1fr); }
}