/* ============================================================
   Regulatory DNA comparison + the applicability engine.
   Same manuscript system, same pigments: lapis for what binds,
   cinnabar for what is contested, gold for the reader's position.
   ============================================================ */

body{
  --tool-meta:#B0A695;
  --tool-line:var(--line);
  --yes:#8FB98A;      /* verdigris — an obligation that stands */
  --maybe:var(--live);
  --no:var(--paper-dim);
  --undet:#C0705A;
}
body[data-theme="light"]{
  --tool-meta:#584D52;
  --yes:#2C6B3F;
  --maybe:#6B520C;
  --no:#4E4352;
  /* same 4.39:1 shortfall as --pipe-not, corrected the same way */
  --undet:#96311D;
}

/* ---------------------------------------------------------- shared page shell */
.tool-shell{max-width:1120px;margin:0 auto;padding:0 32px 110px}
.tool-top{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;padding:26px 0 18px;border-bottom:1px solid var(--line)}
.tool-top a.back{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mech);text-decoration:none}
.tool-top a.back:hover{color:var(--live)}
.tool-top .tt-brand{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tool-meta)}
.tool-top .tt-sp{margin-left:auto}
.tool-head{padding:52px 0 8px}
.tool-head h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.6vw,56px);line-height:1.05;letter-spacing:-.015em;margin:0;color:var(--paper);text-wrap:balance;max-width:20ch}
.tool-head .lede{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--paper-dim);max-width:64ch;margin:18px 0 0}
.tool-stats{display:flex;flex-wrap:wrap;gap:0 32px;margin:24px 0 0;font-family:var(--mono);font-size:11px;color:var(--tool-meta)}
.tool-stats b{color:var(--paper);font-weight:500}

/* ---------------------------------------------------------- DNA table */
.dna-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--ink-1)}
.dna-table{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}
.dna-table th,.dna-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.dna-table thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper);font-weight:500;border-bottom:1px solid var(--ink-3);background:var(--ink-2);
  position:sticky;top:0;z-index:2;
}
.dna-table tbody th{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tool-meta);font-weight:500;white-space:normal;width:150px;background:var(--ink-1);
}
.dna-table tbody td{color:var(--paper-dim);line-height:1.55}
.dna-table tbody tr:last-child th,.dna-table tbody tr:last-child td{border-bottom:0}
.dna-table tbody tr:hover td,.dna-table tbody tr:hover th{background:var(--ink-2)}

.dna-note{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
  text-transform:none;color:var(--tool-meta);margin-top:4px;line-height:1.45}
.dna-unknown{font-family:var(--mono);font-size:10.5px;color:var(--undet);font-style:italic}
.dna-more{font-family:var(--mono);font-size:9.5px;color:var(--tool-meta);margin-left:5px}
.dna-proposal{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--crit);margin-top:4px}
.dna-derived{
  display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mech);border:1px solid var(--mech);padding:1px 5px;margin-bottom:7px;cursor:help;
}
.dna-auth,.dna-date{display:block;margin-bottom:7px}
.dna-auth:last-child,.dna-date:last-child{margin-bottom:0}
.dna-auth b,.dna-date b{color:var(--paper);font-weight:500}
.dna-date b.future{color:var(--maybe)}
.dna-role{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--tool-meta);margin-top:2px}
.dna-role[data-e="entry-into-force"]{color:var(--mech)}
.dna-role[data-e="application"]{color:var(--maybe)}
.dna-role[data-e="transposition"]{color:var(--crit)}
.mount-fallback{font-family:var(--mono);font-size:11px;color:var(--tool-meta)}

.dna-controls{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:34px 0 18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dna-controls .dc-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tool-meta)}
.dna-chip{
  all:unset;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:4px 9px;border:1px solid var(--ink-3);color:var(--paper-dim);
}
.dna-chip[aria-pressed="true"]{border-color:var(--mech);color:var(--mech);background:var(--mech-dim)}
.dna-chip:focus-visible{outline:1px solid var(--live);outline-offset:2px}

/* ---------------------------------------------------------- applicability */
.ap-layout{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start;margin-top:34px}
@media (max-width:940px){.ap-layout{grid-template-columns:1fr}}

#ap-form{display:grid;gap:22px;position:sticky;top:20px}
@media (max-width:940px){#ap-form{position:static}}
.ap-group{border:1px solid var(--line);background:var(--ink-1);padding:16px 18px 18px;margin:0}
.ap-group legend{font-family:var(--display);font-size:17px;color:var(--paper);padding:0 6px;margin-left:-6px}
.ap-help{font-size:12.5px;line-height:1.5;color:var(--tool-meta);margin:6px 0 12px}
.ap-opts{display:grid;gap:2px}
.ap-opt{
  display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:baseline;
  padding:7px 8px;cursor:pointer;border:1px solid transparent;font-size:13.5px;line-height:1.4;color:var(--paper-dim);
  /* the label is the target, not the 13px box the browser draws for the
     checkbox, so it has to clear the minimum on its own */
  min-height:32px;align-content:center;
}
.ap-opt input{width:16px;height:16px;accent-color:var(--mech)}
.ap-opt:focus-within{outline:2px solid var(--live);outline-offset:1px}
.ap-opt:hover{background:var(--ink-2)}
.ap-opt.on{border-color:var(--mech);background:var(--mech-dim);color:var(--paper)}
.ap-opt input{accent-color:var(--mech);margin:0}
.ap-opt input:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.ap-optnote{grid-column:2;font-family:var(--mono);font-size:9.5px;line-height:1.45;color:var(--tool-meta);margin-top:3px}
.ap-actions{display:flex;gap:10px}
#ap-reset{
  /* all:unset wipes the target-size rule set further down this file — an id
     selector outranks it — so the minimum is restated here rather than left
     to a !important war */
  all:unset;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tool-meta);border-bottom:1px solid var(--ink-3);
  display:inline-flex;align-items:center;min-height:24px;
}
#ap-reset:hover{color:var(--crit);border-bottom-color:var(--crit)}
#ap-reset:focus-visible{outline:1px solid var(--live);outline-offset:3px}

.ap-empty{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--tool-meta);
  border:1px dashed var(--ink-3);padding:26px 24px;margin:0}

.ap-summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.ap-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border:1px solid currentColor;white-space:nowrap;
}
.ap-badge[data-v="yes"]{color:var(--yes)}
.ap-badge[data-v="maybe"]{color:var(--maybe)}
.ap-badge[data-v="no"]{color:var(--no)}
.ap-badge[data-v="undet"]{color:var(--undet)}

.ap-result{border:1px solid var(--line);background:var(--ink-1);margin:0 0 16px}
.ap-result[data-v="yes"]{border-left:3px solid var(--yes)}
.ap-result[data-v="maybe"]{border-left:3px solid var(--maybe)}
.ap-result[data-v="no"]{border-left:3px solid var(--no)}
.ap-res-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line)}
.ap-res-head h3{font-family:var(--display);font-size:22px;font-weight:400;color:var(--paper);margin:0}
.ap-full{font-size:12px;color:var(--tool-meta);width:100%;line-height:1.45}
.ap-status{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;color:var(--tool-meta)}
.ap-status[data-s="applicable"],.ap-status[data-s="in-force"]{color:var(--mech)}
.ap-status[data-s="partly-applicable"],.ap-status[data-s="transposition-pending"],.ap-status[data-s="transposition-overdue"]{color:var(--maybe)}
.ap-status[data-s="proposal"],.ap-status[data-s="stalled"]{color:var(--crit)}
.ap-proposal{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--crit)}

.ap-hit{padding:16px 18px;border-bottom:1px solid var(--line)}
.ap-hit:last-child{border-bottom:0}
.ap-hit-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-bottom:10px}
.ap-verdict{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.ap-verdict[data-v="yes"]{color:var(--yes)}
.ap-verdict[data-v="maybe"]{color:var(--maybe)}
.ap-verdict[data-v="no"]{color:var(--no)}
.ap-conf{font-size:12px;color:var(--tool-meta);font-style:italic}
.ap-downgraded{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--undet);border:1px solid var(--undet);padding:1px 5px;cursor:help}
.ap-ruleid{font-family:var(--mono);font-size:9.5px;color:var(--tool-meta);margin-left:auto}
.ap-rationale{font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--paper);margin:0 0 12px;max-width:70ch}

.ap-field{margin:12px 0 0}
.ap-field h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tool-meta);margin:0 0 6px;font-weight:500}
.ap-field.warn h4{color:var(--crit)}
.ap-provs{display:flex;flex-wrap:wrap;gap:6px 10px}
.ap-prov,.ap-auth,.ap-date{
  font-size:12.5px;line-height:1.45;color:var(--paper-dim);
  border:1px solid var(--ink-3);padding:5px 9px;display:inline-block;max-width:100%;
}
.ap-prov b,.ap-auth b,.ap-date b{color:var(--paper);font-weight:500;font-family:var(--mono);font-size:11px}
.ap-date b.future{color:var(--maybe)}
.ap-role{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--tool-meta);margin-top:2px}
.ap-list{margin:0;padding-left:17px;font-size:12.5px;line-height:1.55;color:var(--paper-dim)}
.ap-list li{margin-bottom:4px}
.ap-field.warn .ap-list{color:var(--paper)}
.ap-cites{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.5;color:var(--paper-dim);display:grid;gap:5px}
.ap-cites a{color:var(--mech);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.ap-why-down{border-left:2px solid var(--undet);padding:8px 0 8px 12px;margin:0 0 12px}
.ap-why-down b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--undet);margin-bottom:5px}
.ap-why-down ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.55;color:var(--paper-dim)}
.ap-verified{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--tool-meta)}
.ap-never{color:var(--crit)}

.ap-undet{border:1px solid var(--undet);border-left:3px solid var(--undet);background:var(--crit-dim);padding:18px 20px;margin:20px 0 0}
.ap-undet h3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--undet);margin:0 0 9px;font-weight:500}
.ap-undet p{font-size:13.5px;line-height:1.6;color:var(--paper);margin:0;max-width:72ch}
.ap-undet b{color:var(--paper);font-weight:500}
.ap-undet strong{color:var(--undet);font-weight:500}

/* the standing disclaimer — never collapsed, never dismissible */
.ap-caveat{
  border:1px solid var(--crit);border-left:3px solid var(--crit);
  padding:20px 24px;margin:30px 0 0;background:var(--ink-1);
}
.ap-caveat h2{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--crit-text);margin:0 0 11px;font-weight:500}
.ap-caveat p{font-size:13.5px;line-height:1.65;color:var(--paper-dim);margin:0 0 10px;max-width:74ch}
.ap-caveat p:last-child{margin-bottom:0}
.ap-caveat b{color:var(--paper);font-weight:500}
.ap-caveat ul{margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--paper-dim);max-width:74ch}
.ap-caveat li{margin-bottom:6px}

/* in-article link out to the tools, kept to one quiet line */
.tool-link{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  margin:14px 0 0;padding:11px 14px;border:1px solid var(--line);background:var(--ink-1);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tool-meta);
}
.tool-link a{color:var(--mech);text-decoration:none;border-bottom:1px solid transparent}
.tool-link a:hover{color:var(--live);border-bottom-color:var(--live)}
.tool-link .tl-sp{margin-left:auto}

@media print{
  #ap-form,.dna-controls,.tool-link{display:none !important}
  .ap-caveat{border-color:var(--print-ink)}
}

/* ============================================================
   Institutional map + enforcement observatory (Phase 4)
   ============================================================ */

body{
  --role-legislates:#9B8FD4; --role-supervises:var(--mech);   --role-investigates:#7FB0C4;
  --role-fines:var(--crit);  --role-guidance:var(--live);      --role-transposes:#C08A5E;
  --role-appeals:#8FA9C9;    --role-interprets:#A98FC4;
  --pipe-reached:#8FB98A;    --pipe-not:#C0705A;               --pipe-unknown:#7C7488;
}
body[data-theme="light"]{
  --role-legislates:#4C3F86; --role-investigates:#2A5C70;      --role-transposes:#7A4A1E;
  --role-appeals:#33547A;    --role-interprets:#5B3A7A;
  /* the global --crit and --live clear AA on body text but not at 9px pill size */
  --role-fines:#8E2F19;      --role-guidance:#6B520C;
  /* --pipe-not was #9A3A22 and measured 4.39:1 on the day panel at 10.5px,
     just under AA; taken down to 4.65:1 on the darkest day surface */
  /* #2C6B3F measured 4.39:1 on the day panel and 3.90:1 on a raised surface,
     both under AA at 10.5px; #245B35 clears 4.88:1 on the darkest of them */
  --pipe-reached:#245B35;    --pipe-not:#96311D;               --pipe-unknown:#565064;
}

/* ---------------------------------------------------------- institutional map */
.im-legend{display:grid;gap:6px;margin:22px 0 0;padding:16px 18px;border:1px solid var(--line);background:var(--ink-1)}
.im-legend-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline;font-size:12.5px;line-height:1.5;color:var(--paper-dim)}
@media (max-width:640px){.im-legend-row{grid-template-columns:1fr;gap:2px}}

.im-pill{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border:1px solid currentColor;white-space:nowrap;display:inline-block;
}
.im-pill[data-role="legislates"]{color:var(--role-legislates)}
.im-pill[data-role="supervises"]{color:var(--role-supervises)}
.im-pill[data-role="investigates"]{color:var(--role-investigates)}
.im-pill[data-role="fines"]{color:var(--role-fines)}
.im-pill[data-role="issues-guidance"]{color:var(--role-guidance)}
.im-pill[data-role="transposes"]{color:var(--role-transposes)}
.im-pill[data-role="hears-appeals"]{color:var(--role-appeals)}
.im-pill[data-role="interprets"]{color:var(--role-interprets)}
.im-pill[data-role="designates"],.im-pill[data-role="coordinates"],.im-pill[data-role="advises"]{color:var(--tool-meta)}

.im-body{border:1px solid var(--line);background:var(--ink-1);padding:18px 20px;margin:0 0 14px;scroll-margin-top:24px}
.im-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline}
.im-head h2,.im-head h3{font-family:var(--display);font-size:23px;font-weight:400;color:var(--paper);margin:0}
.im-type{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tool-meta)}
.im-ms{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--mech);border:1px solid var(--mech);padding:1px 5px}
.im-roles{display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-top:4px}
.im-full{font-size:12.5px;color:var(--tool-meta);margin:7px 0 0;line-height:1.45}
.im-rel{font-size:12.5px;color:var(--paper-dim);margin:8px 0 0;line-height:1.5}
.im-rel a{color:var(--mech);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.im-rel a:hover{color:var(--live);border-bottom-color:var(--live)}

.im-comps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.im-comp{background:var(--ink-1);padding:10px 13px;display:grid;grid-template-columns:150px 1fr;gap:5px 14px;align-items:baseline;font-size:12.5px;line-height:1.5}
.im-comp .im-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tool-meta)}
.im-comp[data-role="supervises"] .im-role{color:var(--role-supervises)}
.im-comp[data-role="fines"] .im-role{color:var(--role-fines)}
.im-comp[data-role="legislates"] .im-role{color:var(--role-legislates)}
.im-comp[data-role="interprets"] .im-role{color:var(--role-interprets)}
.im-comp[data-role="hears-appeals"] .im-role{color:var(--role-appeals)}
.im-comp[data-role="transposes"] .im-role{color:var(--role-transposes)}
.im-inst{color:var(--paper);font-weight:500}
.im-excl{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--crit-text);border:1px solid var(--crit);padding:1px 5px;margin-left:7px;cursor:help}
.im-bases,.im-nobasis,.im-scope,.im-note,.im-unver{grid-column:2}
.im-basis{font-family:var(--mono);font-size:10px;color:var(--mech);border:1px solid var(--ink-3);padding:1px 6px;margin-right:5px;display:inline-block}
.im-nobasis{font-family:var(--mono);font-size:9.5px;color:var(--tool-meta);font-style:italic}
.im-scope{display:block;color:var(--paper-dim);margin-top:3px}
.im-note{display:block;color:var(--tool-meta);font-size:11.5px;margin-top:3px}
.im-unver{display:block;color:var(--undet);font-size:11.5px;margin-top:3px}
@media (max-width:640px){.im-comp{grid-template-columns:1fr}.im-bases,.im-nobasis,.im-scope,.im-note,.im-unver{grid-column:1}}

.im-rolegroup{border:1px solid var(--line);background:var(--ink-1);padding:16px 18px;margin:0 0 14px}
.im-rolehead{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px}
.im-rolehead h2,.im-rolehead h3{font-family:var(--display);font-size:21px;font-weight:400;color:var(--paper);margin:0}
.im-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tool-meta);margin-left:auto}
.im-rolebodies{display:grid;gap:1px;background:var(--line);margin-top:12px;border:1px solid var(--line)}
.im-rolebody{background:var(--ink-1);padding:10px 13px;display:grid;grid-template-columns:190px 1fr;gap:14px;font-size:12.5px;line-height:1.5}
.im-rolename{font-family:var(--mono);font-size:11px;color:var(--mech);text-decoration:none;border-bottom:1px solid transparent}
.im-rolename:hover{color:var(--live);border-bottom-color:var(--live)}
.im-rolewhat{color:var(--paper-dim)}
@media (max-width:640px){.im-rolebody{grid-template-columns:1fr;gap:3px}}

/* ---------------------------------------------------------- enforcement */
.enf-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0 0}
.agg{background:var(--ink-1);padding:16px 18px;display:grid;gap:5px;align-content:start}
.agg-n{font-family:var(--display);font-size:30px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.agg-unknown{font-family:var(--mono);font-size:19px;color:var(--undet);letter-spacing:.04em}
.agg-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tool-meta)}
.agg-c{font-size:11.5px;line-height:1.45;color:var(--paper-dim)}
.agg-c b{color:var(--undet);font-weight:500}

.funnel{margin:30px 0 0;border:1px solid var(--line);background:var(--ink-1);padding:20px 22px}
.funnel h2{font-family:var(--display);font-size:22px;font-weight:400;color:var(--paper);margin:0 0 8px}
.funnel-lede{font-size:13px;line-height:1.6;color:var(--paper-dim);margin:0 0 18px;max-width:74ch}
.funnel-lede b{color:var(--paper)}
.fn-row{display:grid;grid-template-columns:160px 1fr 130px;gap:14px;align-items:center;padding:5px 0}
.fn-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tool-meta)}
.fn-bar{display:flex;height:16px;background:var(--ink-0);border:1px solid var(--line)}
.fn-seg{height:100%}
.fn-seg.reached{background:var(--pipe-reached)}
.fn-seg.unknown{background:var(--pipe-unknown);opacity:.45}
.fn-seg.na{background:var(--ink-3)}
.fn-n{font-family:var(--mono);font-size:11px;color:var(--paper);font-variant-numeric:tabular-nums;text-align:right}
.fn-u{color:var(--tool-meta);font-size:9.5px}
@media (max-width:700px){.fn-row{grid-template-columns:1fr;gap:3px}.fn-n{text-align:left}}

.enf-rec{border:1px solid var(--line);background:var(--ink-1);padding:18px 20px;margin:0 0 14px}
.enf-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:11px}
.enf-head h2,.enf-head h3{font-family:var(--display);font-size:22px;font-weight:400;color:var(--paper);margin:0}
.enf-inst,.enf-auth,.enf-date{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tool-meta)}
.enf-inst{color:var(--mech)}
.enf-fine{font-family:var(--mono);font-size:12px;color:var(--paper);margin-left:auto;font-variant-numeric:tabular-nums}
.enf-fine.none{color:var(--tool-meta);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.enf-action{font-family:var(--body);font-size:14px;line-height:1.55;color:var(--paper-dim);margin:12px 0 14px}

.pipe{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 2px}
.pipe-stage{
  all:unset;cursor:pointer;flex:1 1 92px;background:var(--ink-0);padding:8px 6px;
  display:grid;gap:3px;justify-items:center;text-align:center;
}
.pipe-stage:hover{background:var(--ink-2)}
.pipe-stage:focus-visible{outline:2px solid var(--live);outline-offset:-2px}
.pipe-dot{width:8px;height:8px;border-radius:50%;background:var(--pipe-unknown)}
.pipe-stage[data-state="reached"] .pipe-dot{background:var(--pipe-reached)}
.pipe-stage[data-state="not-reached"] .pipe-dot{background:var(--pipe-not)}
.pipe-stage[data-state="na"] .pipe-dot{background:var(--ink-3)}
.pipe-name{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper-dim)}
.pipe-state{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--tool-meta)}
.pipe-stage[data-state="reached"] .pipe-state{color:var(--pipe-reached)}
.pipe-stage[data-state="not-reached"] .pipe-state{color:var(--pipe-not)}
.pipe-stage[data-state="unknown"] .pipe-state{color:var(--undet)}
.pipe-detail{border:1px solid var(--line);border-top:0;background:var(--ink-0);padding:12px 14px}
.pipe-detail h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper);margin:0 0 6px;font-weight:500}
.pipe-detail h3 span[data-state="reached"]{color:var(--pipe-reached)}
.pipe-detail h3 span[data-state="not-reached"]{color:var(--pipe-not)}
.pipe-detail h3 span[data-state="unknown"]{color:var(--undet)}
.pipe-note{font-size:12.5px;line-height:1.55;color:var(--paper-dim);margin:0 0 7px}
.pipe-why{font-size:11.5px;line-height:1.55;color:var(--tool-meta);margin:0}
.pipe-why b{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mech);display:block;margin-bottom:3px}

.enf-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:14px 0 0}
.enf-axis{background:var(--ink-1);padding:9px 12px;display:grid;gap:4px}
.enf-axis dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tool-meta)}
.enf-axis dd{margin:0}
.enf-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--paper)}
.enf-state[data-s="collected"],.enf-state[data-s="paid"],.enf-state[data-s="final"],.enf-state[data-s="implemented"]{color:var(--pipe-reached)}
.enf-state[data-s="annulled"],.enf-state[data-s="not-payable"],.enf-state[data-s="unpaid"]{color:var(--pipe-not)}
.enf-state[data-s="unknown"]{color:var(--undet)}
.enf-state[data-s="appealed"],.enf-state[data-s="pending"],.enf-state[data-s="announced"]{color:var(--maybe)}
.enf-state{display:block}
.enf-axis-note{display:block;font-size:11px;line-height:1.45;color:var(--tool-meta);margin-top:4px}

.enf-sub{font-size:12.5px;line-height:1.6;color:var(--paper-dim);margin:12px 0 0;max-width:76ch}
.enf-sub b{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tool-meta);margin-right:7px}
.enf-quiet{color:var(--tool-meta);font-size:11.5px}
.enf-unknown{color:var(--undet);font-family:var(--mono);font-size:11.5px}
.enf-field{margin:12px 0 0}
.enf-field h3,.enf-field h4{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--tool-meta);margin:0 0 6px;font-weight:500}
.enf-field.warn{border-left:2px solid var(--crit);padding-left:11px}
.enf-field.warn h4{color:var(--crit)}
.enf-field.warn p{font-size:12.5px;line-height:1.55;color:var(--paper);margin:0}
.enf-chips{display:flex;flex-wrap:wrap;gap:5px}
.enf-chip{font-family:var(--mono);font-size:10px;color:var(--mech);border:1px solid var(--ink-3);padding:2px 7px}
.enf-sources{margin:12px 0 0}
.enf-sources summary{cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tool-meta);list-style:none}
.enf-sources summary::-webkit-details-marker{display:none}
.enf-sources summary::before{content:"▸ ";font-size:8px}
.enf-sources[open] summary::before{content:"▾ "}
.enf-sources summary:hover{color:var(--paper)}
.enf-sources summary:focus-visible{outline:1px solid var(--live);outline-offset:3px}
.enf-sources ul{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:6px;font-size:12px;line-height:1.5;color:var(--paper-dim)}
.enf-sources a{color:var(--mech);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.enf-verified{margin-top:13px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--tool-meta)}
.enf-empty{font-family:var(--mono);font-size:12px;color:var(--tool-meta);padding:26px 0}
.enf-count{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tool-meta)}
#enfControls,#imControls{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:28px 0 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#enfControls label,#imControls label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tool-meta)}
#enfControls select,#imControls select{font-family:var(--mono);font-size:11px;color:var(--paper);background:var(--ink-2);border:1px solid var(--line);padding:5px 8px}
#enfControls select:focus-visible,#imControls select:focus-visible{outline:1px solid var(--live);outline-offset:1px}

/* a class of national bodies, distinguished from a named member of that class */
.im-class{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mech); border:1px solid var(--mech); padding:1px 5px; margin-left:7px; cursor:help;
}
.im-memberof{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--tool-meta); margin-top:2px }

/* ============================================================
   PHASE 5 — entity search, the glossary graph, and the
   accessibility affordances both of them need.
   Tokens are declared on `body`, not on :root, because the light
   palette is [data-theme="light"] on <body>: a token defined at
   :root resolves against the dark palette in day mode and stays
   dark. That defect shipped once in Phase 2; it does not recur.
   ============================================================ */

/* visually hidden but announced — used by the palette's live region */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- palette rows: a kind mark, a title, a badge, a snippet ---- */
.cmdk-item .cbody{min-width:0}
.cmdk-item .ct{display:block}
.cmdk-badge,.cmdk-item .cbadge{display:inline-block;margin-left:8px;padding:1px 5px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper-faint);border:1px solid var(--line);vertical-align:2px;white-space:nowrap}
.cmdk-item .cbadge.unver{color:var(--crit);border-color:var(--crit)}
.cmdk-item[data-kind] .cr{color:var(--mech)}
.cmdk-item[data-kind="enforcement"] .cr,
.cmdk-item[data-kind="authority"] .cr{color:var(--live)}
.cmdk-item[data-kind="concept"] .cr{color:var(--paper-dim)}
.cmdk-item:focus-visible{outline:2px solid var(--live);outline-offset:-2px}

/* ---- the glossary as a graph ---- */
.gp-entries{display:block}
.gg-links{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);display:grid;gap:5px}
.gg-row{display:grid;grid-template-columns:82px 1fr;gap:9px;align-items:baseline}
/* "ENFORCEMENT" is one long word and was being clipped by the label column;
   min-width:0 lets the grid item shrink and overflow-wrap breaks it */
.gg-key{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper-faint);line-height:1.7;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.gg-vals{display:flex;flex-wrap:wrap;gap:5px}
.gg-link{display:inline-block;padding:2px 7px;min-height:24px;line-height:19px;
  font-family:var(--mono);font-size:10.5px;color:var(--mech);text-decoration:none;
  border:1px solid var(--ink-3);background:var(--ink-2)}
.gg-link:hover{color:var(--live);border-color:var(--live)}
.gg-link:focus-visible{outline:2px solid var(--live);outline-offset:1px}
.gg-rel{color:var(--paper-dim);font-family:var(--body);font-size:12px}
.gg-class{margin-left:5px;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}
.gg-flat{display:inline-block;padding:2px 7px;font-family:var(--mono);font-size:10.5px;
  color:var(--paper-faint);border:1px dashed var(--ink-3)}
.gloss-entry.lit{outline:1px solid var(--live);outline-offset:3px}

/* the popover gains one line of provenance and a way into the panel */
.gloss-pop-meta{display:block;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--paper-faint);line-height:1.6}
.gloss-pop-more{display:inline-block;margin-top:8px;min-height:24px;line-height:24px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mech);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.gloss-pop-more:hover,.gloss-pop-more:focus-visible{color:var(--live);border-bottom-color:var(--live)}

/* ---- touch: every interactive target clears 24px, and 44px where the
        layout has room. WCAG 2.2 target size (minimum) is 24×24 CSS px. ---- */
@media (max-width:700px){
  .gg-row{grid-template-columns:1fr}
  .gg-link,.gg-flat{min-height:32px;line-height:27px;padding:2px 9px}
  .cmdk-item{padding:13px 12px}
}
@media (pointer:coarse){
  .gg-link,.gg-flat,.gloss-pop-more{min-height:32px;line-height:27px}
  .cmdk-item{min-height:44px}
  .langmenu li{min-height:44px;align-items:center}
}

/* ---- reduced motion: nothing that moves is essential to reading ---- */
@media (prefers-reduced-motion:reduce){
  .gloss-entry.lit{transition:none}
}

/* a record or column arrived at from a search result announces itself briefly */
.enf-lit,.im-lit{outline:2px solid var(--live);outline-offset:4px}
.dna-lit{outline:2px solid var(--live);outline-offset:-2px}
.enf-lit:focus-visible,.im-lit:focus-visible{outline:2px solid var(--live)}
@media (prefers-reduced-motion:no-preference){
  .enf-lit,.im-lit,.dna-lit{transition:outline-color .3s}
}
.gg-yr{color:var(--paper-faint);font-size:9px;margin-left:3px}

/* The section links became a <nav> landmark. display:contents keeps them as
   direct flex children of the header, so the landmark is added without moving
   a single pixel. */
.tool-top > nav,.bib-top > nav{display:contents}

/* Skip link: the first thing in the tab order, visible only when focused.
   Without it a keyboard reader tabs through the whole header on every page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:400;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  /* inverted against the page rather than tinted, so it clears AA in both
     palettes — the gold on vellum pairing came out at 3.47 in day mode */
  background:var(--paper);color:var(--ink-0);border:1px solid var(--paper);
  padding:10px 16px;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:12px;top:12px;outline:2px solid var(--live);outline-offset:2px}
.skip-link:hover{background:var(--paper);color:var(--ink-0)}

/* The shortcuts card is a real dialog now, with a heading and a close button. */
.shortcuts-list{margin:0;display:grid;gap:2px}
.shortcuts-list dt{margin:0}
.shortcuts-list dd{margin:0}
.shortcuts-close{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-dim);background:none;border:1px solid var(--line);
  padding:8px 14px;min-height:32px;cursor:pointer}
.shortcuts-close:hover{color:var(--paper);border-color:var(--mech)}
.shortcuts-close:focus-visible{outline:2px solid var(--live);outline-offset:2px}

/* Focus must be visible on every interactive thing, including the ones that
   were styled as bare text. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.gloss:focus-visible{outline:2px solid var(--live);outline-offset:1px}

/* Section links sat at 17px tall — under the 24px minimum target size.
   inline-flex with a min-height grows the target without moving the
   baseline the header aligns on. */
.tool-top a.back,.bib-top a.back,.tool-top .themebtn,.bib-top .themebtn{
  display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){
  .tool-top a.back,.bib-top a.back{min-height:32px}
}

/* ------------------------------------------------------------------
   Target size, WCAG 2.2 §2.5.8 (minimum, 24×24).

   Applied to standalone controls. Links running inside a sentence are
   left alone: the specification exempts them, and padding them out
   would open up the line spacing of the prose the whole site exists
   to make readable. What is fixed here is everything that stands on
   its own — legend links, disclosure buttons, form buttons, chips.
   ------------------------------------------------------------------ */
.evi-legend a,.tool-link a,.ap-actions button,.cal-more,.dna-chip,
.enf-chips a,.im-basis,.bib-url,.gg-link{
  display:inline-flex;align-items:center;min-height:24px}
.ap-opt input{width:18px;height:18px}
@media (pointer:coarse){
  .evi-legend a,.tool-link a,.ap-actions button,.cal-more,.dna-chip{min-height:32px}
  /* inline glossary buttons get the same invisible hit area as footnote
     markers: the layout box stays where the typography wants it */
  .gloss{position:relative}
  .gloss::before{content:"";position:absolute;left:50%;top:50%;
    width:24px;height:24px;transform:translate(-50%,-50%);z-index:1}
}

/* ------------------------------------------------------------------
   Palette contrast.

   The results list reuses --paper-faint for its metadata, and that
   token was never meant to carry 9px uppercase text: it measures
   4.14:1 on the night panel and 3.29:1 on the day panel, both under
   AA. The selected row adds a 10% gold wash on top, which darkens the
   day background further.

   These are scoped tokens with headroom for that wash, declared on
   `body` — never on :root, because the day palette is an attribute on
   <body> and a token declared at :root resolves against the night
   values in day mode. That is the bug that shipped in Phase 2.
   ------------------------------------------------------------------ */
body{
  --cmdk-meta:#9A8F80;   /* 5.48:1 on the night panel */
  --cmdk-unver:var(--crit);
  --cmdk-mark:var(--mech);
}
body[data-theme="light"]{
  --cmdk-meta:#5E5357;   /* 5.05:1 on the day panel */
  --cmdk-unver:#96311D;  /* 5.23:1 */
  --cmdk-mark:#22447A;   /* 6.62:1 */
}
.cmdk-group{color:var(--cmdk-meta)}
.cmdk-item .cs{color:var(--cmdk-meta)}
.cmdk-item .cbadge{color:var(--cmdk-meta);border-color:var(--cmdk-meta)}
.cmdk-item .cbadge.unver{color:var(--cmdk-unver);border-color:var(--cmdk-unver)}
.cmdk-item .cr,.cmdk-item[data-kind] .cr{color:var(--cmdk-mark)}
.cmdk-item[data-kind="enforcement"] .cr,
.cmdk-item[data-kind="authority"] .cr{color:var(--live)}
.cmdk-item[data-kind="concept"] .cr{color:var(--paper-dim)}

/* ------------------------------------------------------------------
   Gold on small text, day mode.

   --live is #8A6A14 in the day palette. Against the vellum surfaces it
   measures 3.85:1 on the page, 3.47:1 on a panel and 3.08:1 on a
   raised surface — under AA everywhere it is used at 9–11px. It is
   fine at display sizes, which is where it was designed to live.

   --live-text is the same hue taken down until it clears 4.5:1 on the
   darkest of the three day surfaces. Night mode keeps --live: gold on
   aubergine already passes comfortably.
   ------------------------------------------------------------------ */
/* --live-text and --crit-text now live in css/tokens.css, which every page
   loads first. They were declared here, in a sheet the brief happens to load
   last, while css/evidence.css consumed them — an ordering dependency that
   would have failed silently the moment a page dropped this file. */

.cmdk-item[data-kind="enforcement"] .cr,
.cmdk-item[data-kind="authority"] .cr{color:var(--live-text)}
.enf-state[data-s="imposed"],.enf-state[data-s="appealed"],
.enf-state[data-s="reduced"],.enf-state[data-s="ordered"],
.enf-state[data-s="pending"]{color:var(--live-text)}
/* procedure and finality (js/pipeline.js procedure()): the label carries the
   state; the colour only repeats it, as everywhere else on this page */
.enf-state[data-s="not-final"],.enf-state[data-s="remitted"],
.enf-state[data-s="preliminary-finding"],.enf-state[data-s="appeal"]{color:var(--maybe)}
.enf-state[data-s="judgment"],.enf-state[data-s="decision"],.enf-state[data-s="commitments"]{color:var(--live-text)}
/* provision application (js/regulatory-model.js) on the instrument page */
.prov-table .p-when{display:block;white-space:nowrap}
.prov-table .p-when[data-state="scheduled"] b,.prov-table .p-when[data-state="general-scheduled"] b{color:var(--maybe)}
.bib-url[data-s="url:paywalled"]{color:var(--live-text);border-color:var(--live-text)}
.gg-link:hover,.gloss-pop-more:hover,.gloss-pop-more:focus-visible{color:var(--live-text)}

/* The rota's event type, held apart from the obligation sentence: entry into
   force is not application, and the wheel should not blur the two. */
.rota-type{display:inline-block;margin-top:6px;padding:2px 7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mech);border:1px solid var(--mech)}
.rota-type[hidden]{display:none}

/* ============================================================
   VISUAL REFINEMENT — tool-page chrome on small screens

   The header wrapped onto four lines and consumed roughly 400px
   before the page's own title, on a viewport 844px tall. Nearly
   half the first screen was navigation.

   Below 760px the section links become one horizontally scrollable
   strip — the pattern every reader already knows from a tab bar —
   and the brand line, which repeats what the tab already says,
   steps out of the way.
   ============================================================ */
@media (max-width:760px){
  .tool-shell,.bib-shell{padding-left:18px;padding-right:18px}
  .tool-top,.bib-top{
    flex-wrap:nowrap;gap:0;align-items:center;
    padding:10px 0 0;border-bottom:0;
    position:sticky;top:0;z-index:60;
    background:var(--ink-0);
  }
  .tool-top .tt-brand,.bib-top .bt-brand{display:none}
  .tool-top .tt-sp,.bib-top .bt-sp{display:none}
  .tool-top > a.back:first-of-type,.bib-top > a.back:first-of-type{
    flex:none;padding-right:12px;margin-right:10px;border-right:1px solid var(--line)}
  .tool-top > nav,.bib-top > nav{
    display:flex;flex:1 1 auto;min-width:0;gap:16px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* the strip fades at its right edge so it reads as scrollable */
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
            mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  .tool-top > nav::-webkit-scrollbar,.bib-top > nav::-webkit-scrollbar{display:none}
  .tool-top > nav a.back,.bib-top > nav a.back{white-space:nowrap;scroll-snap-align:start}
  .tool-top .themebtn,.bib-top .themebtn{flex:none;margin-left:10px;padding:7px 10px}
  .tool-top .themebtn{min-width:44px;justify-content:center}

  /* the page's own title is the thing the reader came for */
  .tool-head,.bib-head{padding:26px 0 4px}
  .tool-head h1,.bib-head h1{font-size:clamp(27px,8.4vw,38px);line-height:1.08;max-width:none}
  .tool-head .lede,.bib-head p{font-size:15.5px;line-height:1.58;margin-top:14px}
  .tool-stats,.bib-stats{gap:0 20px;margin-top:18px;font-size:10.5px}
}

/* ============================================================
   FILTER BARS AND TABLES

   Every filter row was a wrapping flex list of bare labels and bare
   selects. When it wrapped — which it did at any width below about
   1000px — a label ended one line and its control began the next, so
   "Instrument" sat above a select belonging to nothing. Each pair is
   now one unit that wraps whole, and on a narrow screen the label
   sits above its own control rather than beside it.
   ============================================================ */
.flt{display:inline-flex;align-items:center;gap:7px;min-width:0}
.flt label{white-space:nowrap}
.flt select{max-width:100%}
.cal-controls,#enfControls,#imControls{align-items:center;gap:10px 16px}

@media (max-width:760px){
  .cal-controls,#enfControls,#imControls{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px}
  .flt{display:grid;gap:4px;align-items:start}
  .flt select{width:100%;min-height:38px}
  .cal-count,.enf-count,.im-total{grid-column:1/-1;margin-left:0}
}

/* ---- tables that carry their weight ----

   A sticky column header was tried here and removed. These tables sit
   in a container with overflow-x:auto, which makes that box the scroll
   parent in *both* axes, so `position:sticky; top:0` sticks to a box
   that never scrolls vertically — the header still slides away with
   the page. It looked like a feature and did nothing, so it is gone
   rather than left in as decoration.

   What does work, and is genuinely useful, is the horizontal case: the
   dimension label in the DNA table stays put while you scroll across
   the instrument columns, which is the axis that actually scrolls.

   The calendar solves the same problem better anyway: every row states
   its own event type on the row, so it does not need a header to
   follow it down the page. */
.tbl-scroll,.dna-wrap{position:relative}
.dna-table tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--ink-1);
  box-shadow:inset -1px 0 0 var(--line)}
.tbl-scroll table tbody tr:nth-child(odd of :not(.cal-detail)){background:rgba(128,128,128,.035)}
.dna-table tbody tr:hover td{background:rgba(217,169,60,.05)}
.cal-row:hover > td{background:rgba(217,169,60,.05)}

/* the scroll container announces that there is more to the right */
.tbl-scroll,.dna-wrap{scrollbar-width:thin}
.tbl-scroll::after,.dna-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--ink-0));opacity:.9}

/* ============================================================
   THE SAME LANGUAGE ON THE TOOL PAGES

   These pages had one texture: an uppercase mono label, a hairline
   box, a number, repeat. That sameness is what made the site read as
   assembled rather than composed. The motifs below are the ones the
   frontispiece establishes — a double rule under a title, figures set
   in the display face, glosses in italic serif rather than a fourth
   shade of grey — applied so the whole thing holds together.
   ============================================================ */

/* a title carries a double rule, as on the frontispiece */
.tool-head,.bib-head{border-bottom:0;position:relative}
.tool-head::after,.bib-head::after{content:"";display:block;height:0;margin:22px 0 0;
  border-top:2px solid var(--paper-faint);border-bottom:1px solid var(--line);padding-bottom:4px}
.tool-head h1,.bib-head h1{font-weight:600;font-variation-settings:'opsz' 96;
  font-size:clamp(30px,4.4vw,52px);line-height:1.0;letter-spacing:-.02em;max-width:17ch}
.tool-head .lede,.bib-head p{font-size:16px;line-height:1.55;max-width:66ch}

/* the stats row becomes the same dense line of fact the frontispiece uses */
.tool-stats,.bib-stats{gap:2px 20px;font-size:11px;color:var(--paper-dim);align-items:baseline}
.tool-stats b,.bib-stats b{font-family:var(--display);font-size:15px;font-weight:500;
  color:var(--paper);letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* figures anywhere on these pages are set in the display face, not in mono
   at a slightly larger size — that is what made every number look the same */
.agg-line b,.enf-fine,.im-count{font-variant-numeric:tabular-nums}

/* glosses and caveats go to italic serif; grey-on-grey mono was doing too
   much work and none of it was tone */
.im-scope,.dna-note,.pipe-note,.enf-axis-note,.ap-why,.bib-note{
  font-family:var(--body);font-style:italic}


/* ============================================================
   BIBLIOGRAPHY / EVIDENCE PAGE
   Lifted verbatim out of an inline <style> block in
   bibliography.html. A page-local stylesheet is how two versions
   of the same component come to exist, and this file is where the
   tool pages' styles live.
   ============================================================ */

.bib-shell{max-width:960px;margin:0 auto;padding:0 32px 110px}
.bib-head{padding:54px 0 8px}
.bib-head h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--paper);text-wrap:balance}
.bib-head p{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--paper-dim);max-width:62ch;margin:18px 0 0}
.bib-stats{display:flex;flex-wrap:wrap;gap:0 34px;margin:26px 0 0;font-family:var(--mono);font-size:11px;color:var(--evi-meta);letter-spacing:.03em}
.bib-stats b{color:var(--paper);font-weight:500}

.bib-controls{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;
  margin:var(--s-7) 0 0;padding:var(--s-3) 0;
  border-top:var(--border-std);border-bottom:0;
}
.bib-controls label{min-height:var(--hit);display:inline-flex;align-items:center}
.bib-controls select,.bib-controls input{min-height:var(--hit-coarse)}
#bibState{padding:var(--s-3) 0;border-bottom:var(--border-std);margin-bottom:var(--s-5)}
@media (max-width:640px){
  .bib-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-3)}
  /* at 320px (WCAG reflow, 1280px at 400% zoom) a 200px minimum pushed the
     row 6px past the viewport; the track now bounds it */
  .bib-controls input{min-width:0;width:100%}
}
.bib-controls label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--evi-meta)}
.bib-controls select,.bib-controls input{font-family:var(--mono);font-size:11px;color:var(--paper);background:var(--ink-2);border:1px solid var(--line);padding:5px 8px}
.bib-controls input{min-width:200px}
.bib-controls select:focus-visible,.bib-controls input:focus-visible{outline:1px solid var(--live);outline-offset:1px}
.bib-controls .bc-count{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--evi-meta)}

.tier-block{margin:52px 0 0}
.tier-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--ink-3)}
.tier-head h2{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;margin:0;color:var(--paper)}
.tier-head .th-n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--evi-meta);margin-left:auto}
.tier-head p{width:100%;margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--paper-dim);max-width:70ch}

.bib-entry{padding:17px 0;border-bottom:1px solid var(--line);display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.bib-cite{font-family:var(--body);font-size:14.5px;line-height:1.62;color:var(--paper);margin:0;padding-left:2.2em;text-indent:-2.2em}
.bib-cite a{color:var(--mech);text-decoration:underline;text-underline-offset:2px;word-break:break-word;overflow-wrap:anywhere}
.bib-cite a:hover{color:var(--live)}
/* source notes quote identifiers and URLs that do not break on their own */
.bib-note{overflow-wrap:anywhere}
.bib-meta{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;padding-left:2.2em;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--evi-meta)}
.bib-url{padding:2px 6px;border:1px solid var(--ink-3)}
.bib-url[data-s="url:live"]{color:var(--mech);border-color:var(--mech)}
.bib-url[data-s="url:none"],.bib-url[data-s="url:dead"]{color:var(--crit);border-color:var(--crit)}
/* --live-text: the day-mode gold taken down to clear AA at 9.5px; see css/tools.css */
.bib-url[data-s="url:paywalled"]{color:var(--live-text);border-color:var(--live-text)}
.bib-used{padding-left:2.2em;font-size:12.5px;line-height:1.55;color:var(--paper-dim)}
.bib-used a{color:var(--mech);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.bib-used a:hover{color:var(--live);border-bottom-color:var(--live)}
.bib-note{padding-left:2.2em;font-size:12.5px;line-height:1.55;color:var(--evi-meta);font-style:italic}
.bib-empty{padding:30px 0;color:var(--evi-meta);font-family:var(--mono);font-size:12px}

/* Data quality, measured on this load (js/bibliography.js quality()). */
.dq{margin:44px 0 36px}
.dq h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 10px;color:var(--paper)}
.dq-lede{font-size:13.5px;line-height:1.65;color:var(--paper-dim);max-width:74ch;margin:0 0 18px}
.dq-lede b{color:var(--paper);font-weight:500}
.dq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px}
.dq-panel{border:1px solid var(--line);background:var(--ink-1);padding:18px 20px;min-width:0}
.dq-panel h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--evi-meta);margin:0 0 12px;font-weight:500}
.dq-total{font-size:13.5px;color:var(--paper-dim);margin:0 0 10px}
.dq-total b{font-family:var(--display);font-size:24px;font-weight:500;color:var(--paper);margin-right:4px}
.dq-list{margin:0;display:grid;gap:8px}
.dq-row{display:grid;grid-template-columns:3.2em 1fr;gap:10px;align-items:baseline}
.dq-n{font-family:var(--display);font-size:17px;color:var(--paper);text-align:right}
.dq-row dd{margin:0;font-size:13px;line-height:1.45;color:var(--paper-dim)}
.dq-sub{display:block;font-size:11.5px;color:var(--evi-meta);line-height:1.45}
.dq-foot{font-size:12px;line-height:1.55;color:var(--evi-meta);margin:14px 0 0}
.dq-block{margin:0 0 12px}
.dq-block h4{font-size:12.5px;font-weight:500;color:var(--paper);margin:0 0 4px;display:flex;gap:8px;align-items:baseline}
.dq-block h4 .dq-sub{display:inline}
.dq-dates{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:11px;color:var(--paper-dim)}
.dq-dates b{color:var(--paper);font-weight:500;margin-left:6px}
.dq-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dq-cap{font-size:11.5px;line-height:1.5;color:var(--evi-meta);margin:0 0 10px}
.dq-table th,.dq-table td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:right;color:var(--paper-dim)}
.dq-table th[scope=row],.dq-table thead th:first-child{text-align:left;font-weight:500;color:var(--paper)}
.dq-table thead th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--evi-meta)}
.dq-table th[scope=row] .dq-sub{font-weight:400}
.dq-panel{overflow-x:auto}
.bib-method a{color:var(--mech);text-decoration:underline;text-underline-offset:2px}
.bib-method a:hover{color:var(--live)}
@media (max-width:420px){
  .dq-panel{padding:14px 12px}
  .dq-table{font-size:11.5px}
  .dq-table th,.dq-table td{padding:5px 3px}
  .dq-table thead th{letter-spacing:.02em}
}
.bib-method{margin:70px 0 0;padding:24px 26px;border:1px solid var(--line);background:var(--ink-1)}
.bib-method h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--evi-meta);margin:0 0 12px;font-weight:500}
.bib-method p{font-size:13.5px;line-height:1.65;color:var(--paper-dim);max-width:74ch;margin:0 0 11px}
.bib-method p:last-child{margin-bottom:0}
.bib-method b{color:var(--paper);font-weight:500}
@media (max-width:700px){
  .bib-shell{padding:0 20px 80px}
  .bib-cite,.bib-meta,.bib-used,.bib-note{padding-left:0;text-indent:0}
}

/* ============================================================
   THE INSTRUMENT PAGE
   The reference detail view. Everything here is composed from the
   shared component layer in css/tokens.css — .badge, .ev, .state,
   .meta-grid, .numstat, .rel-grid, .t-rec — and adds only what is
   genuinely particular to an instrument.
   ============================================================ */

.inst-statusnote{
  font-family:var(--body);font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2);
  max-width:var(--w-text);margin:var(--s-4) 0 var(--s-5);
  padding-left:var(--s-4);border-left:3px solid var(--live);
}
.meta-item .v-sub{
  display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-meta);color:var(--text-3);margin-top:3px;
}
.meta-item .none,.rel-col .none{font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3);font-style:italic}

.inst-objective{
  font-family:var(--body);font-size:var(--t-lede);line-height:var(--lh-lede);
  color:var(--text-1);max-width:var(--w-text);margin:var(--s-4) 0;
}
.inst-logic{margin:var(--s-5) 0 0;padding:var(--s-4);border:var(--border-std);background:var(--surface-raised)}
.inst-logic .k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
}
.inst-logic p{margin:var(--s-2) 0 0;font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2)}

/* ---------------------------------------------------------- timeline */
.ip-tl{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:0}
.ip-tl-item{
  display:grid;grid-template-columns:190px 1fr;gap:var(--s-5);
  padding:var(--s-4) 0;border-top:var(--border-std);
}
.ip-tl-item:last-child{border-bottom:var(--border-std)}
/* A past milestone used to be faded with opacity:.72, which took its text
   to 3.2-4.0:1 — below WCAG AA in both themes (agent/browser checkContrast,
   27 Sep 2026). "Past" is now said rather than implied: the date steps
   down to the secondary text colour and carries a label, and nothing in
   the row loses contrast. */
.ip-tl-item.past .ip-tl-date{color:var(--text-2)}
.ip-tl-item.past .ip-tl-date::after{content:"past";display:block;margin-top:3px;
  font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-3)}
.ip-tl-date{
  font-family:var(--mono);font-size:var(--t-data);color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.ip-tl-prec{display:block;font-size:var(--t-micro);color:var(--text-3);margin-top:3px}
.ip-tl-body{display:grid;gap:var(--s-2);align-content:start}
.ip-tl-body b{font-family:var(--body);font-weight:500;font-size:var(--t-body-sm);line-height:1.5;color:var(--text-1)}
.ip-tl-type{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-3);
}
.ip-tl-type[data-e="entry-into-force"]{color:var(--mech)}
.ip-tl-type[data-e="application"]{color:var(--maybe)}
.ip-tl-type[data-e="transposition"]{color:var(--crit)}
.ip-tl-why{font-size:var(--t-support);line-height:var(--lh-support);color:var(--text-2)}
.ip-tl-why i{color:var(--text-3);font-style:italic}
@media (max-width:720px){ .ip-tl-item{grid-template-columns:1fr;gap:var(--s-2)} }

/* ---------------------------------------------------------- rules */
.ip-rules{display:grid;gap:var(--s-4);margin:var(--s-5) 0 0}
.ip-rule{border:var(--border-std);border-left:3px solid var(--mech);background:var(--surface-raised);padding:var(--s-4)}
.ip-rule h3{margin:0 0 var(--s-2);font-size:inherit}
.ip-rule-cond{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-2)}
.ip-rule-cond .cond{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  color:var(--text-2);border:1px solid var(--ink-3);padding:2px 7px;
}
.ip-rule-cond .cond i{color:var(--text-3);font-style:normal;text-transform:uppercase;margin-right:5px}
.ip-rule p{margin:0 0 var(--s-2);font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2);max-width:var(--w-text)}
.ip-rule-ex{font-size:var(--t-support)!important;color:var(--text-3)!important}

/* ---------------------------------------------------------- provisions */
.prov-table{border-collapse:collapse;width:100%;margin:var(--s-5) 0 0}
.prov-table th,.prov-table td{
  text-align:left;vertical-align:top;padding:var(--s-3) var(--s-4);
  border-bottom:var(--border-std);font-size:var(--t-body-sm);line-height:1.5;color:var(--text-2);
}
.prov-table thead th{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--text-1);background:var(--surface-high);
  border-bottom:var(--border-strong);
}
.prov-table tbody th{width:150px;color:var(--text-1)}
.prov-table tbody th .badge{display:inline-flex;margin-top:5px}
.prov-table tbody td b{color:var(--text-1);font-weight:500}
.prov-table .p-sum{display:block;margin-top:4px;font-size:var(--t-support);color:var(--text-3);line-height:1.5}
.prov-table tr.is-anchor th{border-left:2px solid var(--live);padding-left:calc(var(--s-4) - 2px)}
.prov-table tbody tr:hover td,.prov-table tbody tr:hover th{background:var(--surface-raised)}

/* ---------------------------------------------------------- enforcement */
.ip-enf-summary{
  display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:end;
  margin:var(--s-5) 0;padding:var(--s-4) 0;border-top:var(--border-std);border-bottom:var(--border-std);
}
.ip-enf-caveat{
  flex:1 1 300px;margin:0;font-size:var(--t-support);line-height:var(--lh-support);
  /* --text-3 is the metadata token and clears AA on the page background but
     not on a raised surface at 13px; this caveat is the most important
     sentence in the section and must not be the faintest */
  color:var(--text-2);max-width:52ch;
}
.ip-enf-cards{display:grid;gap:var(--s-5)}
.ip-enf-card{border:var(--border-std);background:var(--surface-raised);padding:var(--s-5)}
.ip-enf-card header{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:baseline;margin-bottom:var(--s-4)}
.ip-enf-card h3{
  font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:var(--lh-h3);
  margin:0;color:var(--text-1);
}
.ip-enf-figs{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-bottom:var(--s-4)}
.ip-enf-pipe{display:flex;flex-wrap:wrap;gap:3px;margin:var(--s-4) 0}
.ip-pipe-step{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  padding:4px 8px;border:1px solid var(--ink-3);color:var(--text-3);cursor:help;
}
.ip-pipe-step[data-s="reached"]{color:var(--mech);border-color:var(--mech);background:var(--mech-dim)}
.ip-pipe-step[data-s="not-reached"]{color:var(--text-3);border-style:solid;text-decoration:line-through}
.ip-pipe-step[data-s="unknown"]{color:var(--live-text);border-style:dashed}
.ip-pipe-step[data-s="na"]{opacity:.5}
.ip-enf-jud{
  margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4);background:var(--surface-high);
  font-size:var(--t-support);line-height:1.6;color:var(--text-2);
}
.ip-enf-jud b{color:var(--text-1)}

/* ---------------------------------------------------------- evidence list */
.grade-bar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0}
.grade-tally{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--text-3);border:1px solid var(--ink-3);padding:3px 8px;
}
.grade-tally b{color:var(--text-1);font-weight:500}
.grade-tally[data-g="primary"],.grade-tally[data-g="official"]{border-color:var(--mech);color:var(--mech)}
.grade-tally[data-g="interpretation"]{border-color:var(--crit);color:var(--crit);font-style:italic}
.grade-tally[data-g="unresolved"]{border-style:dotted;border-color:var(--crit);color:var(--crit)}
.grade-tally[data-g="derived"]{border-style:dashed;border-color:var(--mech);color:var(--mech)}
.grade-tally[data-g="attributed"]{border-style:dotted;border-color:var(--text-3)}
.ev-list{display:grid;gap:var(--s-3);margin:var(--s-5) 0 0}
.ev-loc{font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3)}
.ev-part{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);
  color:var(--mech);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--hit);
}
.ev-part:hover{color:var(--live)}
.src-line{margin:var(--s-5) 0 0;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta)}
.src-line a{color:var(--mech);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--hit)}
.src-line a:hover{color:var(--live)}

/* ---------------------------------------------------------- chooser */
.inst-list{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:0}
.inst-list a{
  display:grid;gap:var(--s-1);padding:var(--s-4) 0;border-top:var(--border-std);
  text-decoration:none;color:var(--text-1);
}
.inst-list li:last-child a{border-bottom:var(--border-std)}
.inst-list b{font-family:var(--display);font-size:var(--t-h3);font-weight:600}
.inst-list a:hover b{color:var(--live)}
.il-full{font-size:var(--t-body-sm);color:var(--text-2);line-height:1.5}
.il-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3);margin-top:3px}
.dna-head-link{
  color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  /* a column header is a link to that instrument's page; at 40×14 it was
     under the 24px target minimum on a phone */
  display:inline-flex;align-items:center;min-height:var(--hit);
}
.dna-head-link:hover{color:var(--live);border-bottom-color:var(--live)}
.dna-table thead th a::after{content:" →";font-family:var(--mono);font-size:.75em;opacity:.55}

/* The source list inside an enforcement record renders each URL as a link.
   At 18px tall those were under the 24px target minimum, and a bare URL is
   also the least readable form of a citation — the external marker and the
   height both come from the shared component layer. */
.enf-sources a{
  display:inline-flex;align-items:center;min-height:var(--hit);
  overflow-wrap:anywhere;
}

/* ============================================================
   Cross-instrument interactions (js/interactions.js)

   Rendered in two places — Part IX of the brief and the instrument
   page — from the same builder, so the styling lives once here rather
   than being split between the reading column and the tool pages.

   No new hue is introduced. Kind is carried by the rule on the left
   edge and by the label, never by colour alone: a conflict and a
   complement must still be distinguishable in greyscale and in print.
   ============================================================ */

.ix-fig{margin-block:var(--s-6)}

.ix-lede{
  border-left:var(--border-accent);
  padding:var(--s-2) 0 var(--s-2) var(--s-4);
  margin-bottom:var(--s-5);
}
.ix-lede p{margin:0 0 var(--s-2);font-size:var(--t-body-sm);color:var(--text-2)}
.ix-lede p:last-child{margin-bottom:0}
.ix-caveat{color:var(--text-3);font-size:var(--t-meta)}

.ix-group{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--text-3);
  margin:var(--s-6) 0 var(--s-3);
  padding-bottom:var(--s-2);
  border-bottom:var(--border-hair);
  display:flex;align-items:baseline;gap:var(--s-2);
}
.ix-list > .ix-group:first-child{margin-top:0}
.ix-count{
  font-family:var(--mono);
  color:var(--text-3);margin-left:auto;
}

.ix-edge{
  border-left:2px solid var(--line);
  background:var(--surface-raised);
  padding:var(--s-4);
  margin-bottom:var(--s-3);
}
/* Kind is signalled by the border treatment as well as the word, so the
   grouping survives a greyscale print and a colour deficiency. */
.ix-edge[data-kind="conflict"]{border-left-color:var(--crit-text)}
.ix-edge[data-kind="overlap"]{border-left-color:var(--live-text)}
.ix-edge[data-kind="lex-specialis"],
.ix-edge[data-kind="carve-out"]{border-left-style:dashed;border-left-color:var(--live-text)}
.ix-edge[data-kind="complement"],
.ix-edge[data-kind="sequence"],
.ix-edge[data-kind="implements"]{border-left-color:var(--mech)}
.ix-edge[data-kind="amends"],
.ix-edge[data-kind="repeals"],
.ix-edge[data-kind="legal-basis"]{border-left-style:dotted}
.ix-edge[data-unverified="1"]{border-left-style:dashed}

.ix-head{
  margin:0 0 var(--s-2);
  font-size:var(--t-body-sm);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
}
.ix-head a{
  color:var(--text-1);text-decoration:none;
  border-bottom:1px solid var(--line);
  display:inline-flex;align-items:center;min-height:var(--hit);
}
.ix-head a:hover{border-bottom-color:var(--mech)}
.ix-self{color:var(--text-1)}
.ix-rel{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--text-3);
}
.ix-rel::before{content:"—\00a0"}
.ix-rel::after{content:"\00a0→"}
.ix-rel[data-sym="1"]::before{content:"←\00a0"}
.ix-both{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--text-3);
}

.ix-kindnote{margin:0 0 var(--s-2);font-size:var(--t-meta);color:var(--text-3)}
.ix-sum{margin:0;font-size:var(--t-body-sm);color:var(--text-2);max-width:var(--w-text)}

.ix-flag{
  margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);
  border:1px dashed var(--st-unresolved);
  font-size:var(--t-meta);color:var(--text-2);
}

.ix-k{
  display:block;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-1);
}
.ix-provs{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:baseline}
.ix-provs .ix-k{flex-basis:100%}
.ix-prov{
  font-family:var(--mono);font-size:var(--t-data);
  border:var(--border-std);padding:2px var(--s-2);
  color:var(--text-2);white-space:nowrap;
}

.ix-block{margin-top:var(--s-3)}
.ix-claims,.ix-srcs{list-style:none;margin:0;padding:0}
.ix-claims li{margin-bottom:var(--s-3);font-size:var(--t-meta);color:var(--text-2)}
.ix-claim-txt{display:block;margin-top:2px}
.ix-grade{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--text-3);
}
.ix-grade[data-g="primary"],.ix-grade[data-g="official"]{color:var(--st-verified)}
.ix-grade[data-g="interpretation"]{color:var(--st-interpretation)}
.ix-grade[data-g="unresolved"]{color:var(--st-unresolved)}
.ix-grade[data-g="secondary"]{color:var(--st-secondary)}

/* the name, the tier word and the "no URL" note are three separate
   statements; without an explicit gap they render as one run-on string,
   which is the same defect the enforcement axes had */
.ix-srcs li{
  font-size:var(--t-meta);margin-bottom:var(--s-1);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
}
.ix-srcs a{
  color:var(--text-2);
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:var(--hit);overflow-wrap:anywhere;
}
.ix-src-t{color:var(--text-3);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro)}

.ix-when{margin:var(--s-3) 0 0;font-family:var(--mono);font-size:var(--t-micro);color:var(--text-3)}

@media (max-width:640px){
  .ix-edge{padding:var(--s-3)}
  .ix-prov{white-space:normal}
}

/* ============================================================
   The governance footer and the no-JS notice.

   Both are in the markup of all seven pages rather than rendered by
   js/shell.js: a statement of non-affiliation that appears only when
   scripting runs is not a statement of non-affiliation, and the notice
   exists precisely for the case where no script has run.
   ============================================================ */

.site-foot{
  border-top:var(--border-std);
  margin-top:var(--s-9);
  padding:var(--s-7) var(--gutter) var(--s-8);
  background:var(--surface-page);
}
.sf-inner{max-width:var(--w-reading);margin:0 auto}
.sf-inner p{
  margin:0 0 var(--s-3);
  font-size:var(--t-meta);line-height:1.6;
  color:var(--text-2);
}
.sf-inner p:last-child{margin-bottom:0}
.sf-disclaimer{color:var(--text-1)}
.sf-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
  font-family:var(--mono);font-size:var(--t-micro);
  color:var(--text-3);
  padding-top:var(--s-3);
  border-top:var(--border-hair);
}
.sf-sep{width:var(--s-3);height:1px;background:var(--line);display:inline-block}
.sf-meta code{font-family:var(--mono);color:var(--text-3)}

.noscript-note{
  max-width:var(--w-reading);
  margin:var(--s-5) auto;
  padding:var(--s-4);
  border:1px dashed var(--st-warning);
}
.noscript-note p{margin:0 0 var(--s-2);font-size:var(--t-body-sm);color:var(--text-2)}
.noscript-note p:last-child{margin-bottom:0}
.noscript-note code{font-family:var(--mono);font-size:var(--t-data)}

/* The destinations a reader without scripting is given instead of the
   header. Rendered only when scripting is off, so this styles markup the
   ordinary reader never receives. */
.noscript-nav{margin-top:var(--s-3)}
.noscript-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.noscript-nav a{font-family:var(--mono);font-size:var(--t-data);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.noscript-nav a:hover,.noscript-nav a:focus-visible{color:var(--text-1);border-bottom-color:var(--text-1)}

@media print{ .noscript-note{display:none} }

/* The site index before the footer (tools/_footer.mjs, from tools/seo.mjs).
   Plain links to the six destinations and to every instrument page, in the
   markup of every page, so the site's structure is followable without the
   header js/shell.js draws — by a reader without scripting and by a crawler.
   It is quiet on purpose: an index, not a second navigation bar. */
.site-index{
  border-top:var(--border-std);
  margin-top:var(--s-9);
  padding:var(--s-6) var(--gutter) 0;
  background:var(--surface-page);
}
.site-index + .site-foot{border-top:0;margin-top:0}
.si-inner{max-width:var(--w-reading);margin:0 auto;display:grid;gap:var(--s-5);grid-template-columns:1fr 2fr}
.si-label{
  margin:0 0 var(--s-2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}
.si-col ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s-4)}
.si-col a{
  display:inline-block;min-height:24px;padding:var(--s-1) 0;
  font-size:var(--t-meta);line-height:1.6;color:var(--text-2);text-decoration:none;
  border-bottom:1px solid transparent;
}
.si-col a:hover,.si-col a:focus-visible{color:var(--text-1);border-bottom-color:var(--text-1)}
@media (max-width:720px){ .si-inner{grid-template-columns:1fr} }
@media print{ .site-index{display:none} }

/* The instrument page's identification line: the name the act is known by,
   and a link to its official text, where the records hold one. */
.inst-ident{
  font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2);
  max-width:var(--w-text);margin:calc(-1 * var(--s-2)) 0 var(--s-4);
}
.inst-ident .evi-tier{margin-left:var(--s-2)}
.inst-ident a,.inst-thin a{
  color:var(--text-1);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.inst-ident a:hover,.inst-thin a:hover,.inst-ident a:focus-visible,.inst-thin a:focus-visible{text-decoration-color:var(--text-1)}

/* The list of instrument pages on instruments.html, and the sentence that
   names the records too thin for a page of their own. */
.inst-index{margin-top:var(--s-7)}

/* The record index generated into the enforcement, institutions and
   bibliography mounts (tools/seo.mjs). Seen only until the page's module
   replaces it with the full view, or by a reader without scripting. */
.record-index{list-style:none;margin:var(--s-4) 0 var(--s-6);padding:0;max-width:var(--w-text)}
.record-index li{padding:var(--s-2) 0;border-bottom:var(--border-hair);font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2)}
.record-index b{color:var(--text-1);font-weight:500}
.record-index a{color:var(--text-1);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;overflow-wrap:anywhere}
.record-index a:hover,.record-index a:focus-visible{text-decoration-color:var(--text-1)}
.ri-sub{display:block;font-family:var(--mono);font-size:var(--t-meta);color:var(--text-3)}
h2 .ri-sub{display:inline;margin-left:var(--s-2)}
.inst-thin{font-size:var(--t-body-sm);line-height:1.6;color:var(--text-2);max-width:var(--w-text);margin-top:var(--s-5)}

/* ============================================================
   Phone pass.

   Three things were measured on a 390px touch viewport and are fixed
   here: controls that were tappable in principle and not in practice
   (an 18px checkbox, a 16px disclosure row, 20px entity links), chrome
   that pushed the page's own title a long way down, and blocks that
   were laid out for a mouse.

   Nothing is hidden on a phone that is visible on a desktop. The rule
   the site has followed since the controls sheet is that a phone gets
   the same information, arranged for a thumb.
   ============================================================ */

@media (pointer:coarse){
  /* An 18px checkbox is a 5mm target. The label was already tappable;
     the box itself was not, and the box is what people aim at. */
  /* The checkbox itself is deliberately left at the size the browser
     draws: `.ap-opt` is a 32px label wrapping it, and the label is the
     target. That decision is already recorded where `.ap-opt` is
     defined, and a measurement harness that flags the input rather than
     its label is measuring the wrong box. What is worth guaranteeing is
     that every such label really does clear the minimum. */
  .ap-opt, .filters label, .bib-controls label{
    min-height:var(--hit-coarse);
  }

  /* A disclosure row is the primary control on the enforcement records
     and it measured 16px tall. */
  .enf-rec summary,
  .c-row summary,
  details > summary{
    min-height:var(--hit-coarse);
    display:flex; align-items:center;
  }

  /* Entity links inside the institution and instrument lists. Inline
     links inside running prose are deliberately left alone — padding
     those would open gaps in the reading column, and the specification
     exempts them. */
  .im-list a, .im-body a, .ix-head a, .ix-srcs a, .rel-col a, .ev-list .ext{
    min-height:var(--hit-coarse);
    display:inline-flex; align-items:center;
  }

  .chrome-brand{ min-inline-size:var(--hit); justify-content:center }
}

@media (max-width:640px){
  /* The tool pages spent 126–180px on chrome before the page said what
     it was. The crumbs and the section strip stay — they are how you get
     back — but they stop being spaced like a desktop masthead. */
  .page-shell, .tool-shell, .bib-shell{ padding-inline:var(--gutter-sm) }
  /* The crumb strip was 48px tall for one line of 11px type. */
  .crumbs{ margin-block:var(--s-2); min-height:0 }
  .crumbs li, .crumbs a, .crumbs [aria-current="page"]{ min-height:var(--hit) }
  .subnav{ margin-top:var(--s-4) }
  .page-head, .tool-head{ margin-block:var(--s-4) var(--s-5) }

  /* One column, one idea at a time. */
  .rel-grid{ grid-template-columns:1fr; gap:var(--s-5) }
  .ix-lede{ padding-left:var(--s-3) }
  .ix-group{ margin-top:var(--s-5) }
  .ix-head{ gap:var(--s-1) }
  .ix-head a{ min-height:var(--hit-coarse) }

  /* The footer is a legal notice, not a nav: give it room and one column. */
  .site-foot{ padding:var(--s-6) var(--gutter-sm) var(--s-7); margin-top:var(--s-7) }
  .sf-meta{ flex-direction:column; align-items:flex-start; gap:var(--s-1) }
  .sf-sep{ display:none }

  .noscript-note{ margin-inline:var(--gutter-sm) }
}

@media (pointer:coarse){
  /* URLs in the per-Part notes and the bibliography are the citation
     itself — the reader taps them to check a source, so they are targets
     rather than prose links. The rota dots sit inside a 44px invisible
     hit ring rather than growing, because their true angular position is
     the information the dial carries. */
  .pn-body a[href^="http"], .bib-cite a[href^="http"]{
    display:inline-flex; align-items:center; min-height:var(--hit);
  }
  /* The rota dots stay 12px. They are placed by true date — that is the
     whole point of the dial — and two events four days apart sit half a
     degree apart, so growing them would overlap and lie about the
     spacing. The dial is not the only way to reach any of these events:
     every one is a row in the calendar table directly beneath it, at
     full width. Recorded here so the next audit does not "fix" it. */
}

/* ============================================================
   Utilities that replace inline style="" attributes (27 Sep 2026).
   The CSP's style-src no longer allows 'unsafe-inline', so markup may
   not carry style attributes. Each rule below stands in for one inline
   value the pages used to carry, and is !important because an inline
   style outranked every ordinary rule: the cascade is kept as it was.
   Values computed at run time are set through the CSSOM instead
   (js/format.js applyGeometry). tools/design-qa.mjs fails a page or a
   module that writes a style attribute again.
   ============================================================ */
.i-0{--i:0 !important}.i-1{--i:1 !important}.i-2{--i:2 !important}.i-3{--i:3 !important}
.i-4{--i:4 !important}.i-5{--i:5 !important}.i-6{--i:6 !important}.i-7{--i:7 !important}
.i-8{--i:8 !important}.i-9{--i:9 !important}.i-10{--i:10 !important}.i-11{--i:11 !important}
.i-12{--i:12 !important}.i-13{--i:13 !important}.i-14{--i:14 !important}.i-15{--i:15 !important}
.i-16{--i:16 !important}.i-17{--i:17 !important}.i-18{--i:18 !important}.i-19{--i:19 !important}
.i-20{--i:20 !important}.i-21{--i:21 !important}
.fill-mech{fill:var(--mech) !important}
.fill-mech-dim{fill:var(--mech-dim) !important}
.fill-crit{fill:var(--crit) !important}
.fill-crit-dim{fill:var(--crit-dim) !important}
.fill-paper{fill:var(--paper) !important}
.fill-paper-faint{fill:var(--paper-faint) !important}
.fill-ink-2{fill:var(--ink-2) !important}
.fill-ink-3{fill:var(--ink-3) !important}
.w-full{width:100% !important}
.w-half-pct{width:0.5% !important}
.ap-caveat--mech{border-color:var(--line) !important;border-left-color:var(--mech) !important}
.txt-mech{color:var(--mech) !important}
.ev-dim-70{opacity:.7}
.ev-dim-75{opacity:.75}
.ev-dim-80{opacity:.8}