/* Pomona free tools: the look. Variables only: the --t-* colors and the
   --font-body / --font-head fonts. The website's set is theme-site.css, the
   app's is theme-app.css. No colors or fonts are named here. */
.pt,.pt-page{font-family:var(--font-body);color:var(--t-ink)}
/* the site's nav (the website's own markup and css/style.css): "Free Tools" is the current page.
   Matched by aria-current only, so nothing else in the header changes. */
nav .nav-links a[aria-current="page"]{color:var(--gold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pt-nozzles{font-size:15px;line-height:1.45}   /* the mock's text size, not the website's 17px / 1.62 */
.pt-crumb{font-size:13px;color:var(--t-muted);margin:22px 0 4px}
.pt-crumb a{color:var(--t-muted);text-decoration:none}
.pt-h1{font-family:var(--font-head);font-weight:700;font-size:32px;line-height:1.1;color:var(--t-title);margin:4px 0 8px;text-align:left}
.pt-sub{color:var(--t-muted);font-size:15px;margin:0 0 14px}
.pt-sample{background:var(--t-warn-soft);border:1px solid var(--t-warn-line);color:var(--t-warn);border-radius:var(--t-radius);padding:8px 12px;font-size:13.5px;margin:0 0 12px}
.pt-sample b{white-space:nowrap}
/* the calculator: one layout. A phone stacks the blocks in the page's order (settings, the
   Need · Gives line, the rear view, the table, the bottom block); from 1100px the grid below */
.pt-grid{margin-top:14px}
.pt-grid>*{min-width:0}
.pt-grid>*+*{margin-top:14px}
.pt-card{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:16px 18px}
.pt-card h3{font-family:var(--font-body);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t-muted);margin:0 0 10px;font-weight:600}
.pt-gap{margin-top:14px!important}
.pt-f{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.pt-f label{font-size:12.5px;color:var(--t-muted)}
.pt-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.pt-row input,.pt-row select,.pt-sheetname input{border:1px solid var(--t-line);border-radius:var(--t-radius);padding:9px 10px;font:inherit;font-size:15px;background:var(--t-field);color:var(--t-ink);min-width:0}
.pt-row input{width:100px}.pt-row select{flex:1;max-width:100%}
.pt-u{color:var(--t-muted);font-size:13.5px;white-space:nowrap}
.pt-hint{font-size:12.5px;color:var(--t-muted);overflow-wrap:anywhere}
.pt-chips{display:flex;flex-wrap:wrap;gap:6px}
.pt-chips button{border:1px solid var(--t-line);border-radius:999px;padding:4px 10px;font:inherit;font-size:13.5px;background:var(--t-field);color:var(--t-ink);white-space:nowrap;cursor:pointer}
.pt-chips button.on{background:var(--t-accent-soft);border-color:var(--t-ok-line);color:var(--t-accent);font-weight:600}
.pt-btn{border:1px solid var(--t-line);background:var(--t-field);color:var(--t-ink);border-radius:var(--t-radius);padding:4px 11px;font:inherit;font-size:15px;cursor:pointer}
.pt-btn:disabled{opacity:.4;cursor:default}
.pt-cnt{min-width:22px;text-align:center}
.pt-tg{display:flex;gap:8px;align-items:center;margin:2px 0 12px;font-size:14.5px;cursor:pointer}
.pt-tg input{margin:0;width:18px;height:18px;accent-color:var(--t-accent)}
.pt-dim{opacity:.5}
/* two short fields to a row, at every width */
.pt-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pt-pair>*{min-width:0}
.pt-pair .pt-row input{width:76px}
.pt-gpachips{margin:-4px 0 14px}
.pt-error{border:1px solid var(--t-warn-line);background:var(--t-warn-soft);color:var(--t-warn);padding:9px 14px;margin:0 0 12px;font-size:15px;border-radius:var(--t-radius)}
.pt-stale .pt-tiles,.pt-stale .pt-line,.pt-stale .pt-t{opacity:.45}
/* the four tiles are for the printed sheet; on screen the compact Need · Gives line */
.pt-tiles{display:none;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.pt-tile{background:var(--t-field);border:1px solid var(--t-line2);border-radius:var(--t-radius);padding:10px 12px;min-width:0}
.pt-tile .k{display:block;font-size:12px;color:var(--t-muted);white-space:nowrap}
.pt-tile b{display:block;font-size:20px;white-space:nowrap;font-family:var(--font-body)}
.pt-tile .n{font-size:12px;color:var(--t-muted);white-space:nowrap}
.pt-tile.pt-hero,.pt-tile.ok{background:var(--t-ok-soft);border-color:var(--t-ok-line)}
.pt-tile.pt-hero b{font-size:24px;color:var(--t-accent)}
.pt-tile.ok b{color:var(--t-accent)}
.pt-tile.w{background:var(--t-warn-soft);border-color:var(--t-warn-line)}
.pt-tile.w b{color:var(--t-warn)}
.pt-line{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;background:var(--t-field);border:1px solid var(--t-line2);border-radius:var(--t-radius);padding:9px 14px;white-space:nowrap}
.pt-line .li{display:flex;align-items:baseline;gap:5px;flex:none}
.pt-line::-webkit-scrollbar{display:none}
.pt-line .s{font-size:12.5px;color:var(--t-muted)}
.pt-line b{font-size:15px}
.pt-line .pt-lhero b,.pt-line .ok b{color:var(--t-accent)}
.pt-line .w b{color:var(--t-warn)}
.pt-line .li-tank{display:none}
.pt-trv{margin:10px 0 0;background:var(--t-field);border:1px solid var(--t-line2);border-radius:var(--t-radius);padding:10px 14px;font-size:14px}
/* the rear view: the sprayer from behind (tree.js rear()) */
.a-rear{padding:10px}
.pt-rear{display:block;width:100%;height:auto;border-radius:10px;font-family:var(--font-body)}
.pt-rearhint{margin:6px 0 0}
/* the table: the row view down the first column (tree.js scene()), whose numbered dots
   turn positions on and off; dropdowns; GPM over %; the side's total. The Nozzle column
   takes what the dropdowns and GPM / % don't use (78px at least; 170px from 1100px) */
.pt-twrap{position:relative;min-width:0}
.pt-twrap table{position:relative;z-index:1;pointer-events:none}
.pt-twrap td:not(.c-pos),.pt-twrap th{pointer-events:auto}
.pt-man{display:block;position:absolute;left:0;top:0;z-index:0;pointer-events:none}
.pt-man .pt-hit{pointer-events:all;cursor:pointer;outline:none}
.pt-man .pt-hit:focus-visible{stroke:var(--t-accent);stroke-width:3}
.pt-fankey{margin:-6px 0 6px}
.pt-hpos,.pt-posn{display:none}
table.pt-t{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.pt-t th{font-size:11.5px;color:var(--t-muted);font-weight:600;text-align:left;padding:4px 4px;border-bottom:1px solid var(--t-line);height:34px;white-space:nowrap}
.pt-t td{padding:0 4px;border-bottom:1px solid var(--t-line2);height:52px;white-space:nowrap}
.pt-t td.r,.pt-t th.r{text-align:right}
.pt-t td.c-pos,.pt-t th.c-pos{width:auto;min-width:78px}
.pt-t .c-pick{width:1%}
.pt-t .c-out{width:1%;padding-right:2px;line-height:1.15}
.pt-t td.c-out b{display:block;font-size:14px}
.pt-t td.c-out span{font-size:12px;color:var(--t-muted)}
.pt-foot td{border-top:2px solid var(--t-line);border-bottom:0}
.pt-footl{font-size:13px;color:var(--t-muted);text-align:right;padding-right:10px!important;line-height:1.25}
.pt-footl span{font-size:12px}
.pt-ptag{font-size:12px;color:var(--t-muted)}
.pt-cell{display:flex;align-items:center;gap:6px}
.pt-cell select{border:1px solid var(--t-line);border-radius:var(--t-radius);padding:5px 4px;font:inherit;font-size:13.5px;background:var(--t-field);color:var(--t-ink);min-width:0}
.pt-cell .mn{font-size:11px;color:var(--t-warn);font-weight:600}
.pt-offcell select{opacity:.45}
.pt-off td{color:var(--t-muted)}
/* the bottom block: the summary pills, the speed line, the buy list, the sheet's name and Print */
.pt-sum{display:flex;flex-wrap:wrap;gap:6px}
.pt-sum span{background:var(--t-pill);border-radius:8px;padding:4px 9px;font-size:13px;color:var(--t-muted);white-space:nowrap}
.pt-sum b{color:var(--t-ink)}
.pt-sum .ok{background:var(--t-accent-soft);color:var(--t-accent)}.pt-sum .ok b{color:var(--t-accent)}
.pt-sum .w{background:var(--t-warn-soft);color:var(--t-warn)}.pt-sum .w b{color:var(--t-warn)}
.pt-speed{margin-top:10px;padding:7px 10px;border:1px solid var(--t-ok-line);background:var(--t-ok-soft);border-radius:var(--t-radius);font-size:14.5px;color:var(--t-ink)}
.pt-speed.ok b{color:var(--t-accent)}
.pt-speed.w{border-color:var(--t-warn-line);background:var(--t-warn-soft)}.pt-speed.w b{color:var(--t-warn)}
.pt-speedbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pt-buy{font-size:12.5px;color:var(--t-muted);margin-top:10px}
.pt-note{margin-top:10px;border:1px solid var(--t-line2);background:var(--t-soft);border-radius:var(--t-radius);padding:9px 12px;font-size:13.5px;color:var(--t-muted)}
.pt-note.warn{color:var(--t-warn);border-color:var(--t-warn-line);background:var(--t-warn-soft)}
.pt-footrow{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.pt-sheetname{margin:0;flex:1 1 260px}
.pt-sheetname input{width:100%}
.pt-acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:21px}
.pt-pri{background:var(--t-accent);border:1px solid var(--t-accent);color:var(--t-accent-ink);border-radius:var(--t-radius);padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.pt-how{background:var(--t-field);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:14px 18px;font-size:14px}
.pt-how summary{font-family:var(--font-head);font-weight:700;font-size:16px;cursor:pointer}
.pt-how ol{margin:10px 0 0 20px;padding:0}.pt-how li{margin:6px 0}
.pt-src{font-size:12px;color:var(--t-muted);margin-top:10px}
.pt-src ul{margin:4px 0 0 18px;padding:0}
.pt-next{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:12px 18px;font-size:14px}
.pt-next b{font-family:var(--font-head);font-size:16px}
.pt-ptitle,.pt-print,.pt-pfoot,.pt-offword,.pt-ppart{display:none}
.pt-srcline{font-size:12.5px;color:var(--t-muted);border-top:1px solid var(--t-line);margin-top:24px;padding:14px 0 30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pt-band h2{font-family:var(--font-head)}
/* from 1100px: settings in a 310px column on the left edge (sticky), the Need · Gives line
   above the table and the rear view side by side; the bottom block, the workings and the
   tank-mix note across under them */
@media (min-width:1100px){
  .container.pt-page{max-width:1360px}
  .pt-grid{display:grid;grid-template-columns:310px minmax(0,1.1fr) minmax(0,1fr);gap:14px 16px;align-items:start;
    grid-template-areas:"form line line" "form table rear" "form foot foot" "form how how" "form next next"}
  .pt-grid>*+*{margin-top:0}
  .a-form{grid-area:form;position:sticky;top:12px}
  .a-line{grid-area:line}.a-rear{grid-area:rear}.a-table{grid-area:table}
  .a-foot{grid-area:foot}.a-how{grid-area:how}.a-next{grid-area:next}
  .pt-t td.c-pos,.pt-t th.c-pos{width:170px;min-width:170px}
}
/* the landing page */
.pt-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.pt-tool{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-radius);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;align-items:center;color:var(--t-ink);text-decoration:none}
a.pt-tool:hover{border-color:var(--t-accent)}
.pt-tool.big{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 340px}
.pt-toolbody{display:flex;flex-direction:column;gap:8px}
.pt-tool .top{display:flex;align-items:center;gap:10px}
.pt-tool h2{font-family:var(--font-body);font-size:21px;font-weight:700;margin:0;color:var(--t-title);text-align:left}
.pt-tool p{margin:0;font-size:15.5px;line-height:1.55}
.pt-tool .ask{font-size:14px;color:var(--t-muted)}
.pt-tool .go{color:var(--t-accent);font-weight:600;margin-top:auto}
.pt-tool.soon .pt-toolbody{opacity:.75}   /* Coming: the words faded, the picture as drawn */
.pt-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:600}
.pt-tag.new{background:var(--t-accent);color:var(--t-accent-ink)}
.pt-tag.soon{background:var(--t-soft);color:var(--t-muted);border:1px solid var(--t-line)}
/* the tile pictures: static SVGs (tools-src/img), 440 x 300 */
.pt-pic img{display:block;width:100%;height:auto;border-radius:10px}
/* the title band on /tools (#39b): one line of title from 760px, one line under it, about half the
   site's hero height; the tool pages' headings are their own (.pt-h1) */
.hero.pt-hero{padding:22px 0 20px}
.pt-hero h1{font-family:var(--font-head);font-size:34px;line-height:1.1;margin:0 0 6px;white-space:nowrap}
.pt-hero .subhead{margin:0 auto}
@media (max-width:759.98px){.pt-hero h1{font-size:26px;white-space:normal}}
/* the banner under the hero on /tools (#39, mock-sprayer-drive.html): the sky, a repeating row of trees,
   and two rigs that cross the full width at any screen size, sized by the strip's height, so nothing is
   cropped. Down the row in front of the trees (driveF), back up the next row behind them, mirrored,
   smaller and hazy (driveB); 24 s a loop, each pass the same time at any width. No script, no video. */
.strip{position:relative;overflow:hidden;height:clamp(110px,10vw,190px);background:linear-gradient(var(--t-rsky1),var(--t-rsky2));border-bottom:1px solid var(--t-line)}
.strip .row{position:absolute;inset:0;background-image:url(img/orchard-row.svg);background-repeat:repeat-x;background-size:auto 100%;background-position:center bottom}
.strip .rig{position:absolute;left:100%}
.strip .rig svg{display:block;height:100%;width:auto}
.strip .front{height:68%;bottom:7%;animation:driveF 24s linear infinite}
.strip .back{height:48%;bottom:8%;opacity:.85;animation:driveB 24s linear infinite}   /* the next row over */
.strip .back svg{transform:scaleX(-1)}
@keyframes driveF{0%{left:100%;transform:translateX(0)}42%,100%{left:0;transform:translateX(-100%)}}
@keyframes driveB{0%,50%{left:0;transform:translateX(-100%)}92%,100%{left:100%;transform:translateX(0)}}
.strip .wheel{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
.strip .puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:puff 1.8s ease-out infinite}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.75}100%{opacity:0;transform:translate(46px,-26px) scale(1.7)}}
.strip .plume{transform-box:fill-box;transform-origin:left center;animation:plume 1.4s ease-in-out infinite alternate}
@keyframes plume{from{opacity:.75;transform:scale(.94)}to{opacity:1;transform:scale(1.05)}}
/* reduced motion: parked in the middle, still, a light mist; the return rig hidden */
@media (prefers-reduced-motion:reduce){
  .strip .back{display:none}
  .strip .front{animation:none;left:50%;transform:translateX(-50%)}
  .strip .wheel,.strip .puff,.strip .plume{animation:none}
  .strip .puff{opacity:.45}.strip .plume{opacity:.85}
}
/* the Terms page */
.pt-terms{max-width:780px;padding-bottom:10px}
.pt-terms h2{font-family:var(--font-body);text-align:left;font-size:20px;margin:26px 0 8px;color:var(--t-title)}
.pt-terms p,.pt-terms li{font-size:16px;line-height:1.6;margin:0 0 10px}
.pt-terms ul{margin:0 0 12px 22px}
.pt-rule{border:0;border-top:1px solid var(--t-line);margin:30px 0}

/* under 760px: the landing page's tiles in one column, each picture under its words */
@media (max-width:760px){
  .pt-tools{grid-template-columns:1fr}
  .pt-tool,.pt-tool.big{grid-template-columns:1fr}
}
/* under 640px: the phone's gutter, tighter cards and dropdowns */
@media (max-width:640px){
  .container.pt-page,.container.pt{padding-left:16px;padding-right:16px}
  .pt-h1{font-size:26px}
  .pt-card{padding:12px}
  .pt-t td,.pt-t th{padding:0 2px}
  .pt-cell{gap:3px}
  .pt-cell select{max-width:128px;font-size:11.5px;padding:3px 1px}
  .pt-next{flex-direction:column;align-items:flex-start}
  .pt-speed{font-size:12px;padding:7px 6px;margin:10px -8px 0}
  .pt-line{padding:8px 12px}.pt-line b{font-size:14px}.pt-line .s{font-size:12px}
}
/* under 400px: only Need and Gives on the line, no top/bottom */
@media (max-width:400px){
  .pt-line .li-got{display:none}
  .pt-ptag{display:none}
  .pt-row .pt-u{white-space:normal}
}
/* print: one page: the sheet's name, the inputs, the rear view, the tiles, the positions
   (part names, GPM and %), the summary, the speed line, the buy list, "How Pomona worked
   this out" open, the sources, a small Pomona line */
@media print{
  @page{size:letter;margin:12mm}
  nav,footer,.pt-band,.pt-crumb,.pt-h1,.pt-sub,.pt-srcline,.strip,.a-form,.pt-acts,.pt-next,.pt-sheetname,.pt-line,.pt-error,#banner,
  .pt-offcell select,.pt-man,.pt-hman,.pt-fankey,.pt-rearhint,.pt-cell select{display:none!important}
  body{background:var(--t-field);font-size:12px}
  .container,.container.pt-page{max-width:none;padding:0}
  .pt-ptitle{display:block;font-family:var(--font-head);font-weight:700;font-size:20px;margin:0 0 4px}
  .pt-psample{border:2px solid var(--t-ink);font-weight:700;padding:3px 8px;margin:0 0 4px}
  .pt-sample{border:2px solid var(--t-ink);font-weight:700;margin:0 0 6px}
  .pt-print{display:block;font-size:11.5px;margin-bottom:6px}
  .pt-print{margin:0}
  .pt-print .pins{display:grid;grid-template-columns:repeat(2,1fr);gap:1px 12px;border:1px solid var(--t-line);padding:4px 8px;font-size:10px}
  .pt-print .pins span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the rear view at the top, under the sheet's name, with the inputs and the tiles beside it;
     then the positions, the bottom block and the workings across */
  .pt-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:5px 12px;margin:0;align-items:start;
    grid-template-areas:"rear line" "table table" "foot foot" "how how"}
  .pt-grid>*+*{margin-top:0}
  .a-rear{grid-area:rear;border:0;padding:0}.a-line{grid-area:line}.a-table{grid-area:table}.a-foot{grid-area:foot}.a-how{grid-area:how}
  .pt-rear{width:220px}
  .pt-tiles{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;margin:5px 0 0}
  .pt-tile{padding:3px 8px}.pt-tile b,.pt-tile.pt-hero b{font-size:15px}
  .pt-tile .k,.pt-tile .n{white-space:normal;font-size:10px;line-height:1.2}
  .pt-trv{margin:4px 0 0;padding:4px 8px}
  .pt-card{padding:5px 8px}
  .pt-offword{display:inline!important;color:var(--t-muted)}
  .pt-cell:not(.pt-offcell) .pt-ppart{display:inline!important;min-width:150px}
  .pt-hpos,.pt-posn,.pt-ptag{display:inline!important}
  .pt-t td.c-pos,.pt-t th.c-pos{width:70px;min-width:0}
  .pt-t td{height:18px}.pt-t th{height:18px}
  .pt-t td.c-out b,.pt-t td.c-out span{display:inline;font-size:12px}
  .pt-t td.c-out span{margin-left:6px}
  .pt-foot td{height:20px}
  /* 11 to 20 a side: shorter rows and smaller workings, so the sheet stays on one page */
  .pt-t:has(tbody tr:nth-child(11)) td{height:10px;font-size:9px;line-height:1}
  .pt-t:has(tbody tr:nth-child(11)) td.c-out b,.pt-t:has(tbody tr:nth-child(11)) td.c-out span{font-size:9px}
  .pt-nozzles:has(.pt-t tbody tr:nth-child(11)) .pt-how{font-size:8.5px;line-height:1.22}
  .pt-nozzles:has(.pt-t tbody tr:nth-child(11)) .pt-src{font-size:7px;line-height:1.2}
  .pt-sum{display:inline-flex;vertical-align:middle;gap:4px}.pt-sum span{font-size:10.5px;padding:1px 6px;border:1px solid var(--t-line)}
  .pt-speed{display:inline-block;vertical-align:middle;font-size:10.5px;padding:1px 8px;margin:4px 0 0 6px;border:1px solid var(--t-ink);background:none}
  .pt-buy{margin-top:4px}
  .pt-how{font-size:9px;line-height:1.3;border:0;padding:2px 0 0}
  .pt-how li{margin:1px 0}
  .pt-src{font-size:8px;margin-top:4px}.pt-src li{margin:0}
  .pt-stale *{opacity:1!important}
  .pt-pfoot{display:block!important;font-size:9.5px;color:var(--t-muted);border-top:1px solid var(--t-line);margin-top:6px;padding-top:3px}
}