/* Layout: header band, then a filter column beside the result list (stacks under 900px).
   Colors, spacing, radii, shadows and the type classes (.display .heading .title .body .label .caption)
   come from tokens.css; the sizes below are layout constants of this site, not design tokens. */
:root {
  --container: 1200px;
  --logo: 56px;
  --logo-sm: 48px;
  --logo-lg: 88px;
  --control: 44px; /* Minimum touch target. */
  --hairline: 1px;
  /* Update history (user's choice 2026-10-25): removed text red and faded, added text green. */
  --diff-removed: #b42318;      /* 6:1 on --diff-removed-soft, 4.8:1 faded to 0.85. */
  --diff-removed-soft: #fef3f2;
  --diff-added: #067647;        /* 5.4:1 on --diff-added-soft. */
  --diff-added-soft: #ecfdf3;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
body, .prose { font-size: 15px; line-height: 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Transparent outline keeps focus visible in forced-colors mode; the ring follows each element's radius. */
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
.caption { color: var(--ink-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px));
}

/* Header and footer */
.site-header { background: var(--surface-raised); border-bottom: var(--hairline) solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; min-height: 64px; gap: var(--space-2) var(--space-6); }
.brand { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: var(--space-6); }
.site-nav a, .account a:not(.button) { color: var(--ink); font-weight: 500; }
.site-nav a[aria-current="page"], .account a[aria-current="page"] { color: var(--accent); }
.account { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.account__email { color: var(--ink-muted); }
.site-main { padding-block: var(--space-6) var(--space-10); display: grid; gap: var(--space-6); }
.site-footer { border-top: var(--hairline) solid var(--line); padding-block: var(--space-6); color: var(--ink-muted); }

/* Buttons and fields */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control); padding: 0 var(--space-4);
  border: var(--hairline) solid transparent; border-radius: var(--radius-md);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.button:hover { text-decoration: none; }
.button--primary { background: var(--accent); color: var(--on-accent); }
.button--primary:hover { filter: brightness(0.92); }
.button--secondary { background: var(--surface-raised); color: var(--accent); border-color: var(--line-strong); }
/* A saved job: accent on accent-soft like an active filter; the label says what pressing does. */
.button--saved { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
input[type="search"], input[type="number"], input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%; min-height: var(--control); padding: 0 var(--space-4);
  border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink); font: inherit;
}
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.field-error { color: var(--review); }
.field { display: grid; gap: var(--space-2); }
.field__help ul { list-style: disc; padding-left: var(--space-4); }
.form-error, .message--error { color: var(--review); background: var(--review-soft); }

/* Feedback after an action, account pages and saved items */
.messages { display: grid; gap: var(--space-2); }
.message, .form-error, .notice { padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.message--success { color: var(--ink); background: var(--accent-soft); }
.notice { color: var(--ink-muted); background: var(--surface-raised); border: var(--hairline) solid var(--line); }
.page-head { display: grid; gap: var(--space-2); }
.auth { width: 100%; max-width: 440px; margin-inline: auto; }
.auth__form { display: grid; gap: var(--space-4); }
.auth > * + * { margin-top: var(--space-4); }
.auth__divider { border: 0; border-top: var(--hairline) solid var(--line); }
.auth__or { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; border-top: var(--hairline) solid var(--line); }
.auth__provider .button, .auth__form .button { width: 100%; }
.auth__google { color: var(--ink); }
.auth__actions { display: grid; gap: var(--space-2); }
/* Resend/cancel forms on the code page hold only hidden fields; they take no room. */
.auth > form:not([class]) { margin: 0; }
.saved-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start;
  padding: var(--space-4);
  background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
}
.saved-search__body { display: grid; gap: var(--space-2); min-width: 0; }
.saved-search__name { color: var(--ink); }
.saved-search__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Search */
.search-hero {
  display: grid; gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
}
.search-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }

.listing { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.filters {
  flex: 1 1 260px; max-width: 300px;
  display: grid; gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
}
.filters__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.filter { display: grid; gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.filter__title { padding: 0; font-weight: 600; }
.filter__more summary { cursor: pointer; color: var(--accent); min-height: var(--control); display: flex; align-items: center; }
.filter__more[open] { display: grid; gap: var(--space-2); }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control); cursor: pointer; }

.results { flex: 999 1 560px; min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
/* Desktop: the card list scrolls on its own; on phones the page scrolls normally (see the 900px query). */
.results__list {
  display: grid; gap: var(--space-4); align-content: start;
  max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
  padding-right: var(--space-2); scrollbar-gutter: stable;
}
.results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
/* "Lưu bộ lọc" opens a small menu; it is a plain <details>, so it works without JavaScript. */
.save-search { position: relative; }
.save-search summary { list-style: none; }
.save-search summary::-webkit-details-marker { display: none; }
.save-search__form {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 1;
  width: 360px; max-width: calc(100vw - 2 * var(--space-4));
  display: grid; gap: var(--space-2); padding: var(--space-4);
  background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

/* Job card */
.job-card {
  display: grid; grid-template-columns: var(--logo) minmax(0, 1fr) auto; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md);
}
.job-card:hover { box-shadow: var(--shadow-raised); }
.job-card__body { display: grid; gap: var(--space-2); min-width: 0; }
.job-card__title { color: var(--ink); }
.job-card__company { color: var(--ink-muted); }
.job-card__aside { display: grid; gap: var(--space-2); justify-items: end; align-content: start; text-align: right; }

.logo { width: var(--logo); height: var(--logo); border-radius: var(--radius-md); border: var(--hairline) solid var(--line); object-fit: contain; background: var(--surface-raised); }
.logo--lg { width: var(--logo-lg); height: var(--logo-lg); }
.logo--initial { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 22px; border: 0; }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--surface); border: var(--hairline) solid var(--line); }
.chip--more { color: var(--ink-muted); }
.source { padding: 2px var(--space-2); border-radius: var(--radius-full); border: var(--hairline) solid var(--line-strong); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; }

/* Salary: numbers or one muted line (design system README: Hiển thị lương). */
.salary { justify-self: start; font-weight: 600; font-variant-numeric: tabular-nums; }
.salary--amount { color: var(--accent); }
.salary--none { color: var(--ink-muted); font-weight: 500; }
.salary__note { color: var(--ink-muted); font-weight: 500; }

.empty { padding: var(--space-10) var(--space-6); text-align: center; background: var(--surface-raised); border: var(--hairline) dashed var(--line-strong); border-radius: var(--radius-md); display: grid; gap: var(--space-2); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding-top: var(--space-4); }

/* Detail and company pages */
.panel { padding: var(--space-6); background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); display: grid; gap: var(--space-4); }
.detail { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.detail__main { flex: 999 1 560px; min-width: 0; display: grid; gap: var(--space-6); }
.detail__aside { flex: 1 1 300px; max-width: 360px; display: grid; gap: var(--space-6); }
.detail__header, .company-header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.detail__header > div, .company-header > div { display: grid; gap: var(--space-2); min-width: 0; }
.prose { white-space: pre-line; max-width: 72ch; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; }
.company-mini { grid-template-columns: var(--logo) minmax(0, 1fr); align-items: center; }
.company-mini__name { color: var(--ink); }

/* Saved jobs the source changed: accent like a saved button; the words say what changed, color only repeats it. */
.badge { display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); vertical-align: middle;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-full); }
.job-card--updated { border-left: 3px solid var(--accent); }
/* Expired or removed saved jobs: readable but visibly out of the race. */
.job-card--closed { background: var(--surface); }
.job-card--closed .job-card__title { color: var(--ink-muted); }
.notice--closed { color: var(--ink); }
.count { display: inline-block; min-width: 1.5em; padding: 0 calc(var(--space-2) / 2); text-align: center;
  color: var(--on-accent); background: var(--accent); border-radius: var(--radius-full); }
.revisions { display: grid; gap: var(--space-4); }
.revision { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-md); }
.revision--new { border-left: 3px solid var(--accent); }
.revision__changes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.revision__changes dt { color: var(--ink-muted); }
.revision__changes dd { margin: 0; display: grid; gap: calc(var(--space-2) / 2); overflow-wrap: anywhere; }
.revision__changes p { margin: 0; }
.revision__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.revision del, .revision ins { text-decoration: none; padding: 0 calc(var(--space-2) / 2); border-radius: var(--radius-sm); }
.revision del { color: var(--diff-removed); background: var(--diff-removed-soft); opacity: 0.85; }
.revision ins { color: var(--diff-added); background: var(--diff-added-soft); }
/* The sign repeats the color for readers who cannot tell red from green; screen readers hear "Bỏ"/"Thêm". */
.diff { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--space-2) / 2); }
.diff__line { padding: 0 var(--space-2); border-left: 3px solid; }
.diff__line--removed { border-color: var(--diff-removed); background: var(--diff-removed-soft); }
.diff__line--added { border-color: var(--diff-added); background: var(--diff-added-soft); }
.diff__line del, .diff__line ins { padding: 0; background: none; }
.diff__line--removed del::before { content: "− " / ""; }
.diff__line--added ins::before { content: "+ " / ""; }

/* Custom properties cannot be used in media queries: 900px matches the two-column breakpoint. */
@media (max-width: 900px) {
  .filters, .detail__aside { max-width: none; }
  .results__list { max-height: none; overflow: visible; padding-right: 0; }
  .search-bar { grid-template-columns: 1fr; }
  .job-card { grid-template-columns: var(--logo-sm) minmax(0, 1fr); }
  .revision__changes { grid-template-columns: 1fr; }
  .job-card__aside { grid-column: 2; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; align-items: center; }
  .logo { width: var(--logo-sm); height: var(--logo-sm); }
  .logo--lg { width: var(--logo-lg); height: var(--logo-lg); }
}

.search-autocomplete { position: relative; min-width: 0; }
.search-autocomplete input { width: 100%; }
.search-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 360px; overflow-y: auto; padding: 8px; margin: 4px 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
.search-suggestions li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; cursor: pointer; overflow-wrap: anywhere; }
.search-suggestions li:hover, .search-suggestions li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.search-suggestions small { color: var(--ink-muted); flex-shrink: 0; }