/* tools.css - the four calculator pages, restyled in the site's own system.

   Loaded AFTER each page's inline tool CSS, so it restyles that CSS without touching it, and it
   only uses tokens from style.css. Presentation only: no text, number or script change.
   The rules it obeys (style.css + the site's layout rules):
     one typeface, separated by size and weight  ·  1px hairlines, no fills, no radius, no shadow
     ·  negative space is the material  ·  colour is navigation: the accent marks "this project"
     and a problem, nothing else  ·  the six type sizes and the spacing unit, no new values.     */

/* ---------- the tool palette, re-pointed at the site's ---------- */
.toolwrap {
  --tbg: var(--paper); --tink: var(--ink); --tgrey: var(--ink-soft); --tfaint: var(--ink-faint);
  --trule: var(--rule); --tpanel: transparent;
  --tnavy: var(--ink); --tgold: var(--ink-faint); --tred: var(--accent); --tgreen: var(--ink);
  max-width: var(--wrap); padding: 0 var(--u3) var(--u16);
  font-family: "Atkinson Hyperlegible Next", "Segoe UI", Arial, system-ui, sans-serif;
  font-size: var(--t-small); line-height: 1.6; letter-spacing: -0.006em;
}
@media (min-width: 60rem) { .toolwrap { padding: 0 var(--u6) var(--u16); } }
.toolwrap text { font-family: "Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif; }
.toolwrap b, .toolwrap strong { font-weight: 700; }
.toolwrap a { color: var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
.toolwrap a:hover { border-bottom-color: var(--ink); }
.toolwrap input:focus-visible, .toolwrap select:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ---------- the page head: the site's page title and standfirst ---------- */
.toolwrap .disclaim-strip { font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-faint);
                            margin: 0 0 var(--u6); padding: 0; max-width: var(--measure); }
.toolwrap .disclaim-strip a { color: var(--ink-faint); }
.toolwrap .tool-header { border-bottom: 0; padding: 0; margin: 0 0 var(--u6); }
.toolwrap .eyebrow { font-size: var(--t-micro); letter-spacing: 0.13em; color: var(--ink-faint);
                     font-weight: 500; margin: 0 0 var(--u2); }
.toolwrap .tool-h1 { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.025em;
                     font-weight: 500; margin: 0 0 var(--u3); max-width: 20em; text-wrap: balance; }
.toolwrap .sub { font-size: var(--t-small); color: var(--ink-soft); max-width: 44rem; }
.toolwrap .tool-header .sub { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.012em;
                 color: var(--ink-soft); max-width: 30em; }
/* the long standfirsts (the utility tool's carries its own bold lead-in) drop to body size */
.toolwrap .tool-header .sub:has(b) { font-size: var(--t-body); line-height: 1.6; max-width: var(--measure); }
@media (max-width: 40rem) {
  .toolwrap .tool-h1 { font-size: 1.75rem; }        /* = the low end of --t-hero */
  .toolwrap .tool-header .sub { font-size: var(--t-body); }
}

/* ---------- the notes above the tool: a hairline and a bold lead-in, no tinted boxes ---------- */
.toolwrap .banner, .toolwrap .banner.red {
  background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0;
  margin: 0 0 var(--u4); padding: var(--u2) 0 0; max-width: 52rem;
  font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft);
}
.toolwrap .banner + .banner { border-top-color: var(--rule); }
.toolwrap .banner b, .toolwrap .banner.red b { color: var(--ink); }

/* the utility tool's worked example: the same note form, set one size up */
.toolwrap .case-study { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0;
                        padding: var(--u2) 0 0; margin: var(--u6) 0 var(--u4); max-width: 52rem; }
.toolwrap .case-study .cs-label { font-size: var(--t-micro); letter-spacing: 0.15em; color: var(--ink-faint); }
.toolwrap .case-study h3 { font-size: var(--t-lead); font-weight: 700; letter-spacing: -0.018em; line-height: 1.25;
                           margin: var(--u) 0 var(--u2); }
.toolwrap .case-study p { font-size: var(--t-small); color: var(--ink-soft); }
.toolwrap .case-study .cs-try { background: none; border: 0; border-left: 1px solid var(--ink); border-radius: 0;
                                padding: 0 0 0 var(--u2); font-size: var(--t-small); color: var(--ink-soft); }
.toolwrap .case-study .cs-try b { color: var(--ink); }
.toolwrap .case-study .cs-note { font-size: var(--t-micro); color: var(--ink-faint); font-style: normal; }

/* ---------- section heads: exactly the site's h2.section ---------- */
.toolwrap .tool-h2 {
  font-size: var(--t-micro); letter-spacing: 0.15em; color: var(--ink); font-weight: 700;
  border-top: 1px solid var(--ink); border-bottom: 0; padding: var(--u2) 0 0;
  margin: var(--u8) 0 var(--u4);
}

/* ---------- inputs: a ruled sheet of fields, like the site's fact box ---------- */
.toolwrap .inputs {
  background: none; border: 0; border-radius: 0; padding: 0;
  gap: var(--u3) var(--u3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
/* each field is three rows of the sheet - label, box, note - shared across the row (subgrid), so a
   two-line label never knocks its box below its neighbours' */
@supports (grid-template-rows: subgrid) {
  .toolwrap .inputs { grid-auto-rows: auto; }
  .toolwrap .inputs > .fld { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .toolwrap .inputs > .fld > label { align-self: end; }
}
.toolwrap .fld label { font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--ink-faint);
                       font-weight: 700; line-height: 1.35; margin-bottom: var(--u); }
.toolwrap .fld input, .toolwrap .fld select, .toolwrap table.edit input {
  font: 500 var(--t-body)/1.2 "Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: var(--u) 0; min-height: 2.75rem;
}
.toolwrap .fld select, .toolwrap table.edit select {
  -webkit-appearance: none; appearance: none; padding-right: var(--u3); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.toolwrap .fld input:hover, .toolwrap .fld select:hover, .toolwrap table.edit input:hover { border-bottom-color: var(--accent); }
.toolwrap .fld input:focus, .toolwrap .fld select:focus, .toolwrap table.edit input:focus {
  outline: none; border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent);
}
.toolwrap .fld input::placeholder, .toolwrap table.edit input::placeholder { color: var(--ink-faint); opacity: 1; }
.toolwrap .fld small, .toolwrap table.edit small { font-size: var(--t-micro); color: var(--ink-faint);
                                                   line-height: 1.45; margin-top: var(--u); }
.toolwrap table.edit small { margin-top: 2px; }

/* ---------- drawings: the site's frame - the drawing gets the page, the caption sits under it ---------- */
.toolwrap .plans { gap: var(--u6) var(--u4); margin-top: var(--u4); }
.toolwrap .plan { border: 0; border-top: 1px solid var(--ink); border-radius: 0; overflow: visible; }
.toolwrap .plan .hd, .toolwrap .plan.A .hd, .toolwrap .plan.B .hd, .toolwrap .plan.C .hd {
  background: none; border-bottom: 0; padding: var(--u2) 0 var(--u);
}
.toolwrap .plan .hd h3, .toolwrap .plan.B .hd h3 { color: var(--ink); font-size: var(--t-body);
                                                   font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.toolwrap .plan .hd p, .toolwrap .plan.B .hd p { color: var(--ink-faint); font-size: var(--t-small); }
.toolwrap .plan .body { background: none; padding: var(--u2) 0; flex: 0 0 auto; }
.toolwrap .plan .ft { border-top: 1px solid var(--rule); padding: var(--u2) 0 0;
                      font-size: var(--t-small); color: var(--ink-soft); }
.toolwrap .plan.off { opacity: 1; }
.toolwrap .plan.off .hd { background: none; }
.toolwrap .plan.off .hd h3, .toolwrap .plan.off .hd p, .toolwrap .plan.off .ft { color: var(--ink-faint); }
.toolwrap .plan.off { border-top-color: var(--rule); }

.toolwrap .chart { border: 0; border-radius: 0; background: none; padding: var(--u2) 0 0; margin-top: var(--u4); }
.toolwrap .legend { font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-soft); gap: var(--u) var(--u3); }
.toolwrap .legend i { border-radius: 0; width: 10px; height: 10px; }
/* the legend keys take the chart's own marker shapes: dot, triangle, square */
.toolwrap .legend span:nth-child(1) i { border-radius: 50%; }
.toolwrap .legend span:nth-child(2) i { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
.toolwrap .legend span.lnote { color: var(--ink-faint) !important; }   /* the notes carry an inline grey */

/* ---------- results: the site's project table ---------- */
.toolwrap table.res, .toolwrap table.edit { font-size: var(--t-small); margin-top: 0; }
.toolwrap table.res th, .toolwrap table.res td,
.toolwrap table.edit th, .toolwrap table.edit td { border-bottom: 1px solid var(--rule); padding: var(--u) var(--u2) var(--u) 0; }
.toolwrap table.res th:last-child, .toolwrap table.res td:last-child { padding-right: 0; }
.toolwrap table.res thead th, .toolwrap table.edit thead th {
  font-size: var(--t-micro); letter-spacing: 0.13em; color: var(--ink-faint); font-weight: 700;
  border-bottom: 1px solid var(--ink); padding-top: 0; padding-bottom: var(--u); vertical-align: bottom;
}
.toolwrap table.res td.num { font-weight: 500; }
/* the highlighted rows (the footprint, the total, "this project") take weight, not a tint. the utility
   tool's current band - the row the project sits in - also takes one accent hairline: where you are */
.toolwrap table.res tr.hl td, .toolwrap table.edit tr.cur td { background: none; }
.toolwrap table.res tr.hl td:first-child, .toolwrap table.res tr.hl td.num { font-weight: 700; color: var(--ink); }
.toolwrap table.edit tr.cur td:first-child, .toolwrap table.edit tr.cur td:nth-child(2) { font-weight: 700; }
.toolwrap table.edit tr.cur td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: var(--u2); }
.toolwrap table.res tr.big td { font-size: var(--t-body); font-weight: 700; padding-top: var(--u2); padding-bottom: var(--u2);
                                border-bottom: 1px solid var(--ink); }
.toolwrap table.res tr.big td:first-child { color: var(--ink); }
.toolwrap table.res td.delta { color: var(--ink); font-weight: 700; }
.toolwrap table.res td.delta.neg { color: var(--accent); }
.toolwrap table.res td.delta.na { color: var(--ink-faint); font-weight: 400; }
.toolwrap table.edit td.tag { font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--ink-faint); }
.toolwrap table.edit td.tag.hot { color: var(--accent); }
/* phone: the utility tool's own tight set still governs (its padding rules are re-stated here) */
.toolwrap .reswrap table.res.tight th, .toolwrap .reswrap table.res.tight td { padding-left: 5px; padding-right: 5px; }
.toolwrap .reswrap table.res.tight tr.big td { font-size: var(--t-small); }
@media (max-width: 640px) {
  .toolwrap table.edit th, .toolwrap table.edit td { padding: 7px 5px 7px 0; }
  .toolwrap table.edit input { font-size: var(--t-small); min-height: 2.25rem; }
  .toolwrap table.edit td.tag { font-size: 0.6875rem; letter-spacing: 0.04em; }
}
@media (max-width: 520px) {
  .toolwrap .res-scroll table.res th, .toolwrap .res-scroll table.res td { padding-left: 6px; padding-right: 6px; }
}

/* ---------- the answer cards: the site's proof band - a big number on a hairline ---------- */
.toolwrap .cards { gap: var(--u4) var(--u4); margin: var(--u4) 0 var(--u6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.toolwrap .card { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: var(--u2) 0 0; }
.toolwrap .card .n { font-size: var(--t-head); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
.toolwrap .card .n.g { color: var(--ink); }
.toolwrap .card .l { font-size: var(--t-micro); letter-spacing: 0.13em; color: var(--ink); font-weight: 700; margin-top: var(--u2); }
.toolwrap .card .d { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; margin-top: var(--u); }

/* ---------- code checks: one hairline each; a problem takes the accent, an ok stays ink ---------- */
.toolwrap .checks { gap: 0 var(--u4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.toolwrap .check-card, .toolwrap .check-card.ok, .toolwrap .check-card.warn {
  background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--u2) 0 var(--u3);
}
.toolwrap .check-card.bad { background: none; border: 0; border-top: 1px solid var(--accent); border-radius: 0; padding: var(--u2) 0 var(--u3); }
.toolwrap .cc-dot { font-size: var(--t-small); }
.toolwrap .check-card.ok .cc-dot { color: var(--ink); }
.toolwrap .check-card.warn .cc-dot { color: var(--ink-soft); }
.toolwrap .check-card.bad .cc-dot, .toolwrap .check-card.bad .cc-label { color: var(--accent); }
.toolwrap .cc-label { font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--ink-faint); }
.toolwrap .cc-val { font-size: var(--t-body); font-weight: 500; color: var(--ink); margin-top: var(--u); line-height: 1.35; }
.toolwrap .cc-note { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--u); }
.toolwrap .cc-cite { font-size: var(--t-micro); color: var(--ink-faint); font-style: normal; letter-spacing: 0.02em; margin-top: var(--u); }

/* ---------- prose: the site's measure ---------- */
.toolwrap .explainer { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.6; max-width: var(--measure); }
.toolwrap .explainer p { margin: 0 0 var(--u3); }
.toolwrap .notes-list { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.65; max-width: 44rem; }
.toolwrap .notes-list li { margin-bottom: var(--u2); }
.toolwrap .notes-list code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: var(--ink);
                             font-family: inherit; font-weight: 700; }
.toolwrap .tool-footer { margin-top: var(--u12); padding-top: var(--u3); border-top: 1px solid var(--rule);
                         font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-faint); max-width: 44rem; }

/* ---------- the disclaimer gate: on paper, like the photo viewer - no dark veil, no shadow ---------- */
.dgate { background: rgba(248, 245, 238, 0.96);
         font-family: "Atkinson Hyperlegible Next", "Segoe UI", Arial, system-ui, sans-serif;
         font-size: var(--t-body); line-height: 1.55; color: var(--ink); padding: var(--u3); }
.dgate-box { background: var(--paper); border: 0; border-top: 1px solid var(--ink); border-radius: 0; box-shadow: none;
             max-width: 32rem; padding: var(--u3) 0 0; }
.dgate-label { font-size: var(--t-micro); letter-spacing: 0.15em; color: var(--accent); font-weight: 700; margin: 0 0 var(--u2); }
.dgate-box h2 { font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500;
                color: var(--ink); margin: 0 0 var(--u3); }
.dgate-box ul { padding-left: var(--u3); margin: 0 0 var(--u3); color: var(--ink); }
.dgate-box li { font-size: var(--t-small); line-height: 1.55; margin-bottom: var(--u); color: var(--ink-soft); }
.dgate-full { font-size: var(--t-small); margin: 0 0 var(--u4); }
.dgate-full a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.dgate-box button {
  font: inherit; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  padding: var(--u2) var(--u3); min-height: 2.75rem; width: 100%; cursor: pointer;
}
.dgate-box button:hover { background: var(--accent); border-color: var(--accent); }
.dgate-box button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

@media (max-width: 40rem) { .toolwrap table.res tr.big td { font-size: var(--t-small); } }
@media print { .toolwrap { padding: 0; max-width: none; } }
#massingNote { margin-top: var(--u4) !important; }  /* its inline 8px sat it on the last field note */