/* ─────────────────────────────────────────────
   TEMPO House — Careers
   /careers, /careers/[slug], /careers/department/[department]

   Tokens only. The banner, section and container furniture is reused from
   pages/inner-page.css (page-inner__*) — this file adds only what is specific
   to job cards, the detail layout and the application form.

   TWO STANDING RULES OBSERVED HERE:
   1. No coloured or >=2px single-edge border used as an accent. Cards and
      panels take a full border, and emphasis comes from weight and space.
   2. Every form control sizes from the shared --control-* scale (42px
      desktop, 44px and 16px font on touch), never from per-form padding.
      A form that invents its own height is what made the enquiry form read
      as slim and wrong on a phone.
   ───────────────────────────────────────────── */

/* ── Filter chips ──────────────────────────── */
.page-careers__filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.page-careers__filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.page-careers__filter-chip:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.page-careers__filter-chip--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ── Job grid: REMOVED 2026-09-24 ────────────────────────────────────────
   .page-careers__grid and every .page-careers__card* rule went with the
   JobCard component. Roles are shown as framed artwork on every surface now,
   so nothing rendered these and they were ~90 lines shipped to every visitor
   of the site to style markup that no longer exists. */

/* ── Culture + values ──────────────────────── */
.page-careers__culture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.page-careers__culture-body {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 56ch;
}

.page-careers__value-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-careers__value-index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  /* Not the accent. Measured 3.64:1 against the afternoon background, below
     the 4.5:1 AA threshold at 12px. It is an ornamental counter (01/02/03)
     that carries no information the heading beside it does not, so there is
     nothing to gain from colouring it and a legibility cost to doing so. */
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.page-careers__value-title {
  font-family: var(--font-accent);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.page-careers__value-body {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* ── Empty state ───────────────────────────── */
.page-careers__empty {
  padding: var(--space-10) var(--space-6);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}

.page-careers__empty-title {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.page-careers__empty-body {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin-inline: auto;
}

/* ── Detail page ───────────────────────────── */
.page-careers__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Navigation, not ornament. */
  color: var(--color-text-secondary);
  text-decoration: none;
}

.page-careers__back:hover {
  color: var(--color-accent);
}

.page-careers__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  padding: var(--space-6) 0 0;
  margin: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
}

.page-careers__detail-meta-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* Labels the Department / Type / Location / Salary values beside it. A
     label that is harder to read than the value it names is worse than no
     label. */
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.page-careers__detail-meta-value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.page-careers__detail-meta-value--link {
  color: var(--color-accent);
  /* text-decoration, not a border-bottom. It is an underline, so it should be
     the underline property: it then skips descenders, wraps correctly across
     lines, and cannot be mistaken for the coloured single-edge border the
     standing rule forbids. */
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dim);
  text-underline-offset: 3px;
}

.page-careers__detail-heading {
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.page-careers__detail-summary {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin-bottom: var(--space-6);
}

.page-careers__detail-body {
  max-width: 68ch;
}

/* CMS-authored HTML. Explicit rules for every element the body can contain,
   because globals.css colours a bare <p> with --color-text-secondary and the
   list markers would otherwise inherit nothing. */
.page-careers__prose p,
.page-careers__prose li {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text-secondary);
}

.page-careers__prose p { margin-bottom: var(--space-5); }

.page-careers__prose h2,
.page-careers__prose h3 {
  font-family: var(--font-accent);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: var(--space-8) 0 var(--space-4);
}

.page-careers__prose h2 { font-size: 1.75rem; }
.page-careers__prose h3 { font-size: 1.375rem; }

.page-careers__prose ul,
.page-careers__prose ol {
  margin: 0 0 var(--space-5) var(--space-5);
}

.page-careers__prose li { margin-bottom: var(--space-2); }

.page-careers__prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-careers__prose strong { font-weight: 600; color: var(--color-text-primary); }

/* ── Closed notice ─────────────────────────── */
/* Full border, not a left bar: the standing rule forbids a coloured or thick
   single-edge border as an accent. */
.page-careers__closed {
  padding: var(--space-6);
  border: 1px solid var(--color-accent-dim);
  background: var(--color-surface);
}

.page-careers__closed-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.page-careers__closed-body {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-5);
}

/* ── Application form ──────────────────────── */
.page-careers__form-wrap {
  max-width: 720px;
  margin-top: var(--space-8);
}

.page-careers__form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.page-careers__form-role {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.page-careers__form-role strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.page-careers__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--form-gap);
}

.page-careers__field {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  min-width: 0;
}

.page-careers__field-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --color-text-secondary, NOT --color-text-muted. Measured in the
     after-hours theme, muted (0.38 alpha) gives 3.14:1 on the page
     background, below the 4.5:1 AA threshold for 12px text. A form label is
     an instruction someone has to read to fill the field in, not decoration,
     so it takes the readable token in every theme. */
  color: var(--color-text-secondary);
}

.page-careers__field-hint {
  font-size: var(--text-xs);
  /* Same reasoning as the label: "PDF or Word document, up to 5MB" is the
     rule the upload enforces. Measured 3.14:1 as muted. */
  color: var(--color-text-secondary);
}

/* Height from --control-h, never from padding — see the header note. */
.page-careers__input {
  height: var(--control-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--control-font);
  color: var(--color-text-primary);
  width: 100%;
}

.page-careers__textarea {
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--control-font);
  line-height: 1.7;
  color: var(--color-text-primary);
  width: 100%;
  resize: vertical;
}

.page-careers__input:focus-visible,
.page-careers__textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* File field. The real <input type="file"> is visually hidden but still
   focusable and still in the accessibility tree — it is not replaced by a div
   with a click handler, so keyboard and screen-reader behaviour is native. */
.page-careers__file {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-h);
  min-width: 0;
  cursor: pointer;
}

.page-careers__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-careers__file-button {
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.page-careers__file:hover .page-careers__file-button {
  background: var(--color-text-primary);
  color: var(--color-bg);
}

/* Keyboard focus lands on the hidden input, so the visible ring has to be
   drawn on its sibling or the control appears to have no focus state. */
.page-careers__file-input:focus-visible + .page-careers__file-button {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.page-careers__file-name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Honeypot: removed from layout and from the accessibility tree. Not
   display:none, which some bots detect and skip. */
.page-careers__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.page-careers__turnstile {
  min-height: 65px;
}

.page-careers__submit {
  align-self: flex-start;
  height: var(--control-h);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.page-careers__submit:hover:not(:disabled) { opacity: 0.85; }

.page-careers__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-careers__form-error {
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-careers__form-privacy {
  font-size: var(--text-xs);
  line-height: 1.6;
  /* What we do with an applicant's personal data. Measured 3.14:1 as muted. */
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.page-careers__form-sent {
  padding: var(--space-8);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}

.page-careers__form-sent-title {
  font-family: var(--font-accent);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.page-careers__form-sent-body {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 52ch;
}

/* ── Utility ───────────────────────────────── */
.page-careers__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Phone ─────────────────────────────────── */
@media (max-width: 640px) {
  .page-careers__detail-meta {
    gap: var(--space-5);
  }

  .page-careers__card-link {
    padding: var(--space-5);
  }

  .page-careers__submit {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  /* The button and the filename must not fight over a 360px row. */
  .page-careers__file {
    flex-wrap: wrap;
  }

  /* 44px is the minimum comfortable touch target, the same threshold
     --control-h steps up to on this breakpoint. The chips are 36px on
     desktop, which is fine for a cursor and too small for a thumb; measured
     at 390px before this rule they came out at 36. Font stays at --text-xs:
     the 16px rule exists to stop iOS zooming when an INPUT is focused, and a
     link does not trigger that. */
  .page-careers__filter-chip {
    min-height: 44px;
  }
}

/* ── After Hours: accent-as-TEXT ─────────────────────────────────────────
   In the after-hours theme --color-accent becomes #7000FF, a saturated
   violet. As a BACKGROUND with white on top that is fine (the active filter
   chip and the submit button both measure 6.70:1). As TEXT on the near-black
   page it is not: measured 2.89:1 for the card outlet and the card CTA and
   3.04:1 for the value index, against a 4.5:1 AA requirement at these sizes.

   The site already solves this for its own accent text — time-theme.css
   repaints [class*="__eyebrow"] to the electric yellow #F5E000, which
   measures 15.18:1 — but it targets class-name substrings, and none of these
   elements matches one. Rather than rename them into a substring match (which
   would make the fix invisible and accidental), they are repainted here with
   the same token the theme already defines for exactly this purpose.

   Only text is retargeted. Borders keep the violet: a 1px border carries no
   information and is not held to a text contrast ratio. */
html[data-tempo-time="after-hours"] .page-careers__card-outlet,
html[data-tempo-time="after-hours"] .page-careers__card-cta,
html[data-tempo-time="after-hours"] .page-careers__card-tag--evergreen,
html[data-tempo-time="after-hours"] .page-careers__detail-meta-value--link,
html[data-tempo-time="after-hours"] .page-careers__back:hover,
html[data-tempo-time="after-hours"] .page-careers__prose a,
html[data-tempo-time="after-hours"] .page-careers__form-error {
  color: var(--color-accent-electric, #F5E000);
}

/* The closed-role panel and the error panel both take a full border in the
   accent colour. Kept as a border (not a background) so the standing
   no-single-edge-accent rule still holds, and the border colour is allowed to
   stay violet since no text sits on it. */
html[data-tempo-time="after-hours"] .page-careers__form-error,
html[data-tempo-time="after-hours"] .page-careers__closed {
  border-color: var(--color-accent-dim);
}

/* ── Alternate apply channels ────────────────────────────────────────────
   Sits under the form. Hourly hospitality hiring in Ho Chi Minh City runs on
   Zalo and Messenger; a commis or a part-time barista often has no CV file to
   upload, and requiring one filters people out for reasons unrelated to the
   job. The form stays primary, so this is deliberately quieter than it. */
.page-careers__channels {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.page-careers__channels-lead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.page-careers__channels-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-careers__channel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  text-decoration: none;
  transition: border-color 180ms ease;
}

.page-careers__channel:hover {
  border-color: var(--color-text-primary);
}

.page-careers__channel-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.page-careers__channel-value {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* ── Afternoon: accent needs to be one step darker ───────────────────────
   The afternoon theme sets --color-accent to #C85A28, a bright terracotta on
   a warm cream background. Measured, that is 3.43:1 as text on --color-bg and
   3.12:1 on --color-bg-alt, and white on it as a button background is 4.24:1.
   All three are below the 4.5:1 AA threshold at these sizes.

   --color-accent-hover (#A04220) is the same hue one step darker, it is
   ALREADY defined by the afternoon theme and already used by it for other
   elements, and it measures 5.15:1, 4.68:1 and 6.37:1 respectively. So this
   reaches for the token the theme itself provides rather than inventing a
   colour, and the page keeps its palette.

   Day needs none of this (its accent is #7c3b3b, dark on cream) and
   after-hours has its own block above. */
html[data-tempo-time="afternoon"] .page-careers__card-outlet,
html[data-tempo-time="afternoon"] .page-careers__card-cta,
html[data-tempo-time="afternoon"] .page-careers__card-tag--evergreen,
html[data-tempo-time="afternoon"] .page-careers__detail-meta-value--link,
html[data-tempo-time="afternoon"] .page-careers__back:hover,
html[data-tempo-time="afternoon"] .page-careers__prose a,
html[data-tempo-time="afternoon"] .page-careers__form-error {
  color: var(--color-accent-hover);
}

/* Accent as a BACKGROUND with white on top: same problem, same token. */
html[data-tempo-time="afternoon"] .page-careers__submit,
html[data-tempo-time="afternoon"] .page-careers__filter-chip--active {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Count of open roles, under the section heading. */
.page-careers__role-count {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: calc(var(--space-6) * -1) 0 var(--space-8);
}

/* The success panel takes focus after submitting; it is a container rather
   than a control, so it gets no default ring and needs one of its own. */
.page-careers__form-sent:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* The wall of framed roles lives in components/frame-wall.css, shared by
   every art-frame carousel on the site (app/components/FrameWall.tsx). */