/* Kalios calculator: calculator.html and embed/calculator.html, in the Fine Print (G, 2026-10-15). Tokens come from
   fine-print.css on the site and calc-embed.css in the embed; scripts/token_lint.py holds this file to the same set.
   The mode toggle is a chip row; the answer is the number (96, 76 at 420 px and under) with its italic line under it;
   the syringe is drawn in the figure's stroke, its fill in caution; the syringe choices are rows; the inputs are
   hairline fields with mono values; the "You said" rows are the sheet; the pinned answer line carries the caution rule.
   Selectors sit under .calc so the site stylesheet, which loads after this one, doesn't override them. */

.calc.sl-main{max-width:calc(var(--col) + 2 * var(--gutter))}
.calc .calc-grid{display:flex;flex-direction:column}
.calc .calc-a,.calc .calc-b{display:flex;flex-direction:column;min-width:0}
.calc .calc-b{margin-top:var(--s5)}
@media (min-width:1024px){
  .calc.sl-main{max-width:calc(var(--site) + 2 * var(--gutter))}
  .calc.sl-main .calc-grid{display:grid;grid-template-columns:minmax(0,var(--col)) minmax(0,var(--side));column-gap:var(--s6);align-items:start}
  .calc.sl-main .calc-a{position:sticky;top:calc(var(--head-h) + var(--s3))}
  .calc.sl-main .calc-b{margin-top:0}
}

/* The mode toggle: a chip row */
.calc .calc-mode{display:flex;flex-wrap:wrap;gap:var(--s1);margin:0}
.calc .calc-mode button{position:relative;min-height:32px;padding:7px 11px;border:1px solid var(--rule-2);border-radius:2px;background:none;color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.04em;cursor:pointer}
.calc .calc-mode button::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--s1));bottom:calc(-1 * var(--s1))}
.calc .calc-mode button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* The answer: the number and its italic line. A fixed height, so nothing below moves while it changes. */
.calc .calc-head{display:flex;flex-direction:column;margin-top:var(--s3)}
.calc .calc-h1{margin:0;font-family:var(--f-mono);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.calc .calc-example{margin:var(--s1) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.calc .calc-answer{display:block;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);color:var(--ink)}
.calc .calc-answer-verb{display:block;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.calc .calc-answer-n{display:block;margin-top:var(--s1);min-height:90px;font-family:var(--f-serif);font-size:96px;font-weight:400;line-height:.92;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);transform-origin:0 70%}
.calc .calc-answer-n.is-empty{color:var(--ink-2)}
/* a new answer settles in place (G, the scroll: nothing bounces) */
.calc .calc-answer-n.thump{animation:calc-thump .2s ease-out}
@keyframes calc-thump{0%{transform:scale(.96)}100%{transform:scale(1)}}
.calc .calc-sub{margin:var(--s1) 0 0;min-height:58px;font-family:var(--f-serif);font-size:24px;font-style:italic;line-height:1.2;color:var(--ink)}
.calc .calc-head .sl-byline{margin-top:var(--s3)}
@media (max-width:420px){.calc .calc-answer-n{font-size:76px;min-height:70px}}

/* The drawing, in the figure's stroke; its fill in caution. From the first paint (G, fix 5, 2026-10-15) it stands
   directly under the eyebrow, above the fields: the syringe, or the pen on the Pen tab, empty (the plunger at zero, no
   fill; the pen's window at 0) until the three are filled. Its height is the drawing's own, and the mono line under it
   keeps its place once the fields are filled, unseen, so nothing under it moves while someone is typing. */
.calc .calc-fig{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule)}
.calc .calc-fig-line{margin:var(--s1) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-2)}
.calc .calc-fig-line.is-done{visibility:hidden}
html:not(.sl-js) .calc .calc-fig-line{display:none}
/* The panels: the syringe choices (and the U-40 link), the pen's note */
.calc .calc-panel{display:flex;flex-direction:column;margin-top:var(--s5);padding:var(--s3) 0 var(--s2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.calc .calc-syringe,.calc .calc-pen{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.calc .calc-syringe *,.calc .calc-pen *{vector-effect:non-scaling-stroke}
.calc .calc-k{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.calc .calc-blank{fill:var(--paper)}
.calc .calc-solid{fill:var(--ink)}
.calc .calc-faint,.calc .calc-faint line{fill:none;stroke:var(--rule-2);stroke-width:1}
.calc .calc-fluid-fill{fill:var(--caution);stroke:none}
.calc .calc-ticks line{stroke:var(--ink);stroke-width:1}
.calc .calc-nums,.calc .calc-nums text{fill:var(--ink-2);stroke:none;font-family:var(--f-mono)}
.calc .calc-mark-t,.calc .calc-window{fill:var(--ink);stroke:none;font-family:var(--f-mono);font-weight:500}
.calc .calc-cap{fill:var(--ink-2);stroke:none;font-family:var(--f-mono)}
.calc .calc-move{transition:transform .3s cubic-bezier(.2,.9,.2,1),opacity .2s}
.calc .calc-panel-note{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.calc .calc-syr-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3)}
.calc .calc-label{margin:0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* The syringe choices, as rows: the small drawing, the size in mono, its nickname; a square that fills marks the one in use */
.calc .calc-sizes{display:grid;margin:var(--s1) 0 0;border-top:1px solid var(--rule-2)}
.calc .calc-size{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pic name mark" "pic nick mark";align-items:center;column-gap:var(--s2);min-height:52px;padding:12px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.calc .calc-size svg{grid-area:pic;display:block;width:72px;height:auto;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.calc .calc-size-name{grid-area:name;font-family:var(--f-mono);font-size:14px;line-height:1.5;letter-spacing:0}
.calc .calc-size-nick{grid-area:nick;font-family:var(--f-serif);font-size:16px;line-height:1.5;color:var(--ink-2)}
.calc .calc-size::after{content:"";grid-area:mark;width:12px;height:12px;border:1px solid var(--rule-2)}
.calc .calc-size[aria-pressed="true"]::after{background:var(--ink);border-color:var(--ink)}
.calc .calc-size[hidden]{display:none}
/* U-40 behind a small mono link (G, 12a) */
.calc .calc-u40{margin:var(--s2) 0 0}
.calc .calc-u40-link{position:relative;padding:0;border:0;background:none;color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;text-align:left;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;cursor:pointer}
.calc .calc-u40-link::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--s2));bottom:calc(-1 * var(--s2))}
.calc .calc-u40-note{margin:var(--s1) 0 0;font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc .calc-panel > :first-child{margin-top:0}

/* The inputs: label left, a hairline field right, the value in mono */
.calc .calc-form{display:grid;margin:0;border-top:1px solid var(--rule-2)}
.calc .calc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,176px);align-items:end;column-gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--rule)}
.calc .calc-row > label{padding-bottom:12px;font-family:var(--f-serif);font-size:17px;line-height:1.2;color:var(--ink)}
.calc .calc-field{display:flex;align-items:center;gap:4px;min-height:48px;border-bottom:1px solid var(--rule-2);color:var(--ink)}
.calc .calc-field:focus-within{border-bottom-color:var(--ink)}
.calc .calc-field input{flex:1;min-width:0;height:48px;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:17px;font-weight:500;-webkit-appearance:none;appearance:none}
.calc .calc-field input:focus-visible{outline:0}
.calc .calc-field input::placeholder{color:var(--ink-2);font-weight:400;opacity:1}
.calc .calc-field select{flex-shrink:0;height:44px;margin:0;padding:0 var(--s2) 0 var(--s1);border:0;border-radius:0;background:transparent;color:var(--ink-2);font-family:var(--f-mono);font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none}
.calc .calc-field select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;color:var(--ink)}
.calc .calc-field select option{background:var(--paper);color:var(--ink)}
.calc .calc-unit{flex-shrink:0;padding:0 var(--s1);font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.calc .calc-row.is-off .calc-field{border-bottom:1.5px solid var(--ink)}
.calc .calc-msg{grid-column:1 / -1;margin:var(--s1) 0 0;font-family:var(--f-serif);font-size:15px;font-weight:500;line-height:1.5;color:var(--ink)}
.calc .calc-msg:empty{display:none}
.calc .calc-msg-fixes{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s1)}
.calc .calc-msg-fixes button{min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:14px;cursor:pointer}
@media (max-width:359px){.calc .calc-row{grid-template-columns:minmax(0,1fr) minmax(0,160px)}}

/* The question first (G, fix 4, 2026-10-15): on a visit with no math of its own the fields stand in the answer's place,
   under the drawing (fix 5), large, one per line, each label above its field; the answer, its line, the syringe choices
   and the rows wait until all three have values (.calc--ask), and "See an example →" sits under the fields. The fields
   stay there for the visit (.calc--q); at a desktop that column no longer sticks. */
.calc .calc-ask{display:grid;margin-top:var(--s3)}
.calc .calc-ask .calc-row{grid-template-columns:minmax(0,1fr);row-gap:var(--s1);padding:var(--s2) 0}
.calc .calc-ask .calc-row > label{padding-bottom:0}
.calc .calc-ask .calc-field{min-height:64px}
.calc .calc-ask .calc-field input{height:64px;font-size:30px}
.calc .calc-ask .calc-field select,.calc .calc-ask .calc-unit{font-size:17px}
.calc .calc-ask-more{margin:var(--s2) 0 0}
.calc .calc-example-go{position:relative;padding:0;border:0;background:none;color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;text-align:left;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;cursor:pointer}
.calc .calc-example-go::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--s2));bottom:calc(-1 * var(--s2))}
.calc .calc-example-go:hover{text-decoration-color:var(--ink)}
.calc.calc--ask .calc-answer,.calc.calc--ask .calc-sub,.calc.calc--ask .calc-panel,.calc.calc--ask .calc-dl,.calc.calc--ask .calc-tip{display:none}
@media (min-width:1024px){.calc.sl-main.calc--q .calc-a{position:static}}

/* The band, only when earned */
.calc .calc-caution[hidden]{display:none}

/* The "You said" rows: the sheet; the tip and the two plain paragraphs */
.calc .calc-dl dd{white-space:normal}
.calc .calc-tip{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:0;color:var(--ink-2)}
.calc .calc-tip b{color:var(--ink);font-weight:500}
.calc .calc-notes{display:grid;gap:var(--s2);margin-top:var(--s3)}
.calc .calc-notes p{margin:0;font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc .calc-coa a,.calc .calc-coa{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration-color:var(--rule-2)}
.calc .calc-coa a{text-decoration:underline;text-underline-offset:3px}
.calc .calc-noscript{margin:var(--s3) 0 0;padding:12px 14px;border-left:3px solid var(--caution);font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc-verified{margin:var(--s3) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.calc-verified .calc-fail{color:var(--ink);font-weight:500}

/* Keep this math: share (the one primary button), the label, the embed, the install hint */
.calc .calc-objects{display:flex;flex-direction:column;margin-top:var(--s5)}
.calc .calc-share{width:100%;border:1.5px solid var(--ink);cursor:pointer;text-align:left}
.calc .calc-share svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.calc .calc-share:disabled,.calc .calc-ghost:disabled{opacity:.5;cursor:not-allowed}
.calc .calc-labelbox{display:flex;flex-direction:column;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-2)}
.calc .calc-labelbox .calc-row{border-top:0}
.calc .calc-row--text{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.calc .calc-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s1);margin-top:var(--s2)}
.calc .calc-ghost{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font-family:var(--f-serif);font-size:17px;line-height:1.2;cursor:pointer}
.calc .calc-embed-box{margin-top:var(--s5);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)}
.calc .calc-embed-box summary{display:flex;align-items:center;min-height:52px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none}
.calc .calc-embed-box summary::-webkit-details-marker{display:none}
.calc .calc-embed-box summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.calc .calc-embed-box[open] summary::after{content:"\2212"}
.calc .calc-embed-box[open]{padding-bottom:var(--s3)}
.calc .calc-embed-box p{margin:0 0 var(--s2);font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc .calc-embed-box .calc-embed-opt{margin-top:var(--s3)}
.calc .calc-embed-box .calc-ghost{margin-bottom:var(--s2)}
.calc .calc-code{margin:0 0 var(--s2);padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.calc .calc-install{display:flex;flex-direction:column;margin-top:var(--s3);padding:12px 14px;border-left:3px solid var(--rule-2)}
.calc .calc-install p{margin:0;font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc .calc-install b{color:var(--ink);font-weight:500}
.calc .calc-toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(var(--tab-h) + var(--s2) + env(safe-area-inset-bottom,0px));z-index:30;margin:0 auto;max-width:var(--col);padding:12px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;font-family:var(--f-mono);font-size:13px;line-height:1.5}
/* The worked examples (G, 12b): text from scripts/calc_faq.mjs, numbers from calc-math.js; the read's style */
.calc .calc-faq{margin:var(--s6) 0 0;max-width:var(--col)}
.calc .calc-faq-h{margin:0 0 var(--s2);font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.calc .calc-faq-lead{margin:0 0 var(--s3);font-family:var(--f-serif);font-size:17px;line-height:1.5;color:var(--ink)}
.calc .calc-faq-q{border-top:1px solid var(--rule)}
.calc .calc-faq-q:last-of-type{border-bottom:1px solid var(--rule)}
.calc .calc-faq-q summary{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:12px 0;font-family:var(--f-serif);font-size:17px;line-height:1.3;cursor:pointer;list-style:none}
.calc .calc-faq-q summary::-webkit-details-marker{display:none}
.calc .calc-faq-q summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-size:14px;color:var(--ink-2)}
.calc .calc-faq-q[open] summary::after{content:"\2212"}
.calc .calc-faq-q p{margin:0 0 var(--s2);font-family:var(--f-serif);font-size:17px;line-height:1.5;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .calc .calc-move{transition:none}
  .calc .calc-answer-n.thump{animation:none}
}

/* 7c Vial label (spec 7c; artboard v11-Label). Print only: with an answer on screen, printing the page prints two
   2.6 x 1.2 in labels at true size, top left of the sheet, black on white: the draw line in Newsreader (the Fine Print;
   Anton until then), the mix and the dates in mono. assets/calc.js fills them and fits the draw line (--draw-size) and
   the mono lines (--info-size). */
.calc-labels{display:none}
@media print{
  @page{margin:.5in}
  html.calc-print,html.calc-print body{background:none !important}
  html.calc-print body > :not(.calc-labels){display:none !important}
  html.calc-print .calc-labels{display:flex !important;flex-wrap:wrap;gap:.25in;align-items:flex-start}
  .calc-vlabel{display:flex;flex-direction:column;justify-content:space-between;width:2.6in;height:1.2in;box-sizing:border-box;padding:.1in .117in;background:none;color:var(--ink);border:1px solid var(--ink);border-radius:0;overflow:hidden;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .calc-vlabel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.06in}
  .calc-vlabel-draw{margin:0;font-family:var(--f-serif);font-size:var(--draw-size,.283in);font-weight:500;line-height:.95;letter-spacing:-.01em;white-space:nowrap}
  .calc-vlabel-mark{display:block;flex-shrink:0;width:.217in;height:.217in}
  .calc-vlabel-mark{fill:var(--ink)}
  .calc-vlabel-mark .calc-vlabel-dot{fill:var(--red)}
  .calc-vlabel-info{margin:0;font-family:var(--f-mono);font-size:var(--info-size,.0917in);line-height:1.5;letter-spacing:.02em;white-space:nowrap}
  .calc-vlabel-foot{color:var(--ink-2)}
  /* The QR (G, design, 2026-10-12): the bottom-right corner, 0.56in square; the label's own white padding is its
     quiet zone, and the mono lines stop 0.12in short of it (assets/calc.js sizes them to fit) */
  .calc-vlabel{position:relative}
  .calc-vlabel-qr{position:absolute;right:.117in;bottom:.1in;width:.56in;height:.56in}
  .calc-vlabel-qr svg{display:block;width:100%;height:100%}
  .calc-vlabel.has-qr .calc-vlabel-info{padding-right:.68in}
}
/* The pinned answer line (G, the scroll): when the headline scrolls away, one line under the header, live; its caution
   rule on the left (the Fine Print: caution marks the line, the words are ink) */
.calc .calc-example{display:block}
.calc-pin{position:fixed;left:0;right:0;top:var(--head-h);z-index:35;display:flex;align-items:center;min-height:48px;padding:12px var(--gutter);background:var(--paper);border-bottom:1px solid var(--rule);border-left:3px solid var(--caution);font-family:var(--f-mono);font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.calc-pin[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.calc-pin{transition:top .2s ease}}
@media print{.calc-pin{display:none !important}}