/* The stylesheets of the shared blocks, in one file the pages link.
 *
 * Each of these used to be pasted into every page that carried its block —
 * 201 kB of duplicated CSS across the site. The scripts came out first; this is
 * the other half of the same decision, and the same rules apply: a plain
 * stylesheet, no bundler, linked before each page's own <style> so anything a
 * page needs to override still wins.
 */
/* ---------- design file ---------- */
.designfile{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px;
  padding:11px 13px;border:1.5px solid var(--rule);background:var(--sheet)}
.dfbtn{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;padding:7px 13px;border:1.5px solid var(--ink);
  background:var(--ink);color:#FFFFFF;cursor:pointer;border-radius:2px;line-height:1.2}
.dfbtn.ghost{background:transparent;color:var(--ink)}
/* --accent is not a token this site defines, and these two rules used to name
   it. An invalid var() does not fall back, it unsets the property: hovering
   Save left white text on a transparent button, and the focus rule replaced the
   site's own :focus-visible outline with nothing at all — these were the only
   controls on the site with no focus ring. #0D1A24 is what every other button
   here darkens to, and the focus ring is the page's, which already works. */
.dfbtn:hover{background:#0D1A24;border-color:#0D1A24;color:#FFFFFF}
.dfbtn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--sheet-lit)}
.dfbtn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dfname{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:6px 8px;
  border:1px solid var(--rule);background:var(--sheet-lit);color:var(--ink);
  width:26ch;min-width:0;flex:0 1 auto}
/* Room for the hint ("Name it, e.g. Trainer v2"), and where the browser can,
   a box that grows with the name typed into it up to the 60 the field takes
   — narrower on a phone, where the bar wraps and min() keeps it inside. */
@supports (field-sizing:content){
  .dfname{field-sizing:content;width:auto;min-width:min(26ch,100%);max-width:min(44ch,100%)}
}
.dfmsg{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.5;
  color:var(--ink-soft);flex:1 1 190px;min-width:0}
.dfmsg.ok{color:var(--good,#1F5E50)}
.dfmsg.bad{color:var(--flag,#A90E14)}
@media print{.designfile{display:none}}


/* ---------- table export ---------- */
.csvbar{display:flex;justify-content:flex-end;margin:6px 0 2px;padding:0 10px}
.csvbtn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule);background:transparent;
  color:var(--ink-soft);cursor:pointer;border-radius:2px;line-height:1.3}
.csvbtn:hover{border-color:var(--ink);color:var(--ink)}
.csvbtn[data-said]{border-color:var(--go,#1F5E50);color:var(--go,#1F5E50)}
@media print{.csvbar{display:none}}

/* ---------- sensitivity ---------- */
.sens{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:0}
.sens-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 16px}
.sens-h .sens-t{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);flex:0 0 auto}
.sens-h .sens-for{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;
  color:var(--ink-soft);flex:0 0 auto}
.sens-h select{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:4px 7px;
  border:1px solid var(--rule);background:var(--sheet-lit);color:var(--ink);max-width:100%}
.sens-h .sens-note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);
  flex:1 1 180px;min-width:0}
.sens-body{padding:0 16px 14px}
.sens-row{display:grid;grid-template-columns:minmax(120px,1.5fr) 62px 1fr;gap:10px;
  align-items:center;padding:5px 0;border-bottom:1px dotted var(--rule-soft)}
.sens-row:last-child{border-bottom:0}
@media (max-width:560px){.sens-row{grid-template-columns:1fr 54px;gap:6px}
  .sens-row .sens-bar{grid-column:1/-1}}
.sens-row .sens-k{font-size:13px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.sens-row .sens-v{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.sens-bar{position:relative;height:10px;background:linear-gradient(var(--rule-soft),var(--rule-soft))
  no-repeat center/100% 1px}
.sens-bar i{position:absolute;top:0;height:10px;background:var(--ink);display:block}
.sens-bar i.neg{background:var(--flag)}
.sens-band{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.6;
  color:var(--ink);margin:0;padding:0 16px 12px;max-width:82ch}
.sens-band b{font-weight:600}
.sens-band .sens-caveat{color:var(--ink-soft)}
.sens-sub{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 2px;padding:12px 0 4px;border-top:1px solid var(--rule-soft)}
.sens-row .sens-k em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:11px;line-height:1.45;color:var(--ink-soft);margin-top:2px}
.sens-foot{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.55;
  color:var(--ink-soft);padding:2px 16px 13px;max-width:78ch}
@media print{.sens{display:none}}

/* ---------- citation ---------- */
.cite{margin:14px 0 0;border-top:1px solid var(--rule-soft);padding-top:10px}
.cite summary{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  list-style:none;display:inline-block;padding:2px 0}
.cite summary::-webkit-details-marker{display:none}
.cite summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace}
.cite[open] summary::before{content:"\2212 "}
.cite summary:hover{color:var(--ink)}
.cite-b{padding:8px 0 2px}
.cite-n{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:70ch;margin:0 0 12px}
.cite-row{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px;flex-wrap:wrap}
.cite-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);flex:0 0 52px;padding-top:5px}
.cite-v{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;flex:1 1 260px;min-width:0;
  border:1px solid var(--rule);background:var(--sheet-lit);padding:7px 9px}
.cite-c{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule);background:transparent;
  color:var(--ink-soft);cursor:pointer;border-radius:2px;flex:0 0 auto}
.cite-c:hover{border-color:var(--ink);color:var(--ink)}
@media print{.cite summary{display:none}.cite{border-top:0}.cite-b{padding:0}}

/* ---------- validity ---------- */
.vlim{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:11px 16px 13px}
.vlim .vlim-t{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 3px;color:var(--ink-soft)}
.vlim-n{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.55;
  color:var(--ink-soft);margin:0 0 9px;max-width:78ch}
.vrow{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(110px,1fr) 88px 1fr;
  gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--rule-soft);
  font-size:13.5px}
.vrow:last-child{border-bottom:0}
@media (max-width:640px){.vrow{grid-template-columns:1fr 1fr;gap:4px 10px}
  .vrow .vwhy{grid-column:1/-1}}
.vrow .vq{color:var(--ink)}
.vrow .vr,.vrow .vv{font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.vrow .vv{color:var(--ink)}
.vrow .vwhy{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.vrow.out{background:#FDF6F0;margin:0 -16px;padding-left:16px;padding-right:16px}
.vrow.out .vv{color:var(--flag);font-weight:600}
@media print{.vlim{break-inside:avoid}}

/* ---------- two at a time ---------- */
.sweep{border-bottom:1px solid var(--ink);padding:0}
.sweep>summary{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  list-style:none;padding:11px 16px}
.sweep>summary::-webkit-details-marker{display:none}
.sweep>summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace}
.sweep[open]>summary::before{content:"\2212 "}
.sweep>summary:hover{color:var(--ink)}
.sweep-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:0 16px 10px}
.sweep-h label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;
  color:var(--ink-soft);display:flex;align-items:center;max-width:100%;min-width:0}
/* a long field name in a picker must not push the page sideways on a phone */
.sweep-h select{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:4px 7px;
  border:1px solid var(--rule);background:var(--sheet-lit);color:var(--ink);
  max-width:100%;min-width:0;flex:1 1 auto;margin-left:5px}
.sweep-btn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;border:1px solid var(--rule);
  background:var(--sheet-lit);color:var(--ink-soft);cursor:pointer}
.sweep-btn:hover{border-color:var(--ink);color:var(--ink)}
.sweep-wrap{overflow-x:auto;padding:0 16px}
table.sweep-g{border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  font-variant-numeric:tabular-nums;min-width:100%}
table.sweep-g caption{caption-side:top;text-align:left;font-size:11px;line-height:1.5;
  color:var(--ink-soft);padding:0 0 7px}
table.sweep-g th,table.sweep-g td{border:1px solid var(--rule-soft);padding:5px 7px;
  text-align:right;white-space:nowrap}
table.sweep-g th{font-weight:600;color:var(--ink-soft);background:var(--sheet-lit)}
table.sweep-g th.sweep-corner{text-align:left;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;white-space:normal;min-width:11ch}
table.sweep-g td.t1{background:rgba(21,38,51,.035)}
table.sweep-g td.t2{background:rgba(21,38,51,.075)}
table.sweep-g td.t3{background:rgba(21,38,51,.115)}
table.sweep-g td.t4{background:rgba(21,38,51,.155)}
table.sweep-g td.t5{background:rgba(21,38,51,.195)}
table.sweep-g td.sweep-here{outline:2px solid var(--ink);outline-offset:-2px;font-weight:600}
.sweep-foot{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.55;
  color:var(--ink-soft);padding:9px 16px 13px;max-width:80ch}
.sweep-foot strong{color:var(--ink)}
@media print{.sweep{display:none}}

/* ---------- where people go wrong ---------- */
.gowrong{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:0}
.gowrong>summary{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  list-style:none;padding:11px 16px}
.gowrong>summary::-webkit-details-marker{display:none}
.gowrong>summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace}
.gowrong[open]>summary::before{content:"\2212 "}
.gowrong>summary:hover{color:var(--ink)}
.gowrong-l{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.55;
  color:var(--ink-soft);margin:0 16px 10px;max-width:80ch}
.gowrong-i{font-size:13.5px;line-height:1.6;margin:0 16px 12px;max-width:78ch;
  padding-left:14px;border-left:2px solid var(--rule-soft)}
.gowrong-i b{font-weight:600}
.gowrong-i:last-of-type{margin-bottom:15px}
@media print{.gowrong{break-inside:avoid}.gowrong>summary{display:none}}

/* ---------- method link ---------- */
.methodlink{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.55;
  margin:9px 16px 0;color:var(--ink-soft)}
.methodlink a{color:var(--flag)}

/* ---------- glossary links ---------- */
/* The first use of each glossary term on a sheet, and only the first. Quiet on
   purpose: a dotted rule the colour of the body text rather than a blue link,
   because these are footnotes to the writing and not somewhere the reader is
   being sent. They disappear in print, where the glossary is not a click away
   and an underline is just noise. */
.gl{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-soft)}
.gl:hover,.gl:focus-visible{color:var(--flag);border-bottom-color:var(--flag)}
@media print{.gl{border-bottom:0}}

/* ================ SHARED PICKER BLOCK ===============================
   The pickers. `class="sel"` is on fourteen pages and this rule was on
   eight of them, so on the other six — Sheets 10, 11, 12, 13, 15 and 16,
   which is most of what Rev D added — every picker rendered as the browser's
   own default: 19 pixels tall against the 34 of a styled one, no border, no
   padding, and nothing to say it belonged to the form around it. A control
   that does not look like a control is a poor thing to hand somebody
   standing in a field, and it had been that way since those sheets shipped.

   The class was written into the markup and the rule was left behind, which
   is what happens to a style pasted into each page rather than shared. It is
   shared now, and `tools/check-classes.py` fails on a class the markup uses
   and no stylesheet defines.
   ==================================================================== */
select.sel{width:100%;font-family:"IBM Plex Sans",sans-serif;font-size:14px;padding:8px 10px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2355616E' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
select.sel:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* Print: the drawing on the first page. On paper the sheet is narrower than
   the screen's two-column split, so the inputs stacked into a single column
   half a page tall and pushed the drawing onto page two, leaving page one
   mostly blank. The inputs flow into three short columns instead, which is
   how a paper calculation sheet lists its givens anyway. */
@media print{
  .split .inputs{columns:3;column-gap:12pt;column-rule:0.5pt solid #999}
  .split .inputs .field{break-inside:avoid}
  .split .inputs .grouphead{break-after:avoid}
}