/* The comparison page (compare.css). Tokens only, no hex. Loaded after Home's css: the header, the footer, .sec, .wrap, .whom and .pic are Home's own; .ic is the design system's (components.css). */

.cmp-top{padding-block:var(--ds-spacing-2xl)}
.cmp-top-row{display:grid;gap:var(--ds-spacing-xl);align-items:center}
@media (min-width:900px){.cmp-top-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--ds-spacing-2xl)}}
.cmp-top h1{font-size:clamp(32px,8vw,44px);line-height:1.1;max-width:16em}
@media (min-width:768px){.cmp-top h1{font-size:var(--ds-font-size-2xl)}}
.cmp-top .lede{margin-top:var(--ds-spacing-lg)}
.cmp-asof{margin-top:var(--ds-spacing-lg);font-size:var(--ds-type-caption-size);color:var(--ds-text-secondary);letter-spacing:.04em;border-inline-start:var(--ds-border-width-decision) solid var(--ds-border-strong);padding-inline-start:var(--ds-spacing-md)}
.cmp-close{margin-top:var(--ds-spacing-xl)}
.cmp .cmp-end{margin-top:var(--ds-spacing-lg)}
.fig-cmp{border:1px solid var(--ds-border-default);background:var(--ds-bg-surface);padding:var(--ds-spacing-md)}
.fig-cmp svg{max-inline-size:420px;margin-inline:auto}
.cmp-frame{margin:var(--ds-spacing-lg) 0 0;font-size:var(--ds-font-size-lg);font-weight:var(--ds-font-weight-semibold);line-height:1.3;color:var(--ds-text-secondary)}
.cmp-frame + .lede{margin-top:var(--ds-spacing-sm)}
.cmp-method{margin:var(--ds-spacing-md) 0 0;max-width:var(--ds-size-measure-text);color:var(--ds-text-secondary)}
.sec .lede{margin-top:var(--ds-spacing-md)}
.sec .whom,.sec .cmp-systems,.sec .pos-block,.sec .cmp-versus{margin-top:var(--ds-spacing-xl)}

/* the owner's summary: which tool for what, five short cards, then what SANKORD replaces */
.cmp-versus{display:grid;gap:var(--ds-spacing-lg)}
@media (min-width:768px){.cmp-versus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cmp-versus{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cmp-vs{border:1px solid var(--ds-border-default);background:var(--ds-bg-surface);padding:var(--ds-spacing-lg)}
.cmp-vs h3{margin-bottom:var(--ds-spacing-sm)}
.cmp-vs p{margin:0;overflow-wrap:anywhere}
.cmp-replaces{margin:var(--ds-spacing-lg) 0 0;max-width:var(--ds-size-measure-text);color:var(--ds-text-secondary)}
.wc .cmp-plain{margin:var(--ds-spacing-md) 0 0;color:var(--ds-text-secondary)}
.wc .cmp-plain strong{color:var(--ds-text-primary)}
/* the three layer blocks (.wc): Home no longer styles them, so the page does: a rule on top; the pictogram's size (72 px, never the width of its column) is the
   design system's Pictogram component .ic in components.css (token --ds-size-icon-pictogram), never a rule of this page */
.wc{border-top:var(--ds-border-width-decision) solid var(--ds-border-strong);padding-top:var(--ds-spacing-lg)}
.wc h3{margin-bottom:var(--ds-spacing-sm)}
.cmp-note{max-width:var(--ds-size-measure-text)}

/* one large card per system: the name, what it gives, can and cannot as two short lines, the dated pages under them */
.cmp-systems{display:grid;gap:var(--ds-spacing-lg)}
@media (min-width:900px){.cmp-systems{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-sys.cmp-us{grid-column:1/-1}}
.cmp-sys{display:flex;flex-direction:column;border:1px solid var(--ds-border-default);background:var(--ds-bg-surface);padding:var(--ds-spacing-lg)}
.cmp-sys.cmp-us{border-color:var(--ds-border-strong);border-top-width:var(--ds-border-width-decision)}
.cmp-sys h3{margin-bottom:var(--ds-spacing-sm)}
.cmp-sys .cmp-plain{margin:0 0 var(--ds-spacing-sm);font-weight:var(--ds-font-weight-semibold);overflow-wrap:anywhere}
.cmp-owner{margin:0 0 var(--ds-spacing-sm);overflow-wrap:anywhere}
.cmp-owner strong{color:var(--ds-text-secondary);font-size:var(--ds-type-caption-size);letter-spacing:.06em;text-transform:uppercase}
.cmp-text{margin:0;overflow-wrap:anywhere}
.cmp-cc{margin:var(--ds-spacing-md) 0 0;display:grid;gap:var(--ds-spacing-sm)}
.cmp-cc > div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:var(--ds-spacing-sm);align-items:baseline}
.cmp-cc dt{font-size:var(--ds-type-caption-size);font-weight:var(--ds-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-secondary)}
.cmp-cc dd{margin:0;overflow-wrap:anywhere}
.cmp-srcs{margin:auto 0 0;padding-top:var(--ds-spacing-sm);border-top:1px solid var(--ds-border-default);font-size:var(--ds-type-caption-size);color:var(--ds-text-secondary);overflow-wrap:anywhere}
.cmp-cc + .cmp-srcs{margin-top:var(--ds-spacing-md)}
.cmp-srcl{font-weight:var(--ds-font-weight-semibold)}
.cmp-date{white-space:nowrap}

/* positioning chart: tokens only; five data colours (petrol belongs to SANKORD alone) times three shapes; static except one short appearance on scroll-in */
.pos-fig{margin:0;border:1px solid var(--ds-border-default);background:var(--ds-bg-surface);padding:var(--ds-spacing-md)}
.pos-svg{display:block;inline-size:100%;block-size:auto;max-inline-size:760px;margin-inline:auto;overflow:visible}
.pc-frame{fill:none;stroke:var(--ds-border-strong);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pc-grid{stroke:var(--ds-border-default);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.pos-svg text{fill:var(--ds-text-secondary);font-family:var(--ds-font-family-sans);font-size:14px}
.pos-svg .ax-t{fill:var(--ds-text-primary);font-weight:var(--ds-font-weight-semibold)}
.pos-svg .lab{fill:var(--ds-text-primary);font-size:14px}
.pos-svg .lab-n{font-size:20px;font-weight:var(--ds-font-weight-semibold);letter-spacing:.06em}
.pos-svg .lab-stage{fill:var(--ds-text-secondary);font-size:13px}
.pd-s{stroke:var(--ds-bg-surface);stroke-width:1.5}
.pd-2 .pd-s{fill:var(--ds-data-2)}
.pd-3 .pd-s{fill:var(--ds-data-3)}
.pd-4 .pd-s{fill:var(--ds-data-4)}
.pd-5 .pd-s{fill:var(--ds-data-5)}
.pd-6 .pd-s{fill:var(--ds-data-6)}
.pd-7 .pd-s{fill:color-mix(in srgb,var(--ds-data-3) 40%,var(--ds-text-primary))}
.pd-8 .pd-s{fill:color-mix(in srgb,var(--ds-data-5) 40%,var(--ds-text-primary))}
.pd-k{fill:var(--ds-text-secondary)}
.pd-us{fill:none;stroke:var(--ds-logo-bar);stroke-width:4}
.pos-axes-html{display:none;margin-top:var(--ds-spacing-sm);font-size:var(--ds-type-caption-size);color:var(--ds-text-secondary)}
.pos-axes-html p{margin:0 0 var(--ds-spacing-xs)}
.pos-axes-html strong{color:var(--ds-text-primary)}
.pos-stage-html{display:none;margin-top:var(--ds-spacing-md);font-size:var(--ds-type-caption-size);color:var(--ds-text-secondary)}
.pos-stage-html strong{color:var(--ds-text-primary)}
/* the one block: the chart and, with it in view, the key. Under the chart up to 1099 px (the three groups side by side from 768 px); beside it from 1100 px */
.pos-block{display:grid;gap:var(--ds-spacing-lg);align-items:start}
@media (min-width:1100px){.pos-block{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--ds-spacing-xl)}}
.pos-key{min-inline-size:0}
.pos-keyline{margin:0;max-width:var(--ds-size-measure-text);color:var(--ds-text-secondary)}
.pos-groups{margin-top:var(--ds-spacing-md)}
.pos-shapes{margin:var(--ds-spacing-sm) 0 0;font-size:var(--ds-type-caption-size);color:var(--ds-text-secondary)}
/* the key is ONE list of the twelve products, no breaks between kinds; a fixed swatch column and equal rows line the names up; from 768 px to 1099 px it reads down three columns */
.pos-legend{display:grid;grid-template-columns:1fr;gap:var(--ds-spacing-xs);margin:0;padding:0;list-style:none}
@media (min-width:768px) and (max-width:1099px){.pos-legend{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:var(--ds-spacing-lg)}}
.pos-legend li{display:flex;align-items:center;gap:var(--ds-spacing-sm);padding:var(--ds-spacing-xs)}
.pos-sw{inline-size:22px;block-size:22px;flex:none}
@media (max-width:767px){
  .pos-svg text{display:none}
  .pos-fig{overflow:hidden}
  .pos-svg{max-inline-size:none;inline-size:130.4%;margin-inline-start:-30.4%}
  .pos-stage-html,.pos-axes-html{display:block}
  .pos-fig{padding:var(--ds-spacing-sm)}
}
@keyframes pos-in{from{opacity:0}to{opacity:1}}
@supports (animation-timeline:view()){
  .pos-plot{animation:pos-in linear both;animation-timeline:view();animation-range:entry 5% entry 65%}
}
/* legend to chart (assets/js/legend.js): point at or focus a legend row and its dot gets a square ring while every other dot fades to --ds-state-dim;
   opacity only, in the one hover timing; the ring and the dimming switch at once under reduced motion by the one global rule of components.css */
.pos-legend li{cursor:default}
.pos-svg g.pd{transition:opacity var(--ds-motion-quick) var(--ds-motion-ease-move)}
.pos-svg.is-lit g.pd:not(.is-on){opacity:var(--ds-state-dim)}
.pos-ring{fill:none;stroke:var(--ds-text-primary);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none;transition:opacity var(--ds-motion-quick) var(--ds-motion-ease-move)}
.pos-ring.is-on{opacity:1}
/* dot to key (assets/js/legend.js), the other way: point at or tap a dot and its key row gets a square frame while every other row fades to --ds-state-dim, the same fade as the dots;
   the dot gets its ring at once. The invisible circle gives a finger a larger target than the 18 px dot. */
.pd-hit{fill:transparent;stroke:none}
.pos-svg g.pd[data-system]{cursor:default}
.pos-legend li{transition:opacity var(--ds-motion-quick) var(--ds-motion-ease-move)}
.pos-legend li.is-on{box-shadow:inset 0 0 0 2px var(--ds-text-primary)}
.pos-legend.is-lit li:not(.is-on){opacity:var(--ds-state-dim)}