/* ============================================================
   The measuring tool (/tool) in the Night shift look (27 Oct 2026).
   Loads after home-night.css and page-night.css on <body class="toolPage night">.
   page-night.css points the old tokens (--page, --card, --ink, --blue...) at the
   Night shift palette; this file recolors the parts of styles.css, mobile.css and
   aq-quick.css that hard-code the old blue gloss (#6E9CFF → #1741C4).
   Colors mean what they mean on the homepage: cyan = the tool / what you trace,
   amber = what you are adding. Nothing here changes what the tool does.
   ============================================================ */

/* ---------- the shell: a dark instrument on the page ---------- */
body.night .appWrap{background:transparent}
body.night .appWrap::before{background:radial-gradient(circle,rgba(59,232,255,.16),transparent 62%)}
body.night .appShell{border-color:rgba(160,220,255,.18);border-radius:20px;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 80px -34px rgba(59,232,255,.55)}
body.night .appBar,body.night .searchBar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),#070C18;border-bottom-color:rgba(160,220,255,.12)}
body.night .appH1{font-family:Sora,sans-serif;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
body.night .appBar .tag{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-3)}
body.night .roleswitch{background:rgba(255,255,255,.03);border-color:rgba(160,220,255,.16)}
body.night .roleswitch button{font-family:Inter,sans-serif;color:var(--ink-3)}
body.night .roleswitch button[aria-pressed="true"],
body.night .tool.on,body.night .seg button.on,body.night .pitchrow button.on,body.night .duo button.on{
  color:#03121A;background:linear-gradient(180deg,#7DF3FF,#22C9F0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 20px -8px rgba(59,232,255,.75);border-color:transparent}
body.night :is(.howBtn,.moreToggle){text-decoration:none;font-family:Inter,sans-serif;background:rgba(255,255,255,.03);border:1px solid rgba(160,220,255,.18);color:var(--ink-2);border-radius:10px}
body.night :is(.howBtn,.moreToggle):hover{border-color:rgba(59,232,255,.55);color:#7DF3FF;box-shadow:0 0 16px -6px rgba(59,232,255,.7)}

/* labels: the homepage's mono eyebrows */
body.night :is(.sField label,.sec > label,.lbl,.card h4,.tracebar > span,.readout .sub2,.qrHead,.qrTl,.jcLabel){
  font-family:"JetBrains Mono","IBM Plex Mono",monospace;font-weight:700;letter-spacing:.12em}
body.night .sField label,body.night .sec > label{color:#7DF3FF}

/* fields */
body.night :is(.fld,select.full,.pitchrow input,.rate input,.srcbar select){background:rgba(3,7,15,.65);border-color:rgba(160,220,255,.18);color:var(--ink);font-family:Inter,sans-serif}
body.night :is(.fld,select.full,.pitchrow input,.rate input):focus{border-color:#3BE8FF;box-shadow:0 0 0 3px rgba(59,232,255,.18),0 0 18px -6px rgba(59,232,255,.7);outline:0}
body.night .jobBrowse{color:#7DF3FF}
body.night .jfList{background:#0A1222;border-color:rgba(59,232,255,.3)}

/* ---------- the map ---------- */
body.night .wrap{background:#04070F}
body.night .stage{background:#04070F}
body.night .canvasbox{box-shadow:0 26px 60px -24px #000,0 0 0 1px rgba(59,232,255,.25)}
body.night .float{background:rgba(4,9,18,.82);border-color:rgba(160,220,255,.2);box-shadow:0 10px 30px -12px rgba(0,0,0,.9)}
body.night .tool{font-family:Inter,sans-serif;color:#B7C6DE}
body.night .tool:not(.on):not(.bank):hover{color:#7DF3FF;background:rgba(59,232,255,.1)}
body.night .tool.bank{color:#1A0F00;background:linear-gradient(180deg,#FFD08A,#FFB547);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 20px -8px rgba(255,181,71,.7)}
body.night .readout .big{font-family:"JetBrains Mono",monospace;color:#7DF3FF;text-shadow:0 0 18px rgba(59,232,255,.55)}
body.night .readout{border-color:rgba(59,232,255,.35)}
body.night .hint h3{font-family:Sora,sans-serif;color:#EAF2FF}
body.night .spinner i{border-color:rgba(59,232,255,.2);border-top-color:#3BE8FF}

/* ---------- the results panel ---------- */
body.night .panel{background:linear-gradient(180deg,#0A1222,#070C18);border-left-color:rgba(160,220,255,.12)}
body.night :is(.seg,.duo button:not(.on),.pitchrow button:not(.on)){background:rgba(255,255,255,.025);border-color:rgba(160,220,255,.16)}
body.night .seg button,body.night .duo button,body.night .pitchrow button{font-family:Inter,sans-serif}
body.night .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:rgba(160,220,255,.14);border-radius:16px}
body.night :is(.big-meas,.big-total,.qrBig b,.qrTv,.qrRv,.qrLeft b){font-family:"JetBrains Mono",monospace}
body.night .big-meas{color:#7DF3FF}
body.night .big-total{color:#FFB547}
body.night .qrCard{background:linear-gradient(180deg,rgba(59,232,255,.07),rgba(255,255,255,.015));border-color:rgba(59,232,255,.38);box-shadow:0 0 44px -18px rgba(59,232,255,.6)}
body.night.toolPage .qrBig b{color:#7DF3FF;text-shadow:0 0 22px rgba(59,232,255,.45)}
body.night .qrBig span{font-family:Sora,sans-serif;color:var(--ink)}
body.night .qrTile{background:rgba(255,255,255,.03);border-color:rgba(160,220,255,.16)}
body.night .qrTile.mint{background:rgba(59,232,255,.08);border-color:rgba(59,232,255,.4)}
body.night .qrTile.mint .qrTl{color:#7DF3FF}
body.night .qrTile.amber{background:rgba(255,181,71,.08);border-color:rgba(255,181,71,.4)}
body.night .qrTile.amber .qrTl{color:#FFB547}
body.night .qrTb{font-family:Inter,sans-serif;background:rgba(255,255,255,.04);border-color:rgba(160,220,255,.18)}
body.night .qrTb.gloss,html[data-mode="light"] body.night .qrTb.gloss,body.night .btn.gloss{color:#03121A;background:linear-gradient(180deg,#7DF3FF,#22C9F0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 8px 24px -8px rgba(59,232,255,.7)}
body.night .qrRows{background:rgba(255,255,255,.025);border-color:rgba(160,220,255,.14)}
body.night .qrRow{font-family:Inter,sans-serif}
body.night .qrRow svg:not(.qrChev){stroke:#7DF3FF;filter:drop-shadow(0 0 4px rgba(59,232,255,.5))}
body.night.toolPage .qrRow:hover{background:rgba(59,232,255,.07)}
body.night .qrLeft b{color:#7DF3FF}
body.night .moreBelow{font-family:Inter,sans-serif;color:#7DF3FF}
body.night .disc{color:var(--ink-3)}
body.night .taLink{color:#7DF3FF}
body.night .peek{border-color:rgba(160,220,255,.16)}

/* the "how to use the map" card */
body.night .guideCard2{background:linear-gradient(165deg,#0B1424,#060B16);border-color:rgba(59,232,255,.3);box-shadow:0 40px 100px -30px #000,0 0 60px -30px rgba(59,232,255,.6)}
body.night .guideCard2 h3{font-family:Sora,sans-serif}
body.night .mgN{background:rgba(59,232,255,.12);color:#7DF3FF;border:1px solid rgba(59,232,255,.4);font-family:"JetBrains Mono",monospace}
body.night .mgKey{background:rgba(59,232,255,.1);border-color:rgba(59,232,255,.3);color:#BFF6FF}

/* phone: the results sheet and its job chip */
@media (max-width:1000px){
  body.night.toolPage .sheetHead{background:#0A1222}
  body.night.toolPage .jobChip{background:rgba(59,232,255,.08);border-color:rgba(59,232,255,.35)}
  body.night.toolPage .jobChip .jcGo{color:#7DF3FF}
  body.night.toolPage .sheetHandle .shBar{background:rgba(125,243,255,.5)}
}

/* ============================================================
   Light mode (the homepage's 20261026d look): the page gets the blueprint
   grid; the map stays a dark instrument; the panel turns white with cyan
   glow and the circling trace on its result boxes.
   ============================================================ */
html[data-mode="light"] body.night .appBar,html[data-mode="light"] body.night .searchBar{background:rgba(255,255,255,.92);border-bottom-color:rgba(10,165,200,.2)}
html[data-mode="light"] body.night .appShell{border-color:rgba(10,165,200,.3);box-shadow:0 0 0 1px rgba(59,232,255,.22),0 30px 70px -30px rgba(10,150,200,.45),0 0 50px -20px rgba(59,232,255,.5)}
html[data-mode="light"] body.night .sField label,html[data-mode="light"] body.night .sec > label{color:#07809E}
html[data-mode="light"] body.night :is(.fld,select.full,.pitchrow input,.rate input){background:#fff;border-color:rgba(10,165,200,.28)}
html[data-mode="light"] body.night .roleswitch{background:#EEF6FA;border-color:rgba(10,165,200,.22)}
html[data-mode="light"] body.night :is(.howBtn,.moreToggle){background:#fff;border-color:rgba(10,165,200,.3);color:var(--ink-2)}
html[data-mode="light"] body.night .jobBrowse{color:#07809E}
html[data-mode="light"] body.night .jfList{background:#fff}
html[data-mode="light"] body.night .panel{background:linear-gradient(180deg,#FFFFFF,#F4FAFD);border-left-color:rgba(10,165,200,.2)}
html[data-mode="light"] body.night :is(.seg,.duo button:not(.on),.pitchrow button:not(.on)){background:#F6FCFF;border-color:rgba(10,165,200,.22)}
html[data-mode="light"] body.night .card{background:#fff;border-color:rgba(10,165,200,.22)}
html[data-mode="light"] body.night .big-meas{color:#07809E}
html[data-mode="light"] body.night .big-total{color:#B86E00}
html[data-mode="light"] body.night .qrCard{background:#fff;border-color:rgba(10,165,200,.3);box-shadow:0 0 0 1px rgba(59,232,255,.2),0 20px 44px -24px rgba(10,150,200,.5),0 0 36px -16px rgba(59,232,255,.55)}
html[data-mode="light"] body.night.toolPage .qrBig b{color:#07809E;text-shadow:0 0 22px rgba(59,232,255,.3)}
html[data-mode="light"] body.night .qrTile{background:#F6FCFF;border-color:rgba(10,165,200,.22)}
html[data-mode="light"] body.night .qrTile.mint{background:rgba(59,232,255,.09);border-color:rgba(10,165,200,.4)}
html[data-mode="light"] body.night .qrTile.mint .qrTl{color:#07809E}
html[data-mode="light"] body.night .qrTile.amber .qrTl{color:#B86E00}
html[data-mode="light"] body.night .qrTb{background:#F2F8FC}
html[data-mode="light"] body.night .qrRows{background:#fff;border-color:rgba(10,165,200,.22)}
html[data-mode="light"] body.night .qrRow svg:not(.qrChev){stroke:#0AA5C8}
html[data-mode="light"] body.night :is(.moreBelow,.taLink){color:#07809E}
html[data-mode="light"] body.night .guideCard2{background:linear-gradient(165deg,#FFFFFF,#EEF8FC);border-color:rgba(10,165,200,.3)}
html[data-mode="light"] body.night .mgN{color:#07809E}
html[data-mode="light"] body.night .mgKey{color:#07809E;background:rgba(59,232,255,.1)}
@media (max-width:1000px){
  html[data-mode="light"] body.night.toolPage .sheetHead{background:#fff}
  html[data-mode="light"] body.night.toolPage .jobChip{background:rgba(59,232,255,.09);border-color:rgba(10,165,200,.35)}
  html[data-mode="light"] body.night.toolPage .jobChip .jcGo{color:#07809E}
}
/* the trace: one box at a time (.n-lit, see home-night.css); the detail list's is the thin one */
html[data-mode="light"] body.night :is(.qrCard,.qrRows){position:relative}
html[data-mode="light"] body.night :is(.qrCard,.qrRows).n-lit::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:3px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--tr),rgba(59,232,255,.25) 0 55%,rgba(59,232,255,.5) 70%,#3BE8FF 84%,#fff 87%,#3BE8FF 90%,rgba(59,232,255,.25) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 6px #3BE8FF);animation:nTrace 6s linear infinite,nLit .6s ease-out}
html[data-mode="light"] body.night .qrRows.n-lit::after{inset:-1px;padding:2px;filter:none}
html[data-mode="light"] body.night .qrRows{overflow:visible}
@media (prefers-reduced-motion:reduce){html[data-mode="light"] body.night :is(.qrCard,.qrRows).n-lit::after{animation:none}}
/* 20261102h: the link out to the acreage calculator (app-tool.js acButton, tool.html #roAc) */
.panel a.acLink{display:flex;width:100%;box-sizing:border-box;min-height:48px;margin:0 0 12px;padding:12px 14px;border-radius:12px;font-weight:700;font-size:15px;line-height:1.25;text-align:center;white-space:normal;text-decoration:none}
body.night .panel a.acLink{color:#03121A;background:linear-gradient(180deg,#7DF3FF,#22C9F0);border:0;box-shadow:0 8px 26px -8px rgba(59,232,255,.7)}
html[data-mode="light"] body.night .panel a.acLink{background:#0AA5C8;color:#fff;box-shadow:0 6px 18px -8px rgba(10,165,200,.6)}
.readout a.roAc{display:block;margin-top:7px;font:700 12.5px Figtree,sans-serif;color:#7DF3FF;text-decoration:underline;text-underline-offset:3px}
.readout a.roAc[hidden]{display:none}
html[data-mode="light"] body.night .readout a.roAc{color:#07809E}