/* TryHired Organic Design System · production page families (careers). Builds on th.css + th-families.css. */
.fx-kind { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; margin-right: 4px; border: 1px solid var(--rule-2); }
.fx-kind.fact { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.fx-kind.advice { color: var(--gold-text); background: var(--hi-soft); border-color: transparent; }
.fx-kind.opinion { color: var(--t-ai); background: rgba(47, 93, 124, 0.08); border-color: transparent; }
.fx-map { font-size: 14px; color: var(--mute-2); margin: 14px 0 0; }
.fx-sub { color: var(--mute-2); font-size: 15px; margin: 14px 0 0; max-width: 78ch; }
.fx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 18px 0 0; }
.fx-facts > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.fx-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.fx-facts dd { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.fx-facts dd.n { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--mute); }
.fx-tasks { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 10px; }
.fx-tasks li { counter-increment: t; position: relative; padding: 14px 16px 14px 54px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.fx-tasks li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 16px; top: 15px; font-family: var(--mono); font-size: 12px; color: var(--gold-text); font-weight: 700; }
.fx-tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fx-tech li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fx-tech b { font-size: 15px; } .fx-tech span { font-size: 12.5px; color: var(--mute); }
.fx-tech em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); margin-top: 4px; }
.fx-tech em.hot { color: var(--gold-text); }
.fx-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fx-rel > a, .fx-rel > div { display: flex; flex-direction: column; gap: 3px; padding: 16px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); text-decoration: none; transition: border-color 0.15s, transform 0.15s var(--ease); }
.fx-rel > a:hover { border-color: var(--gold); transform: translateY(-2px); }
.fx-rel strong { font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; } .fx-rel span { font-size: 13.5px; color: var(--mute-2); }
.fx-rel em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ok); letter-spacing: 0.04em; }
.fx-tablewrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--card); margin-top: 16px; }
.fx-tablewrap .th-table { min-width: 520px; }
.fx-tablewrap .th-table td:not(:first-child), .fx-tablewrap .th-table th[scope="row"] ~ td { font-variant-numeric: tabular-nums; }
.fx-tablewrap .th-table th[scope="row"] { background: none; font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 650; border-bottom: 1px solid var(--rule); padding: 13px 14px; }
.fx-sort thead button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.fx-sort thead button::after { content: "↕"; opacity: 0.45; }
.fx-sort thead th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.fx-sort thead th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.fx-sort thead button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.fx-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 104px; gap: 14px; align-items: center; font-size: 14.5px; padding: 8px 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); }
.fx-bars li.me { border-color: var(--gold); background: var(--hi-soft); }
.fx-bars i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--w), var(--paper-deep) var(--w)); }
.fx-bars b { font-variant-numeric: tabular-nums; text-align: right; }
.fx-split { gap: 14px !important; margin-bottom: 4px; }
.fx-mini { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fx-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); font-size: 14.5px; }
.fx-mini span { font-variant-numeric: tabular-nums; color: var(--mute-2); }
.fx-herocard { padding: 22px; }
.fx-edu { display: flex; height: 22px; border-radius: 999px; overflow: hidden; margin: 14px 0 12px; background: var(--paper-deep); }
.fx-edu i { width: var(--w); background: var(--c, var(--gold)); }
.fx-edu i[data-c="1"], .fx-edul li[data-c="1"] { --c: #E9DFC7; } .fx-edu i[data-c="2"], .fx-edul li[data-c="2"] { --c: #DCC48A; }
.fx-edu i[data-c="3"], .fx-edul li[data-c="3"] { --c: #C9992F; } .fx-edu i[data-c="4"], .fx-edul li[data-c="4"] { --c: #A67D20; }
.fx-edu i[data-c="5"], .fx-edul li[data-c="5"] { --c: #7A5A12; } .fx-edu i[data-c="6"], .fx-edul li[data-c="6"] { --c: #2F5D7C; }
.fx-edu i[data-c="7"], .fx-edul li[data-c="7"] { --c: #3E7499; } .fx-edu i[data-c="8"], .fx-edul li[data-c="8"] { --c: #2F6B4F; }
.fx-edu i[data-c="9"], .fx-edul li[data-c="9"] { --c: #4C8A6C; } .fx-edu i[data-c="10"], .fx-edul li[data-c="10"] { --c: #6A4C93; }
.fx-edu i[data-c="11"], .fx-edul li[data-c="11"] { --c: #8C3F2E; } .fx-edu i[data-c="12"], .fx-edul li[data-c="12"] { --c: #17181C; }
.fx-edul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.fx-edul li { display: flex; gap: 10px; align-items: baseline; }
.fx-edul li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; transform: translateY(1px); }
.fx-edul b { font-variant-numeric: tabular-nums; min-width: 38px; }
.fx-dist { padding: 18px; display: grid; gap: 8px; }
.fx-dist .row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.fx-dist i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--w), var(--paper-deep) var(--w)); }
.fx-dist b { text-align: right; font-variant-numeric: tabular-nums; }
.fx-order { padding: 20px; } .fx-order ol { margin: 10px 0 0; padding-left: 20px; font-weight: 650; display: grid; gap: 4px; }
.fx-kw .seg { margin-bottom: 14px; }
.fx-kw ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-kw li { display: inline-flex; flex-direction: column; padding: 10px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); }
.fx-kw li[hidden] { display: none; }
.fx-kw b { font-size: 14.5px; } .fx-kw span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.fx-ask { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-family: var(--serif); font-size: 17px; }
.fx-cm .row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 110px 110px; }
.fx-fit { display: grid; grid-template-columns: 1fr 42px; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.fx-fit i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--ok) var(--w), var(--paper-deep) var(--w)); }
.fx-delta { font-variant-numeric: tabular-nums; font-weight: 650; } .fx-delta.up { color: var(--ok); } .fx-delta.down { color: var(--risk); }
.fx-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.fx-gap { padding: 18px; } .fx-gap strong { display: block; margin: 6px 0 8px; font-size: 15.5px; } .fx-gap p { margin: 6px 0 0; font-size: 14.5px; color: var(--mute-2); }
.fx-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fx-role { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; transition: border-color 0.15s; }
.fx-role:hover { border-color: var(--gold); } .fx-role[hidden] { display: none; }
.fx-role strong { font-size: 15px; line-height: 1.3; } .fx-role span { font-size: 12.5px; color: var(--mute); }
.fx-search input { min-width: 240px; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--card); min-height: 44px; }
.fx-rank td:first-child { font-family: var(--mono); color: var(--mute); width: 44px; }
.fx-src { gap: 18px !important; }
@media (max-width: 760px) {
  .fx-bars li { grid-template-columns: minmax(0, 1fr) 96px; } .fx-bars li i { grid-column: 1 / -1; order: 3; }
  .fx-cm .row { grid-template-columns: minmax(0, 1fr) 96px; } .fx-cm .row .fx-fit { grid-column: 1 / -1; }
  .fx-cm .row.h { display: none; }
  .fx-dist .row { grid-template-columns: minmax(0, 1fr) 44px; } .fx-dist .row i { grid-column: 1 / -1; }
  .fx-search input { min-width: 0; width: 100%; }
  .fx-tasks li { padding-left: 46px; font-size: 16px; }
}
.fam-hero .wrap > * { min-width: 0; }
.rh-ladder button { min-width: 0; }
.rh-hero .wrap { align-items: start; }