/* Greenpeace x Survation — segment calculator
 *
 * Styled to match the client's own segmentation deck (Audience strategy:
 * segmentation solution, July 2026): Work Sans, Greenpeace green #66CC00,
 * black on white, and the deck's segment palette — greens for the base,
 * yellows for the middle, grey for the rejectors.
 *
 * Structure comes from rules and alignment rather than from boxes. A card —
 * white, hairline, 3px radius — is reserved for a repeated object: one column
 * match, one question block. Everything else is a 2px ink rule, a small-caps
 * label sitting on it, and a hairline between rows. There are no tinted
 * fields: a callout is a rule and some prose, and a delta is a direction and
 * a weight rather than a green or a red pill.
 *
 * Colour has two jobs and no others. Greenpeace green marks the one thing you
 * can act on. The segment palette names a segment, and the answer ramp names
 * an answer code. Nothing on the page is coloured to be decorative.
 *
 * Mobile first. Everything above 760px is an enhancement.
 */

:root{
  color-scheme:light;    /* panels stay light, so stop a dark OS inverting
                            selects, file inputs and scrollbars against them */

  /* deck tokens */
  --green:#66CC00;      /* Greenpeace green: interaction, and only interaction */
  --green-dk:#59B300;   /* the same, pressed */
  --deep:#004B00;       /* deck's darkest green: weight — dark fields, chosen states */
  --pale:#9FD37E;       /* deck green, light enough to label a dark field */

  /* ink and paper */
  --ink:#1A1A1A;
  --body:#3c3c38;       /* supporting prose */
  --meta:#6B6B66;       /* small-caps labels, secondary figures, captions */
  --paper:#F7F7F4;
  --card:#FFFFFF;
  --line:#E2E1DB;       /* hairline between rows */
  --line-strong:#C9C7BE;/* quiet button underline, group rules */
  --line-dark:#C3C1B8;  /* outer frame of a full panel */
  --edge:#D5D3CA;       /* resting edge of a control */
  --track:#ECEBE5;      /* bar track */
  --red:#8A1A22;        /* one rule and one label on a stopped run. Nothing else. */

  /* The deck is set in hard rectangles. Corners are softened just enough to
     stop the edges looking sharp on screen, and no further — big radii and
     floating drop shadows are what make a page look generated rather than
     designed. Depth comes from hairlines and flat colour instead. */
  --radius:3px;
}

*{box-sizing:border-box}
/* the hidden attribute has to beat the display rules further down (.btn is
   inline-flex, .drop is block, and both get hidden at times) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}

/* One column, and everything sits in it: prose, panels, tables, the lot.
   Previously the container was 1080px while paragraphs were capped at 70ch
   (~700px), so on a wide screen the text stopped a third of the way short of
   the panels underneath it and read as broken. The column is set to the
   measure instead of the other way round, so the left and right margins are
   the same for every element on the page.

   The column is 1240 on every page, including the masthead and the footer, so
   the lockup never moves when you change tab. Prose does not run the full
   1240 — a 120-character line is unreadable — so every page instead uses the
   .layout shape below: the measure on the left, notes and links beside it,
   and full-width spans for the blocks that want the room. Nothing is left
   stopping halfway across the page. */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 18px}
@media(min-width:760px){.wrap{padding:0 30px}}

a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--green)}
a:hover{color:var(--deep);text-decoration-color:var(--deep)}

/* ---------------------------------------------------------------- skip link */
/* five tab links sit before the content on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:#fff;font-size:14px;font-weight:700;height:40px;padding:0 16px;
  display:inline-flex;align-items:center;border-radius:var(--radius);
  text-decoration:none}
.skip:focus{left:12px;top:8px;color:#fff}

/* ---------------------------------------------------------------- masthead */
/* One row: the lockup, then the tabs. Sticky from
   tablet up; on a phone it scrolls away, because a sticky bar eats too much
   of a short viewport and the quiz progress bar needs the top edge. */
.site{background:var(--ink);border-bottom:3px solid var(--green)}
@media(min-width:760px){.site{position:sticky;top:0;z-index:40}}
.site .wrap{display:flex;align-items:stretch;gap:12px;min-height:52px}
/* The two marks share one white field, so the Survation wordmark — which is
   black artwork on transparency — reads on the black bar without being
   recoloured into something that is no longer the logo. */
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;
  align-self:center;background:#fff;border-radius:2px;padding:6px 11px}
.lockup:hover{text-decoration:none}
.mark{background:var(--green);color:var(--ink);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px 3px;border-radius:2px;
  white-space:nowrap}
.cross{color:#8d8d88;font-size:12px;flex:none}
.wordmark{height:15px;width:auto;display:block;flex:none}
/* sized by height so it takes whatever proportions the supplied file has */
.gpmark{height:19px;width:auto;display:block;flex:none}
/* nav: a scrolling tab strip on small screens, a plain row above that */
nav.tabs{display:flex;align-items:stretch;gap:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:14px;
  /* fade the right edge on narrow screens so it reads as scrollable */
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
@media(min-width:1000px){nav.tabs{mask-image:none}}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;display:flex;align-items:center;color:#a3a39d;
  text-decoration:none;font-size:13.5px;font-weight:600;padding:0 16px;
  border-bottom:3px solid transparent;white-space:nowrap}
nav.tabs a:hover{color:#fff}
nav.tabs a.on{color:#fff;font-weight:700;border-bottom-color:var(--green)}
/* just above the wrap point the lockup and five tabs are a close fit, so the
   tabs tighten rather than start scrolling */
@media(min-width:1000px) and (max-width:1179px){
  nav.tabs{margin-left:10px}
  nav.tabs a{padding:0 11px;font-size:13px}
}

/* Below ~1000px the lockup and five tabs cannot share a line, so the tabs drop
   underneath rather than clipping the last one off the screen. */
@media(max-width:999px){
  .site .wrap{flex-wrap:wrap;gap:0;padding-top:9px;padding-bottom:2px}
  .lockup{align-self:flex-start;margin-bottom:7px}
  nav.tabs{width:100%;margin:0 -16px}
}

/* ---------------------------------------------------------------- headings */
main{flex:1 0 auto;display:flex;flex-direction:column}
/* longhand: .main-in is also a .wrap, and the shorthand would wipe its
   side padding */
.main-in{padding-top:30px;padding-bottom:70px}
@media(min-width:760px){.main-in{padding-top:40px;padding-bottom:84px}}

h1{font-size:clamp(30px,6vw,44px);line-height:1.04;letter-spacing:-.028em;
  font-weight:700;color:#000;margin:0 0 12px}
/* One rule per section, and the heading sits under it. That is the whole
   structural device on a prose page: no boxes, no tinted bands. */
h2{font-size:clamp(21px,3.4vw,26px);line-height:1.15;letter-spacing:-.022em;
  font-weight:700;color:#000;margin:46px 0 12px;border-top:2px solid var(--ink);
  padding-top:16px}
h3{font-size:17px;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin:26px 0 6px}
p{margin:0 0 12px}
.sub{color:var(--body);font-size:clamp(15px,2.4vw,17.5px);margin:0 0 26px;max-width:62ch}
.eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--meta);margin:0 0 8px}
.muted{color:var(--meta);font-size:13.5px;line-height:1.5}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;color:var(--body)}

/* the title, with the standfirst set beside it rather than under it, where
   the shell is wide enough to hold both */
.pagehead{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:6px}
.pagehead > div{flex:1;min-width:min(340px,100%)}
.pagehead h1{margin:0}
.pagehead-note{margin:0 0 4px;font-size:15px;color:var(--body);max-width:44ch;
  line-height:1.5}

/* the section rule: a small-caps label sitting on 2px of ink, optionally with
   something right-aligned on the same line */
.srule{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:7px;margin:34px 0 14px}
.srule .lbl{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--meta);margin:0}
.srule .r{margin-left:auto;font-size:12px;color:var(--meta)}
.srule .r .mono{font-size:11px;letter-spacing:.06em}
.srule.red{border-bottom-color:var(--red)}
.srule.red .lbl{color:var(--red)}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--meta)}

/* ---------------------------------------------------------------- surfaces */
/* A white card is for a repeated object, and for nothing else. */
.cards{display:grid;gap:0;margin:22px 0 0;border-top:2px solid var(--ink)}
/* the next section's rule closes this block, so the cards do not also draw a
   line and leave a band of nothing between the two */
.cards + h2{margin-top:26px}
.card:last-child{border-bottom:0}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{padding:18px 0 20px;text-decoration:none;color:inherit;display:block;
  border-bottom:1px solid var(--line)}
@media(min-width:700px){
  .card{padding:18px 26px 20px 0;border-bottom:0}
  .card + .card{padding:18px 0 20px 26px;border-left:1px solid var(--line)}
}
.card:hover{text-decoration:none;color:inherit}
.card h3{margin:0 0 6px;font-size:19px;display:flex;align-items:center;gap:9px}
.card:hover h3{color:var(--deep)}
.card p{color:var(--body);font-size:15px;margin:0;max-width:46ch}

/* Callouts. A rule and a label, on paper. A tinted field is what reads as
   generated, and the tint never said anything the rule does not. */
.warn,.ok,.note{background:none;border:0;border-top:2px solid var(--ink);
  border-radius:0;padding:13px 0 0;margin:22px 0;font-size:15px;color:var(--body)}
.warn{border-top-color:var(--red)}
.warn b:first-child,.ok b:first-child,.note b:first-child{color:var(--ink);
  font-weight:700}
.warn b:first-child{color:var(--red)}
.warn p:last-child,.ok p:last-child,.note p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- controls */
/* Three weights, one height. The primary carries a 2px inner base edge that
   inverts on press, so it reads as a key rather than a rectangle. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--green);color:var(--ink);border:0;padding:0 20px;height:46px;
  border-radius:var(--radius);font:inherit;font-weight:700;font-size:15px;
  letter-spacing:.005em;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);transition:background .12s}
.btn:hover{background:var(--green-dk);color:var(--ink);text-decoration:none}
.btn:active{box-shadow:inset 0 2px 0 rgba(0,0,0,.16);transform:translateY(1px)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--ink);
  font-weight:600;box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.ghost:active{transform:translateY(1px)}
.btn.quiet{background:transparent;color:var(--ink);border:0;padding:0 4px;
  height:40px;font-weight:600;border-radius:0;box-shadow:inset 0 -1px 0 var(--line-strong)}
.btn.quiet:hover{background:transparent;box-shadow:inset 0 -2px 0 var(--green)}
.btn.small{height:40px;font-size:14px;padding:0 16px}
/* on the dark verdict field */
.btn.ondark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);
  font-weight:600;box-shadow:none}
.btn.ondark:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}
@media(max-width:520px){.btnrow .btn{flex:1 1 100%}}

/* A trailing glyph is drawn, never a character or an icon file. */
.arw{width:7px;height:7px;border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;transform:rotate(45deg);display:block;flex:none}
.arw.dn{transform:rotate(135deg);margin-top:-3px}     /* disclose */

/* segmented control — two mutually exclusive views, in place of a select */
.segmented{display:inline-flex;border:1px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;height:38px;font-size:13.5px;font-weight:600;background:var(--card)}
.segmented label{display:inline-flex;align-items:center;padding:0 15px;
  color:var(--body);cursor:pointer;white-space:nowrap}
.segmented label + label{border-left:1px solid var(--ink)}
.segmented label:hover{background:#F1EFE9}
.segmented input{position:absolute;opacity:0;width:0;height:0}
.segmented label.on,.segmented label:has(input:checked){background:var(--ink);color:#fff}
.segmented:focus-within{outline:3px solid var(--deep);outline-offset:2px}
.segmented.sm{height:32px;font-size:12.5px}
.segmented.sm label{padding:0 13px}

/* select — the native element, with the platform's own arrow replaced */
.selwrap{position:relative;display:inline-block;max-width:100%}
.selwrap::after{content:"";position:absolute;right:15px;top:16px;width:8px;height:8px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);pointer-events:none}
select{font:inherit;font-size:14.5px;font-weight:500;height:42px;
  padding:0 40px 0 13px;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--card);color:var(--ink);appearance:none;-webkit-appearance:none;
  max-width:100%;cursor:pointer}

/* the password gate — one field, set at the width of what goes in it rather
   than at the width of the page */
.gate{max-width:430px;margin-inline:auto;padding-top:12vh;padding-bottom:90px}
.gate h1{font-size:clamp(28px,5vw,36px);margin-bottom:0}
.gate form{margin-top:28px}
.gate .warn{margin-bottom:0}
.gate .lbl{display:block;margin-bottom:7px}
.gate input[type=password]{font:inherit;font-size:16px;width:100%;height:48px;
  padding:0 14px;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--card);color:var(--ink)}
.gate .btnrow{margin-top:16px}
.gate .btn{width:100%;justify-content:center}
.signout{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--meta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.signout:hover{color:var(--ink)}

/* ---------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 18px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:100%}
th{text-align:left;font-weight:700;padding:8px 14px 8px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--meta)}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding-right:0}
th:last-child,td:last-child{padding-right:0}
/* A two-column table wraps happily on a phone. Three or more columns start
   putting one word on a line, so those scroll inside the wrapper instead. */
.tablewrap table:has(th:nth-child(3)){min-width:560px}

/* Three ruled blocks rather than three narrow columns: in an 880px measure a
   third of the width is about thirty characters a line, too tight for this
   much text. Each block gets the symptom across the top and the cause and the
   fix side by side underneath. */
.trouble{display:grid;gap:0;margin:16px 0;border-top:2px solid var(--ink)}
.trouble article{padding:16px 0 18px;border-bottom:1px solid var(--line)}
/* the symptom across the top, the cause and the fix side by side beneath */
@media(min-width:660px) and (max-width:1039px){
  .trouble article{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;
    align-items:start}
  .trouble h3{grid-column:1 / -1}
}
/* three of them, and the full shell holds three columns at a readable measure */
@media(min-width:1040px){
  .trouble{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}
  .trouble article{border-bottom:0;padding-top:18px}
  .trouble article + article{border-left:1px solid var(--line);padding-left:36px;
    margin-left:-36px}
}
.trouble h3{margin:0 0 10px;font-size:16px;line-height:1.3}
.trouble p{font-size:14.5px;margin:0;color:var(--body);max-width:none}
.trouble .lbl{display:block;margin-bottom:3px}

/* ---------------------------------------------------------------- stat row */
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);margin:24px 0 8px}
.stat{padding:14px 16px 16px;border-left:1px solid var(--line)}
/* Two up: no rail on the left-hand column so it lines up with the text
   column, and a hairline between the two rows. */
.stat:nth-child(2n+1){border-left:0;padding-left:0}
.stat:nth-child(n+3){border-top:1px solid var(--line)}
/* Four up: rails between every pair, no row divider left over from the 2x2.
   :nth-child(n) rather than the bare class so this outranks the rules above. */
@media(min-width:760px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats.three{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(n){border-left:1px solid var(--line);border-top:0;padding-left:20px}
  .stat:first-child{border-left:0;padding-left:0}
}
.stat .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--meta)}
.stat .v{font-size:clamp(30px,6vw,38px);line-height:1;font-weight:700;
  letter-spacing:-.03em;margin:9px 0 8px;font-variant-numeric:tabular-nums}
.stat .c{font-size:13px;color:var(--body);line-height:1.35}

/* ---------------------------------------------------------------- bars */
.bars{margin:0 0 6px}
.barrow{padding:11px 0;border-bottom:1px solid var(--line)}
.barrow:last-child{border-bottom:0}
.barlab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14.5px;margin-bottom:6px}
.barlab .nm{font-weight:600;display:inline-flex;align-items:baseline;gap:9px}
.barlab .nm .code{color:var(--meta);font-weight:400;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* keys the row to its bar, so the colour is doing data work rather than decoration */
.swatch{width:13px;height:13px;flex:none;align-self:center;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.barlab .v{color:var(--meta);font-size:13.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none}
.barlab .v b{color:var(--ink);font-size:15px}
.barlab .v .vs{color:var(--meta);font-size:12.5px;margin-left:6px;white-space:nowrap}
@media(max-width:520px){.barlab{flex-wrap:wrap;gap:2px}.barlab .v .vs{margin-left:0}}
.track{background:var(--track);height:12px;overflow:visible;position:relative}
.track .fill{height:100%;transition:width .3s ease}
.track.thin{height:8px}
/* the population benchmark, drawn as a rule on the same scale and overhanging
   the bar top and bottom so it reads as an axis mark, not part of the fill */
.bench{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--body);
  margin:12px 0 0}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:13px;height:13px;display:inline-block;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}

/* the gap against the country: a signed, tabular figure and nothing else */
.delta{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.delta.nil{font-weight:500;color:var(--meta)}

/* ------------------------------------------------------------ ruled sheet */
/* The page shape. Prose and the controls that belong to it sit in the left
   column at a readable measure; notes, links and legends sit beside it. A
   block that genuinely wants the whole width — the ribbon, the segment
   panels, the codebook, a distribution — takes .full and spans both. */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;
  align-items:start;margin-top:22px}
@media(min-width:1040px){.layout{grid-template-columns:minmax(0,1fr) 320px;gap:44px}}
.layout > .full{grid-column:1 / -1}
.layout > .lmain > :first-child,.aside > :first-child > :first-child{margin-top:0}
.aside{display:flex;flex-direction:column;gap:26px}
/* A sticky column taller than the viewport puts its own foot out of reach, so
   it scrolls inside itself once it stops fitting. */
@media(min-width:1040px){
  .aside{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;
    scrollbar-width:thin}
  /* where the column is taller than the section it belongs to, sticking makes
     it ride over the next section instead */
  .aside.nostick{position:static;max-height:none;overflow:visible}
}
.aside .lbl{display:block;border-bottom:2px solid var(--ink);padding-bottom:6px}
.aside p{font-size:13.5px;line-height:1.5;color:var(--body);margin:12px 0 0}
.aside p + p{margin-top:9px}
.aside .btnrow{margin:14px 0 0}
/* stacked distribution bar */
.stack{display:flex;height:18px;overflow:hidden;background:var(--track);margin:4px 0 0}
.stack i{display:block;height:100%}
.distrow{padding:11px 0;border-bottom:1px solid var(--line)}
.distrow:last-of-type{border-bottom:0}
/* your file above, the study below, on the same scale */
.pair{display:flex;align-items:center;gap:9px;margin-top:4px}
.pair .tick{flex:none;width:44px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--meta);text-align:right}
.pair .stack{flex:1;margin:0}
.stack.ref{height:11px;opacity:.5}
.track.ref{margin-top:3px;height:6px;opacity:.75}
.flag{color:var(--red);font-weight:700}
td.off{color:var(--red);font-weight:700}
td.rk{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--meta);white-space:nowrap}
/* the item label needs room, so let the comparison scroll rather than wrap
   every word onto its own line — above 700px, where the table is worth having */
table.cmp{min-width:660px}
table.cmp td:first-child{min-width:180px;vertical-align:top;padding-top:12px}
table.codes{min-width:640px}
table.codes td:nth-child(1){width:230px}
tr.diffrow td{border-bottom:1px solid var(--line)}
tr.diffrow td.num{font-size:13px}
details.nested{border:0;border-top:1px solid var(--line);margin:14px 0 0}
details.nested summary{font-size:13px;font-weight:600;padding:10px 0;color:var(--meta)}

/* An answer list, printed once for the columns that share it. */
.codelist{display:grid;grid-template-columns:1fr;font-size:13.5px}
@media(min-width:620px){.codelist{grid-template-columns:1fr 1fr;column-gap:30px}}
.codelist span{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.codelist b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  width:14px;flex:none;font-weight:700}

/* Below 700px the codebook and the comparison stop scrolling sideways and
   become ruled blocks instead. */
.blocks{display:none}
@media(max-width:699px){
  .blocks{display:block}
  .tablewrap.wide{display:none}
  .cblock{padding:14px 0;border-bottom:1px solid var(--line)}
  .cblock .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;color:var(--meta)}
  .cblock .t{font-size:14.5px;font-weight:600;line-height:1.35;margin-top:5px}
  .cblock .codes{margin-top:8px}
  /* the comparison: three narrow numeric columns per item */
  .iblock{padding:14px 0;border-bottom:1px solid var(--line)}
  .iblock .t{font-size:14.5px;font-weight:600;line-height:1.35;margin-bottom:8px}
  .igrid{display:grid;grid-template-columns:minmax(0,1fr) 52px 52px 52px;gap:0 8px;
    font-size:13px;font-variant-numeric:tabular-nums}
  .igrid > span{padding:5px 0;border-bottom:1px solid var(--line)}
  .igrid .h{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--meta);text-align:right;border-bottom:1px solid var(--ink);padding-bottom:4px}
  .igrid .h:first-child{text-align:left}
  .igrid .n{text-align:right}
  .igrid .n.off{color:var(--red);font-weight:700}
  .iblock .foot{font-size:12px;color:var(--meta);margin-top:8px}
}

/* ---------------------------------------------------------------- upload */
/* The native file input is unstyleable and renders badly on phones, so it is
   taken out of the layout and driven by a label styled as a button. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.drop{border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:26px 18px;text-align:center;background:var(--card);
  transition:border-color .15s}
@media(min-width:760px){.drop{padding:34px 24px}}
.drop.over{border-color:var(--ink);border-style:solid}
.drop b{font-size:18px;display:block;letter-spacing:-.01em}
/* "drop it here" is meaningless on a touch device */
.drop .drag{display:none}
@media(hover:hover) and (pointer:fine){
  .drop .touch{display:none}
  .drop .drag{display:inline}
}
.drop .pick{margin-top:16px}
.drop .chosen{display:block;margin-top:14px;font-size:14.5px;font-weight:600;
  word-break:break-all}
.visually-hidden:focus-visible + .pick{
  outline:3px solid var(--deep);outline-offset:2px}
@media(max-width:520px){.drop b{font-size:16px}}

/* ------------------------------------------------------------- run panel */
/* One instrument that changes state, in place of a warning bar and a table of
   every column name. Nothing here claims anything that has not happened: the
   count and the estimate come from the file size the browser already knows,
   and the fill stops at the hairline until the server answers. */
.run{background:var(--paper);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:24px 20px;margin:20px 0}
@media(min-width:760px){.run{padding:30px 34px}}
.run .srule{margin-top:0}
.run-body{display:flex;align-items:flex-end;gap:26px;margin-top:22px;flex-wrap:wrap}
.run-main{flex:1;min-width:280px}
.run-fig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.run-fig .n{font-size:clamp(30px,6vw,38px);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.run-fig .of{font-size:15px;color:var(--meta)}
.run-fig .eta{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--meta);font-variant-numeric:tabular-nums}
.run-bar{height:8px;background:var(--line);margin-top:14px;position:relative}
.run-bar i{display:block;height:100%;background:var(--green);width:0;
  transition:width .4s linear}
.run-bar .cap{position:absolute;left:90%;top:0;bottom:0;width:1px;background:var(--ink);
  opacity:.35}
.run-stages{display:flex;margin-top:16px;border-top:1px solid var(--line)}
.run-stages span{flex:1;padding:10px 0 0;font-size:12.5px;color:#9a9a94;
  border-top:3px solid var(--line);margin-top:-1px;line-height:1.3}
.run-stages span + span{padding-left:12px}
.run-stages span.now{color:var(--ink);font-weight:600;border-top-color:var(--green)}
.run-stages span.done{color:var(--ink);border-top-color:var(--deep)}
.run-side{width:100%;padding-top:20px;border-top:1px solid var(--line)}
@media(min-width:760px){
  .run-side{width:250px;padding:0 0 0 26px;border-top:0;border-left:1px solid var(--line)}
}
.run-side p{font-size:13px;color:var(--meta);line-height:1.5;margin:0}
/* stopped: the heading is the error */
.run-stop{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap}
.run-stop-main{flex:1;min-width:280px}
.run-stop-main h3{font-size:clamp(19px,3.2vw,23px);line-height:1.2;letter-spacing:-.015em;
  font-weight:700;margin:0}
.run-stop-main p{font-size:15px;line-height:1.5;margin:10px 0 0;max-width:64ch;
  color:var(--body)}
/* dividers on the right, not the left, so a wrapped row still starts flush
   with the prose above it */
.chiprow{display:flex;flex-wrap:wrap;margin:18px 0 0;border-top:1px solid var(--line)}
.chiprow span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;padding:7px 15px 7px 0;margin-right:15px;color:var(--body);
  border-right:1px solid var(--line)}
.chiprow span:last-child{border-right:0;margin-right:0}
.chiprow span.more{font-family:inherit;color:var(--meta)}
.passed{width:100%;padding-top:20px;border-top:1px solid var(--line)}
@media(min-width:760px){
  .passed{width:280px;padding:0 0 0 26px;border-top:0;border-left:1px solid var(--line)}
}
.passed .rows{margin-top:12px;display:flex;flex-direction:column;font-size:13.5px}
.passed .rows span{display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding:7px 0}
.passed .rows span:last-child{border-bottom:0}
.passed .rows b{font-variant-numeric:tabular-nums;font-weight:700}

/* ------------------------------------------------- SPSS column matching */
/* .maprow is a genuine repeated object — one column match — so it stays a card. */
.maprow{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;margin:0 0 10px}
.maphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:7px}
.maphead h3{margin:0;font-size:15px;font-weight:700}
.maphead .tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--meta)}
.mapstem{font-size:13.5px;color:var(--meta);margin:9px 0 4px;line-height:1.45}
.mapitem{display:grid;gap:4px 18px;padding:11px 0;border-top:1px solid var(--line)}
@media(min-width:660px){.mapitem{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:start}}
.mapexp{display:block;font-size:14.5px}
.mapitemtext{display:block;font-weight:600;line-height:1.35}
.mapexp .mono{font-size:11.5px;color:var(--meta)}
.mapsrc select{width:100%;height:38px;font-size:13.5px}
.mapsrc .selwrap{display:block;width:100%}
.mapsrc .selwrap::after{top:14px}
.mapwhy{font-size:12.5px;color:var(--meta);margin:6px 0 0;line-height:1.4}
.mapwhy .flag{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ---------------------------------------------------------------- details */
details{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;
  background:none}
summary{cursor:pointer;font-weight:700;font-size:15px;padding:13px 0;list-style:none;
  display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:0;height:0;border:5px solid transparent;
  border-left-color:var(--meta);transition:transform .15s;flex:none;margin-top:1px}
details[open] summary::before{transform:rotate(90deg) translateX(-1px)}
summary:hover{color:var(--deep)}
summary .tag{margin-left:auto;font-size:12px;font-weight:400;color:var(--meta)}
.dbody{padding:2px 0 20px}
.dbody .tablewrap{margin:10px 0}
.dbody > p:first-child{margin-top:0}
.dlist{border-top:2px solid var(--ink)}

/* contents, in the aside */
.toc{display:flex;flex-direction:column;margin-top:12px}
.toc a{font-size:13.5px;text-decoration:none;color:var(--body);padding:7px 0;
  border-bottom:1px solid var(--line);line-height:1.3}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--green);text-underline-offset:3px}
.toc.small a{font-size:13px;padding:5px 0}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:#a9a9a3;font-size:13px;padding:26px 0;flex:none}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
footer p{margin:0}
footer b{color:#e8e8e3;font-weight:600}
footer .right{margin-left:auto;color:#7d7d78;font-size:12.5px}

/* ---------------------------------------------------------------- focus */
/* One ring, two inks: deep green at 2px offset on light, Greenpeace green
   inset on the black masthead and the verdict field. */
:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.site :focus-visible,footer :focus-visible{
  outline:3px solid var(--green);outline-offset:-3px}
/* the skip link lands on the black masthead, so it takes the dark-surface ring
   even though it sits outside .site in the markup */
.skip:focus-visible,.skip:focus{outline:3px solid var(--green);outline-offset:2px}

@media print{
  .site,.btnrow,.skip{display:none}
  body{background:#fff}
  details{break-inside:avoid}
  details:not([open]) .dbody{display:block}
}

/* Named exceptions rather than a blanket rule. The step fade and every
   transform go; the progress bar keeps a short width transition, because
   without it the bar jumps with no indication that anything moved. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:active{transform:none}
  .run-bar i,.track .fill{transition-duration:150ms !important}
}

/* Windows high contrast strips the segment palette out, and the segment
   palette is the only thing naming a segment. Keep an edge on every fill. */
@media(forced-colors:active){
  .swatch,.legend i,.stack i,.track .fill,
  .run-bar i{forced-color-adjust:none;border:1px solid CanvasText}
}