/* Figma: Part-time opportunities, editorial rhythm v4; city menu overlays results. */
.opportunities-page {
  --op-paper: #f7f5f0;
  --op-panel: #fff;
  --op-ink: #202a25;
  --op-muted: #68736d;
  --op-line: #d8ded9;
  --op-brand: #1f5b45;
  --op-deep: #12382e;
  --op-soft: #ecf3ef;
  --op-selected: #dae9df;
  --op-space-4: 4px;
  --op-space-8: 8px;
  --op-space-12: 12px;
  --op-space-16: 16px;
  --op-space-20: 20px;
  --op-space-24: 24px;
  --op-space-32: 32px;
  --op-space-36: 36px;
  --op-space-40: 40px;
  --op-space-56: 56px;
  margin: 0;
  background: var(--op-paper);
  color: var(--op-ink);
  font-family: Inter, "Noto Sans SC", Arial, sans-serif;
  line-height: 1.45;
}
.op-main, .op-main * { box-sizing: border-box; }
.op-main { --op-city-menu-space: min(240px, 40svh); width: min(920px, calc(100% - 48px)); min-height: 620px; margin-inline: auto; padding-block: var(--op-space-36) 64px; }
.op-main[data-opportunities-page="list"] {
  --op-list-min-height: clamp(768px, 76svh, 1008px);
  --op-list-bottom-space: clamp(144px, 18svh, 224px);
  --op-list-space-scale: .48;
  padding-top: var(--op-space-56);
  min-height: calc(var(--op-list-content-height, 0px) + (var(--op-list-min-height) - var(--op-list-content-height, 0px)) * var(--op-list-space-scale));
  padding-bottom: calc(var(--op-list-bottom-space) * var(--op-list-space-scale));
}
.op-main p, .op-main h1, .op-main h2, .op-main h3, .op-main dl, .op-main dd { margin: 0; }
.op-main h1 { color: var(--op-deep); font-size: 36px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; }
.op-main button, .op-main select { font: inherit; }
.op-main button, .op-main a, .op-main select { -webkit-tap-highlight-color: transparent; }
.op-main a { color: var(--op-brand); }
.op-main :focus-visible, .op-skip:focus-visible { outline: 3px solid var(--op-brand); outline-offset: 4px; }
.op-sr-only, .op-skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-skip:focus { position: fixed; inset: 12px auto auto 12px; padding: 12px; z-index: 1000; background: #fff; color: #12382e; }
.op-intro { display: grid; gap: var(--op-space-12); margin-bottom: var(--op-space-32); }
.op-intro-top { display: grid; grid-template-columns: minmax(0, 1fr) 164px; gap: var(--op-space-16); align-items: center; }
.op-eyebrow { display: none; color: var(--op-brand); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.op-intro > p { max-width: 780px; font-size: 17px; color: var(--op-muted); }
.op-language { display: flex; gap: var(--op-space-4); justify-self: end; width: 164px; padding: var(--op-space-4); border: 1px solid var(--op-line); border-radius: 8px; background: var(--op-panel); }
.op-language button { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; min-height: 36px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--op-muted); cursor: pointer; font-size: 14px; font-weight: 600; }
.op-language [aria-pressed="true"] { background: var(--op-soft); color: var(--op-deep); }
.op-filters { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--op-space-16); margin-bottom: var(--op-space-32); padding-bottom: var(--op-space-24); border-bottom: 1px solid var(--op-line); }
.op-city { position: relative; flex: 0 0 200px; min-width: 0; }
.op-main .op-city-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--op-line); border-radius: 8px; background: var(--op-panel); color: var(--op-deep); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.op-city-trigger svg { flex: 0 0 16px; }
.op-city-trigger[aria-expanded="true"] { border-color: var(--op-brand); }
.op-city-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.op-city-menu { position: absolute; z-index: 3; inset: calc(100% + 8px) 0 auto; min-width: 200px; max-height: var(--op-city-menu-space); overflow-y: auto; padding: 6px; border: 1px solid var(--op-line); border-radius: 10px; background: var(--op-panel); box-shadow: 0 10px 28px rgba(18, 56, 46, .14); }
.op-city-menu[hidden] { display: none; }
.op-city-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: var(--op-deep); font-size: 14px; text-align: left; cursor: pointer; }
.op-city-menu [role="option"]:hover, .op-city-menu [role="option"]:focus, .op-city-menu [aria-selected="true"] { background: var(--op-soft); outline-offset: -3px; }
.op-city-check { visibility: hidden; }
.op-city-menu [aria-selected="true"] .op-city-check { visibility: visible; }
.op-count { color: var(--op-muted); font-size: 12px; }
.op-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.op-main .op-subscribe-trigger { border: 1px solid var(--op-line); border-radius: 8px; padding: 9px 12px; color: var(--op-brand); background: var(--op-panel); font-size: 13px; font-weight: 600; cursor: pointer; }
.op-subscribe-dialog, .op-subscribe-dialog * { box-sizing: border-box; }
.op-subscribe-dialog { width: min(504px, calc(100% - 32px)); max-height: calc(100svh - 40px); margin: auto; padding: 36px; overflow-y: auto; border: 1px solid var(--op-line); border-radius: 20px; background: var(--op-paper); color: var(--op-ink); box-shadow: 0 24px 80px #12382e26; font-family: Inter, "Noto Sans SC", Arial, sans-serif; line-height: 1.5; }
.op-subscribe-dialog::backdrop { background: #12382e66; }
.op-subscribe-dialog h2 { margin: 12px 24px 0 0; color: var(--op-deep); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.op-subscribe-dialog button { font: inherit; cursor: pointer; }
.op-subscribe-dialog :focus-visible { outline: 3px solid var(--op-brand); outline-offset: 3px; }
.op-subscribe-dialog button:disabled { opacity: .6; cursor: wait; }
.op-subscribe-kicker { margin: 0; color: var(--op-brand); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.op-subscribe-close { position: absolute; inset: 18px 18px auto auto; width: 32px; height: 32px; border: 1px solid var(--op-line); border-radius: 50%; color: var(--op-muted); background: var(--op-panel); font-size: 22px !important; line-height: 1; }
.op-subscribe-intro { margin: 16px 0 24px; color: var(--op-muted); font-size: 14px; }
.op-subscribe-options { display: grid; gap: 12px; }
.op-subscribe-option { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--op-line); border-radius: 12px; background: var(--op-panel); cursor: pointer; }
.op-subscribe-option:has(input:checked) { border-color: var(--op-brand); background: var(--op-soft); }
.op-subscribe-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--op-brand); }
.op-subscribe-option strong, .op-subscribe-option span span { display: block; }
.op-subscribe-option strong { color: var(--op-deep); font-size: 14px; font-weight: 600; }
.op-subscribe-option span span { margin-top: 5px; color: var(--op-muted); font-size: 12px; line-height: 1.55; }
.op-subscribe-note { margin: 16px 0 22px; color: var(--op-muted); font-size: 11px; line-height: 1.6; }
.op-subscribe-note a { color: var(--op-brand); text-underline-offset: 3px; }
.op-subscribe-primary { width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid var(--op-brand); border-radius: 9px; background: var(--op-brand); color: white; font-size: 14px !important; font-weight: 600 !important; }
.op-subscribe-later { width: 100%; min-height: 40px; margin-top: 5px; border: 0; background: transparent; color: var(--op-muted); font-size: 13px !important; }
.op-subscribe-login { display: block; margin-top: 10px; color: var(--op-brand); font-size: 12px; text-align: center; text-underline-offset: 3px; }
.op-subscribe-foot { margin: 16px 0 0; color: var(--op-muted); font-size: 10px; text-align: center; }
.op-subscribe-message { color: #a32918; font-size: 13px; }
@media (max-width: 540px) { .op-subscribe-dialog { padding: 28px 22px 22px; border-radius: 16px; } .op-subscribe-dialog h2 { margin-right: 0; font-size: 24px; } .op-subscribe-option { padding: 14px; } }
@media (max-width: 360px) { .op-subscribe-dialog h2 { font-size: 22px; } }
.op-results { position: relative; display: grid; gap: var(--op-space-40); }
.op-card { display: grid; gap: var(--op-space-24); min-width: 0; padding: var(--op-space-32); border: 1px solid var(--op-line); border-radius: 16px; background: var(--op-panel); }
.op-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 208px; align-items: start; gap: var(--op-space-32); min-width: 0; }
.op-card-info { display: grid; min-width: 0; gap: var(--op-space-16); }
.op-card-aside { display: grid; gap: var(--op-space-16); min-width: 0; padding-left: var(--op-space-24); border-left: 1px solid var(--op-line); }
.op-card-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-12); }
.op-employer { color: var(--op-brand); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.op-card-deadline { color: var(--op-muted); font-size: 12px; }
.op-badge { display: inline-flex; align-items: center; align-self: flex-start; min-height: 32px; padding: 8px; border-radius: 8px; background: var(--op-soft); color: var(--op-brand); font-size: 11px; font-weight: 600; line-height: 1.45; }
.op-card-summary { display: grid; gap: var(--op-space-8); min-width: 0; }
.op-card h2 { color: var(--op-deep); font-size: 26px; font-weight: 600; line-height: 1.35; }
.op-card h2 a { color: inherit; text-decoration: none; }
.op-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.op-card-summary > p { color: var(--op-muted); font-size: 15px; line-height: 1.65; }
.op-card-meta { padding-top: var(--op-space-20); border-top: 1px solid var(--op-line); color: var(--op-muted); font-size: 13px; }
.op-card-pay { display: grid; gap: var(--op-space-4); min-width: 0; }
.op-card-pay strong { color: var(--op-deep); font-size: 28px; font-weight: 600; }
.op-card-pay strong { overflow-wrap: anywhere; }
.op-card-pay-range strong { font-size: 20px; }
.op-card-pay span { color: var(--op-muted); font-size: 13px; }
.op-volunteer-badge { background: #f5f0e4; color: #66522b; }
.op-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--op-space-8); width: fit-content; min-height: 48px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: var(--op-brand); color: #fff !important; font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center; text-decoration: none; cursor: pointer; }
.op-button:hover { background: var(--op-deep); }
.op-button-quiet { border-color: var(--op-line); background: var(--op-panel); color: var(--op-deep) !important; }
.op-button-quiet:hover { background: var(--op-soft); }
.op-card-action { width: 100%; align-self: start; }
.op-empty { display: grid; gap: var(--op-space-20); padding: var(--op-space-32); border: 1px solid var(--op-line); border-radius: 16px; background: var(--op-panel); }
.op-empty h2 { color: var(--op-deep); font-size: 24px; font-weight: 600; }
.op-empty p { color: var(--op-muted); }
.op-detail { display: grid; align-content: start; gap: var(--op-space-32); }
.op-page-controls { display: flex; justify-content: space-between; align-items: center; gap: var(--op-space-16); }
.op-back { font-size: 14px; font-weight: 500; text-decoration: none; }
.op-back:hover { text-decoration: underline; }
.op-role-heading { display: flex; flex-direction: column; gap: var(--op-space-8); }
.op-role-heading h1 { font-size: 34px; }
.op-role-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-12); }
.op-role-meta p { color: var(--op-muted); font-size: 16px; }
.op-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--op-space-24); padding: var(--op-space-16); border-radius: 12px; background: var(--op-panel); }
.op-facts > div { display: grid; gap: var(--op-space-4); min-width: 0; }
.op-facts dt { color: var(--op-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.op-facts dd:first-of-type { color: var(--op-deep); font-size: 22px; font-weight: 600; }
.op-facts dd { overflow-wrap: anywhere; }
.op-facts dd:last-of-type { color: var(--op-muted); font-size: 12px; }
.op-workbench { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--op-space-24); align-items: start; min-width: 0; }
.op-section-nav > p { margin-bottom: var(--op-space-8); color: var(--op-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.op-tabs { display: grid; gap: var(--op-space-8); }
.op-tabs button { min-height: 48px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--op-muted); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.op-tabs [aria-selected="true"] { color: var(--op-deep); background: var(--op-selected); }
.op-panels { display: grid; gap: var(--op-space-24); min-width: 0; }
.op-panel { padding: var(--op-space-24); border-radius: 16px; background: var(--op-panel); min-width: 0; scroll-margin-top: 160px; }
.op-panel[hidden] { display: none; }
.op-reading { display: grid; gap: var(--op-space-20); min-width: 0; }
.op-panel h2 { color: var(--op-deep); font-size: 26px; font-weight: 600; line-height: 1.45; }
.op-panel-overview h2 { font-size: 28px; }
.op-overview-copy { font-size: 16px; }
.op-reading hr { width: 100%; height: 1px; border: 0; margin: 0; background: var(--op-line); }
.op-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-space-24); }
.op-highlights h3 { margin-bottom: var(--op-space-4); color: var(--op-deep); font-size: 14px; font-weight: 600; }
.op-highlights p { color: var(--op-muted); font-size: 13px; }
.op-panel-action { padding-top: var(--op-space-20); border-top: 1px solid var(--op-line); }
.op-steps { display: grid; gap: var(--op-space-20); list-style: none; margin: 0; padding: 0; }
.op-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--op-space-16); }
.op-step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--op-soft); color: var(--op-brand); font-size: 12px; font-weight: 600; }
.op-step h3, .op-fit-title { margin-bottom: var(--op-space-4); color: var(--op-deep); font-size: 18px; font-weight: 600; }
.op-step p, .op-secondary-copy { color: var(--op-muted); font-size: 14px; }
.op-submission { display: grid; gap: var(--op-space-8); padding: var(--op-space-16); border-radius: 8px; background: var(--op-soft); }
.op-submission p:first-child { font-size: 13px; font-weight: 500; }
.op-submission a { max-width: 100%; width: fit-content; font-size: 18px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.op-submission a:hover { text-decoration: underline; }
.op-submission p:last-child { color: var(--op-muted); font-size: 12px; }
.op-interview { color: var(--op-muted); font-size: 13px; }
.op-key-details, .op-employer-documents { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--op-line); }
.op-key-details h3, .op-employer-documents h3 { color: var(--op-deep); font-size: 16px; font-weight: 600; }
.op-detail-rows > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--op-line); }
.op-detail-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.op-detail-rows dt { color: var(--op-muted); font-size: 13px; }
.op-detail-rows dd { font-size: 14px; overflow-wrap: anywhere; }
.op-employer-documents a { width: fit-content; font-size: 14px; overflow-wrap: anywhere; text-underline-offset: 3px; }
.op-closed { display: grid; gap: var(--op-space-8); padding: var(--op-space-16); border: 1px solid var(--op-line); border-radius: 8px; background: var(--op-paper); font-size: 14px; }
@media (max-width: 760px) {
  .op-main { min-height: 0; padding-block: var(--op-space-32) 40px; }
  .op-main[data-opportunities-page="list"] { --op-list-bottom-space: 120px; padding-top: var(--op-space-32); }
  .op-intro { margin-bottom: var(--op-space-24); }
  .op-intro-top { grid-template-areas: "eyebrow language" "title title"; grid-template-columns: minmax(0, 1fr) 136px; row-gap: 14px; }
  .op-eyebrow { display: none; }
  .op-intro h1 { grid-area: title; font-size: 30px; line-height: 1.18; max-width: none; }
  .op-intro .op-language { grid-area: language; width: 136px; }
  .op-intro .op-language button { font-size: 13px; }
  .op-intro > p { font-size: 15px; }
  .op-filters { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--op-space-12); margin-bottom: var(--op-space-32); padding-bottom: var(--op-space-20); }
  .op-city { grid-area: 1 / 1; width: 160px; max-width: none; }
  .op-main .op-city-trigger { min-height: 44px; padding: 10px 12px; gap: 8px; font-size: 13px; }
  .op-filter-actions { display: contents; }
  .op-main .op-subscribe-trigger { grid-area: 1 / 2; justify-self: end; min-height: 44px; padding: 9px 10px; white-space: nowrap; font-size: 12px; }
  .op-count { grid-area: 2 / 1 / 3 / -1; }
  .op-results { gap: 28px; }
  .op-card { gap: var(--op-space-24); padding: var(--op-space-24); }
  .op-card-body { grid-template-columns: minmax(0, 1fr); gap: var(--op-space-24); }
  .op-card-info { gap: var(--op-space-16); }
  .op-card-source { gap: var(--op-space-8) var(--op-space-12); }
  .op-card-aside { gap: var(--op-space-16); padding-left: 0; border-left: 0; }
  .op-card h2 { font-size: 24px; }
  .op-card-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-space-8); justify-self: start; padding: 0; border-radius: 0; background: transparent; }
  .op-card-pay strong { font-size: 30px; }
  .op-card-pay-range strong { font-size: 24px; }
  .op-card-meta { padding-top: var(--op-space-16); }
  .op-detail { gap: var(--op-space-24); }
  .op-back { font-size: 12px; }
  .op-role-heading { gap: var(--op-space-12); }
  .op-role-heading h1 { order: 2; font-size: 31px; }
  .op-role-meta { display: contents; }
  .op-role-meta .op-badge { order: 1; }
  .op-role-meta p { order: 3; font-size: 13px; }
  .op-facts { grid-template-columns: minmax(0, 1fr); gap: var(--op-space-12); }
  .op-facts > div { grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--op-space-16); }
  .op-facts dt { grid-row: 1 / 3; }
  .op-facts dd:first-of-type { font-size: 16px; }
  .op-facts dd:last-of-type { grid-column: 2; }
  .op-workbench { grid-template-columns: minmax(0, 1fr); }
  .op-section-nav > p { display: none; }
  .op-tabs { display: flex; gap: var(--op-space-4); overflow-x: auto; padding: 4px; margin: -4px; }
  .op-tabs button { flex-shrink: 0; white-space: nowrap; }
  .op-panel { padding: var(--op-space-20); }
  .op-panel h2 { font-size: 24px; }
  .op-panel-overview h2 { font-size: 23px; }
  .op-highlights { grid-template-columns: minmax(0, 1fr); }
  .op-step h3 { font-size: 17px; }
  .op-submission a { font-size: 15px; }
  .op-detail-rows > div { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .op-panel-action .op-button { width: 100%; }
}
@media (max-width: 360px) { .op-city { width: 140px; } }
@media (prefers-reduced-motion: reduce) { .op-main * { scroll-behavior: auto !important; } }