/* Look and feel follow https://usajobs-historical.abigailhaddad.com (its shared.css):
   warm cream page, dark brown text, green accent, DM Sans headings, Source Sans 3 body,
   rounded bordered cards. The dark theme is new: that site has none. */
:root {
  --color-bg: #FFF8F0;
  --color-surface: #F5EDE0;
  --color-text: #3D2B1F;
  --color-text-muted: #7A6E62;
  --color-accent: #2D6A4F;
  --color-accent-hover: #245A42;
  --color-accent-ink: #FFFFFF;
  --color-highlight: #D4A03C;
  --color-border: #E8DDD0;
  --color-error: #C0392B;
  --err-bg: #FBE9E6;
  --err-ink: #8A2A1E;
  --warn-bg: #FFF1D6;
  --warn-ink: #6D4A00;
  --chart-bar: #2D6A4F;
  --chart-bar-hover: #245A42;
  --chart-grid: #E8DDD0;
  --chart-tick: #7A6E62;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-other: #B9AD9D;
  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --card-radius: 0.5rem;
  --shadow-md: 0 4px 12px rgba(61, 43, 31, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1E1914;
    --color-surface: #2A231C;
    --color-text: #F3E9DC;
    --color-text-muted: #B9AD9D;
    --color-accent: #7CC7A2;
    --color-accent-hover: #9AD8B8;
    --color-accent-ink: #12261C;
    --color-highlight: #D4A03C;
    --color-border: #43392E;
    --color-error: #F08A7C;
    --err-bg: #3A2220;
    --err-ink: #F5B8AE;
    --warn-bg: #3A3118;
    --warn-ink: #F0D58A;
    --chart-bar: #7CC7A2;
    --chart-bar-hover: #9AD8B8;
    --chart-grid: #43392E;
    --chart-tick: #B9AD9D;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-other: #6B6054;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --color-bg: #1E1914;
  --color-surface: #2A231C;
  --color-text: #F3E9DC;
  --color-text-muted: #B9AD9D;
  --color-accent: #7CC7A2;
  --color-accent-hover: #9AD8B8;
  --color-accent-ink: #12261C;
  --color-highlight: #D4A03C;
  --color-border: #43392E;
  --color-error: #F08A7C;
  --err-bg: #3A2220;
  --err-ink: #F5B8AE;
  --warn-bg: #3A3118;
  --warn-ink: #F0D58A;
  --chart-bar: #7CC7A2;
  --chart-bar-hover: #9AD8B8;
  --chart-grid: #43392E;
  --chart-tick: #B9AD9D;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-other: #6B6054;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must win over any display rule (the option list's `display: flex` was overriding it). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.01em; color: var(--color-text); margin: 0; }
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.site-container { max-width: 1300px; margin: 0 auto; padding: 0 1.5rem; }

/* header */
.site-header { padding: 2rem 0 1rem; }
.header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.site-subtitle { color: var(--color-text-muted); margin: 0.25rem 0 0; }
.site-nav { margin-top: 0.6rem; font-size: 0.95rem; }
.site-nav a { font-weight: 600; }
.site-nav .sep { margin: 0 0.4rem; color: var(--color-border); }
.site-nav [aria-current="page"] { font-weight: 700; color: var(--color-text); }
.asof { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--color-text-muted); }

/* buttons: the same quiet outline buttons as the USAJOBS toolbar */
button {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
button:hover:not(:disabled) { border-color: var(--color-highlight); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
button.primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
input, select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.375rem 0.6rem;
}

/* about */
#about { border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 0.5rem 1rem; margin: 0 0 1rem; background: var(--color-bg); }
#about summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
#about p { margin: 0.5rem 0; max-width: 62rem; }
#about ul { margin: 0.5rem 0; padding-left: 1.25rem; max-width: 62rem; }
#about li { margin: 0.25rem 0; }
#links { font-size: 0.9rem; }
.links a { margin-right: 1rem; }

/* status */
#status { margin: 0.5rem 0; }
#status .msg { padding: 0.6rem 1rem; border-radius: var(--card-radius); background: var(--color-surface); border: 1px solid var(--color-border); }
#status .msg.error { background: var(--err-bg); color: var(--err-ink); border-color: transparent; }
#status .msg.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
#status .bar { height: 4px; background: var(--color-border); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; }
#status .bar i { display: block; height: 100%; width: 40%; background: var(--color-accent); animation: slide 1.1s infinite ease-in-out; }
@keyframes slide { from { margin-left: -40%; } to { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { #status .bar i { animation: none; width: 100%; } }

/* toolbar and filter chips */
.toolbar-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
#q { flex: 1 1 18rem; min-width: 0; max-width: 28rem; }
.full-dataset-link { font-size: 0.85rem; align-self: center; margin-left: 0.25rem; white-space: nowrap; }
.filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 2.25rem; margin-bottom: 1.25rem; }
.filters-bar-empty { font-size: 0.875rem; color: var(--color-text-muted); }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; max-width: 24rem;
}
.filter-chip-edit { all: unset; display: inline-flex; gap: 0.375rem; align-items: center; cursor: pointer; min-width: 0; font-size: 0.8125rem; font-family: var(--font-body); }
.filter-chip-edit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.filter-chip-label { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.filter-chip-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.filter-chip-remove { all: unset; cursor: pointer; color: var(--color-text-muted); font-size: 1rem; line-height: 1; padding: 0 0.125rem; }
.filter-chip-remove:hover { color: var(--color-error); }
.filter-chip-remove:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* stat cards */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 1.25rem 1.5rem; transition: border-color 0.2s ease; }
.stat-card:hover { border-color: var(--color-highlight); }
.stat-card h3 { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.25rem; }
.stat-value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.stat-value.text { font-size: 1.25rem; padding: 0.2rem 0; }

/* chart cards */
.charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.charts-grid .chart-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: minmax(0, 1fr); } }
.chart-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 1.25rem 1.5rem; min-width: 0; }
.chart-card h3 { margin: 0; }
.chart-box { position: relative; height: 200px; margin-top: 0.75rem; }
.chart-foot { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); min-height: 1.2em; }
.chart-card details { margin-top: 0.25rem; font-size: 0.85rem; }
.chart-card summary { cursor: pointer; color: var(--color-text-muted); }
.chart-card table { margin-top: 0.4rem; font-size: 0.85rem; width: auto; min-width: 14rem; }
.chart-card .tablescroll { max-height: 14rem; overflow: auto; }

/* table */
.summary { margin: 0.5rem 0; color: var(--color-text-muted); font-size: 0.92rem; }
/* Wide tables scroll sideways inside their box. The edge shadows and a visible scrollbar show that more columns exist. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--color-bg) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right center / 12px 100% no-repeat scroll,
    var(--color-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) var(--color-surface);
}
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
th { background: var(--color-surface); font-family: var(--font-heading); font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; position: sticky; top: 0; }
th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.7em; }
th[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.7em; }
td .cell { display: block; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--color-surface); }

.opts { max-height: 16rem; overflow: auto; margin-top: 0.5rem; border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 0.25rem 0.5rem; }
.opts label { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.15rem 0; cursor: pointer; }
.opts .c { margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rangerow { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.rangerow input { flex: 1; min-width: 0; }
.dactions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
#fderr { color: var(--err-ink); background: var(--err-bg); border-radius: 0.375rem; padding: 0.4rem 0.6rem; margin: 0.6rem 0 0; font-size: 0.9rem; }

/* home cards */
.cards { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.cards li { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 1.25rem 1.5rem; transition: border-color 0.2s ease; }
.cards li:hover { border-color: var(--color-highlight); }
.cards a { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; }
.cards p { margin: 0.4rem 0 0; color: var(--color-text-muted); font-size: 0.95rem; }

.site-footer { margin: 3rem 0 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.site-footer p { margin: 0; }


/* view tabs */
.view-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.9rem; border-bottom: 1px solid var(--color-border); }
.view-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 0.9rem; font-size: 0.9rem; color: var(--color-text-muted); background: transparent; }
.view-tab:hover:not(:disabled) { border-color: var(--color-highlight); color: var(--color-text); }
.view-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); font-weight: 600; }
.badge { display: inline-block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn-ink); background: var(--warn-bg); border-radius: 0.25rem; padding: 0.05rem 0.4rem; vertical-align: middle; }

/* filter popover, anchored under the toolbar */
.toolbar-wrap { position: relative; }
.popover { position: absolute; z-index: 20; top: calc(100% - 0.25rem); left: 0; width: min(26rem, 100%); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-md); padding: 1rem; }
.popover[hidden] { display: none; }
.popover label.field { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 0.25rem; }
.popover select, .popover input[type="search"], .popover input[type="text"] { width: 100%; }
#fdbody { margin-top: 0.5rem; }

/* pager and page size */
.pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0; }
.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.pager .gap { color: var(--color-text-muted); padding: 0 0.15rem; }
.pager button.current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.sizepick { font-size: 0.85rem; color: var(--color-text-muted); display: inline-flex; gap: 0.5rem; align-items: center; }

/* match line */
#matchbar { margin: 0 0 1rem; }
#matchbar button { margin-left: 0.25rem; }

/* pivot */
.pivot-builder { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.pivot-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: end; }
.pivot-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-heading); }
.pivot-controls select { min-width: 11rem; }
#pvnote { margin: 0.5rem 0 0; min-height: 1.2em; }
.pivot-table th { cursor: pointer; }
.pivot-table th.num, .pivot-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pivot-table td.total { font-weight: 600; }
.pivot-table tfoot td { font-weight: 600; background: var(--color-surface); border-top: 2px solid var(--color-border); }
.pivot-table th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.7em; }
.pivot-table th[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.7em; }

/* record page */
.rec-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; font-size: 0.95rem; }
.rec-sib a { margin-left: 1rem; font-weight: 600; }
.back-link { font-weight: 600; }
.rec-title { font-size: 1.75rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.rec-missing { margin: 1rem 0 0.5rem; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 1.25rem 0; }
.rec-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 1rem 1.25rem; margin: 0 0 1rem; min-width: 0; }
.rec-grid .rec-card { margin: 0; }
.rec-card h2 { font-size: 1rem; margin: 0 0 0.6rem; display: inline-block; }
.rec-card h3 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
.rec-card h2 + button.copy { margin-left: 0.75rem; }
dl.fields { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0; }
dl.fields dt { color: var(--color-text-muted); font-size: 0.85rem; padding-top: 0.15rem; }
dl.fields dd { margin: 0; overflow-wrap: anywhere; }
dl.fields dd.empty { color: var(--color-text-muted); }
pre.longtext { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; max-height: 28rem; overflow: auto; background: var(--color-surface); border-radius: 0.375rem; padding: 0.75rem 1rem; margin: 0.5rem 0 0; }
.rel-list { list-style: none; padding: 0; margin: 0; }
.rel-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.rel-list li:last-child { border-bottom: 0; }
.rel-list .sub { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.more-item { border-top: 1px solid var(--color-border); padding: 0.5rem 0; }
.more-item details { margin-top: 0.4rem; }
a.recordlink { font-weight: 600; }

@media (max-width: 640px) {
  .site-container { padding: 0 1rem; }
  h1 { font-size: 1.75rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-card { padding: 0.9rem 1rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-value.text { font-size: 1rem; }
  .chart-card { padding: 1rem; }
  #q { max-width: none; flex-basis: 100%; }
  #grid, #grid thead, #grid tbody, #grid tr, #grid td { display: block; }
  #grid thead { display: none; }
  #grid tbody tr { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0.75rem; }
  #grid td { border: 0; padding: 0.1rem 0; }
  #grid td::before { content: attr(data-label); display: block; color: var(--color-text-muted); font-size: 0.75rem; }
  td .cell { max-width: none; white-space: normal; }
  #grid td.num { text-align: left; }
  #grid td.empty { display: none; }
  .view-tab { padding: 0.5rem 0.6rem; white-space: nowrap; }
  .popover { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; width: auto; max-height: 80vh; overflow: auto; }
  .pagebar { justify-content: center; }
  .pivot-controls select { min-width: 0; width: 100%; }
  .pivot-controls label { flex: 1 1 100%; }
  dl.fields { grid-template-columns: 1fr; gap: 0; }
  dl.fields dd { margin-bottom: 0.5rem; }
  .rec-title { font-size: 1.4rem; }
  .charts-grid .chart-card:last-child:nth-child(odd) { grid-column: auto; }
  /* Bigger tap targets */
  .site-nav a { display: inline-block; padding: 0.55rem 0.2rem; }
  .toolbar-row button, #theme, .pager button, .dactions button { min-height: 2.5rem; }
  summary { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}

#matchbar .warn { color: var(--warn-ink, #8a4b00); font-weight: 600; }


/* Questionnaire outline on a record page */
.outline { margin-top: 0.25rem; }
.outline-section { font-size: 1rem; margin: 1.1rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.outline-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.outline .tag { display: inline-block; margin-left: 0.5rem; padding: 0 0.5rem; border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.outline-list { margin: 0.25rem 0 0; padding-left: 2.2rem; }
.outline-list > li { margin: 0.55rem 0; overflow-wrap: anywhere; }
.outline-list > li::marker { color: var(--color-text-muted); font-weight: 600; }
.outline-q { color: var(--color-text); text-decoration: none; }
.outline-q:hover { color: var(--color-accent); text-decoration: underline; }
.outline-options { margin: 0.3rem 0 0; padding-left: 1.2rem; color: var(--color-text-muted); font-size: 0.92rem; }
.outline-options li { margin: 0.1rem 0; }
.rel-lazy { margin-top: 0.5rem; }

/* A chart with long labels takes the whole row */
.charts-grid .chart-card.wide { grid-column: 1 / -1; }