/* Trending: one field of marks that stays on screen while the story
   scrolls beside it. No windows, no chart chrome: the marks, mono labels,
   one orange, and a map key in the corner of the field. */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trending-page{--font-technical:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;color:var(--text-primary);background:var(--bg-page)!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trending-page>*{width:min(100%,var(--page-max))!important;max-width:none!important;box-sizing:border-box;margin-inline:auto!important;padding-inline:var(--page-gutter)!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trending-page :is(h1,h2){font-family:var(--font-editorial);font-weight:400;font-variation-settings:"wght" 400;letter-spacing:-.03em;color:var(--text-primary)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-intro{padding-block:clamp(48px,7vh,84px) 0!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-intro h1{max-width:16ch;margin:0;font-size:clamp(34px,3vw,46px);line-height:1.08;letter-spacing:-.035em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-intro p{max-width:66ch;margin:14px 0 0;color:var(--text-secondary);font:400 clamp(16px,1.3vw,19px)/1.45 var(--font-editorial)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-observed{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0!important;color:#5b6068;font:600 9px/1.4 var(--font-technical)!important;letter-spacing:.12em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-observed [data-tick]{color:#ff5a1f;font-variant-numeric:tabular-nums}

/* the story: sticky field left, beats right */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-story{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:clamp(24px,4vw,64px);align-items:start;padding-block:28px clamp(64px,8vh,110px)!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage{position:sticky;top:84px;display:flex;flex-direction:column;height:min(72vh,720px);min-height:420px;border-top:1.5px solid #111;border-bottom:1.5px solid #111;padding:10px 0 6px;box-sizing:border-box}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-canvas{display:block;flex:1 1 auto;min-height:0;width:100%;height:auto;margin-top:10px}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-find{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;width:min(100%,360px);height:30px;padding:0 4px 0 10px;border:1.5px solid #111;background:#fff;z-index:3}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-find span{color:#ff5a1f;font:600 9px/1 var(--font-technical);letter-spacing:.12em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-find input{flex:1 1 auto;min-width:0;color:#111;border:0;background:transparent;font:400 13px/1 var(--font-editorial);outline:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-find-clear{width:22px;height:22px;color:#5b6068;border:0;background:transparent;font:400 16px/1 var(--font-technical);cursor:pointer}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found{position:absolute;left:0;top:44px;z-index:4;width:min(100%,360px);max-height:280px;overflow:auto;margin:0;padding:0;list-style:none;border:1.5px solid #111;background:#fff}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found li+li{border-top:1px dotted rgba(17,17,17,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found button{display:grid;gap:2px;width:100%;padding:8px 10px;color:#111;text-align:left;border:0;background:transparent;cursor:pointer;font-family:var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found button:hover{background:#fff3ee}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found b{font:500 12.5px/1.2 var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found span{color:#5b6068;font:600 8.5px/1.3 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-found-empty{padding:8px 10px;color:#5b6068;font:400 12px/1.4 var(--font-editorial)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-hint{position:absolute;left:0;bottom:-22px;color:#5b6068;font:600 9px/1.4 var(--font-technical);letter-spacing:.12em}

/* the card that opens beside a picked mark */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card{position:absolute;z-index:5;width:min(320px,calc(100% - 16px));padding:12px 14px 14px;color:#111;border:1.5px solid #111;background:#fff;box-shadow:4px 4px 0 #111;font-family:var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card>b{display:block;padding-right:22px;font:500 14px/1.25 var(--font-technical);word-break:break-all}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card>span{display:block;margin:4px 0 10px;color:#ff5a1f;font:600 8.5px/1.4 var(--font-technical);letter-spacing:.12em;text-transform:uppercase}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card dl{display:grid;gap:6px;margin:0}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card dl>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:baseline}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card dt{color:#5b6068;font:600 8px/1.6 var(--font-technical);letter-spacing:.12em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card dd{margin:0;font:400 11.5px/1.45 var(--font-technical);overflow-wrap:anywhere}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card>a{display:inline-block;margin-top:12px;padding:7px 10px;color:#111;border:1.5px solid #111;background:#fff;font:700 8.5px/1 var(--font-technical);letter-spacing:.12em;text-decoration:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card>a:is(:hover,:focus-visible){background:#fff3ee;outline:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-card-close{position:absolute;right:6px;top:6px;width:22px;height:22px;color:#5b6068;border:0;background:transparent;font:400 16px/1 var(--font-technical);cursor:pointer}

/* the key: a map key in the top right corner of the field */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-rail{position:absolute;right:0;top:12px;z-index:2;width:214px;display:grid;gap:18px;align-content:start}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key{display:grid;gap:16px;padding-left:18px;border-left:1px dotted rgba(17,17,17,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key-group{display:grid;gap:4px}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key-group>b{color:#ff5a1f;font:600 8.5px/1.4 var(--font-technical);letter-spacing:.14em;text-transform:uppercase}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trending-page .trend-key-group>small{display:block;margin:0 0 4px;color:#5b6068;font:400 11px/1.35 var(--font-editorial)!important;letter-spacing:0!important;text-transform:none!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key li{display:flex;align-items:center;gap:8px;color:#111;font:600 9px/1.2 var(--font-technical);letter-spacing:.12em;text-transform:uppercase}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key svg{width:12px;height:12px;flex:0 0 auto;fill:#111;stroke:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key .hollow{fill:none;stroke:#111;stroke-width:1}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key .writes{fill:#ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key .ring{fill:none;stroke:#111;stroke-width:1}

/* column strip: one typeset block per column under the field; names never truncate */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-columns{position:absolute;left:0;right:0;bottom:8px;height:96px;z-index:1;pointer-events:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage:not([data-layout="adapters"]):not([data-layout="makers"]) .trend-columns{display:none!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col{position:absolute;top:0;display:grid;grid-template-rows:auto auto auto;gap:4px;align-content:start;padding-top:8px;border-top:1px solid #111;color:#111;font-family:var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col b{font:500 14px/1 var(--font-technical);letter-spacing:-.01em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 12px/1.25 var(--font-editorial);letter-spacing:-.01em;overflow-wrap:anywhere}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col strong a{color:inherit;text-decoration:none;border-bottom:1px solid #ff5a1f;pointer-events:auto}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col strong a:is(:hover,:focus-visible){color:#ff5a1f;outline:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col em{color:#5b6068;font:600 8px/1.3 var(--font-technical);font-style:normal;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col.is-faint{color:#8a8f96;border-top-color:rgba(17,17,17,.35)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col.is-faint b{color:#8a8f96}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-col{color:#f1f1ed;border-top-color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-col em{color:rgba(241,241,237,.6)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-col.is-faint{color:rgba(241,241,237,.45);border-top-color:rgba(241,241,237,.35)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-col.is-faint b{color:rgba(241,241,237,.45)}

/* beats */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-steps{padding-top:8px}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step{min-height:58vh;padding:22px 0 22px 18px;border-left:1.5px solid rgba(17,17,17,.18);opacity:.42;transition:opacity .35s ease,border-color .35s ease}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step.is-active{opacity:1;border-left-color:#ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step:last-child{min-height:40vh}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-kicker{display:block;margin-bottom:10px;color:#ff5a1f;font:600 9px/1.4 var(--font-technical);letter-spacing:.12em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step h2{margin:0;font-size:clamp(22px,1.9vw,30px);line-height:1.15;text-wrap:pretty}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step p{margin:12px 0 0;color:var(--text-secondary);font:400 15px/1.5 var(--font-editorial)}

/* dark */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-stage{border-color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page :is(.trend-find,.trend-found,.trend-card,.trend-card>a){color:#f1f1ed;border-color:#f1f1ed;background:#0a0a09}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-card{box-shadow:4px 4px 0 #f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page :is(.trend-find input,.trend-found button,.trend-card dd,.trend-card>b){color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page :is(.trend-found button:hover,.trend-card>a:hover){background:rgba(255,90,31,.12)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-found li+li{border-color:rgba(241,241,237,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-step{border-left-color:rgba(241,241,237,.22)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-step.is-active{border-left-color:#ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-key{border-left-color:rgba(241,241,237,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-key li{color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trending-page .trend-key-group>small{color:rgba(241,241,237,.62)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-key svg{fill:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-key :is(.hollow,.ring){stroke:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-key .writes{fill:#ff5a1f}

/* narrower stages: the key sits under the find box, three groups across, then one */
@media (max-width:980px){
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-story{grid-template-columns:1fr;gap:0}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage{top:64px;height:min(58vh,520px);min-height:360px;background:var(--bg-page);z-index:2}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-step{min-height:44vh;padding-left:14px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key{position:static;width:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin:12px 0 0;padding:0;border-left:0}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key-group+.trend-key-group{padding-left:18px;border-left:1px dotted rgba(17,17,17,.4)}
}
@media (max-width:620px){
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-find{width:100%}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage{height:auto;min-height:0;max-height:calc(100vh - 72px)}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage canvas{flex:1 1 320px;min-height:300px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-columns{height:112px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-col strong{font-size:11px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key{grid-template-columns:1fr;gap:10px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key-group+.trend-key-group{padding-left:0;border-left:0}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-key ul{display:flex;flex-wrap:wrap;gap:4px 14px}
}

/* the perspective picker on the makers beat: a framed list under the key, the chosen row outlined in orange */
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view{margin-left:18px;border:1.5px solid #111;background:#fff;font-family:var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-stage:not([data-layout="makers"]) .trend-view{display:none!important}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-head{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 6px 9px;border-bottom:1.5px solid #111}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-head span{color:#5b6068;font:600 8.5px/1 var(--font-technical);letter-spacing:.14em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-head kbd{padding:2px 4px;color:#5b6068;border:1px solid rgba(17,17,17,.4);font:500 8.5px/1 var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list{display:grid;gap:1px;padding:5px;outline:none}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list:focus-visible{box-shadow:inset 0 0 0 1.5px #ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list button{display:block;width:100%;padding:4px 8px;color:#111;text-align:left;border:1.5px solid transparent;background:transparent;cursor:pointer;font-family:var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list button b{display:block;font:500 12.5px/1.25 var(--font-technical)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list button:hover{background:#fff3ee}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-list button[aria-selected="true"]{color:#ff5a1f;border-color:#ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-hint{margin:0;padding:6px 9px 7px;color:#5b6068;border-top:1px dotted rgba(17,17,17,.4);font:600 8px/1.4 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view{color:#f1f1ed;border-color:#f1f1ed;background:#0a0a09}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-head{border-bottom-color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-head span,html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-hint{color:rgba(241,241,237,.6)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-head kbd{color:rgba(241,241,237,.6);border-color:rgba(241,241,237,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-hint{border-top-color:rgba(241,241,237,.4)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-list button{color:#f1f1ed}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-list button:hover{background:rgba(255,90,31,.14)}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-list button[aria-selected="true"]{color:#ff5a1f}
html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-chips{display:none}
@media (max-width:980px){
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-rail{position:static;width:auto;display:block}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view{display:none!important}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-chips button{padding:5px 9px;color:#111;border:1px solid rgba(17,17,17,.4);background:transparent;cursor:pointer;font:500 11.5px/1.2 var(--font-technical)}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-chips button[aria-selected="true"]{color:#ff5a1f;border:1.5px solid #ff5a1f;padding:4.5px 8.5px}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"] .trend-view-chips .trend-view-hint{flex:1 0 100%;padding:2px 0 0;border-top:0}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-chips button{color:#f1f1ed;border-color:rgba(241,241,237,.4)}
  html[data-design-system="halde"][data-calm][data-route-bundle="trending"][data-resolved-theme="dark"] .trend-view-chips button[aria-selected="true"]{color:#ff5a1f}
}