/* Shared styles for role pages (roles/*.html). Loaded after site.css.
   Page-unique graphics stay inline in their own page. */

/* Breadcrumb */
.crumb{font-size:.83rem;color:var(--ink-3);padding-top:18px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* Answer box — the at-a-glance facts under the hero */
.answer{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:28px 0}
.answer div{background:var(--surface);padding:16px 18px}
.answer dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  font-weight:700;margin-bottom:4px}
.answer dd{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.02em;font-family:var(--mono)}
.answer dd.txt{font-family:var(--sans);font-size:.98rem;font-weight:600}

/* Horizontal pay bars — used for role and industry breakdowns */
.roles{padding:24px}
.rrow{display:grid;grid-template-columns:minmax(140px,190px) 1fr auto;gap:16px;
  align-items:center;margin-bottom:12px}
.rrow:last-child{margin-bottom:0}
.rname{font-size:.9rem;font-weight:600}
.rname small{display:block;font-weight:400;color:var(--ink-3);font-size:.77rem}
.rbar{height:30px;border-radius:6px;background:linear-gradient(90deg,var(--r2),var(--r1))}
.rbar.alt{background:linear-gradient(90deg,#8a7a5e,#a89070)}
.rval{font-family:var(--mono);font-size:.92rem;font-weight:600;white-space:nowrap}
@media(max-width:620px){
  .rrow{grid-template-columns:1fr auto;gap:6px}
  .rbar{grid-column:1/-1}
}

/* Gear grid */
.gear{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:20px}
.gear .item{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface);
  display:flex;flex-direction:column}
.gear .item h4{margin:0 0 4px;font-size:.95rem}
.gear .item p{margin:0 0 12px;font-size:.87rem}
.gear .item .links{margin-top:auto;padding-top:4px}
.gear .item .buy{display:block;font-size:.83rem;font-weight:600;
  color:var(--accent);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding-bottom:1px;align-self:flex-start;width:fit-content}
.gear .item .buy:hover{border-bottom-color:var(--accent)}
.gear .item .buy::after{content:" ↗";font-weight:400;opacity:.6}
/* Secondary "alternatives" link — a search, so it survives any single product
   going out of stock. Deliberately quieter than the primary. */
.gear .item .alt{display:block;margin-top:6px;font-size:.78rem;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid transparent;width:fit-content}
.gear .item .alt:hover{color:var(--ink-2);border-bottom-color:var(--line-strong)}
.gear .item .price{font-weight:400;color:var(--ink-3);font-size:.78rem}

/* FTC / Amazon Associates notice — sits directly above any block of paid links,
   because the FTC requires disclosure to be adjacent and unavoidable, not only
   in the footer or on a separate page. */
.aff-note{margin-top:20px;padding:12px 16px;border-left:3px solid var(--amber);
  background:var(--amber-soft);border-radius:0 8px 8px 0;font-size:.84rem;color:var(--ink-2)}
.aff-note strong{color:var(--ink)}

/* ------------------------------------------------ percentile range bars
   A floating band, not a bar from zero: each row shows where that trade's
   10th-90th percentile sits on one shared $0-130k scale, so the rows can be
   read against each other. The figures sit at the band's own edges because
   they describe the band, not the track.
   Label colour is var(--surface), not #fff: the gradient inverts to light
   green in dark mode, where white text would be unreadable. */
.floor{padding:24px}
.floor-row{margin-bottom:20px}
.floor-row:last-child{margin-bottom:0}
.floor-row .t{font-size:.9rem;font-weight:600;margin-bottom:8px}
.floor-row .t small{font-weight:400;color:var(--ink-3);font-size:.78rem}
.floor-track{position:relative;height:34px;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--line)}
.floor-fill{position:absolute;top:-1px;bottom:-1px;border-radius:7px;
  background:linear-gradient(90deg,var(--r2),var(--r1));
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;font-family:var(--mono);font-size:.82rem;font-weight:650;
  color:var(--surface);white-space:nowrap}
@media(max-width:620px){
  .floor-fill{font-size:.71rem;padding:0 8px;gap:6px}
  .floor-row .t small{display:block}
}