@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("inter-latin-500.0627ec86dfad.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("inter-latin-700.8d7a3f034881.woff2") format("woff2"); }

:root {
  --bg-card: #fff;
  --border: #e3e6ea;
  --muted: #6b7280;
  --accent: #0a66c2;
  --rate: #0b6b3a;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
  --badge-bg: #eef1f5;
  --badge-fg: #374151;
  --remote-fg: #15803d;
  --hybrid-fg: #b45309;
  --onsite-fg: #4338ca;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-card: #1a1f27;
    --border: #2d3440;
    --muted: #9aa4b2;
    --accent: #6cb4ff;
    --rate: #4ade80;
    --shadow: none;
    --badge-bg: #2a313c;
    --badge-fg: #d1d5db;
    --remote-fg: #86efac;
    --hybrid-fg: #fcd34d;
    --onsite-fg: #a5b4fc;
  }
}

body > header { padding-block: 1.5rem 1rem; }
.brand { margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.brand span { color: var(--accent); font-weight: 700; }

body > header, body > main, body > footer, body > .messages { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; }
.muted { color: var(--muted); font-weight: normal; }

.site-footer { padding-block: 0 1.5rem; text-align: center; }
.site-footer small { font-size: .7rem; }

.last-refreshed { margin-block: 1.5rem 2rem; font-size: .8rem; text-align: center; }

.with-sidebar { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
body > main.with-sidebar, body:has(> main.with-sidebar) > header, body:has(> main.with-sidebar) > footer { max-width: 66rem; }
.with-sidebar > aside { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.filters, .subscribe {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: var(--shadow);
  margin: 0 0 1rem;
  padding: 0 0 .9rem;
}
.filters-title {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; padding: .85rem 1.25rem .7rem;
  border-bottom: 1px solid var(--border);
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.filters details {
  --pico-accordion-close-summary-color: var(--pico-h2-color);
  --pico-accordion-open-summary-color: var(--pico-h2-color);
  --pico-accordion-active-summary-color: var(--pico-h2-color);
  margin: 0;
}
.filters details > .filters-title { margin: 0 0 .7rem; }
.filters fieldset { margin: 0 0 .8rem; padding: 0 1.25rem; border: 0; }
.filters legend { float: left; width: 100%; margin: 0 0 .4rem; padding: 0; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.filter-option { clear: left; display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .2rem 0; font-size: .8rem; line-height: 1.3; cursor: pointer; }
.filter-option input { flex: none; margin: .05rem 0 0; }
.filters small { display: block; margin-top: .3rem; font-size: .7rem; line-height: 1.4; }
.messages { margin-bottom: 1rem; }
.message { margin: 0 0 .5rem; padding: .6rem 1rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: .5rem; background: var(--bg-card); font-size: .9rem; }
.message--error { border-left-color: var(--hybrid-fg); }
.subscribe { padding: 0 1.25rem 1rem; }
.subscribe .filters-title { margin-inline: -1.25rem; }
.subscribe label { font-size: .8rem; }
.subscribe input[type="email"] { margin-bottom: .6rem; }
.subscribe small { display: block; margin-top: .4rem; font-size: .7rem; line-height: 1.4; }
.filters button { display: block; width: calc(100% - 2.5rem); margin: 0 1.25rem; }
.subscribe button { display: block; width: 100%; margin: 0; padding-inline: .5rem; font-size: .9rem; }
.filters-summary { margin: 0 0 1rem; font-size: .85rem; }

.tech-bar { grid-column: 1 / -1; display: block; margin: 0 0 1rem; }
.tech-group { display: flex; align-items: baseline; gap: .3rem 1rem; margin: 0 0 .5rem; }
.tech-group-label { flex: none; width: 9rem; margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tech-bar .tech-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tech-bar .tech-chips li { margin: 0; padding: 0; list-style: none; }
.tech-chip { display: inline-block; margin: 0; padding: calc(.15rem - 1px) .6rem; border: 1px solid var(--muted); border-radius: 999px; color: var(--badge-fg); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.tech-chip:hover { background: var(--badge-bg); text-decoration: none; }
.tech-count { color: var(--muted); }
.tech-chip--picked, .tech-chip--picked:hover { border-color: var(--accent); background: var(--accent); color: var(--bg-card); }
.tech-chip--picked .tech-count { color: inherit; opacity: .8; }

.offer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: var(--shadow);
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem;
  overflow-wrap: anywhere;
}
.offer-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0 0 .5rem; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.offer-top li { margin: 0; padding: 0; list-style: none; }
.offer-chip { display: inline-flex; align-items: center; gap: .35rem; }
.offer-chip--muted { font-style: italic; }
.offer-chip--remote { color: var(--remote-fg); }
.offer-chip--hybrid { color: var(--hybrid-fg); }
.offer-chip--onsite { color: var(--onsite-fg); }
.icon { flex: none; width: 1.1em; height: 1.1em; }
.offer-link { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--accent); }

.offer-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 .2rem; padding: 0; border: 0; background: none; }
.offer-title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.offer-age { padding: .1rem .6rem; border-radius: 999px; background: var(--badge-bg); color: var(--muted); font-size: .8rem; white-space: nowrap; }
.offer-rate { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.rate-amount { font-size: 1.2rem; font-weight: 700; color: var(--rate); }
.offer-rate.muted { font-size: 1.2rem; }
.offer-stated { margin: -.4rem 0 .7rem; font-size: .8rem; }
.offer-rate.has-stated { position: relative; cursor: help; }
.offer-rate.has-stated::after { content: "ⓘ"; margin-left: .3em; font-size: .8em; font-weight: normal; color: var(--muted); vertical-align: .15em; opacity: .5; }
.offer-rate.has-stated:hover::after, .offer-rate.has-stated:focus::after { opacity: 1; }
.offer-rate.has-stated .offer-stated {
  display: none; position: absolute; top: 100%; left: 0; z-index: 2; margin: 0; width: max-content; max-width: 16rem;
  padding: .3rem .6rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg-card);
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%); color: var(--muted); font-weight: normal; white-space: normal;
}
.offer-rate.has-stated:hover .offer-stated, .offer-rate.has-stated:focus .offer-stated { display: block; }

.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.badge { margin: 0; padding: .15rem .6rem; border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); font-size: .8rem; list-style: none; }
.badge--tech { padding-block: calc(.15rem - 1px); border: 1px solid var(--muted); background: transparent; color: var(--badge-fg); }

.offer-post { margin: 0; padding-top: .6rem; border-top: 1px solid var(--border); }
.offer-post summary { cursor: pointer; font-size: .9rem; color: var(--accent); }
.post-text { max-width: 65ch; margin: .75rem 0 0; line-height: 1.6; white-space: pre-wrap; }
.post-label { margin: 1rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }

.empty { padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--border); border-radius: .75rem; color: var(--muted); }
.empty h2 { font-size: 1.2rem; color: inherit; }

@media not (max-width: 48rem) {
  .filters details::details-content { content-visibility: visible; }
  .filters summary.filters-title { cursor: default; pointer-events: none; }
  .filters summary.filters-title::after, .filters-toggle { display: none; }
}

@media (max-width: 48rem) {
  .with-sidebar { display: block; }
  .with-sidebar > aside { position: static; max-height: none; overflow-y: visible; }
  .filters-toggle { margin-left: auto; font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .filters-toggle::before { content: "Hide"; }
  .filters details:not([open]) .filters-toggle::before { content: "Show"; }
  .filters:has(details:not([open])) { padding-bottom: 0; }
  .filters details:not([open]) > .filters-title { margin-bottom: 0; border-bottom: 0; }
  .tech-group { display: block; }
  .tech-group-label { width: auto; margin-bottom: .3rem; }
  .tech-bar .tech-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
}

@media (max-width: 30rem) {
  .offer { padding: 1rem; }
}