/*
  JP1164a - the 110 STEPS poster on the Delivery tab (src/app/36a-steps110-poster.js).
  The approved design (/home/claude/jp1164/110-steps-poster-demo.html), namespaced under .jp110p so the app's own
  .tile / .band / .wrap / h1 rules cannot reach it. Its page colours follow the APP's design theme tokens
  (--bg, --surface, --text, ... from gilded-signal-1001.css: Luna and Gilded System); the six group colours, the score
  ramp, the layout, the card and the toggle are the demo's. No h1-h3 elements (the gilded theme forces its serif on
  every h1-h3 with !important): the headings are role="heading" divs. The poster layout starts at 1100 px of POSTER width
  (a container query: the app's side navigation takes part of the window); the phone card is viewport based.
*/
.jp110p{
  --p110-page:var(--bg,#151618);
  --p110-band:var(--surface2,#222427);
  --p110-fg:var(--text,#ececea);
  --p110-muted:var(--text-dim,#a1a19c);
  --p110-line:var(--border,#34363a);
  --p110-card:var(--surface,#232528);
  --p110-track:var(--surface3,#33363a);
  --p110-shadow:rgba(0,0,0,.7);
  --p110-grey:#6f7175;
  --p110-voice:#dba62c;
  --p110-body:#d1692d;
  --p110-gest:#b44a33;
  --p110-face:#67a455;
  --p110-lang:#5583bd;
  --p110-ult:#83518e;
  --p110-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --p110-text:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --p110-gap:6px;
  --p110-catgap:12px;
  container-type:inline-size;
  container-name:jp110p;
  background:var(--p110-page);
  color:var(--p110-fg);
  font-family:var(--p110-text);
  margin:28px 0;
  max-width:100%;
  overflow-x:clip;
}
.jp110p *,.jp110p *::before,.jp110p *::after{box-sizing:border-box}
.jp110p-wrap{max-width:1640px;margin:0 auto;padding-left:16px;padding-right:16px}

/* title band */
.jp110p-band{background:var(--p110-band)}
.jp110p-band .jp110p-wrap{padding-block:26px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.jp110p-h1{margin:0;font-family:var(--p110-display);font-weight:700;font-size:clamp(30px,4.2cqi,58px);letter-spacing:.01em;line-height:1;display:flex;align-items:center;gap:.28em;text-wrap:balance;text-align:center;color:var(--p110-fg)}
.jp110p-h1 .jp110p-box{border:2px solid currentColor;padding:.02em .14em 0;font-weight:600}
.jp110p-h1 sup{font-size:.32em;vertical-align:top;position:relative;top:.25em;margin-left:.05em}

/* board */
.jp110p-main .jp110p-wrap{padding-block:26px 30px}
.jp110p-board{display:flex;flex-direction:column;gap:28px}
.jp110p-cat{min-width:0}
.jp110p-cat .jp110p-gh{margin:0 0 10px;font-family:var(--p110-display);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding-bottom:7px;border-bottom:5px solid var(--c);line-height:1.1;color:var(--p110-fg);overflow-wrap:normal;word-break:normal;hyphens:manual}
.jp110p-cat .jp110p-gh.long{font-size:13px;letter-spacing:.03em}
.jp110p-cat .jp110p-gh.xlong{font-size:11.5px;letter-spacing:.02em}
.jp110p-tiles{display:grid;gap:var(--p110-gap);grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}

.jp110p-tile{
  --c:var(--cc);
  position:relative;aspect-ratio:1 / 1;max-width:100%;width:100%;
  background:var(--c);color:#fff;border:0;border-radius:0;padding:0;margin:0;
  font:inherit;text-align:left;cursor:pointer;overflow:hidden;
  transition:filter .15s ease,background-color .35s ease;
}
.jp110p-tile:hover{filter:brightness(1.07)}
.jp110p-tile:focus-visible{outline:3px solid var(--p110-fg);outline-offset:2px;z-index:1}
.jp110p-tile .jp110p-num{position:absolute;left:8%;top:6%;font-family:var(--p110-display);font-weight:700;font-size:clamp(15px,1.35cqi,22px);line-height:1;font-variant-numeric:tabular-nums}
.jp110p-tile svg{position:absolute;right:6%;top:6%;width:46%;height:46%;overflow:visible}
.jp110p-tile .jp110p-name{position:absolute;left:8%;right:6%;bottom:7%;font-weight:500;font-size:clamp(11px,.86cqi,13.5px);line-height:1.12;hyphens:manual;overflow-wrap:normal;word-break:normal}
.jp110p-tile .jp110p-name.long{font-size:clamp(10px,.74cqi,12px)}
.jp110p-tile .jp110p-name.xlong{font-size:clamp(9px,.64cqi,10.5px)}
.jp110p-tile .jp110p-num::before,.jp110p-tile .jp110p-score::before{content:attr(data-t)}
.jp110p-tile .jp110p-score{position:absolute;left:8%;top:calc(6% + clamp(15px,1.35cqi,22px) + 3px);font:600 clamp(11px,.9cqi,14px)/1 var(--p110-display);opacity:.95;font-variant-numeric:tabular-nums}
.jp110p .ink{fill:var(--c);stroke:none}
.jp110p .inks{stroke:var(--c);fill:none}
.jp110p-tip .ink{fill:var(--c);stroke:none}
.jp110p-tip .inks{stroke:var(--c);fill:none}

/* poster layout on wide posters */
@container jp110p (min-width:1100px){
  .jp110p-board{flex-direction:row;align-items:flex-start;gap:var(--p110-catgap)}
  .jp110p-cat{flex:var(--cols) 1 calc((var(--cols) - 1) * var(--p110-gap))}
  .jp110p-cat .jp110p-gh{text-align:center;box-sizing:content-box;min-height:33px;display:flex;align-items:flex-end;justify-content:center}
  .jp110p-tiles{grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column}
}
@container jp110p (max-width:560px){
  .jp110p-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jp110p-tile .jp110p-num{font-size:16px}
  .jp110p-tile .jp110p-name{font-size:11.5px}
  .jp110p-tile .jp110p-name.long{font-size:10.5px}
  .jp110p-tile .jp110p-name.xlong{font-size:9.5px}
  .jp110p-tile .jp110p-score{top:calc(6% + 19px);font-size:12px}
}

/* colour toggle and legend */
.jp110p-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:22px}
.jp110p-toggle{display:inline-flex;border:1.5px solid var(--p110-fg)}
.jp110p-toggle button{font:600 15px/1 var(--p110-text);letter-spacing:.02em;padding:9px 16px;border:0;border-radius:0;background:transparent;color:var(--p110-fg);cursor:pointer;margin:0;min-height:0}
.jp110p-toggle button[aria-pressed="true"]{background:var(--p110-fg);color:var(--p110-page)}
.jp110p-toggle button:focus-visible{outline:3px solid var(--p110-lang);outline-offset:2px}
.jp110p-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jp110p-legend[hidden]{display:none}
.jp110p-scale{width:240px;max-width:100%}
.jp110p-ramp{height:12px}
.jp110p-ticks{display:flex;justify-content:space-between;font:600 13px/1 var(--p110-display);color:var(--p110-muted);margin-top:4px;font-variant-numeric:tabular-nums}

/* the card: beside the tile on wide screens, a bottom sheet on phones */
.jp110p-tip{
  --p110-fg:var(--text,#ececea);--p110-muted:var(--text-dim,#a1a19c);--p110-line:var(--border,#34363a);
  --p110-card:var(--surface,#232528);--p110-track:var(--surface3,#33363a);--p110-shadow:rgba(0,0,0,.7);
  --p110-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --p110-text:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  position:fixed;z-index:9000;left:0;top:0;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;
  background:var(--p110-card);color:var(--p110-fg);font-family:var(--p110-text);
  box-shadow:0 18px 44px -14px var(--p110-shadow),0 2px 6px -2px var(--p110-shadow);
  border-top:6px solid var(--c,var(--p110-line));pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
}
.jp110p-tip.on{opacity:1;visibility:visible;transform:none;transition:opacity .14s ease,transform .14s ease,visibility 0s}
.jp110p-tip .hd{display:flex;align-items:center;gap:12px;padding:14px 16px 0}
.jp110p-tip .chip{width:46px;height:46px;flex:none;position:relative;background:var(--c);color:#fff}
.jp110p-tip .chip svg{position:absolute;inset:7px;width:32px;height:32px;overflow:visible}
.jp110p-tip .ttl{min-width:0}
.jp110p-tip .grp{font:600 11.5px/1 var(--p110-display);letter-spacing:.08em;text-transform:uppercase;color:var(--p110-muted)}
.jp110p-tip .nm{font:700 20px/1.08 var(--p110-display);margin-top:4px;text-wrap:balance}
.jp110p-tip .sc{display:flex;align-items:baseline;gap:10px;padding:14px 16px 0}
.jp110p-tip .big{font:700 34px/1 var(--p110-display);font-variant-numeric:tabular-nums}
.jp110p-tip .big small{font-size:18px;color:var(--p110-muted);font-weight:600;margin-left:2px}
.jp110p-tip .meter{flex:1;height:8px;background:var(--p110-track);position:relative;align-self:center}
.jp110p-tip .meter i{position:absolute;inset:0 auto 0 0;background:var(--m)}
.jp110p-tip .state{padding:14px 16px 0;font:600 15px/1.3 var(--p110-text);color:var(--p110-muted)}
.jp110p-tip .def{margin:12px 16px 0;font-size:15px;line-height:1.42}
.jp110p-tip .why{margin:8px 16px 0;font-size:13.5px;line-height:1.42;color:var(--p110-muted)}
.jp110p-tip .ft{margin:12px 16px 14px;padding-top:9px;border-top:1px solid var(--p110-line);font:600 12px/1.2 var(--p110-display);letter-spacing:.04em;color:var(--p110-muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .jp110p-tip{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);transform:translateY(12px);pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.jp110p-tile,.jp110p-tip{transition:none}}