/* bhavish.ca shared design layer
   Extracted from the Transborder Retreat feature so the site chrome and the
   published pieces read as one product. Flat editorial: ruled, not rounded.
   No border-radius, no shadows - both are deliberate. */

:root{
  --ink:#131A22; --paper:#FCFCFD; --panel:#F2F4F7; --rule:#D9DFE7;
  --muted:#66727F; --signal:#1F4FD8; --lift:#C97609; --alert:#A32F2F;
  --body:#2C3742; --hair:#EAEEF3;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --display:"Archivo",var(--sans);
  --wrap:1060px; --gutter:28px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
a{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---- shared primitives (same names as the feature pages) ---- */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.eyebrow b{color:var(--signal);font-weight:600}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5.2vw,3.4rem);
  line-height:1.04;letter-spacing:-.022em;margin:.4em 0 .3em;max-width:21ch}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.4rem,3.2vw,2rem);margin:0;line-height:1.15}
h3{font-family:var(--display);font-size:1.05rem;font-weight:600;margin:30px 0 6px}
p{max-width:66ch}
.standfirst{font-size:1.12rem;max-width:63ch;color:var(--body);margin:0 0 22px}
.lede{max-width:64ch;color:var(--body)}

/* ---- site chrome ---- */
header.site{border-bottom:2px solid var(--ink);padding:26px 0 18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.brand span{color:var(--signal)}
nav.site{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;display:flex;gap:20px;flex-wrap:wrap}
nav.site a{color:var(--muted);text-decoration:none}
nav.site a:hover,nav.site a[aria-current]{color:var(--signal)}

.hero{padding:56px 0 40px;border-bottom:1px solid var(--rule)}
.approach{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin:34px 0 4px;padding-top:26px;border-top:1px solid var(--rule)}
.approach h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 7px;font-weight:600}
.approach p{font-size:14.5px;color:var(--muted);margin:0;max-width:34ch}

section.band{border-top:1px solid var(--rule);padding:52px 0 8px}
.sec-head{display:flex;gap:20px;align-items:baseline;margin-bottom:22px}
.sec-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--signal);
  letter-spacing:.1em;padding-top:6px;flex:none}

/* ---- work cards ---- */
.cards{display:grid;gap:0;margin:8px 0 12px}
.card{display:grid;grid-template-columns:132px 1fr;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.card:first-child{border-top:1px solid var(--rule)}
.card:hover{background:#F5F8FC}
.card:hover .card-title{color:var(--signal)}
.card-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);line-height:1.9}
.card-title{font-family:var(--display);font-size:1.3rem;font-weight:600;
  letter-spacing:-.015em;line-height:1.2;margin:0 0 4px;max-width:26ch}
.card-deck{font-family:var(--display);font-size:1rem;font-weight:500;
  color:var(--muted);margin:0 0 10px;max-width:44ch}
.card-summary{font-size:15px;color:var(--body);margin:0 0 12px;max-width:62ch}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--rule);color:var(--muted)}
.card:hover .tag{border-color:#C5D2E4}
.status-flag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border:1px solid var(--lift);color:var(--lift)}

.empty{font-family:var(--mono);font-size:13px;color:var(--muted);
  border:1px dashed var(--rule);padding:30px;text-align:center}

footer.site{border-top:2px solid var(--ink);margin-top:56px;padding:26px 0 70px;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.site a{color:var(--signal)}

@media (max-width:760px){
  .approach{grid-template-columns:1fr;gap:22px}
  .card{grid-template-columns:1fr;gap:10px}
  .sec-head{flex-direction:column;gap:2px}
  .sec-num{padding-top:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- contact form (same flat idiom as the feature console) ---- */
.form{max-width:56ch;margin:26px 0 8px}
.field{margin:0 0 18px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:10px 12px}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.send{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:11px 22px;cursor:pointer}
button.send:hover:not(:disabled){background:var(--signal);border-color:var(--signal)}
button.send:disabled{opacity:.45;cursor:default}
.form-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:14px 0 0;max-width:52ch;line-height:1.7}
.form-msg{font-family:var(--mono);font-size:12.5px;margin:16px 0 0;padding:12px 14px;border:1px solid var(--rule)}
.form-msg.ok{color:var(--signal);border-color:var(--signal)}
.form-msg.err{color:var(--alert);border-color:var(--alert)}
.alt-contact{border-top:1px solid var(--rule);margin-top:36px;padding-top:22px}
button.reveal{font-family:var(--mono);font-size:12px;background:var(--paper);color:var(--signal);
  border:1px solid var(--rule);padding:8px 13px;cursor:pointer}
button.reveal:hover{border-color:var(--signal)}

/* ---- curriculum vitae ----
   The DOM is deliberately LINEAR (role, employer+location, dates, bullets) because
   ATS parsers extract PDF text in document order and interleave anything laid out
   in columns. The left-hand date rail on screen is pure grid placement over that
   linear source; print drops to plain block flow. */
.cv{max-width:none}
.cv-head{border-bottom:2px solid var(--ink);padding-bottom:16px}
.cv-head h1{font-size:clamp(1.9rem,4.4vw,2.7rem);margin:.1em 0 .1em;max-width:none}
.cv-role{font-family:var(--display);font-size:1.08rem;font-weight:500;color:var(--muted);margin:0 0 12px}
.cv-contact{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.cv-contact a{color:var(--signal);text-decoration:none}
.cv-actions{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0 0}
button.print{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);padding:9px 15px;cursor:pointer}
button.print:hover{border-color:var(--signal);color:var(--signal)}

.cv-block{border-top:1px solid var(--rule);padding:24px 0 4px;margin-top:22px}
.cv-block > h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);font-weight:600;margin:0 0 18px}
.cv-summary{padding-left:17px;margin:0;max-width:80ch}
.cv-summary li{font-size:15px;line-height:1.5;margin:0 0 5px}

/* Employer and dates share one row: same DOM order, one less line per entry.
   Two items on a single baseline extract left-to-right in document order, which
   is the pattern parsers expect - unlike a true sidebar column, which interleaves. */
.cv-entry{padding:0 0 18px}
.cv-entry-line{display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:baseline}
.cv-entry h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin:0 0 1px}
.cv-entry .cv-org{font-size:14.6px;color:var(--body);margin:0 0 8px}
.cv-entry .cv-dates{text-align:right;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--muted);margin:0;white-space:nowrap}
.cv-entry ul{padding-left:17px;margin:0}
.cv-entry li{font-size:14.6px;line-height:1.52;margin:0 0 5px;max-width:74ch}
.cv-entry li::marker{color:var(--rule)}
.cv-cert{padding-bottom:11px}
.cv-cert .cv-org{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.cv-skillline{font-size:14.6px;line-height:1.55;margin:0 0 7px;max-width:80ch}
.cv-skillline strong{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600}

@media (max-width:560px){
  .cv-entry-line{grid-template-columns:1fr}
  .cv-entry .cv-dates{text-align:left;margin:0 0 7px}
  .cv-entry .cv-org{margin:0 0 1px}
}


/* ---- gated cards + access prompts ---- */
.card{display:grid;grid-template-columns:132px 1fr;gap:26px;padding:26px 0;
  border-bottom:1px solid var(--rule)}
.card:first-child{border-top:1px solid var(--rule)}
.card-title a{color:inherit;text-decoration:none}
.card-title a:hover{color:var(--signal)}
.lock{font-size:.72em;margin-left:9px;opacity:.5;vertical-align:middle}
.card-highlights{margin:0 0 12px;padding-left:16px;max-width:62ch}
.card-highlights li{font-size:13.6px;line-height:1.5;color:var(--muted);margin:0 0 3px}
/* Card art sits behind the text, masked so it is absent where words are and
   present only at the outer edge. Low opacity and the signal hue keep it as
   texture rather than illustration - it should register after the reading,
   not compete with it. */
.card{position:relative}
.card > *{position:relative;z-index:1}
.card-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.card-art svg{
  position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  height:124%;width:auto;color:var(--signal);opacity:.16;
  -webkit-mask-image:linear-gradient(to right,transparent 46%,rgba(0,0,0,.45) 74%,#000 100%);
  mask-image:linear-gradient(to right,transparent 46%,rgba(0,0,0,.45) 74%,#000 100%);
}
.card:hover .card-art svg{opacity:.24}
@media (prefers-reduced-motion:no-preference){
  .card-art svg{transition:opacity .35s ease}
}
@media (max-width:760px){.card-art{display:none}}
.glyph{font-size:.78em;margin-left:7px;vertical-align:middle;opacity:.85}

/* public card carries no synopsis, so the highlights are the substance and read larger */
.card--min .card-highlights{margin:2px 0 14px}
.card--min .card-highlights li{font-size:14.6px;color:var(--body);margin:0 0 5px}
.card-highlights li::marker{color:var(--rule)}
.card-actions{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin:14px 0 0}
a.req{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:9px 15px;display:inline-block}
a.req:hover{background:var(--signal);border-color:var(--signal)}
.req-note{font-family:var(--mono);font-size:11px;color:var(--muted)}
.req-note a{color:var(--signal)}
.access-note{border:1px solid var(--rule);background:var(--panel);padding:20px 22px;
  margin:26px 0;max-width:70ch;font-size:14.5px;color:var(--body)}
.access-note strong{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);display:block;margin:0 0 7px}
.access-note p{margin:0}

/* résumé preview: deliberately spare. No employers, no responsibilities. */
.cv-preview .cv-block{padding:22px 0 4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.chip-item{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--rule);color:var(--muted)}
.chip-item b{color:var(--ink);font-weight:600}

/* ---- print: ATS-safe, auto-fitted to two letter pages ----
   Every dimension below is expressed in rem off a single root size, so the whole
   document scales from one variable. tools/fit-resume.mjs binary-searches that
   variable for the largest type that still lands on two pages, which means a
   content edit no longer needs the scale re-tuned by hand.
   rem, not em, so nested elements do not compound. */
@media print{
  /* A4 at Word's Narrow preset. tools/fit-resume.mjs verifies the fitted scale
     paginates on BOTH A4 and Letter, since a US reader will print Letter. */
  @page{size:A4;margin:12.7mm}
  html{font-size:var(--cv-base,10.50pt)}
  header.site,footer.site,nav.site,.cv-actions,.no-print{display:none!important}
  html,body{background:#fff;color:#000;line-height:1.37}
  body{font-size:1rem}
  .wrap{max-width:none;margin:0;padding:0}
  a,.cv-contact a{color:#000;text-decoration:none}
  .cv-head{padding-bottom:.505rem;border-bottom:1pt solid #000}
  .cv-head h1{font-size:1.97rem;margin:0 0 .1rem;letter-spacing:-.02em}
  .cv-role{font-size:1.111rem;margin:0 0 .505rem;color:#000}
  .cv-contact{font-size:.909rem;gap:1.2rem;color:#000;font-family:var(--sans);
    justify-content:space-between;width:100%}
  .cv-block{padding:.687rem 0 0;margin-top:0;border-top:0.5pt solid #666}
  .cv-block > h2{font-size:.97rem;letter-spacing:.08em;margin:0 0 .505rem;color:#000;font-family:var(--sans)}
  /* Chrome largely ignores break-after on GRID ITEMS, so the org/dates row is a
     nested grid inside a plain block head. The head is then a normal block box,
     where break-inside/break-after are honoured, and it stays welded to its
     bullets. Entries of three bullets or fewer never split at all. */
  .cv-entry{display:block;padding:0 0 .525rem;break-inside:auto}
  .cv-entry-head{break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .cv-entry-line{display:grid;grid-template-columns:1fr auto;column-gap:1.414rem;align-items:baseline}
  .cv-entry h3{font-size:1.081rem;margin:0}
  .cv-entry .cv-org{font-size:1rem;margin:0;color:#000}
  .cv-entry .cv-dates{text-align:right;white-space:nowrap;font-size:.98rem;
    margin:0 0 .202rem;color:#000;font-family:var(--sans);padding:0}
  .cv-entry--short{break-inside:avoid;page-break-inside:avoid}
  .cv-entry ul,.cv-summary{padding-left:1.313rem;margin:0}
  .cv-entry li,.cv-summary li{font-size:.97rem;line-height:1.38;margin:0 0 .172rem;max-width:none}
  .cv-entry li::marker,.cv-summary li::marker{color:#000}
  .cv-cert{padding-bottom:.283rem;break-inside:avoid}
  .cv-cert .cv-dates{margin:0}
  .cv-skillline{font-size:.97rem;line-height:1.4;margin:0 0 .222rem;max-width:none}
  .cv-skillline strong{font-size:.97rem;text-transform:none;letter-spacing:0;
    color:#000;font-family:var(--sans)}
  /* Bullets may flow across the break; a role heading must never be stranded. */
  .cv-entry ul,.cv-summary{orphans:2;widows:2}
  .cv-block{break-inside:auto}
  .cv-block > h2{break-after:avoid;page-break-after:avoid}
}

/* ---- analytical pipeline animation ----
   Marks and slices take their fill from a per-observation attribute, not from
   CSS, so the colour assigned in the table follows the datum into every view. */
.pipe{margin:26px 0 34px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0 14px}
.pipe svg{display:block;width:100%;height:auto;overflow:visible}
.pipe-caption{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:8px 0 0;opacity:0;transition:opacity .32s ease;min-height:1.2em}
.pipe-caption.in{opacity:1}

.pl-axis{opacity:0;transition:opacity .45s ease}
.pl-axis.on{opacity:1}
.pl-axis line{stroke:var(--rule);stroke-width:1}
.pl-axis .pl-grid{stroke:var(--hair)}

.pl-marks{opacity:0;transition:opacity .4s ease}
.pl-marks.on{opacity:1}
.pl-mk{transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.pl-mk rect{opacity:.86}
.pl-mk.gone{opacity:0}

.pl-layer{opacity:0;transition:opacity .4s ease;pointer-events:none}
.pl-layer.on{opacity:1}

.pl-t{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.04em}
.pl-num{fill:var(--ink);font-variant-numeric:tabular-nums}
.pl-th{fill:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:9px}
.pl-trule{stroke:var(--ink);stroke-width:1}
.pl-tr{opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1)}
.pl-tr.on{opacity:1;transform:none}
/* the validation column only exists once the check has been run */
.pl-val{opacity:0;transition:opacity .35s ease}
.pl-layer.checked .pl-val{opacity:1}
.pl-vmark{font-size:12px;font-weight:600}
.pl-ok{fill:#2FA95F}
.pl-bad{fill:#A32F2F}
.pl-x{stroke:#A32F2F;stroke-width:1.6;opacity:.9;stroke-linecap:round}

/* terminal */
.pl-term{font-family:var(--mono);font-size:15px;fill:var(--ink);letter-spacing:.02em}
.pl-term-p{fill:var(--signal)}
.pl-caret{fill:var(--signal);opacity:.85;animation:pl-blink 1s steps(1) infinite}
@keyframes pl-blink{50%{opacity:0}}

/* spread, horizontal */
.pl-box{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.55}
.pl-whisk{stroke:var(--muted);stroke-width:1}
.pl-med{stroke:var(--ink);stroke-width:2}
.pl-cen{font-size:10px}
.pl-mean{stroke:#C97609;stroke-width:1.4}
.pl-med2{stroke:#1F4FD8;stroke-width:1.4}
.pl-mode{stroke:#A32F2F;stroke-width:1.4}

.pl-slice{stroke:var(--paper);stroke-width:1.5;opacity:.88}
.pl-hole{fill:var(--paper)}

.pl-line{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.pl-layer.on .pl-line{animation:pl-draw 1s ease forwards}
@keyframes pl-draw{to{stroke-dashoffset:0}}

/* geospatial */
/* the sweep runs along the origin's own parallel and meridian, not screen axes */
.pl-cross{fill:none;stroke:var(--signal);stroke-width:1.2;opacity:.75}
.pl-geogrid{opacity:0;transition:opacity .6s ease}
.pl-geogrid.on{opacity:1}
.pl-geogrid line,.pl-geogrid path{stroke:var(--hair);stroke-width:1;fill:none}
.pl-grat{fill:var(--muted);font-size:8.5px;letter-spacing:.08em}
/* coastline resolves out of blur once the graticule is established */
.pl-land{opacity:0;filter:blur(7px);transition:opacity .85s ease,filter .95s ease}
.pl-land.on{opacity:1;filter:blur(0)}
.pl-coast{fill:var(--signal);opacity:.09;stroke:var(--signal);stroke-width:1;stroke-opacity:.35}
.pl-lake{fill:var(--paper);stroke:var(--signal);stroke-width:.8;stroke-opacity:.3}
.pl-gp{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
.pl-gp.on{opacity:.9;transform:none}
.pl-geol{fill:var(--signal);font-size:10px;letter-spacing:.08em}

/* the read */
.pl-w{font-family:var(--sans);font-size:13.5px;fill:var(--body)}
.pl-scan{fill:var(--signal);opacity:.15;
  transition:x .07s linear,y .12s ease,width .07s linear}

/* status row: NLP indicator and completion ring */
.pl-nlp{opacity:0;transition:opacity .3s ease}
.pl-nlp.on{opacity:1}
.pl-nlp-t{fill:#2FA95F;text-anchor:end;letter-spacing:.14em;font-size:9px}
.pl-nlp-dot{fill:#2FA95F}
.pl-nlp-ring{fill:none;stroke:#2FA95F;stroke-width:1}
.pl-nlp.on .pl-nlp-ring{animation:pl-pulse 1.5s ease-out infinite}
@keyframes pl-pulse{from{r:4;opacity:.75}to{r:12;opacity:0}}
.pl-prog-bg{fill:none;stroke:var(--rule);stroke-width:2}
.pl-prog{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;
  transition:stroke-dashoffset .5s ease}

.pl-ring{fill:none;stroke:#C97609;stroke-width:1.4}
.pl-lead{stroke:#C97609;stroke-width:1}
.pl-note{fill:#C97609;letter-spacing:.06em}

/* Narrow viewports keep the figure. Type is scaled in viewBox units, because a
   720-unit box on a 375px screen renders 10px type at roughly 5px. */
.pipe.narrow .pl-t{font-size:20px}
.pipe.narrow .pl-th{font-size:15px}
.pipe.narrow .pl-term{font-size:27px}
.pipe.narrow .pl-vmark{font-size:23px}
.pipe.narrow .pl-cen{font-size:18px}
.pipe.narrow .pl-grat{font-size:16px}
.pipe.narrow .pl-geol{font-size:17px}
.pipe.narrow .pl-caret{width:14px;height:26px}
.pipe.narrow .pl-gp{r:7}
.pipe-caption{font-size:11.5px}
@media (max-width:620px){.pipe-caption{font-size:10.5px;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){
  .pl-mk,.pl-scan,.pipe-caption,.pl-tr,.pl-cross,.pl-geogrid,.pl-gp{transition:none}
  .pl-caret,.pl-nlp.on .pl-nlp-ring{animation:none}
  .pl-layer.on .pl-line{animation:none;stroke-dashoffset:0}
}

/* ---- conditions strip ----
   A grid, not a joined list: both readings share column tracks, so temperature
   sits under temperature and AQ under AQ. max-content sizes each track to the
   wider of the two rows, and every row emits all six cells - an omitted cell
   would shift everything after it out of true. */
.cond{border-bottom:1px solid var(--rule);padding:9px 0 10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);
  display:grid;grid-template-columns:repeat(6,max-content);gap:3px 22px;
  overflow-x:auto;scrollbar-width:none}
.cond::-webkit-scrollbar{display:none}
.cond-row{display:contents}
.cond-c{line-height:1.8;white-space:nowrap}
.cond-k{color:var(--signal);font-weight:600}
.cond-n{font-variant-numeric:tabular-nums}
.cond-m{text-align:center}
@media (max-width:760px){
  .cond{font-size:10px;letter-spacing:.03em;gap:2px 14px}
}
@media print{.cond{display:none!important}}
.cond-i{font-size:1.15em;line-height:1;vertical-align:-.12em;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ---- gem icons ---- */
.ico{width:13px;height:13px;display:inline-block;vertical-align:-1.5px;margin-right:7px}
.ico-gem{color:var(--signal)}
.ico-ruby{color:var(--alert)}
.ico-diamond{color:var(--muted)}