/* join the team. Built from the approved prototype (docs/design/join-the-team-prototype.html, Direction A
   "Ledger"): roles as aligned rows you compare across; every fact carries a source mark that opens the
   employer's exact words. Approved by Chris, 8 November 2026. */
:root{
  --bg:#f4f6f5; --surface:#fbfcfb; --ink:#121716; --soft:#3e4745; --muted:#5f6b68; --rule:#d5dbd8;
  --accent:#0e5a6b; --accent-ink:#ffffff; --mark:#0e5a6b; --hl:#d8ece9; --warn:#7a4b00;
  --sans:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1312; --surface:#151a19; --ink:#e9eeec; --soft:#c2cbc8; --muted:#94a19d; --rule:#283130;
  --accent:#6cc4d3; --accent-ink:#06191d; --mark:#6cc4d3; --hl:#163a3e; --warn:#e3b45f; color-scheme:dark;}}
:root[data-theme="dark"]{--bg:#0f1312; --surface:#151a19; --ink:#e9eeec; --soft:#c2cbc8; --muted:#94a19d; --rule:#283130;
  --accent:#6cc4d3; --accent-ink:#06191d; --mark:#6cc4d3; --hl:#163a3e; --warn:#e3b45f; color-scheme:dark;}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
button{font:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s5)}
.mono{font-family:var(--mono); font-size:13px; letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}  /* filtered-out rows stay hidden, even where a layout sets display */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Sample build banner: never confused with live data */
.sample{background:var(--ink); color:var(--bg); font:500 13px/1.4 var(--mono); padding:var(--s2) var(--s5); text-align:center}
/* Site header */
.site{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule)}
.logo{display:flex; align-items:baseline; gap:.22em; text-decoration:none; color:var(--ink); line-height:1; font-size:24px; white-space:nowrap}
.logo .join{font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; font-size:1.18em; letter-spacing:-.01em}
.logo .team{font-family:var(--sans); font-weight:500; letter-spacing:-.045em}
.logo .stop{color:var(--accent); font-weight:600; margin-left:-.24em}
.site-actions{display:flex; gap:var(--s2); align-items:center}
.site-nav{display:flex; gap:var(--s5); margin-left:auto; margin-right:var(--s4)}
.site-nav a{color:var(--soft); text-decoration:none; font-weight:500}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:6px}
.ghost{border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:6px; padding:var(--s2) var(--s3); min-height:36px; cursor:pointer}
/* Intro: small, so the list starts above the fold */
.intro{display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:end; padding:var(--s7) 0 var(--s5)}
h1{font:600 clamp(36px,5vw,52px)/1.05 var(--sans); letter-spacing:-.03em; margin:0 0 var(--s3); text-wrap:balance}
.intro p{margin:0; color:var(--soft); max-width:60ch}
.meta{color:var(--muted); text-align:right}
.meta b{color:var(--ink); font-weight:500}
/* Filters */
.filters{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:end; padding:var(--s4) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.field{display:grid; gap:var(--s1)}
.field label{color:var(--muted); font:500 13px/1.2 var(--sans)}
select{appearance:none; border:1px solid var(--rule); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%235f6b68'/%3E%3C/svg%3E") no-repeat right 10px center; color:var(--ink); border-radius:6px; padding:var(--s2) 30px var(--s2) var(--s3); min-height:40px; min-width:150px; font:inherit}
.check{display:flex; gap:var(--s2); align-items:center; min-height:40px}
.check input{width:18px;height:18px; accent-color:var(--accent)}
.active{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; padding:var(--s3) 0; color:var(--muted)}
.tagx{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--rule); background:var(--surface); color:var(--ink); border-radius:4px; padding:2px 8px; min-height:28px; cursor:pointer}
.linkbtn{background:none; border:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 0; min-height:28px}
.mobile-filters{display:none}
.ledger .lbl{display:none}
.rail{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin:0 0 var(--s4); background:var(--surface)}
.rail button{appearance:none; border:0; border-right:1px solid var(--rule); background:none; color:var(--ink); text-align:left; padding:var(--s3); min-height:64px; cursor:pointer; display:grid; gap:2px; position:relative}
.rail button:last-child{border-right:0}
.rail button small{font:400 12px/1.2 var(--mono); color:var(--muted)}
.rail button .ix{font:500 11px/1 var(--mono); color:var(--muted)}
.rail button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.rail button[aria-pressed="true"] small,.rail button[aria-pressed="true"] .ix{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.rail button[disabled]{color:var(--muted); cursor:default}
.rail-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:var(--s5) 0 var(--s2)}
.rail-head h2{font:600 15px/1.2 var(--sans); margin:0}
.rail-head span{color:var(--muted)}
.stages{display:flex; flex-wrap:wrap; gap:4px 10px}
/* Ledger */
.ledger{width:100%; border-collapse:collapse}
.ledger th{font:500 12px/1.2 var(--mono); color:var(--muted); text-align:left; padding:var(--s3) var(--s3) var(--s2); border-bottom:1px solid var(--ink); white-space:nowrap}
.ledger td{padding:var(--s4) var(--s3); border-bottom:1px solid var(--rule); vertical-align:top}
.ledger tr:hover td{background:var(--surface)}
.ledger .role a{color:var(--ink); font-weight:600; text-decoration:none; font-size:17px; line-height:1.3}
.ledger .role a:hover{text-decoration:underline}
.ledger .co{display:block; color:var(--soft); margin-top:2px}
.ledger td.d{font-family:var(--mono); font-size:13.5px; color:var(--soft); white-space:nowrap}
.ledger td.role{min-width:230px}
.ledger td.pay{white-space:normal; min-width:120px}
.stages .st{white-space:nowrap}
.ledger td.ns,.ledger .ns{color:var(--muted)}
.ex{display:inline-block; font:500 11px/1 var(--mono); border:1px dashed var(--muted); color:var(--muted); border-radius:3px; padding:3px 5px; margin-left:6px; vertical-align:2px}
.low{display:inline-block; font:500 11px/1 var(--mono); color:var(--warn); margin-left:4px}
.stage{font:500 12.5px/1.2 var(--mono); color:var(--soft)}
.stage::before{content:"◆ "; color:var(--accent)}
.found{color:var(--muted)}
/* Signature: source marks */
.src{position:relative; display:inline-block; margin-left:3px; vertical-align:1px}
.src summary{list-style:none; cursor:pointer; font:500 10.5px/1 var(--mono); color:var(--mark); border:1px solid color-mix(in srgb,var(--mark) 50%,transparent); border-radius:3px; padding:2px 3px; min-width:24px; min-height:24px; display:inline-grid; place-items:center}
.src summary::-webkit-details-marker{display:none}
.src[open] summary{background:var(--mark); color:var(--accent-ink)}
.src .q{position:absolute; z-index:4; left:0; top:calc(100% + 6px); width:min(340px,80vw); background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:var(--s3) var(--s4); box-shadow:0 10px 30px rgba(0,0,0,.12); font:400 14px/1.5 var(--sans); color:var(--ink); white-space:normal}
.src .q blockquote{margin:0 0 var(--s2); padding-left:var(--s3); border-left:2px solid var(--mark)}
.src .q small{color:var(--muted); font:400 12px/1.4 var(--mono); display:block}
/* Lower page */
.below{display:grid; grid-template-columns:1fr; gap:var(--s6); padding:var(--s7) 0}
.panel{border-top:1px solid var(--ink); padding-top:var(--s4)}
.panel h2{font:600 18px/1.3 var(--sans); margin:0 0 var(--s2)}
.services li{margin-bottom:var(--s2)}
footer.foot{border-top:1px solid var(--rule); padding:var(--s5) 0 var(--s7); color:var(--muted); font-size:14px}
.state-note{border:1px dashed var(--muted); border-radius:8px; padding:var(--s3) var(--s4); color:var(--soft); margin:var(--s4) 0}
/* Role page */
.crumb{padding:var(--s5) 0 0}
.rhead{display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:end; padding:var(--s5) 0 var(--s5); border-bottom:1px solid var(--rule)}
.rhead h1{font-size:clamp(32px,4.4vw,46px)}
.rhead .co{color:var(--soft); font-size:18px}
.apply{display:inline-flex; align-items:center; gap:var(--s2); background:var(--accent); color:var(--accent-ink); text-decoration:none; border-radius:6px; padding:0 var(--s5); min-height:48px; font-weight:600; white-space:nowrap}
.apply:hover{filter:brightness(1.07)}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--rule); margin:0}
.fact{padding:var(--s4) var(--s3) var(--s4) 0}
.fact dt{color:var(--muted); font:500 12px/1.2 var(--mono); margin-bottom:6px}
.fact dd{margin:0; font-weight:500}
.fact dd.ns{color:var(--muted); font-weight:400}
.rbody{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s7); padding:var(--s6) 0 var(--s8)}
.desc{max-width:68ch}
.desc p,.desc li{color:var(--soft)}
.desc .lit{background:var(--hl); color:var(--ink); border-radius:2px; box-shadow:0 0 0 2px var(--hl)}
aside.side{display:grid; gap:var(--s5); align-content:start}
.side h2{font:500 12px/1.2 var(--mono); color:var(--muted); margin:0 0 var(--s2)}
.side p{margin:0; color:var(--soft); font-size:14.5px}
.side ol{margin:0; padding-left:18px; color:var(--soft); font-size:14.5px; overflow-wrap:anywhere}
/* Mobile */
@media (max-width:820px){
  .site-nav{gap:var(--s3); margin-right:var(--s2)}
  .intro{grid-template-columns:1fr; padding-top:var(--s6)}
  .meta{text-align:left}
  .filters.desktop{display:none}
  .mobile-filters{display:flex; justify-content:space-between; align-items:center; padding:var(--s3) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail button:nth-child(4){border-right:0}
  .rail button:nth-child(-n+4){border-bottom:1px solid var(--rule)}
  .ledger thead{display:none}
  .ledger, .ledger tbody, .ledger tr, .ledger td{display:block; width:100%}
  .ledger tr{border-bottom:1px solid var(--rule); padding:var(--s3) 0}
  .ledger td{border:0; padding:2px 0}
  .ledger td.d{display:inline-block; width:auto; margin-right:var(--s3)}
  .ledger .lbl{display:inline}
  .rbody{grid-template-columns:1fr}
  .rhead{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
}
dialog{border:1px solid var(--rule); border-radius:12px; background:var(--bg); color:var(--ink); width:min(520px,94vw); padding:var(--s5)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .field{margin-bottom:var(--s4)}
dialog select{width:100%}
.btn{background:var(--ink); color:var(--bg); border:0; border-radius:6px; padding:0 var(--s4); min-height:44px; cursor:pointer; font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}