/* ============================================================
   OUTSKIRT — recruitment page: the four doors  (2026-09-02)

   Clan selector + live entry readout, replacing four static rule cards.
   Inherits the site's scoreboard system: square chrome, hairline borders,
   Clash uppercase micro-labels, system sans for support text, and exactly
   one gold per viewport — the roster meter fill.
   ============================================================ */

.osrc {
  --osrc-paper: #fff;
  --osrc-sunken: #f6f7f9;
  --osrc-line: #e7e9ee;
  --osrc-line-2: #e0e1e1;
  --osrc-ink: #2f3542;
  --osrc-ink-2: #3c424f;
  --osrc-ink-3: #55657c;
  --osrc-ink-4: #55657c;   /* labels on paper: Ink Tertiary, 5.9:1. Ink Muted is 2.77:1 here. */
  --osrc-gold: #f0c040;
  --osrc-live: #217a35;    /* 5.4:1 on paper; #2f9e44 was 3.45:1 */
  --osrc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  max-width: 620px;
  margin: 0 auto;
  padding: 0 2px;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* Mesmerize ships clearfix pseudos that become flex/grid items and eat a
   track or a gap. Neutralise them on every custom container up front. */
.osrc *::before,
.osrc *::after,
.osrc-shared *::before,
.osrc-shared *::after { content: none !important; }
.osrc .osrc-dot::before,
.osrc .osrc-dot::after,
.osrc .osrc-meter i::after { content: '' !important; }

/* ---------- selector ---------- */

.osrc-picklbl {
  display: block !important;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-4);
  margin: 0 0 6px;
}

.osrc-picker { position: relative; margin: 0 0 12px; }

.osrc-trigger {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--osrc-paper);
  border: 1px solid var(--osrc-line-2);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: none;
  color: var(--osrc-ink);
  min-width: 0;
}
.osrc-trigger:hover { border-color: var(--osrc-ink-4); }
.osrc-trigger:focus-visible { outline: 3px solid rgba(240, 192, 64, .5); outline-offset: 2px; }
.osrc-trigger-badge { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.osrc-trigger-txt { display: block; min-width: 0; flex: 1 1 auto; }
.osrc-trigger-name {
  display: block;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--osrc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osrc-trigger-sub {
  display: block;
  font-family: var(--osrc-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--osrc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osrc-chev { flex: 0 0 auto; color: var(--osrc-ink-4); }
.osrc-trigger[aria-expanded="true"] .osrc-chev { transform: rotate(180deg); }

.osrc-list {
  position: absolute;
  z-index: 40;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--osrc-paper);
  border: 1px solid var(--osrc-line-2);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
  max-height: 62vh;
  overflow-y: auto;
}
.osrc-list[hidden] { display: none; }

.osrc-opt {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--osrc-line);
  min-width: 0;
}
.osrc-opt:last-child { border-bottom: 0; }
.osrc-opt img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.osrc-opt-txt { display: block; min-width: 0; flex: 1 1 auto; }
.osrc-opt-txt b {
  display: block;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--osrc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osrc-opt-txt span {
  display: block;
  font-family: var(--osrc-sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--osrc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The chosen row is carried by its substrate alone — no tick, no rail. The
   light tint is Tint You (#2a2614) brought up to paper at the same hue, not a
   value invented light-first. */
.osrc-opt.is-sel { background: #fbf1d3; }
.osrc-opt:hover { background: var(--osrc-sunken); }
.osrc-opt.is-sel:hover { background: #f8eadf; }
/* keyboard cursor: the documented gold focus ring, inset. The background step
   alone was 1.04:1 — invisible to the person who needs it most. */
.osrc-opt.is-cursor { box-shadow: inset 0 0 0 2px rgba(240, 192, 64, .85); }

/* ---------- clan panel ---------- */

.osrc-panel {
  background: var(--osrc-paper);
  border: 1px solid var(--osrc-line);
  border-radius: 16px;
  padding: 14px;
  overflow: hidden;
  min-width: 0;
}
.osrc-panel[hidden] { display: none; }

.osrc-id {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.osrc-id-badge { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.osrc-id-txt { min-width: 0; flex: 1 1 auto; }
.osrc-id-name {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .03em;
  color: var(--osrc-ink);
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osrc-id-meta { display: flex !important; flex-wrap: wrap; gap: 5px; }
.osrc-chip {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px;
  background: var(--osrc-sunken);
  border: 1px solid var(--osrc-line);
  border-radius: 0;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-3);
  white-space: nowrap;
}
.osrc-chip--tag { letter-spacing: .04em; }

/* Roster meter — the section's one gold, and its one authored motion. */
.osrc-roster { margin: 14px 0 0; }
.osrc-roster-head {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
}
.osrc-lbl {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-4);
}
.osrc-roster-val {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--osrc-ink);
  font-variant-numeric: tabular-nums;
}
.osrc-roster-val i { font-style: normal; font-size: 12px; color: var(--osrc-ink-4); }

.osrc-meter {
  height: 9px;
  background: var(--osrc-sunken);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
}
.osrc-meter i {
  display: block;
  position: relative;
  height: 100%;
  width: var(--osrc-w, 0%);
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, var(--osrc-t1), var(--osrc-t2));
  overflow: hidden;
}
/* Availability ramp — the fuller the roster, the hotter the bar. Signal colours
   are earned here: "one seat left" is a state, which is what the State-Only
   Signal Rule asks for. Text tones are the light-safe end of each hue
   (5.4-6.5:1 on paper); the bar keeps the saturated end. */
.osrc-roster { --osrc-t1: #f6c443; --osrc-t2: #e9a30b; --osrc-tt: #7d5e00; --osrc-td: #e9a30b; }
.osrc-roster.is-plenty { --osrc-t1: #5ec97f; --osrc-t2: #2f9e44; --osrc-tt: #217a35; --osrc-td: #2f9e44; }
.osrc-roster.is-some   { --osrc-t1: #f6c443; --osrc-t2: #e9a30b; --osrc-tt: #7d5e00; --osrc-td: #e0a106; }
.osrc-roster.is-few    { --osrc-t1: #ffa94d; --osrc-t2: #e8710a; --osrc-tt: #a8480a; --osrc-td: #e8710a; }
.osrc-roster.is-last   { --osrc-t1: #f4776a; --osrc-t2: #d92d20; --osrc-tt: #b3261e; --osrc-td: #d92d20; }
.osrc-panel.is-on .osrc-meter i { animation: osrc-fill .9s cubic-bezier(.25, .7, .3, 1) both; }
.osrc-meter i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: osrc-shimmer 2.8s linear infinite;
}
@keyframes osrc-fill { from { width: 0; } }
@keyframes osrc-shimmer { to { transform: translateX(100%); } }

.osrc-roster-foot {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-family: var(--osrc-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--osrc-tt);
  font-weight: 600;
}
.osrc-roster-foot.is-full { color: var(--osrc-ink-4); font-weight: 400; }
.osrc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--osrc-td);
  flex: 0 0 auto;
  animation: osrc-pulse 2.4s ease-out infinite;
}
/* the pulse ring takes the tier's own hue, so it never contradicts the caption */
@keyframes osrc-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.osrc-dot { color: var(--osrc-td); }

/* Entry readouts */
.osrc-reqs {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 14px 0 0;
}
.osrc-req {
  background: var(--osrc-sunken);
  border: 1px solid var(--osrc-line);
  border-radius: 0;
  padding: 9px 5px;
  text-align: center;
  min-width: 0;
}
.osrc-req img { height: 24px; width: auto; max-width: 30px; object-fit: contain; display: block; margin: 0 auto 5px; }
/* Town Hall art is a wide building, not a badge — give it the room to read. */
.osrc-req img.osrc-req-th { height: 30px; max-width: 46px; margin-bottom: 1px; }
.osrc-req b {
  display: block;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--osrc-ink);
}
.osrc-req span {
  display: block;
  margin-top: 2px;
  font-family: var(--osrc-sans);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--osrc-ink-4);
}

/* Live proof — what this clan actually is */
.osrc-proof {
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--osrc-line);
}
.osrc-pf {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  min-width: 0;
}
.osrc-pf img { height: 22px; width: auto; max-width: 30px; object-fit: contain; flex: 0 0 auto; }
.osrc-pf-v {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--osrc-ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
.osrc-pf-l {
  font-family: var(--osrc-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--osrc-ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osrc-tags { display: flex !important; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.osrc-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--osrc-paper);
  border: 1px solid var(--osrc-line-2);
  border-radius: 0;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-3);
  white-space: nowrap;
}
.osrc-tag img { width: 16px; height: 16px; object-fit: contain; }

.osrc-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--osrc-sunken);
  border-left: 1px solid var(--osrc-line-2);
  font-family: var(--osrc-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--osrc-ink-2);
}

/* Clan rules — collapsed by default. The panel's job is to be readable in one
   screen; the full rule set is a deliberate second click, not a wall. */
.osrc-cr {
  margin: 12px 0 0;
  border-top: 1px solid var(--osrc-line);
}
.osrc-cr-sum {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0 0;
  cursor: pointer;
  list-style: none;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink);
}
.osrc-cr-sum::-webkit-details-marker { display: none; }
.osrc-cr-sum::marker { content: ''; }
.osrc-cr-sum svg { flex: 0 0 auto; color: var(--osrc-ink-4); }
.osrc-cr[open] .osrc-cr-sum svg { transform: rotate(180deg); }
.osrc-cr-sum:focus-visible { outline: 3px solid rgba(240, 192, 64, .5); outline-offset: 2px; }
.osrc-cr-body { padding: 4px 0 2px; }
.osrc-cr-h {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-4);
  margin: 12px 0 5px;
}
.osrc-cr-h:first-child { margin-top: 8px; }
.osrc-cr-l { list-style: none; margin: 0; padding: 0; }
/* The theme sets a font-family on bare <li> at a specificity a single class
   cannot beat, so a whole rule set was rendering in Clash — exactly the wall of
   display type the Two-Tier Rule exists to prevent. Support text stays sans. */
.osrc .osrc-cr-l li {
  position: relative;
  margin: 0 0 6px;
  padding: 0 0 0 16px;
  font-family: var(--osrc-sans) !important;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--osrc-ink-3);
  list-style: none;
}
/* a drawn tick rail rather than a bullet glyph */
.osrc .osrc-cr-l li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--osrc-ink-4);
}

.osrc-apply {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--osrc-ink);
  border: 1px solid var(--osrc-ink);
  border-radius: 0;
  box-shadow: none;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  transition: none;
}
.osrc-apply img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.osrc-apply:hover { background: var(--osrc-ink-2); border-color: var(--osrc-ink-2); }
.osrc-apply:focus-visible { outline: 3px solid rgba(240, 192, 64, .5); outline-offset: 2px; }
.osrc-apply.is-off {
  border-color: var(--osrc-line-2);
  color: var(--osrc-ink-4) !important;
  background: var(--osrc-sunken);
  cursor: not-allowed;
}
.osrc-apply.is-off img { display: none; }

.osrc-down {
  font-family: var(--osrc-sans);
  font-size: 12.5px;
  color: var(--osrc-ink-3);
  text-align: center;
  margin: 0;
}

/* ---------- family-wide rules ---------- */

.osrc-shared {
  --osrc-ink-4: #55657c;
  --osrc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 620px;
  margin: 22px auto 0;
  padding: 0 2px;
  text-align: left;
}
.osrc-shared-t {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--osrc-ink-4, #8e9dae);
  margin: 0 0 8px;
}
.osrc-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e7e9ee; }
.osrc-rule {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid #e7e9ee;
  margin: 0;
  min-width: 0;
}
.osrc-rule img { width: 28px; height: 26px; object-fit: contain; flex: 0 0 auto; margin-top: 1px; }
.osrc-rule div { min-width: 0; }
.osrc-rule b {
  display: block;
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2f3542;
  margin: 0 0 2px;
}
.osrc-rule span {
  display: block;
  font-family: var(--osrc-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: #55657c;
}
.osrc-shared-f {
  margin: 9px 0 0;
  font-family: var(--osrc-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--osrc-ink-4);
}

/* ---------- Steps to Apply — one rail, one owner ---------- */

body.page-id-365 #steps .row[data-type="row"] {
  display: block !important;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}
body.page-id-365 #steps .row[data-type="row"] > [class*="col-"] {
  position: relative;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
}
body.page-id-365 #steps .row[data-type="row"] > [class*="col-"]:last-child { padding-bottom: 0 !important; }
body.page-id-365 #steps .row[data-type="row"] > [class*="col-"]::before { content: none !important; }
/* the continuous rail, drawn down the centre of the 34px marker column */
body.page-id-365 #steps .row[data-type="row"] > [class*="col-"]:not(:last-child)::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 0;
  width: 1px;
  background: #e0e1e1;
}
body.page-id-365 #steps .number-container {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  margin: 0;
  display: block !important;
}
body.page-id-365 #steps .link-line { display: none !important; }
body.page-id-365 #steps .number {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #55657c !important;
  border-radius: 0 !important;
  color: #2f3542 !important;
  box-shadow: none;
  line-height: 1 !important;
}
body.page-id-365 #steps .number span {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: .03em;
  color: #2f3542;
}
body.page-id-365 #steps .number-container ~ *,
body.page-id-365 #steps [class*="col-"] > h5,
body.page-id-365 #steps [class*="col-"] > p,
body.page-id-365 #steps [class*="col-"] > div:not(.number-container) { grid-column: 2; }
body.page-id-365 #steps h5,
body.page-id-365 #steps [class*="col-"] h5 {
  font-family: Clash, 'Trebuchet MS', sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2f3542;
  margin: 7px 0 5px !important;
  text-align: left !important;
}
body.page-id-365 #steps p,
body.page-id-365 #steps p.text-center,
body.page-id-365 #steps [class*="col-"] p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 12.5px !important;
  line-height: 1.55;
  color: #55657c;
  text-align: left !important;
  margin: 0 !important;
}
body.page-id-365 #steps p span[style*="700"] { color: #2f3542; }

/* ---------- desktop ---------- */

@media (min-width: 768px) {
  .osrc { max-width: 720px; }
  .osrc-shared { max-width: 720px; }
  .osrc-panel { padding: 14px 16px; }
  .osrc-reqs { gap: 8px; }
  .osrc-req { padding: 11px 8px; }
  .osrc-apply { margin-left: auto; margin-right: auto; max-width: 340px; }
  body.page-id-365 #steps .row.text-center[data-type="row"] { max-width: 720px; }
}

/* ---------- dark ---------- */

html[data-theme="dark"] .osrc {
  --osrc-ink-4: var(--osp-fg-2, #7a7f8a);
  --osrc-paper: var(--osp-bg-1, #161b22);
  --osrc-sunken: var(--osp-bg-2, #1f242c);
  --osrc-line: var(--osp-border, #2d333b);
  --osrc-line-2: var(--osp-border-2, #3a414b);
  --osrc-ink: var(--osp-fg-0, #e6e6e6);
  --osrc-ink-2: var(--osp-fg-1, #b8bcc4);
  --osrc-ink-3: var(--osp-fg-1, #b8bcc4);
  --osrc-live: #4ade80;
}
html[data-theme="dark"] .osrc-panel { border-radius: 12px; }
html[data-theme="dark"] .osrc-list { box-shadow: none; }
html[data-theme="dark"] .osrc-opt.is-sel { background: #2a2614; }
html[data-theme="dark"] .osrc-opt.is-sel:hover { background: #332d18; }
html[data-theme="dark"] .osrc-roster.is-plenty { --osrc-tt: #4ade80; --osrc-td: #4ade80; }
html[data-theme="dark"] .osrc-roster.is-some   { --osrc-tt: #fbbf24; --osrc-td: #fbbf24; }
html[data-theme="dark"] .osrc-roster.is-few    { --osrc-tt: #ffa94d; --osrc-td: #ffa94d; }
html[data-theme="dark"] .osrc-roster.is-last   { --osrc-tt: #f87171; --osrc-td: #f87171; }
/* inverted primary: the loudest neutral, still spending no gold */
html[data-theme="dark"] .osrc-apply { background: var(--osp-fg-0, #e6e6e6); border-color: var(--osp-fg-0, #e6e6e6); color: var(--osp-bg-0, #0d1117) !important; }
html[data-theme="dark"] .osrc-apply:hover { background: var(--osp-fg-1, #b8bcc4); border-color: var(--osp-fg-1, #b8bcc4); }
html[data-theme="dark"] .osrc-apply.is-off { background: var(--osp-bg-2, #1f242c); border-color: var(--osp-border-2, #3a414b); color: var(--osp-fg-2, #7a7f8a) !important; }
html[data-theme="dark"] .osrc-meter { box-shadow: none; }
html[data-theme="dark"] .osrc-apply { border-color: var(--osp-fg-2, #7a7f8a); }
html[data-theme="dark"] .osrc-shared-t { color: var(--osp-fg-2, #7a7f8a); }
html[data-theme="dark"] .osrc-rules,
html[data-theme="dark"] .osrc-rule { border-color: var(--osp-border, #2d333b); }
html[data-theme="dark"] .osrc-rule b { color: var(--osp-fg-0, #e6e6e6); }
html[data-theme="dark"] .osrc-rule span { color: var(--osp-fg-1, #b8bcc4); }
html[data-theme="dark"] .osrc-shared-f { color: var(--osp-fg-2, #7a7f8a); }
html[data-theme="dark"] body.page-id-365 #steps .number { background: var(--osp-bg-1, #161b22); border-color: var(--osp-fg-2, #7a7f8a) !important; }
html[data-theme="dark"] body.page-id-365 #steps .number span { color: var(--osp-fg-0, #e6e6e6); }
html[data-theme="dark"] body.page-id-365 #steps h5 { color: var(--osp-fg-0, #e6e6e6); }
html[data-theme="dark"] body.page-id-365 #steps p,
html[data-theme="dark"] body.page-id-365 #steps p.text-center { color: var(--osp-fg-1, #b8bcc4); }
html[data-theme="dark"] body.page-id-365 #steps p span[style*="700"] { color: var(--osp-fg-0, #e6e6e6); }
html[data-theme="dark"] body.page-id-365 #steps .row[data-type="row"] > [class*="col-"]:not(:last-child)::after {
  background: var(--osp-border-2, #3a414b);
}
html[data-theme="dark"] .osrc-shared { --osrc-ink-4: var(--osp-fg-2, #7a7f8a); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .osrc-panel.is-on .osrc-meter i { animation: none; }
  .osrc-meter i::after { animation: none; opacity: 0; }
  .osrc-dot { animation: none; }
  .osrc-chev { transition: none; }
}