/* Project Explorer stylesheet
 *
 * Lifted from the approved prototype (prototype/registry-prototype.html).
 * Light theme only: the palette on :root is the whole palette. Do not add a
 * prefers-color-scheme block or a [data-theme="dark"] block - see CLAUDE.md.
 *
 * Every colour is a custom property so a value is defined once and reused.
 * Prototype-only rules (role switcher, access annotations) are not carried over.
 */

/* ---------- tokens ---------------------------------------------------- */
:root{
  --paper:#F2F3EF; --surface:#FBFBF9; --surface-2:#E9EBE5; --sunk:#EAECE6;
  --ink:#161A20; --ink-2:#4A5462; --ink-3:#77818E;
  --rule:#D7DAD2; --rule-strong:#BFC4BA;
  --open:#2A4A78; --open-soft:#E3E9F3; --open-line:#B9C8DF;
  --restricted:#6B2D5B; --restricted-soft:#F1E5EE; --restricted-line:#D9BDD2;
  --moss:#36613F; --moss-soft:#E1EBE2;
  --amber:#7E5A0C; --amber-soft:#F4ECD8;
  --rust:#9B3320; --rust-soft:#F6E3DD;
  --shadow:0 1px 2px rgba(22,26,32,.05), 0 8px 24px -16px rgba(22,26,32,.28);

  --f-display:"Spectral", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --shell:1180px;
}
/* Light only, by decision. The palette above is the whole palette: no
   prefers-color-scheme block and no [data-theme="dark"] block, so the page
   renders light whatever theme the viewer's browser or host is set to. */
:root[data-theme]{ color-scheme: light }

/* ---------- base ------------------------------------------------------ */
*{box-sizing:border-box}
/* The browser hides [hidden] with display:none, but that is a user-agent rule
   and ANY author rule setting display beats it regardless of specificity. So
   .check{display:flex} quietly un-hid every tick box the checklist filter tried
   to hide, and typing in the filter box did nothing at all. Stated here once,
   with !important, so setting el.hidden works on every element on every page. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.005em}
h1{font-size:30px; line-height:1.18}
h2{font-size:21px; line-height:1.25}
h3{font-size:17px; line-height:1.3}
p{margin:0}
a{color:var(--open); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--open); outline-offset:2px; border-radius:2px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); padding:var(--s3); z-index:60}
.skip:focus{left:var(--s4); top:var(--s2)}

/* ---------- shell ----------------------------------------------------- */
.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--s5)}
@media(max-width:640px){ .shell{padding:0 var(--s4)} }

.topbar{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--rule-strong)}
.topbar__row{display:flex; align-items:center; gap:var(--s5); padding:var(--s3) 0; flex-wrap:wrap}
/* center, not baseline: baseline is right for two pieces of text and wrong for an
   image beside text, which it hangs off the bottom of. */
.brand{
  display:flex; align-items:center; gap:var(--s3); margin-right:auto;
  text-decoration:none; color:inherit;
}
/* Height-constrained, width auto, and the intrinsic size is on the element so the
   row does not jump as the image loads. */
.brand__logo{height:36px; width:auto; display:block}
/* Divides the logo from the product name without a second piece of text doing it. */
.brand__mark{
  font-family:var(--f-display); font-size:19px; font-weight:600;
  letter-spacing:-.01em; padding-left:var(--s3);
  border-left:1px solid var(--rule-strong);
}
@media(max-width:560px){ .brand__logo{height:28px} }

/* baseline, not center: two pieces of text of different sizes on one line share a
   baseline. Centred, the 11px uppercase label has no descenders and a shorter cap
   height than the name beside it, so the optical centres do not agree and the name
   reads as sitting below the label's line. The exact inverse of .brand, where an
   image beside text wants centring. */
.ctrl{display:flex; align-items:baseline; gap:var(--s2)}
.ctrl__label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap}
.switch{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); cursor:pointer; user-select:none}
.switch input{margin:0; accent-color:var(--open)}

/* ---------- nav ------------------------------------------------------- */
.nav{background:var(--surface); border-bottom:1px solid var(--rule)}
.nav__row{display:flex; gap:var(--s5); overflow-x:auto; scrollbar-width:thin}
.nav__item{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:var(--s3) 0 10px; font-size:13.5px; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.nav__item:hover{color:var(--ink)}
.nav__item[aria-current="page"]{color:var(--ink); border-bottom-color:var(--open); font-weight:500}
.nav__item--restricted[aria-current="page"]{border-bottom-color:var(--restricted)}
.nav__item--restricted::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--restricted); margin-right:6px; vertical-align:2px;
}

/* ---------- role banner ---------------------------------------------- */
.stance{background:var(--open-soft); border-bottom:1px solid var(--open-line)}
.stance__row{display:flex; gap:var(--s3); align-items:baseline; padding:9px 0; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap}
.stance__who{font-weight:600; color:var(--open)}
.stance--restricted{background:var(--restricted-soft); border-bottom-color:var(--restricted-line)}
.stance--restricted .stance__who{color:var(--restricted)}

main{padding:var(--s6) 0 var(--s7)}
.page-head{margin-bottom:var(--s5)}
/* Read by a screen reader, seen by nobody. For a heading a page needs to have and
   does not need to show. Not display:none, which would take it out of the
   accessibility tree along with everything else. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:6px}
.lede{font-family:var(--f-display); font-size:17px; line-height:1.5; color:var(--ink-2); max-width:62ch; margin-top:var(--s2)}
.hint{font-size:12.5px; color:var(--ink-3)}
/* ---------- search + filters ----------------------------------------- */
.finder{display:grid; gap:var(--s3); margin-bottom:var(--s5)}
.search{
  display:flex; align-items:center; gap:var(--s2); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:3px; padding:9px var(--s3); max-width:520px;
}
.search input{flex:1; border:0; background:none; font:inherit; color:var(--ink); min-width:0}
.search input:focus{outline:none}
.search__icon{width:15px; height:15px; flex:none; color:var(--ink-3)}
.filters{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.filters select{
  font:inherit; font-size:12.5px; padding:5px 26px 5px var(--s2); background:var(--surface);
  color:var(--ink); border:1px solid var(--rule); border-radius:3px;
}
.filters__clear{background:none; border:0; font-size:12.5px; color:var(--open); cursor:pointer; padding:4px; text-decoration:underline}
.result-count{font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:var(--s3)}

/* Grouped filters. The legend column names the question each row answers, so a
   long filter set stays scannable instead of becoming one wrapped strip. */
.filterbank{
  border:1px solid var(--rule); border-radius:3px; background:var(--surface);
  padding:var(--s3) var(--s4);
}
.filterbank__group{display:grid; grid-template-columns:104px 1fr; gap:var(--s3); align-items:baseline; padding:var(--s2) 0}
.filterbank__group + .filterbank__group{border-top:1px solid var(--rule)}
.filterbank__legend{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
.filterbank__actions{
  display:flex; gap:var(--s3); align-items:center; margin-top:var(--s2);
  padding-top:var(--s3); border-top:1px solid var(--rule-strong);
}
@media(max-width:640px){
  .filterbank__group{grid-template-columns:1fr; gap:6px}
}

/* ---------- ruled record rows ---------------------------------------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid; grid-template-columns:96px 1fr auto; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule); align-items:start}
.row:hover{background:color-mix(in srgb, var(--surface) 70%, transparent)}
.row__id{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2); padding-top:2px}
/* The registry ID under the J-PAL code: present on every project, but not the
   one colleagues recognise, so it sits quieter. */
.row__altid{font-size:11px; color:var(--ink-3); margin-top:2px}
.row__title{font-family:var(--f-display); font-size:17.5px; font-weight:600; line-height:1.3; margin-bottom:5px}
.row__title a{color:inherit; text-decoration:none}
.row__title a:hover{text-decoration:underline; text-decoration-color:var(--open)}
.row__summary{font-size:13.5px; color:var(--ink-2); max-width:70ch; margin-bottom:7px}
.row__meta{display:flex; gap:var(--s3); flex-wrap:wrap; font-size:12px; color:var(--ink-3)}
.row__meta span{display:inline-flex; align-items:center; gap:5px}
.row__meta span+span::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--rule-strong)}
.row__side{text-align:right; font-size:12px; color:var(--ink-3); display:grid; gap:5px; justify-items:end}
@media(max-width:720px){
  .row{grid-template-columns:1fr; gap:var(--s2)}
  .row__side{justify-items:start; text-align:left}
}

/* ---------- pills ----------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; line-height:1.4;
  padding:2px 8px 2px 7px; border-radius:2px; white-space:nowrap;
  border-left:3px solid currentColor; background:var(--surface-2); color:var(--ink-2);
}
.pill--moss{background:var(--moss-soft); color:var(--moss)}
.pill--amber{background:var(--amber-soft); color:var(--amber)}
.pill--rust{background:var(--rust-soft); color:var(--rust)}
.pill--open{background:var(--open-soft); color:var(--open)}
.pill--restricted{background:var(--restricted-soft); color:var(--restricted)}
.pill--quiet{background:transparent; color:var(--ink-3); border-left-color:var(--rule-strong)}
.pill b{font-weight:600}
.tag{display:inline-block; font-size:11.5px; padding:2px 7px; border:1px solid var(--rule-strong); border-radius:2px; color:var(--ink-2); background:var(--surface)}
/* A present-only attribute inside a meta line: carried by weight, not colour,
   because it is a property of the project and not a state needing attention. */
.mark{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2)}

/* ---------- tables ---------------------------------------------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--surface)}
table.grid{width:100%; border-collapse:collapse; font-size:13px; min-width:760px}
table.grid th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  font-weight:600; padding:10px var(--s3); border-bottom:1px solid var(--rule-strong); background:var(--sunk); white-space:nowrap;
}
table.grid td{padding:10px var(--s3); border-bottom:1px solid var(--rule); vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--surface-2)}
table.grid td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:12.5px; white-space:nowrap}
table.grid td a{color:var(--ink); text-decoration:none}
table.grid td a:hover{text-decoration:underline; text-decoration-color:var(--open)}
.cell-title{font-weight:500}

/* ---------- panels + sections ---------------------------------------- */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:var(--s5)}
.panel--sunk{background:var(--sunk); border-style:dashed}
.section{border-top:1px solid var(--rule); padding-top:var(--s4); margin-top:var(--s5)}
.section:first-child{border-top:0; margin-top:0; padding-top:0}
/* Both shapes of section heading get the same air beneath them. A bare <h3> got
   none at all — every heading carries margin:0 from the base reset, and only the
   .section__head wrapper put any back — so Outcomes and Design sat directly on
   top of their own content while the cards around them did not. Less than the
   padding above, so a heading still reads as belonging to what follows it. */
.section__head, .section > h3{margin-bottom:var(--s3)}
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3)}
.section h3{font-size:15px}
.prose{max-width:66ch; font-size:14.5px; line-height:1.62; color:var(--ink-2)}
.prose+.prose{margin-top:var(--s3)}
.stack{display:grid; gap:var(--s5)}
.stack--tight{gap:var(--s3)}

/* ---------- definition lists ----------------------------------------- */
.dl{display:grid; grid-template-columns:minmax(140px,190px) 1fr; gap:10px var(--s4); font-size:13.5px; margin:0}
.dl dt{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); padding-top:3px}
.dl dd{margin:0; color:var(--ink)}
.dl--stacked{grid-template-columns:1fr; gap:2px var(--s4)}
.dl--stacked dt{padding-top:var(--s3)}
@media(max-width:640px){ .dl{grid-template-columns:1fr; gap:2px} .dl dt{padding-top:var(--s3)} }
/* ---------- project record layout ------------------------------------ */
.record{display:grid; grid-template-columns:266px 1fr; gap:var(--s7); align-items:start}
@media(max-width:900px){ .record{grid-template-columns:1fr; gap:var(--s5)} }
.identity{position:sticky; top:118px; display:grid; gap:var(--s4)}
@media(max-width:900px){ .identity{position:static} }
.identity__id{font-family:var(--f-mono); font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.identity__note{font-size:11.5px; color:var(--ink-3); margin-top:2px}

.clock{border:1px solid var(--rule); border-left:3px solid var(--ink-3); border-radius:3px; padding:var(--s3); background:var(--surface)}
.clock--moss{border-left-color:var(--moss)} .clock--amber{border-left-color:var(--amber)} .clock--rust{border-left-color:var(--rust)}
.clock__label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
.clock__value{font-family:var(--f-mono); font-size:15px; margin-top:3px}
.clock__sub{font-size:12px; color:var(--ink-2); margin-top:4px}

.tabs{display:flex; gap:var(--s4); border-bottom:1px solid var(--rule); margin-bottom:var(--s5); overflow-x:auto}
.tab{appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:0 0 9px;
     font-size:13.5px; color:var(--ink-3); cursor:pointer; white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--open); font-weight:500}
.tab--restricted[aria-selected="true"]{border-bottom-color:var(--restricted)}
.tab__count{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-left:5px}

/* ---------- restricted band ------------------------------------------ */
.band{
  display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4);
  background:var(--restricted-soft); border:1px solid var(--restricted-line); border-left:3px solid var(--restricted);
  border-radius:3px; font-size:12.5px; color:var(--ink-2); margin-bottom:var(--s5);
}
.band b{color:var(--restricted); font-weight:600}
.band--open{background:var(--open-soft); border-color:var(--open-line); border-left-color:var(--open)}
.band--open b{color:var(--open)}
.band--amber{background:var(--amber-soft); border-color:var(--amber); border-left-color:var(--amber)}
.band--amber b{color:var(--amber)}

/* ---------- access annotation ---------------------------------------- */
.redacted{
  border:1px dashed var(--rule-strong); border-radius:3px; padding:var(--s3) var(--s4);
  background:repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb,var(--rule) 40%, transparent) 9px 10px);
  font-size:12.5px; color:var(--ink-2);
}
.redacted__head{display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; margin-bottom:3px}
.redacted__what{font-weight:600; color:var(--ink)}
.redacted__layer{font-family:var(--f-mono); font-size:11px; color:var(--restricted)}
.redacted__why{color:var(--ink-3)}

/* ---------- stat strip ------------------------------------------------ */
.strip{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule); border-radius:3px; background:var(--surface); margin-bottom:var(--s5); overflow:hidden}
.strip__cell{flex:1 1 150px; padding:var(--s3) var(--s4); border-right:1px solid var(--rule); min-width:0}
.strip__cell:last-child{border-right:0}
.strip__label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
.strip__value{font-family:var(--f-mono); font-size:22px; font-variant-numeric:tabular-nums; margin-top:2px; line-height:1.1}
.strip__value--rust{color:var(--rust)} .strip__value--amber{color:var(--amber)} .strip__value--restricted{color:var(--restricted)}
.strip__note{font-size:11.5px; color:var(--ink-3); margin-top:3px}

/* ---------- forms ----------------------------------------------------- */
.form{display:grid; gap:var(--s5); max-width:760px}
.field{display:grid; gap:5px}
.field__label{font-size:12.5px; font-weight:500}
.field__help{font-size:11.5px; color:var(--ink-3)}

/* A tick box and its words are one control: same line, same baseline, both
   clickable. The grid above stacks label over widget, which for a checkbox
   leaves the text hanging above a bare square. */
.check{display:flex; align-items:flex-start; gap:var(--s2); cursor:pointer}
.check input[type=checkbox]{
  margin:0; flex:none; width:15px; height:15px; accent-color:var(--open);
  /* Nudged to sit on the text's first baseline rather than its box top. */
  margin-top:2px;
}
.check__text{font-size:12.5px; font-weight:500; line-height:1.45}
/* Help text lines up under the words, not under the box. */
.field__help--indent{padding-left:calc(15px + var(--s2))}
.field input[type=text], .field input[type=date], .field textarea, .field select{
  font:inherit; font-size:13.5px; padding:8px 10px; background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:3px; width:100%;
}
.field textarea{min-height:76px; resize:vertical; line-height:1.55}
.fieldset{border:1px solid var(--restricted-line); border-left:3px solid var(--restricted); border-radius:3px; padding:var(--s4) var(--s5) var(--s5); margin:0}
.fieldset legend{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--restricted); padding:0 var(--s2); font-weight:600}
.trigger{display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:center; padding:10px 0; border-bottom:1px solid var(--rule)}
.trigger:last-of-type{border-bottom:0}
.trigger__q{font-size:13.5px}
.trigger__hint{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.radios{display:flex; gap:2px; border:1px solid var(--rule-strong); border-radius:3px; overflow:hidden; background:var(--surface)}
.radios label{font-size:12px; padding:5px 11px; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--rule)}
.radios label:last-child{border-right:0}
.radios input{position:absolute; opacity:0; width:0; height:0}
.radios input:checked+span{font-weight:600}
.radios label:has(input:checked){background:var(--open-soft); color:var(--open)}
.radios label:has(input[value="Yes"]:checked){background:var(--rust-soft); color:var(--rust)}
.radios label:has(input[value="Unknown"]:checked){background:var(--amber-soft); color:var(--amber)}
.radios label:has(input:focus-visible){outline:2px solid var(--open); outline-offset:-2px}
@media(max-width:560px){ .trigger{grid-template-columns:1fr} }

/* ---------- buttons --------------------------------------------------- */
.btn{
  appearance:none; font:inherit; font-size:13px; padding:7px var(--s4); cursor:pointer;
  border:1px solid var(--rule-strong); border-radius:3px; background:var(--surface); color:var(--ink);
}
.btn:hover{border-color:var(--ink-3)}
.btn--primary{background:var(--open); border-color:var(--open); color:#fff}
.btn--primary:hover{filter:brightness(1.08); border-color:var(--open)}
.btn--restricted{background:var(--restricted); border-color:var(--restricted); color:#fff}
.btn--small{font-size:12px; padding:4px 10px}
.btnrow{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}

/* ---------- misc ------------------------------------------------------ */
.empty{border:1px dashed var(--rule-strong); border-radius:3px; padding:var(--s5); text-align:center; color:var(--ink-3); font-size:13.5px}
.linkline{font-size:13px; display:flex; gap:var(--s4); flex-wrap:wrap}
.crumb{background:none; border:0; padding:0; font-size:12.5px; color:var(--open); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.foot{border-top:1px solid var(--rule); margin-top:var(--s7); padding:var(--s5) 0 var(--s6); font-size:12px; color:var(--ink-3)}
.foot p{max-width:70ch}
.foot p+p{margin-top:var(--s2)}

/* ---------- status counts that double as the status filter ------------ */
.counts{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule); border-radius:3px;
        background:var(--surface); overflow:hidden; margin-bottom:var(--s4)}
.count{appearance:none; background:none; border:0; border-right:1px solid var(--rule);
       padding:10px var(--s4); cursor:pointer; text-align:left; display:grid; gap:1px;
       border-bottom:2px solid transparent; flex:0 1 auto; min-width:104px}
.count:last-child{border-right:0}
.count:hover{background:var(--surface-2)}
.count__n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:20px; line-height:1.1; color:var(--ink)}
.count__l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3)}
.count.is-on{background:var(--open-soft); border-bottom-color:var(--open)}
.count.is-on .count__n, .count.is-on .count__l{color:var(--open)}
.row__pi{font-size:12.5px; color:var(--ink-2); margin:0 0 7px}
.row__pi b{font-weight:500; color:var(--ink)}
@media(max-width:560px){ .count{flex:1 1 40%; min-width:0} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ---------- staff picker ---------------------------------------------- */
/* Selecting an existing colleague must always look shorter than adding a new
   one, so matches are prominent and "add someone new" is quiet and secondary. */
.picker{display:grid; gap:var(--s2)}
.picker__search{
  font:inherit; font-size:13.5px; padding:8px 10px; width:100%;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:3px;
}
.picker__results{display:grid; gap:2px}
.picker__list{list-style:none; margin:0; padding:0; display:grid; gap:2px;
  border:1px solid var(--rule); border-radius:3px; background:var(--surface); overflow:hidden}
.picker__option{
  appearance:none; width:100%; text-align:left; background:none; border:0;
  padding:8px 10px; cursor:pointer; display:grid; gap:1px;
  border-bottom:1px solid var(--rule);
}
.picker__list li:last-child .picker__option{border-bottom:0}
.picker__option:hover{background:var(--open-soft)}
.picker__name{font-size:13.5px; font-weight:500; color:var(--ink)}
.picker__email{font-size:11.5px; color:var(--ink-3)}
.picker__title{font-size:11.5px; color:var(--ink-2)}
.picker__hint{font-size:12px; color:var(--ink-3); margin:0; padding:2px 0}
.picker__error{font-size:12px; color:var(--rust); display:block}
/* A caution you can proceed past, so it is amber rather than rust: rust in this
   interface means the form refused. */
.picker__warn{
  font-size:12px; color:var(--amber); background:var(--amber-soft);
  border:1px solid var(--rule); border-radius:3px; padding:var(--s2); margin:0 0 var(--s2);
}

.picker__chosen{
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  padding:8px 10px; background:var(--open-soft);
  border:1px solid var(--open-line); border-left:3px solid var(--open); border-radius:3px;
}
.picker__change{
  appearance:none; background:none; border:0; margin-left:auto; padding:0;
  font-size:12px; color:var(--open); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.picker__add{
  appearance:none; background:none; border:1px dashed var(--rule-strong); border-radius:3px;
  padding:7px 10px; font-size:12.5px; color:var(--ink-2); cursor:pointer; text-align:left;
}
.picker__add:hover{border-color:var(--ink-3); color:var(--ink)}

.picker__panel{
  border:1px solid var(--rule-strong); border-left:3px solid var(--amber);
  border-radius:3px; padding:var(--s3) var(--s4) var(--s4);
  background:var(--surface); display:grid; gap:var(--s3);
}
.picker__panel-head{display:flex; align-items:baseline; gap:var(--s3); font-size:13.5px}
.picker__field{display:grid; gap:3px}
.picker__field label{font-size:12px; font-weight:500}
.picker__field input{
  font:inherit; font-size:13.5px; padding:7px 9px; width:100%;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:3px;
}
.htmx-request.picker__search{background:var(--surface-2)}

/* Nav items are links, not buttons, once there are real destinations. */
a.nav__item{text-decoration:none; display:inline-block}
a.nav__item[aria-current="page"]{color:var(--ink); border-bottom-color:var(--open); font-weight:500}

/* ---------- sign-in ---------------------------------------------------- */
.signin{max-width:420px; display:grid; gap:var(--s2)}
.signin__google{display:block; text-align:center; text-decoration:none; padding:11px var(--s4)}
.signin__or{
  display:flex; align-items:center; gap:var(--s3); max-width:420px;
  margin:var(--s5) 0; color:var(--ink-3); font-size:12px;
}
.signin__or::before, .signin__or::after{
  content:""; flex:1; height:1px; background:var(--rule);
}

/* ---------- checklist review points ----------------------------------- */
.row--point{grid-template-columns:52px 1fr auto}
.point__text{font-size:14.5px; line-height:1.5; margin:0 0 4px}
.point__answer{
  display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--rule);
}
.point__followup{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s2);
}
@media(max-width:720px){ .row--point{grid-template-columns:1fr} }

/* Second identifier under the first, in a directory row. */

/* Semicolon-separated fields rendered as lists. Tight leading and a restrained
   marker: these are usually two or three short items, not prose. */
.itemlist{margin:var(--s2) 0 0; padding-left:var(--s4); color:var(--ink-2)}
.itemlist li{margin-bottom:4px; line-height:1.5}
.itemlist li:last-child{margin-bottom:0}
.itemlist--tight{margin-top:0; padding-left:var(--s3); font-size:inherit}

/* ---------- multi-select as a filterable tick list -------------------- */
/* Replaces <select multiple>, where choosing several means ctrl-clicking and one
   stray click silently clears everything. */
.checklist{gap:var(--s2)}
.checklist__filter{
  font:inherit; font-size:12.5px; padding:5px var(--s2); background:var(--surface);
  color:var(--ink); border:1px solid var(--rule-strong); border-radius:3px;
  max-width:280px;
}
.checklist__box{
  border:1px solid var(--rule); border-radius:3px; background:var(--surface);
  padding:var(--s2); max-height:190px; overflow-y:auto;
  display:grid; gap:2px;
}
.checklist__option{padding:3px var(--s1); border-radius:2px}
.checklist__option:hover{background:var(--surface-2)}
.checklist__empty{padding:var(--s2)}
.checklist__count{color:var(--open); font-weight:500}

/* ---------- choosing several from a register -------------------------- */
/* Chips for what is chosen, a search box for the next one. Replaces a tick list
   of the whole register: fine for thirty-eight states, unusable once the list is
   every organisation J-PAL SA has ever worked with. */
.party{display:flex; flex-direction:column; gap:var(--s2)}
.party__chosen{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2);
}
.chip{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:3px var(--s1) 3px var(--s2);
  background:var(--open-soft); border:1px solid var(--open-line); border-radius:12px;
  font-size:12.5px; font-weight:500; line-height:1.4; color:var(--open);
  max-width:100%;
}
.chip__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip__remove{
  flex:none; border:0; background:none; cursor:pointer; padding:0 2px;
  font:inherit; font-size:15px; line-height:1; color:var(--open);
  opacity:.65; border-radius:50%;
}
.chip__remove:hover{opacity:1; background:var(--open-line)}
.party__search{
  font:inherit; font-size:13.5px; padding:8px 10px; background:var(--surface);
  color:var(--ink); border:1px solid var(--rule-strong); border-radius:3px;
  max-width:360px;
}
/* The results sit under the box in flow rather than floating over the page: a
   long form is scrolled, and an absolutely positioned panel detaches from its
   input the moment anything moves. */
.party__results:not(:empty){
  border:1px solid var(--rule); border-radius:3px; background:var(--surface);
  max-height:220px; overflow-y:auto; max-width:360px;
}
.picker__option--taken{
  display:flex; align-items:baseline; gap:var(--s2);
  padding:6px var(--s2); color:var(--ink-3); cursor:default;
}
.party__empty{margin:0}

/* ---------- connections as cards -------------------------------------- */
/* One table of every relationship sorted by an invisible role order made you
   scan a column to find what you came for. Cards answer the question instead. */
.people{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.person{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s2) 0; border-bottom:1px solid var(--rule);
}
.person:last-child{border-bottom:0}
.person__name{font-weight:600; font-size:13.5px}
/* Ended, not deleted: still on the record, plainly not current. */
.person--past{color:var(--ink-3)}
.person--past .person__name{font-weight:500}
.person--past + .person:not(.person--past){border-top:1px solid var(--rule-strong)}
.person__edit{
  flex:none; font-size:12px; color:var(--open); text-decoration:none;
  padding:2px var(--s2); border:1px solid var(--rule); border-radius:3px;
}
.person__edit:hover{background:var(--surface-2)}

/* ---------- directory rows -------------------------------------------- */
/* The code column sat flush against the edge of the list, which reads as
   clipped rather than aligned. */
.row__id{padding-left:var(--s2)}
/* The partners, under the investigators. Same treatment as the line above it:
   both are a muted label with the names picked out, so the two read as one block
   rather than as a heading and a footnote. */
.row__orgs{
  margin:-4px 0 7px; font-size:12.5px; color:var(--ink-2); line-height:1.45;
}
.row__orgs b{font-weight:500; color:var(--ink)}

/* A note under a section's own list, rather than a line of it. Without the gap it
   reads as belonging to the last item above — on the Funding card it looked like a
   remark about whichever donor happened to come last. */
.section__note{margin:var(--s3) 0 0}