/* Ciwei design system. Foundations → shared controls → task components → responsive states.
   Vendor/Tailwind CSS loads first; this is the single source of component appearance. */
:root {
  color-scheme: light;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --line-body: 1.6;
  --line-heading: 1.3;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --control-height: 2.75rem;
  --header-height: 3.75rem;
  --page-width: 80rem;
  --page-gutter: 2rem;
  --background-color: #ffffff;
  --background-color-2: #f4f6f4;
  --background-color-3: #f8faf8;
  --foreground: #191d1a;
  --text-color: #343b36;
  --secondary-text-color: #626b64;
  --muted-foreground: var(--secondary-text-color);
  --border-color: #e1e6e2;
  --border-color-2: #bcc5be;
  --input-border: #858f88;
  --primary: #202722;
  --primary-foreground: #ffffff;
  --primary-hover: #354139;
  --accent: var(--background-color-2);
  --keyword-button-on-bg-color: #edf7ef;
  --keyword-button-on-text-color: #166534;
  --selected-border: #92b99e;
  --focus-color: #166534;
  --error-text: #b42318;
  --error-bg: #fef3f2;
  --skeleton-base: #e6ebe7;
  --skeleton-shine: #f4f6f4;
  --toast-bg: #202722;
  --toast-text: #ffffff;
  --toast-error-bg: #a3281c;
  --overlay-bg-color: rgba(14, 23, 17, 0.38);
  --shadow-popover: 0 8px 28px rgba(20, 36, 25, 0.12);
  --shadow-dialog: 0 16px 64px rgba(20, 36, 25, 0.16);
  --motion-fast: 150ms;
  --motion-enter: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme='dark'] {
  color-scheme: dark;
  --background-color: #181c19;
  --background-color-2: #232924;
  --background-color-3: #1e241f;
  --foreground: #f1f5f2;
  --text-color: #d3dbd5;
  --secondary-text-color: #acb7af;
  --border-color: #343d36;
  --border-color-2: #566159;
  --input-border: #78877d;
  --primary: #edf3ee;
  --primary-foreground: #202722;
  --primary-hover: #d6e3d9;
  --keyword-button-on-bg-color: #203d2a;
  --keyword-button-on-text-color: #b0e4be;
  --selected-border: #5d8e6c;
  --focus-color: #b0e4be;
  --error-text: #ffb4ab;
  --error-bg: #462820;
  --skeleton-base: #29332b;
  --skeleton-shine: #39433b;
  --toast-bg: #edf3ee;
  --toast-text: #202722;
  --toast-error-bg: #7f241a;
  --overlay-bg-color: rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 8px 28px rgba(0, 0, 0, 0.3);
  --shadow-dialog: 0 16px 64px rgba(0, 0, 0, 0.4);
}

/* Foundations and shared states. */
html {
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}
body {
  margin: 0;
  padding-top: var(--header-height);
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--line-body);
  background: var(--background-color);
  color: var(--text-color);
  overflow-wrap: anywhere;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled,
select:disabled {
  opacity: 0.5;
  cursor: default;
}
[hidden],
.hidden {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}
input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--keyword-button-on-text-color);
  flex-shrink: 0;
}
::selection {
  background: var(--keyword-button-on-bg-color);
  color: var(--keyword-button-on-text-color);
}
:is(
  .assistant-primary,
  .assistant-secondary,
  .assistant-text-btn,
  .filter-btn,
  .apply-button,
  .applied-toggle,
  .error-btn,
  .consent-btn,
  .applied-archive-remove,
  .clear-filters-btn
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}
:is(.assistant-primary, .error-btn-primary) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
:is(.assistant-primary, .error-btn-primary):hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
:is(
  .assistant-secondary,
  .filter-btn,
  .apply-button,
  .applied-toggle,
  .error-btn-secondary,
  .consent-btn,
  .applied-archive-remove
) {
  background: transparent;
  border-color: var(--border-color-2);
  color: var(--text-color);
}
:is(
    .assistant-secondary,
    .filter-btn,
    .apply-button,
    .applied-toggle,
    .error-btn-secondary,
    .consent-btn,
    .applied-archive-remove
  ):hover:not(:disabled) {
  background: var(--background-color-2);
  border-color: var(--input-border);
}
:is(.assistant-text-btn, .clear-filters-btn) {
  background: transparent;
  color: var(--secondary-text-color);
}
:is(.assistant-text-btn, .clear-filters-btn):hover {
  background: var(--background-color-2);
  color: var(--foreground);
}
:is(.filter-btn[aria-pressed='true'], .filter-btn.is-active, .applied-toggle[aria-pressed='true']) {
  background: var(--keyword-button-on-bg-color);
  border-color: var(--selected-border);
  color: var(--keyword-button-on-text-color);
}
:is(.filter-btn[aria-pressed='true'], .filter-btn.is-active, .applied-toggle[aria-pressed='true']):hover {
  background: var(--keyword-button-on-bg-color);
  border-color: var(--keyword-button-on-text-color);
}
:is(.assistant-fields input:not([type='checkbox']), .assistant-fields select) {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--background-color);
  color: var(--foreground);
  font-size: var(--text-base);
  line-height: 1.5;
}
:is(input, textarea)::placeholder {
  color: var(--secondary-text-color);
  opacity: 1;
}
:is(.dropdown, .search-autocomplete, .lang-switcher-dropdown) {
  background: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: 60;
}
:is(.dropdown, .search-autocomplete, .assistant-location-options, .assistant-preferences-body, .detail-content) {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color-2) transparent;
}

/* Header, page frame and task navigation. */
header {
  height: var(--header-height);
  padding-inline: var(--space-6);
  gap: var(--space-3);
  background: var(--background-color);
  color: var(--foreground);
  border-bottom: 1px solid var(--border-color);
}
.brand-link {
  min-height: var(--control-height);
  gap: var(--space-2);
}
.brand-mark {
  height: 36px;
  width: auto;
}
header .icon-wrapper {
  display: grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-md);
}
header .icon-wrapper:hover {
  background: var(--background-color-2);
}
.brand-name {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.icon {
  color: var(--secondary-text-color);
}
.divider {
  border-color: var(--border-color);
}
.theme-toggle,
.lang-switcher-btn {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--border-color-2);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-color);
  font-size: var(--text-sm);
}
.theme-toggle {
  width: var(--control-height);
  flex-shrink: 0;
}
:is(.theme-toggle, .lang-switcher-btn):hover {
  background: var(--background-color-2);
}
.toggle-container,
.toggle-circle {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.sun-icon,
.moon-icon {
  display: none;
  width: 16px;
  height: 16px;
}
.theme-toggle[data-dark='false'] .sun-icon,
.theme-toggle[data-dark='true'] .moon-icon {
  display: block;
}
.lang-switcher {
  position: relative;
}
.lang-switcher-btn {
  padding: 0 var(--space-3);
}
.lang-switcher-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 160px;
  padding: var(--space-1);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity var(--motion-fast),
    transform var(--motion-fast);
}
.lang-switcher-dropdown.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  text-align: left;
}
.lang-option:hover {
  background: var(--background-color-2);
}
.lang-option.active {
  color: var(--keyword-button-on-text-color);
  font-weight: var(--weight-semibold);
}
.lang-option .check-icon {
  opacity: 0;
}
.lang-option.active .check-icon {
  opacity: 1;
}
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-4);
  max-width: calc(100vw - 32px);
  z-index: 10005;
  padding: var(--space-3) var(--space-4);
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-md);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
#joblistwrapper {
  max-width: var(--page-width);
  padding: var(--space-8) var(--page-gutter) var(--space-10);
  margin-inline: auto;
}
.list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
}
#jobListHeading {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
  letter-spacing: -0.025em;
  color: var(--foreground);
}
#dataUpdatedAt {
  font-size: var(--text-xs);
  color: var(--secondary-text-color);
}
#dataUpdatedAt.data-stale {
  color: var(--error-text);
}
.board-views {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-5);
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  background: var(--background-color);
}
.view-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  color: var(--secondary-text-color);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition:
    color var(--motion-fast),
    border-color var(--motion-fast);
}
.view-tab:hover {
  color: var(--foreground);
}
.view-tab[aria-pressed='true'] {
  color: var(--foreground);
  font-weight: var(--weight-semibold);
  border-color: var(--keyword-button-on-text-color);
}
.view-count {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--background-color-2);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Search, filters, menus and result tools. */
#joblistwrapper .joblist-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}
#joblistwrapper #search-wrapper {
  flex: 1 1 340px;
  min-width: 240px;
  max-width: none;
}
#search-wrapper .dataTables_filter,
#search-wrapper label {
  display: block;
  width: 100%;
  margin: 0;
  float: none;
}
.search-wrapper {
  position: relative;
}
#search-wrapper input {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--background-color)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23748078' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>")
    no-repeat 12px center;
  padding: 0 var(--control-height) 0 36px;
  margin: 0;
  color: var(--foreground);
  font-size: var(--text-base);
  box-sizing: border-box;
}
#search-wrapper input:focus {
  border-color: var(--focus-color);
}
#search-wrapper input::-webkit-search-cancel-button {
  display: none;
}
.search-clear {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-md);
  font-size: 22px;
  color: var(--secondary-text-color);
}
.search-clear:hover {
  background: var(--background-color-2);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-group {
  position: relative;
}
.filter-btn {
  height: var(--control-height);
}
#locationFilterBtnText,
#yoeFilterBtnText {
  width: auto;
  max-width: 10rem;
}
.chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--secondary-text-color);
  transition: transform var(--motion-fast);
}
.filter-btn[aria-expanded='true'] .chevron {
  transform: rotate(180deg);
}
.filter-dot {
  display: none;
}
.clear-filters-btn {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  width: min(280px, calc(100vw - 32px));
  min-width: 180px;
  max-height: min(380px, 55svh);
  padding: var(--space-1);
  overflow-y: auto;
}
.dropdown > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
}
.dropdown > div:hover {
  background: var(--background-color-2);
}
.dropdown > div:has(input:checked) {
  background: var(--keyword-button-on-bg-color);
  color: var(--keyword-button-on-text-color);
}
.dropdown > div:has(input:focus-visible) {
  outline: 2px solid var(--focus-color);
  outline-offset: -2px;
}
.dropdown label {
  flex: 1;
  padding-block: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.4;
  cursor: pointer;
}
.search-autocomplete {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-1);
  display: none;
}
.search-autocomplete.open {
  display: block;
}
.search-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--secondary-text-color);
  font-weight: var(--weight-medium);
}
.search-section-label .clear-btn {
  min-height: var(--control-height);
  padding: var(--space-2);
  color: var(--text-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.search-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  cursor: pointer;
}
.search-suggestion:hover,
.search-suggestion.active {
  background: var(--background-color-2);
}
.suggestion-icon {
  display: grid;
  place-items: center;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--secondary-text-color);
}
.suggestion-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-type {
  font-size: var(--text-xs);
  color: var(--secondary-text-color);
}
.search-suggestion .remove-btn {
  width: var(--control-height);
  height: var(--control-height);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--secondary-text-color);
  opacity: 0.7;
}
.search-suggestion .remove-btn:is(:hover, :focus-visible) {
  opacity: 1;
  background: var(--background-color-3);
}
.search-highlight {
  background: var(--keyword-button-on-bg-color);
  color: var(--keyword-button-on-text-color);
  border-radius: var(--radius-sm);
}
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-1);
}
.result-count {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--secondary-text-color);
}
.result-count:empty {
  display: none;
}
.sort-control {
  min-width: 0;
  flex-shrink: 0;
}
.sort-control select {
  min-height: var(--control-height);
  padding: var(--space-2) 28px var(--space-2) var(--space-2);
  max-width: 220px;
  border-radius: var(--radius-md);
  background: var(--background-color);
  color: var(--text-color);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Job rows, shared posting/application actions and compact data labels. */
#jobTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-bottom: 0;
}
#jobTable th.col-company {
  width: 17%;
}
#jobTable th.col-job-title {
  width: 36%;
}
#jobTable th.col-yoe {
  width: 9%;
}
#jobTable th.col-salary {
  width: 14%;
}
#jobTable th.col-link {
  width: 24%;
}
#jobTable :is(th, td) {
  text-align: left;
  box-sizing: border-box;
}
#jobTable :is(.col-star, .col-job-type, .col-post-date, .col-location, .col-remote) {
  display: none;
}
#jobTable thead {
  position: sticky;
  top: calc(var(--header-height) + 52px);
  z-index: 10;
}
#jobTable thead th {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  background: var(--background-color);
  background-image: none !important;
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: default;
}
#jobTable thead th:first-child {
  padding-left: 0;
}
#jobTable tr:not(.date-separator) {
  background: transparent;
  cursor: pointer;
}
#jobTable tr:not(.date-separator) td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  background: transparent;
  font-size: var(--text-sm);
}
#jobTable tr:not(.date-separator):hover td {
  background: var(--background-color-3);
}
#jobTable tr:not(.date-separator):focus-within td {
  background: var(--background-color-3);
}
#jobTable tr:not(.date-separator) td:first-child {
  padding-left: 0;
}
#jobTable tr:not(.date-separator) td:last-child {
  padding-right: 0;
}
#jobTable .date-separator {
  background: transparent;
}
#jobTable .date-separator td {
  padding: var(--space-5) 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.co {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--background-color-2);
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  user-select: none;
}
.co-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}
.co-name {
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--text-color);
  overflow-wrap: anywhere;
}
.job-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  text-align: left;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.job-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sub-info {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: normal;
}
.tag,
.pill,
.assistant-criteria span,
.applied-archive-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--background-color-2);
  color: var(--text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
}
.tag-h1b {
  background: var(--keyword-button-on-bg-color);
  color: var(--keyword-button-on-text-color);
}
.tag-type {
  border: 1px solid var(--border-color-2);
  background: transparent;
}
.type-text,
.is-unknown {
  color: var(--secondary-text-color);
}
.col-salary {
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.apply-button {
  max-width: 100%;
  height: auto;
  min-width: 0;
  text-align: center;
}
.applied-toggle {
  white-space: nowrap;
  color: var(--secondary-text-color);
}
.status-label {
  font-size: var(--text-sm);
}
.posting-host {
  white-space: normal;
  overflow-wrap: anywhere;
}
.posting-unavailable {
  font-size: var(--text-xs);
  color: var(--secondary-text-color);
}
.dataTables_info {
  display: none;
}
body .dataTables_wrapper .dataTables_paginate {
  float: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-6) 0 var(--space-2);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  box-shadow: none;
  color: var(--text-color) !important;
  font-size: var(--text-base);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--background-color-2);
  border-color: var(--border-color-2);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.5;
  background: none;
  border-color: transparent;
  cursor: default;
}
.local-status-note {
  margin-top: var(--space-5);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  line-height: var(--line-body);
}

/* Goal entry and recommendations. */
#assistantPanel {
  scroll-margin-top: var(--space-12);
}
.assistant-intro {
  max-width: 640px;
  margin: var(--space-8) auto var(--space-10);
}
.assistant-intro h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.assistant-intro > .assistant-hint {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-base);
}
.assistant-intro > .assistant-hint:last-child {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}
.assistant-composer {
  padding: var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  background: var(--background-color);
}
.assistant-composer:focus-within {
  border-color: var(--focus-color);
}
#assistantGoal {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font-size: var(--text-lg);
  line-height: var(--line-body);
}
.assistant-composer .assistant-primary {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: var(--space-2);
}
.assistant-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.assistant-examples > span {
  font-size: var(--text-xs);
  color: var(--secondary-text-color);
}
.assistant-examples button {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-color);
  text-align: left;
}
.assistant-examples button:hover {
  background: var(--background-color-2);
}
#assistantEditProfile {
  margin-left: calc(-1 * var(--space-3));
}
.assistant-about {
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-6);
}
.assistant-about > summary {
  padding: var(--space-3) 0;
  min-height: var(--control-height);
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  cursor: pointer;
}
.assistant-about p {
  max-width: 70ch;
}
.assistant-method,
.assistant-hint {
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.assistant-method {
  margin-bottom: var(--space-3);
}
.assistant-status {
  margin: var(--space-3) 0;
  color: var(--text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.assistant-status:empty,
.assistant-status[data-state='matched'] {
  display: none;
}
.assistant-status:is([data-state='unrecognized'], [data-state='invalidYears'], [data-state='salaryNotUsed']) {
  padding-left: var(--space-3);
  border-left: 2px solid var(--input-border);
}
.assistant-goal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-color);
}
.assistant-goal-summary > div {
  min-width: 0;
}
.assistant-goal-summary > button {
  flex-shrink: 0;
}
.assistant-goal-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
#assistantPersistence {
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}
.assistant-criteria,
.assistant-extra-criteria > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.assistant-criteria span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.assistant-extra-criteria summary {
  min-height: var(--control-height);
  padding: var(--space-2);
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  cursor: pointer;
}
.assistant-extra-criteria[open] {
  width: 100%;
}
.assistant-extra-criteria > div {
  margin-top: var(--space-2);
}
.assistant-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5) 0 var(--space-1);
}
.assistant-results-heading h2 {
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.assistant-result-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.assistant-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-color);
}
.assistant-result-body {
  min-width: 0;
}
.assistant-company {
  font-size: var(--text-sm);
  color: var(--secondary-text-color);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.assistant-result h4 {
  margin: var(--space-1) 0 var(--space-2);
}
.assistant-result-meta {
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
}
.assistant-reasons {
  margin-top: var(--space-2);
  color: var(--text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.assistant-confirm {
  margin-top: var(--space-2);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  line-height: var(--line-body);
  overflow-wrap: anywhere;
}
.assistant-confirm > span {
  margin-right: var(--space-2);
  font-weight: var(--weight-medium);
}
.assistant-result .row-actions {
  max-width: 300px;
}
.assistant-no-results {
  padding: var(--space-12) 0;
}
.assistant-no-results h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}
.assistant-no-results p {
  max-width: 45ch;
  color: var(--secondary-text-color);
  font-size: var(--text-base);
  line-height: var(--line-body);
}

/* Goal editor: native dialog, one field system, one persistent action footer. */
body.preferences-open,
body.details-open {
  overflow: hidden;
}
.assistant-preferences {
  width: min(640px, calc(100vw - 40px));
  max-width: none;
  max-height: min(850px, calc(100dvh - 64px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--background-color);
  color: var(--text-color);
  box-shadow: var(--shadow-dialog);
}
.assistant-preferences[open] {
  display: flex;
  flex-direction: column;
  animation: preferences-enter var(--motion-enter) var(--ease-out);
}
:is(.assistant-preferences, .job-details)::backdrop {
  background: var(--overlay-bg-color);
}
.assistant-preferences-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.assistant-preferences-header h2 {
  color: var(--foreground);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
}
.detail-close {
  width: var(--control-height);
  height: var(--control-height);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--secondary-text-color);
  font-size: 20px;
}
.detail-close:hover {
  background: var(--background-color-2);
  color: var(--foreground);
}
.assistant-preferences-body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
}
.assistant-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-5);
}
.assistant-fields fieldset,
.assistant-fields > .assistant-checkboxes {
  grid-column: 1 / -1;
  min-width: 0;
}
.assistant-fields legend {
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}
.assistant-field-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.assistant-field {
  min-width: 0;
}
.assistant-label,
.assistant-field > span:first-child,
.assistant-field-pair label > span {
  display: block;
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.assistant-field-hint {
  display: block;
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  margin-top: var(--space-2);
}
.assistant-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.assistant-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}
.assistant-role-options .assistant-check {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color-2);
  border-radius: var(--radius-md);
}
.assistant-role-options .assistant-check:has(input:checked) {
  background: var(--keyword-button-on-bg-color);
  border-color: var(--selected-border);
  color: var(--keyword-button-on-text-color);
}
.assistant-role-options input {
  margin: 0;
}
.assistant-role-options label:has(input:focus-visible) {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}
.assistant-location-picker {
  padding: 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
}
.assistant-location-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
  font-size: var(--text-base);
  cursor: pointer;
}
.assistant-location-picker > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.assistant-location-picker[open] > summary::after {
  transform: rotate(225deg);
}
.assistant-location-picker > summary > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#assistantLocationCount {
  flex-shrink: 0;
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
}
.assistant-location-picker[open] {
  padding-bottom: var(--space-2);
}
.assistant-location-picker input[type='search'] {
  margin: var(--space-1) 0 var(--space-2);
}
.assistant-location-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
  max-height: 220px;
  overflow-y: auto;
}
.assistant-location-options .assistant-check {
  min-width: 0;
  padding: var(--space-2) 0;
}
.assistant-advanced,
.assistant-rephrase {
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-6);
}
.assistant-advanced > summary,
.assistant-rephrase > summary {
  min-height: var(--control-height);
  padding: var(--space-3) 0;
  color: var(--text-color);
  font-size: var(--text-base);
  cursor: pointer;
}
.assistant-advanced .assistant-fields {
  padding: var(--space-3) 0 var(--space-1);
}
.assistant-rephrase .assistant-composer {
  margin: var(--space-3) 0;
}
.assistant-preferences .assistant-composer .assistant-primary,
.assistant-preferences .assistant-examples {
  display: none;
}
.assistant-save-choice {
  width: 100%;
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  color: var(--text-color);
}
#assistantPreferencesStatus {
  margin-top: var(--space-4);
  color: var(--error-text);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
#assistantPreferencesStatus:empty {
  display: none;
}
.assistant-preferences-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  background: var(--background-color);
  flex-shrink: 0;
}
.assistant-preferences-footer > div {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
@keyframes preferences-enter {
  from {
    opacity: 0.4;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Job detail drawer and application preparation. */
.job-details {
  width: min(560px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  inset: 0 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
  box-shadow: var(--shadow-dialog);
}
.job-details[open] {
  display: flex;
  flex-direction: column;
  animation: detail-enter var(--motion-enter) var(--ease-out);
}
@keyframes detail-enter {
  from {
    opacity: 0.4;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
}
.detail-content {
  padding: var(--space-6);
  min-height: 0;
  overflow-y: auto;
  flex: 1;
}
.detail-company {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-color);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
#detailTitle {
  margin-top: var(--space-5);
  color: var(--foreground);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
  letter-spacing: -0.02em;
}
.detail-location {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--line-body);
}
.detail-date {
  margin-top: var(--space-2);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
}
.detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--border-color);
}
.detail-facts > div {
  min-width: 0;
}
.detail-facts dt {
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
}
.detail-facts dd {
  margin-top: var(--space-1);
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.detail-facts p {
  margin-top: var(--space-2);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.detail-sponsorship {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.detail-sponsorship .tag {
  flex-shrink: 0;
}
.detail-sponsorship p {
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.detail-section {
  margin-top: var(--space-6);
}
.detail-section h3 {
  margin-bottom: var(--space-3);
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.detail-section > p {
  font-size: var(--text-base);
  line-height: 1.8;
}
.detail-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.detail-skills > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--background-color-2);
  color: var(--text-color);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.detail-skills > .detail-skill-match {
  background: var(--keyword-button-on-bg-color);
  color: var(--keyword-button-on-text-color);
}
.detail-note {
  margin-top: var(--space-6);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  line-height: var(--line-body);
}
.detail-actions {
  padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  background: var(--background-color);
  flex-shrink: 0;
}
.detail-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.detail-buttons .apply-button {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.detail-buttons .apply-button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.detail-actions > p {
  margin-top: var(--space-3);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.assistant-analysis {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-color);
}
.assistant-analysis-block {
  padding: var(--space-3) 0;
}
.assistant-analysis h4,
.assistant-analysis summary {
  color: var(--foreground);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.assistant-analysis h4 {
  margin-bottom: var(--space-2);
}
.assistant-analysis details > summary {
  min-height: var(--control-height);
  padding: var(--space-3) 0;
  cursor: pointer;
}
.assistant-analysis :is(p, ul, ol) {
  font-size: var(--text-base);
  line-height: var(--line-body);
}
.assistant-analysis ul {
  list-style: disc;
  padding-left: var(--space-5);
}
.assistant-analysis ol {
  list-style: decimal;
  padding-left: var(--space-5);
}
.assistant-analysis li {
  margin: var(--space-2) 0;
  overflow-wrap: anywhere;
}
.assistant-analysis .detail-note {
  font-size: var(--text-xs);
  margin-top: var(--space-3);
}
.assistant-preparation {
  border-top: 1px solid var(--border-color);
}
.assistant-checklist li {
  padding: var(--space-1) 0 var(--space-2) var(--space-1);
}
.assistant-analysis .assistant-secondary {
  margin-top: var(--space-3);
}

/* Application archives use the same row/action grammar as current jobs. */
.applied-archive {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
}
.applied-archive h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.applied-archive-hint {
  max-width: 62ch;
  margin-top: var(--space-2);
  color: var(--secondary-text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.applied-archive-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.applied-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-color);
}
.applied-archive-item:first-child {
  border-top: 0;
}
.applied-archive-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.applied-archive-main .co-name {
  color: var(--secondary-text-color);
}
.applied-archive-title {
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.applied-archive-title.is-unavailable {
  color: var(--secondary-text-color);
  font-size: var(--text-base);
}
.applied-archive-meta {
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.applied-archive-badge {
  margin-right: var(--space-1);
}
.applied-archive-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.applied-archive-link:hover {
  background: var(--background-color-2);
}

/* Loading, empty/error states, toast feedback and consent. */
#jobTable .dataTables_empty,
#jobTable tr:has(.dataTables_empty),
#jobTable.is-empty thead {
  display: none;
}
#jobBrowseContent:has(#jobTable.is-empty) .dataTables_paginate {
  display: none;
}
#jobBrowseContent:has(#appliedArchive:not([hidden])) #jobTable.is-empty {
  border-bottom: 0;
}
.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.empty-state-title,
.error-state-title {
  color: var(--foreground);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
}
.empty-state-hint,
.error-state-message {
  max-width: 45ch;
  margin-bottom: var(--space-3);
  color: var(--secondary-text-color);
  font-size: var(--text-base);
  line-height: var(--line-body);
}
#jobBrowseContent:has(#appliedArchive:not([hidden])) .empty-state {
  align-items: flex-start;
  padding: var(--space-5) 0;
  text-align: left;
}
#jobBrowseContent:has(#appliedArchive:not([hidden])) .empty-state-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
#jobBrowseContent:has(#appliedArchive:not([hidden])) .empty-state-hint {
  margin: 0;
}
#jobBrowseContent:has(#appliedArchive:not([hidden])) .empty-state button {
  display: none;
}
.error-state {
  min-height: 300px;
}
#joblistwrapper[data-load-state='error'] :is(.joblist-toolbar, .results-bar) {
  display: none;
}
.error-state-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 24px;
  margin-bottom: var(--space-2);
}
.error-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-text {
  height: 14px;
}
.skeleton-badge {
  display: inline-block;
  width: 60px;
  height: 24px;
}
.skeleton-btn {
  display: inline-block;
  width: 88px;
  height: var(--control-height);
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: calc(100vw - 32px);
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow-popover);
  font-size: var(--text-base);
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--motion-enter),
    transform var(--motion-enter);
}
.toast.show,
.toast:focus-within {
  opacity: 1;
  transform: none;
}
.toast.hide {
  opacity: 0;
  transform: translateY(12px);
}
.toast.toast-error {
  background: var(--toast-error-bg);
  color: #ffffff;
}
.toast-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
}
.toast > span:not(.toast-icon) {
  min-width: 0;
}
.toast-action {
  flex-shrink: 0;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.toast-action:hover {
  background: rgba(128, 128, 128, 0.15);
}
.toast-action:focus-visible {
  outline-color: currentColor;
}
.job-details #toast-container {
  inset: 80px var(--space-4) auto;
}
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  background: var(--background-color);
  transform: translateY(100%);
  transition: transform var(--motion-enter) var(--ease-out);
}
.consent-banner.show {
  transform: none;
}
.consent-banner-text {
  flex: 1;
  color: var(--text-color);
  font-size: var(--text-sm);
  line-height: var(--line-body);
}
.consent-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Consent is a preference: both choices have equal emphasis. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: auto;
  min-height: 64px;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--space-4) var(--page-gutter);
  color: var(--secondary-text-color);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.footer-link:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive behavior is grouped once, after the component definitions. */
@media (min-width: 769px) {
  .row-actions .posting-verb {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  #jobTable th.col-company {
    width: 18%;
  }
  #jobTable th.col-job-title {
    width: 28%;
  }
  #jobTable th.col-yoe {
    width: 10%;
  }
  #jobTable th.col-salary {
    width: 14%;
  }
  #jobTable th.col-link {
    width: 30%;
  }
  #jobTable tr:not(.date-separator) td {
    padding-inline: var(--space-2);
  }
}
@media (max-width: 768px) {
  :root {
    --page-gutter: 1rem;
  }
  header {
    padding-inline: var(--page-gutter);
  }
  header .icon-wrapper,
  header .divider,
  header .lang-label {
    display: none;
  }
  .brand-name {
    font-size: var(--text-base);
  }
  #joblistwrapper {
    padding-top: var(--space-6);
  }
  #jobListHeading {
    font-size: var(--text-2xl);
  }
  .list-heading {
    margin-bottom: var(--space-2);
  }
  .board-views {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .view-tab {
    font-size: var(--text-sm);
  }
  #joblistwrapper #search-wrapper {
    flex-basis: 100%;
    min-width: 0;
  }
  #search-wrapper input,
  .sort-control select,
  .assistant-fields :is(input:not([type='checkbox']), select) {
    font-size: var(--text-lg);
  }
  .filter-chips {
    flex-basis: 100%;
  }
  .filter-btn {
    padding-inline: var(--space-3);
  }
  .dropdown {
    width: min(270px, calc(100vw - 32px));
  }
  #yoeDropdown {
    width: 200px;
  }
  .results-bar {
    padding-top: var(--space-2);
  }
  .sort-control select {
    max-width: 200px;
  }
  #jobTable,
  #jobTable tbody {
    display: block;
    width: 100%;
  }
  #jobTable thead {
    display: none;
  }
  #jobTable tr:not(.date-separator) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-5) 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
  }
  #jobTable tr:not(.date-separator) :is(td, td:first-child, td:last-child),
  #jobTable tr:not(.date-separator):hover td,
  #jobTable tr:not(.date-separator):focus-within td {
    display: block;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
  }
  #jobTable td.col-company,
  #jobTable td.col-job-title {
    flex: 0 0 100%;
  }
  .co-body {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }
  .co-name {
    color: var(--secondary-text-color);
  }
  .avatar {
    width: 28px;
    height: 28px;
  }
  #jobTable td.col-yoe,
  #jobTable td.col-salary {
    flex: 0 1 auto;
  }
  #jobTable td:is(.col-yoe, .col-salary):has(.is-unknown) {
    display: none;
  }
  #jobTable td.col-link {
    flex: 0 0 100%;
    margin-top: var(--space-2);
  }
  .skeleton-row .col-salary .skeleton-text {
    width: 6rem;
  }
  .row-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .date-separator,
  .date-separator td {
    display: block;
    width: 100%;
  }
  .date-separator td {
    padding-top: var(--space-5);
  }
  .assistant-intro {
    margin: var(--space-6) 0 var(--space-8);
  }
  .assistant-intro h2 {
    font-size: var(--text-xl);
  }
  .assistant-goal-summary {
    gap: var(--space-3);
    align-items: flex-start;
  }
  .assistant-goal-summary > button {
    padding-inline: var(--space-3);
  }
  .assistant-result {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) 0;
  }
  .assistant-result .row-actions {
    max-width: none;
  }
  .detail-topbar,
  .detail-content,
  .detail-actions {
    padding-inline: var(--space-5);
  }
  .applied-archive-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .applied-archive-item .row-actions {
    justify-content: flex-start;
  }
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--page-gutter);
    gap: var(--space-3);
  }
  .consent-banner-actions {
    justify-content: flex-end;
  }
  #toast-container {
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: max(var(--page-gutter), env(safe-area-inset-bottom));
  }
  .toast {
    max-width: 100%;
  }
  .site-footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .assistant-preferences {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .assistant-preferences-header {
    padding: var(--space-3) var(--space-5);
  }
  .assistant-preferences-body {
    padding: var(--space-5);
    flex: 1;
  }
  .assistant-fields {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .assistant-field-pair {
    gap: var(--space-3);
  }
  .assistant-preferences-footer {
    padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
    gap: var(--space-2);
  }
  .assistant-preferences-footer > div {
    gap: var(--space-2);
  }
  .assistant-preferences-footer button {
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
  }
}
@media (max-width: 350px) {
  .brand-name {
    display: none;
  }
  .sort-control select {
    max-width: 170px;
  }
  .assistant-field-pair {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}