/* 20261029c: picture links from the calculators to the tools (Jared's picks A + C, mockup DeckIQ/mockups/tool-links-20261028).
   A = .aqtA, the picture card under the calculator; C = .aqtC, the next step at the end of the results.
   Self-contained (Shed Designer tokens), so it reads the same on the Night shift pages and the .cx pages. */
.aqtA,.aqtC{--aqt-panel:#071b2e;--aqt-field:#04121f;--aqt-line:#144666;--aqt-ink:#d8f3ff;--aqt-soft:#82aac2;--aqt-cyan:#26e8ff;--aqt-bg:#030d19;--aqt-glow:rgba(38,232,255,.5)}
html[data-mode="light"] :is(.aqtA,.aqtC){--aqt-panel:#fff;--aqt-field:#f6fbfe;--aqt-line:#b4cfe0;--aqt-ink:#0a2236;--aqt-soft:#46647a;--aqt-cyan:#007fa8;--aqt-bg:#fff;--aqt-glow:rgba(0,127,168,.3)}
/* the card fills the column it sits in; on the Night shift pages its wrapper is also .n-wrap, the page's own column */
.aqtWrap{margin:18px 0 8px;box-sizing:border-box}
.n-wrap.aqtWrap{margin:18px auto 8px}

/* the picture: the art, a scan line that sweeps once, and (mulch) the beds traced in cyan behind it */
.aqtPic{position:relative;display:block;overflow:hidden;background:var(--aqt-field)}
.aqtPic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.aqtPic img.l{display:none}
html[data-mode="light"] .aqtPic img.d{display:none}
html[data-mode="light"] .aqtPic img.l{display:block}
.aqtPic::after{content:'';position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(38,232,255,.32),transparent)}
.aqtPic.run::after{opacity:1;animation:aqtScan 1.4s linear 1 forwards}
@keyframes aqtScan{0%{top:-30%;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
a:hover .aqtPic img{transform:scale(1.03)}
.aqtBeds{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aqtBeds path{fill:rgba(38,232,255,0);stroke:var(--aqt-cyan);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;
  filter:drop-shadow(0 0 5px var(--aqt-glow))}
.aqtPic.run .aqtBeds path,.aqtPic.done .aqtBeds path{animation:aqtDraw .8s ease-out forwards,aqtFill .5s ease-out forwards;animation-delay:var(--d),calc(var(--d) + .6s)}
@keyframes aqtDraw{to{stroke-dashoffset:0}}
@keyframes aqtFill{to{fill:rgba(38,232,255,.22)}}
.aqtTag{position:absolute;left:12px;top:12px;font:600 11px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aqt-bg);background:var(--aqt-cyan);border-radius:6px;padding:3px 8px;box-shadow:0 0 14px var(--aqt-glow)}

/* A: the picture card; the whole card is the link */
a.aqtA{display:grid;grid-template-columns:minmax(0,45%) minmax(0,1fr);text-decoration:none;color:var(--aqt-ink);background:var(--aqt-panel);
  border:1px solid var(--aqt-line);border-radius:16px;overflow:hidden;box-shadow:0 14px 34px -22px var(--aqt-glow);transition:border-color .2s;font-family:Figtree,system-ui,sans-serif}
a.aqtA:hover{border-color:var(--aqt-cyan)}
a.aqtA .aqtPic{aspect-ratio:4/3}
.aqtTxt{display:flex;flex-direction:column;padding:22px 24px 20px;min-width:0}
.aqtEye{font:600 12px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--aqt-cyan)}
.aqtTxt b{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:8px 0 8px;font-weight:800}
.aqtTxt .aqtP{color:var(--aqt-soft);font-size:16px;line-height:1.55}
.aqtChips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}
.aqtChips span{font:600 12.5px Figtree,system-ui,sans-serif;border:1px solid var(--aqt-line);border-radius:999px;padding:4px 10px;color:var(--aqt-soft)}
.aqtGo{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:800 15px Figtree,system-ui,sans-serif;
  border:2px solid var(--aqt-cyan);color:var(--aqt-cyan);border-radius:10px;padding:10px 18px;white-space:nowrap}
a.aqtA:hover .aqtGo{box-shadow:0 0 18px var(--aqt-glow);background:rgba(38,232,255,.08)}
@media (max-width:640px){a.aqtA{grid-template-columns:1fr} .aqtTxt b{font-size:21px}}

/* C: the next step at the end of the results */
a.aqtC{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;text-decoration:none;color:var(--aqt-ink);
  border:1px dashed var(--aqt-cyan);border-radius:12px;padding:8px;background:var(--aqt-field);font-family:Figtree,system-ui,sans-serif;text-align:left}
a.aqtC .aqtPic{height:70px;border-radius:8px}
a.aqtC b{display:block;font-size:15px;font-weight:700;line-height:1.3}
a.aqtC small{display:block;color:var(--aqt-soft);font-size:13px;line-height:1.35;margin-top:2px}
a.aqtC .aqtArrow{font:800 22px Figtree,system-ui,sans-serif;color:var(--aqt-cyan);padding:0 8px}
a.aqtC:hover{border-style:solid;box-shadow:0 0 16px -4px var(--aqt-glow)}
@media (max-width:400px){a.aqtC{grid-template-columns:84px minmax(0,1fr) auto}}

@media (prefers-reduced-motion:reduce){
  .aqtPic.run::after{animation:none;opacity:0}
  .aqtBeds path,.aqtPic.run .aqtBeds path{animation:none;stroke-dashoffset:0;fill:rgba(38,232,255,.22)}
  a:hover .aqtPic img{transform:none}
}

/* 20261029e: the back bar above every calculator's h1 (calculator rule 14, HANDOFF-calculator-structure.md section 5).
   A real link to /calculators (or the section hub once it is live), 44 px high, then the page's own breadcrumb.
   Self-contained colors, so it reads the same on the Night shift pages and the .cx pages. */
.aqBack{--aqb-line:#144666;--aqb-cyan:#26e8ff;--aqb-soft:#82aac2;--aqb-glow:rgba(38,232,255,.45);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 0 10px}
html[data-mode="light"] .aqBack{--aqb-line:#b4cfe0;--aqb-cyan:#007fa8;--aqb-soft:#46647a;--aqb-glow:rgba(0,127,168,.3)}
.aqBack a.aqBackBtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--aqb-line);border-radius:999px;
  color:var(--aqb-cyan);font:700 15px/1 Figtree,system-ui,-apple-system,'Segoe UI',sans-serif;text-decoration:none;background:transparent;white-space:nowrap;transition:border-color .15s,box-shadow .15s}
.aqBack a.aqBackBtn:hover{border-color:var(--aqb-cyan);box-shadow:0 0 16px -4px var(--aqb-glow)}
.aqBack a.aqBackBtn:focus-visible{outline:2px solid var(--aqb-cyan);outline-offset:2px;border-color:var(--aqb-cyan)}
.aqBack .c-crumb,.aqBack .crumbs{margin:0;padding:0}