/* Issuer photography and the source document share one continuous canvas. */
.zf-card{color:#fff;background:#0e1116!important;container-type:inline-size}
.zf-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.85fr);gap:clamp(24px,4cqw,64px);align-items:center;min-height:370px;padding:24px 30px 76px!important;isolation:isolate}
.zf-company{position:relative;display:flex;align-items:flex-end;min-height:280px;margin:0;overflow:hidden;background:transparent}
.zf-company>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58}
.zf-company:has(>img):after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0e1116 0%,#0e111600 65%);pointer-events:none}
.zf-company>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c9b8ff;stroke-width:2}
.zf-company>svg text{fill:#fff;stroke:none;font:500 48px Arial,sans-serif}
.zf-issuer{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:24px 4px 4px;min-width:0}
.zf-issuer>div{min-width:0}
.zf-issuer>div>span{font:500 13px/1.3 var(--sans,Arial);color:#fff;letter-spacing:0}
.zf-issuer h3{margin:6px 0 0!important;font:500 clamp(28px,4cqw,46px)/1.05 var(--sans,Arial)!important;letter-spacing:-.04em;overflow-wrap:anywhere}
/* The filer's picture (its logo, from the subject resolver) on a light tile beside its name. */
.zf-mark{flex:none;display:grid;place-items:center;width:clamp(56px,7cqw,76px);aspect-ratio:1;border-radius:14px;background:#fff;padding:9px;box-sizing:border-box}
.zf-mark[hidden]{display:none}
.zf-mark>img{max-width:100%;max-height:100%;object-fit:contain}
.zf-company>figcaption{position:absolute;top:8px;left:8px;z-index:2;font:400 var(--zt-label,11px)/1.4 var(--sans,Arial)}
.zf-company>figcaption a{color:#fff;text-decoration:none}
.zf-document{position:relative;display:flex;flex-direction:column;gap:24px;padding:26px!important;border:1px solid #cbb6ff70!important;border-radius:8px;background:#0e1116!important;min-width:0;animation:zf-document-enter 220ms ease-out both}
.zf-document-identity{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.zf-document-identity>strong{font:500 30px/1 var(--sans,Arial);color:#fff}
.zf-document-identity>span{font:500 15px/1.4 var(--sans,Arial)}
.zf-dates{display:flex;flex-direction:column;gap:14px;min-width:0}
.zf-dates>nav{display:flex;gap:8px;flex-wrap:wrap}
.zf-dates button{border:0;background:transparent;color:#fff;padding:6px 9px!important;font:400 12px/1.3 var(--sans,Arial);border-radius:4px;cursor:pointer;min-height:34px}
.zf-dates button[aria-pressed=true]{background:#cbb6ff22;box-shadow:inset 0 0 0 1px #cbb6ff80}
.zf-dates>span{font:400 12px/1.3 var(--sans,Arial)}
.zf-dates>time{font:500 clamp(24px,3cqw,34px)/1.2 var(--sans,Arial);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.zf-document>blockquote{margin:0!important;padding:0!important;border:0!important;font:400 15px/1.65 var(--sans,Arial);color:#fff}
.zf-items{display:flex;flex-wrap:wrap;gap:8px}
.zf-items>span{padding:7px 9px;border-radius:4px;background:#ffffff0b;font:400 12px/1.4 var(--sans,Arial)}
.zf-document-origin{font:500 var(--zt-text,11px)/1.4 var(--sans,Arial);letter-spacing:0}
.zf-card button:focus-visible{outline:2px solid #d7c6ff;outline-offset:3px}
@keyframes zf-document-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:650px){.zf-stage{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 20px 76px!important}.zf-company{min-height:190px}.zf-issuer>h3{font-size:38px!important}.zf-document{padding:20px!important;gap:18px}.zf-document-identity>strong{font-size:26px}.zf-dates>time{font-size:27px}}
@media(prefers-reduced-motion:reduce){.zf-document{animation:none}}
/* Document dates and exact issuer context replace the generic paper icon. */
.zf-stage{grid-template-columns:minmax(0,1.3fr) minmax(240px,.85fr);gap:24px;padding:0 0 66px!important;min-height:390px;align-items:stretch}
.zf-company{min-height:340px;padding:24px;flex-direction:column;justify-content:flex-end;background:#13242d}
.zf-company>img{opacity:1}
.zf-company:has(>img):after{background:linear-gradient(0deg,#080e17ed 0%,#080e1711 75%)}
.zf-issuer{padding:18px 0 0;z-index:1}
.zf-issuer>div>span{color:#fff}
.zf-issuer h3{color:#fff}
.zf-document{border:0!important;border-radius:0;background:transparent!important;padding:26px!important;justify-content:center;animation:none}
.zf-document-identity>strong{color:#fff}
.zf-dates button[aria-pressed=true]{background:#ffffff1f;box-shadow:none;color:#fff}
.zf-card button:focus-visible{outline-color:#f2d49c}
.zf-company>figcaption{top:14px;left:14px;right:14px}
.zf-company figcaption summary{display:inline-flex;align-items:center;min-height:32px;padding:7px 10px;border-radius:5px;background:#09121ddd;color:#fff;font:400 12px/1.4 var(--sans,Arial);list-style:none}
.zf-company figcaption summary::-webkit-details-marker{display:none}
.zf-company figcaption details>div{position:absolute;top:calc(100% + 7px);left:0;width:100%;max-width:400px;background:#09131f;padding:15px;border-radius:7px;max-height:220px;overflow:auto}
.zf-company figcaption p{font:400 12px/1.55 var(--sans,Arial);color:#fff;margin:0 0 9px}
.zf-company figcaption a{display:inline-block;color:#fff;margin:3px 12px 3px 0;font:400 12px/1.4 var(--sans,Arial)}
.zf-interval{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;gap:12px;width:100%;z-index:1;color:#fff}
.zf-interval>strong{font:400 clamp(68px,9cqw,100px)/1 var(--sans,Arial);letter-spacing:-.06em}
.zf-interval>span{font:400 14px/1.4 var(--sans,Arial);color:#fff}
.zf-date-bridge{display:flex;align-items:center;gap:12px;margin-top:13px;color:#fff;font:400 12px/1.4 var(--sans,Arial)}
.zf-date-bridge i{height:2px;flex:1;min-width:16px;background:#e8c98e}
.zf-source-window{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center}
.zf-source-window>strong{font:400 68px/1 var(--sans,Arial);color:#fff;letter-spacing:-.05em}
.zf-source-window>span{font:400 14px/1.4 var(--sans,Arial)}
@media(max-width:650px){.zf-stage{grid-template-columns:1fr;gap:0;padding:0 0 66px!important}.zf-company{min-height:260px;padding:22px}.zf-document{padding:24px!important}.zf-company-photo{min-height:290px}.zf-date-bridge{flex-wrap:wrap}.zf-dates button{min-height:40px}.zf-company figcaption summary{min-height:40px}}
/* Round 1 (2026-11-04), Filings: the dated span is the graphic with both dates labelled; the filer's tile shows its
   ticker until its logo arrives; dates and items are plain labelled rows, never chips or a toggle. */
.zf-mark>b{font:600 clamp(13px,1.6cqw,17px)/1 var(--sans,Arial);color:#0e1116;letter-spacing:0;text-align:center;overflow-wrap:anywhere}
.zf-company>.zf-issuer{align-self:flex-start}
.zf-date-bridge{align-items:flex-end}
.zf-date-bridge>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.zf-date-bridge>span:last-child{text-align:right}
.zf-date-bridge small{font:400 12px/1.4 var(--sans,Arial);color:#fff}
.zf-date-bridge time{font:500 clamp(15px,1.8cqw,19px)/1.25 var(--sans,Arial);color:#fff;white-space:nowrap}
.zf-date-bridge i{margin-bottom:10px}
/* Round 2, Filings (S5, G1): the filer's tile heads the card and the dated span sits right under it, the two kept
   together in the middle of the frame rather than pinned to its top and bottom with an empty band between them. */
html[data-news-view] .zw-page[data-news-keycard] .zf-card .zf-company{justify-content:center;gap:clamp(18px,3cqw,36px)}
.zf-company>.zf-issuer{order:-1;padding-top:0}
dl.zf-dates,dl.zf-items{display:flex;flex-direction:column;gap:12px;margin:0}
dl.zf-dates>div,dl.zf-items>div{display:flex;flex-direction:column;gap:2px;min-width:0}
dl.zf-dates dt,dl.zf-items dt{font:400 12px/1.4 var(--sans,Arial);color:#fff}
dl.zf-dates dd,dl.zf-items dd{margin:0;font:500 15px/1.35 var(--sans,Arial);color:#fff;overflow-wrap:anywhere}
dl.zf-dates dd{font-size:clamp(18px,2.2cqw,24px)}
/* Key card graphics for Finance (round 1): a release's figures as labelled bars (the Macro fallback), and an agency
   release as a document card (Primary sources), sharing the filing card's document family. Labels wrap and never end
   in an ellipsis (L5); nothing is drawn under 12px (W5). */
.zg-figbars{display:flex;flex-direction:column;justify-content:center;gap:14px;height:100%;min-height:0;font-family:var(--sans,Arial)}
.zg-figbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 14px}
.zg-figbar>span{font:400 14px/1.35 var(--sans,Arial);color:#fff;overflow-wrap:anywhere}
.zg-figbar>b{font:500 18px/1.1 var(--sans,Arial);color:#fff;text-align:right;white-space:nowrap}
.zg-figbar>i{grid-column:1/-1;display:block;height:12px;border-radius:3px;background:var(--zk-bar,#ffffff1f);position:relative;overflow:hidden}
.zg-figbar>i::after{content:'';position:absolute;inset:0;width:var(--w,0%);background:#c9d3de;border-radius:3px}
.zg-figbar[data-now]>i::after{background:var(--zk-accent,#9bc4ff)}
.zg-company-head>small{flex:none;font:400 13px/1.3 var(--sans,Arial);color:#fff;white-space:nowrap}
/* Round 2, Companies (S1, G3, W5): every company head is the same, the tile in its place and the listing beside the
   name. Until a mark is found, or when none is, the tile holds the company's short name. A wide wordmark widens its tile
   rather than shrinking into a square, so the words inside the logo stay legible. */
.zg-company-head>.zg-company-logo:not([data-zk-filled=mark]):has(>.zg-name-tile),.zg-doc>.zg-status-head>.zg-status-logo:not([data-zk-filled=mark]):has(>.zg-name-tile){display:grid}
.zg-doc .zg-status-logo>.zg-name-tile,.zg-company-logo>.zg-name-tile{font:600 15px/1 var(--sans,Arial);color:#0e1116;letter-spacing:0;text-align:center;white-space:nowrap}
.zg-company-head>.zg-company-logo:has(>.zg-name-tile),.zg-doc>.zg-status-head>.zg-status-logo:has(>.zg-name-tile){padding:4px}
.zg-company-head>.zg-company-logo[data-zk-filled=mark]{width:auto;min-width:64px;max-width:min(45%,240px)}
.zg-company-head>.zg-company-logo[data-zk-filled=mark] img{width:auto;height:48px;max-width:100%}
.zg-company-head{min-width:0}
.zg-company-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.zg-company-name>strong{font:500 clamp(22px,2vw,30px)/1.15 var(--sans,Arial);letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.zg-company-name>small{font:400 13px/1.3 var(--sans,Arial);color:#fff;white-space:nowrap}
@media (max-width:600px){.zg-company-head{gap:12px}.zg-company-name>strong{font-size:19px}.zg-company-head>.zg-company-logo[data-zk-filled=mark]{min-width:48px}.zg-company-head>.zg-company-logo[data-zk-filled=mark] img{height:32px}.zg-doc .zg-status-logo>.zg-name-tile,.zg-company-logo>.zg-name-tile{font-size:12px}}
/* Round 2, Prices & flows: several coins on one axis, each line in its coin's colour; the legend names each coin with its
   price and move in one ink, the swatch carrying the colour (W2). */
.zg-coin-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px;padding:0;list-style:none}
.zg-coin-legend>li{display:flex;align-items:baseline;gap:6px;min-width:0;font:400 13px/1.35 var(--sans,Arial);color:#fff}
.zg-coin-legend>li>i{align-self:center;flex:none;width:12px;height:3px;border-radius:2px}
.zg-coin-legend>li>b{font-weight:500;white-space:nowrap}
.zg-coin-legend>li>small{font-size:13px;white-space:nowrap}
/* A line's move in the detail block: its window above, the move with its unit below, wrapping, never clipped (L5). */
.zg-row.zg-row-move{grid-template-columns:minmax(0,1fr);gap:2px}
.zg-row.zg-row-move>span{font:400 13px/1.4 var(--sans,Arial);color:#fff}
.zg-row.zg-row-move>b{font:500 17px/1.3 var(--sans,Arial);letter-spacing:-.01em;text-align:left;overflow-wrap:break-word}
.zg-company-mark>.zg-portrait-frame:not([data-zk-filled])>small{align-self:center;font:400 15px/1.4 var(--sans,Arial)}
.zg-doc{display:flex;flex-direction:column;justify-content:flex-start;gap:20px;height:100%;min-height:0;font-family:var(--sans,Arial)}
.zg-doc-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.zg-doc-act{font:500 clamp(30px,3.4vw,48px)/1.05 var(--sans,Arial);letter-spacing:-.02em;color:#fff}
.zg-doc-what{margin:0;font:400 clamp(15px,1.3vw,18px)/1.4 var(--sans,Arial);color:#fff;overflow-wrap:anywhere}
.zg-doc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 18px;margin:0}
.zg-doc-facts dt{font:400 12px/1.4 var(--sans,Arial);color:#fff}
.zg-doc-facts dd{margin:2px 0 0;font:500 15px/1.35 var(--sans,Arial);color:#fff;overflow-wrap:anywhere}
.zg-doc-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.zg-doc-track li{display:flex;flex-direction:column;gap:8px;min-width:0}
.zg-doc-track li>i{display:block;height:10px;border-radius:2px;background:var(--zk-bar,#ffffff1f)}
.zg-doc-track li[data-now]>i{background:var(--zk-accent,#9bc4ff)}
.zg-doc-track li>span{font:400 13px/1.3 var(--sans,Arial);color:#fff;overflow-wrap:anywhere}
.zg-doc-track li[data-now]>span{font-weight:700}
/* ---------- Round 3, Finance (docs/news-key-card-rules.md L2, L5, L6, G2, G6, W2) ---------- */
/* A line's caption is two lines: the window's ends with the high and low between them on the axis line, then the source
   naming the series; the shaded session is named under its band at the line's end. On a narrow card the ends give their
   dates alone (the caption's "as of" keeps the end's time), so the axis line holds the high and low on one line. */
.zg-series>.zg-axis{gap:2px 12px;flex-wrap:nowrap;align-items:flex-start}
.zg-series>.zg-axis>span{flex:none;white-space:nowrap}
/* The ends keep their places on the first line; a long high and low wraps between the two in the middle, never pushing an
   end onto a line of its own. */
.zg-series>.zg-axis>.zg-axis-range{flex:1 1 0;min-width:0;white-space:normal;text-align:center;color:#fff}
.zg-series>.zg-axis>.zg-axis-band{color:#fff;text-align:right}
@media (max-width:420px){.zg-series>.zg-axis .zg-axis-time{display:none}}
/* Each coin's high and low sits under its own legend entry, one ink. */
.zg-coin-legend>li{flex-wrap:wrap}
.zg-coin-legend>li>.zg-coin-range{flex:1 1 100%;padding-left:18px;font-size:12px;white-space:normal}
/* On a phone the company's head is one compact row, a 32px tile beside the name and its listing, so the share line under
   it keeps the height the head took (L2, L6); the name wraps rather than ends in an ellipsis (L5). */
@media (max-width:600px){
  .zg-company{gap:8px}
  .zg-company-head{gap:10px}
  .zg-company-head>.zg-company-logo{width:32px;height:32px;padding:2px;border-radius:8px}
  .zg-company-head>.zg-company-logo[data-zk-filled=mark]{min-width:32px;height:32px;padding:3px}
  .zg-company-head>.zg-company-logo[data-zk-filled=mark] img{height:24px}
  .zg-company-head>.zg-company-logo>.zg-name-tile{font-size:12px}
  .zg-company-name{gap:2px 8px}
  .zg-company-name>strong{font-size:17px;line-height:1.2}
  .zg-company-name>small{font-size:12px}
}
/* Primary sources: the release is a framed document filling the graphic's track, its content centred in it, as the Filings
   card's document is (never loose words over an empty band); each stage of a rule's track carries the date the release
   gives it. */
.zg-doc[data-zg-surface=document]{justify-content:safe center;gap:clamp(14px,2.4vh,26px);padding:clamp(14px,1.8vw,26px);border-radius:10px;background:#13242d;box-sizing:border-box}
.zg-doc-track li>i{height:14px}
.zg-doc-track li>time{font:400 12px/1.3 var(--sans,Arial);color:#fff}
@media (max-width:600px){.zg-doc[data-zg-surface=document]{padding:14px 16px;border-radius:8px}}
/* Filings: a filer tile still showing its ticker stays a square tile with square corners at every size (W2: never a
   capsule), the ticker set to fit inside it. */
.zf-issuer>.zf-mark:has(>b){aspect-ratio:1;border-radius:10px}
@container zf-filer (max-height:300px){.zf-issuer>.zf-mark:has(>b){width:auto;min-width:40px;aspect-ratio:1;padding:4px;border-radius:8px}.zf-issuer>.zf-mark>b{font-size:12px}}
@container zf-filer (max-height:160px){.zf-issuer>.zf-mark:has(>b){min-width:32px;height:auto;padding:3px;border-radius:7px}.zf-issuer>.zf-mark>b{font-size:var(--zt-label,11px)}}
/* Filings on a phone (L2, L6): the form ("8-K Current report") is the filer block's own line under the name, so the
   document below holds only what it adds (its dates, excerpt, items) and its Read report, and the filer block keeps the
   height the form line and its band took. */
.zf-issuer-form{display:none}
@media (max-width:600px){
  .zf-issuer>div>.zf-issuer-form{display:block;margin-top:4px;font:400 14px/1.3 var(--sans,Arial);color:#fff}
  .zf-issuer>div>.zf-issuer-form>strong{font-weight:600}
  .zf-card .zf-document-identity{display:none}
}
/* Round 3, frame (L6, G2): a document that fills a tall track is drawn at the track's scale, never small words in a
   blank band. Round 4 (S1): one continuous scale read from the panel's own height at every height (news-keycard.css,
   zg-doc), so a short panel is the same template drawn smaller, never a breakpoint's small type. */
/* The filer's block on a tablet is a tall panel beside the document: its tile, name, count and dates are drawn at the
   panel's scale, as they are set tighter in a short phone panel (news-keycard.css zf-filer). */
@media (min-width:601px) and (max-width:900px){html[data-news-view] .zw-page[data-news-keycard] .zf-card .zf-company{container:zf-filer/size}}
@container zf-filer (min-height:420px){
  .zf-mark{width:clamp(56px,14cqh,112px)}.zf-mark>b{font-size:clamp(13px,3cqh,22px)}
  .zf-issuer h3{font-size:clamp(28px,7cqh,52px)!important}
  html[data-news-view] .zw-page[data-news-keycard] .zf-card .zf-interval>strong{font-size:clamp(68px,22cqh,180px)}
  .zf-interval>span{font-size:clamp(14px,2.6cqh,19px)}
  .zf-date-bridge time{font-size:clamp(15px,3cqh,22px)}
}
/* Round 4 (L2, G6): a company's or a Stocks line's detail block carries the instrument's name for when it stands apart
   from the card's head (a phone moves it under the card, news-keycard.css carry); beside the head the name is not
   printed a second time. */
.zg-focus>.zg-focus-name{display:none}
.zw-carry-block .zg-focus>.zg-focus-name{display:block;margin:0 0 4px;font:500 15px/1.3 var(--sans,Arial);color:#fff}

/* ---------- Clean, step A (docs/news-key-card-rules.md 4b: C7, C8, C9) ---------- */
/* C8: the filer's panel, the filing's document and an agency release's document panel are the page's own ground, set off
   by one hairline, never a tinted fill; a photograph behind the filer fades into that same ground. */
.zw-page[data-news-keycard] :is(.zf-company,.zg-doc[data-zg-surface=document]){background:var(--bg,#080b10);border:1px solid var(--zk-hair,rgba(255,255,255,.08));box-sizing:border-box}
.zw-page[data-news-keycard] .zf-company:has(>img):after{background:linear-gradient(0deg,var(--bg,#080b10) 0%,transparent 75%)}
.zw-page[data-news-keycard] .zf-document{background:transparent!important}
/* C7, C9: on the filing card and the templates styled here, a label or small line is body text (--zk-body, news-keycard.css),
   never a smaller secondary size; phones keep their fitted sizes until the phone step. */
@media (min-width:601px){
  .zw-page[data-news-keycard] :is(.zf-card,.zk-card) :is(.zf-issuer>div>span,.zf-dates>span,.zf-dates button,.zf-items>span,.zf-document-origin,.zf-date-bridge,.zf-date-bridge small,dl.zf-dates dt,dl.zf-items dt,.zg-company-head>small,.zg-company-name>small,.zg-coin-legend>li,.zg-coin-legend>li>small,.zg-coin-legend>li>.zg-coin-range,.zg-doc-facts dt,.zg-doc-track li>span,.zg-doc-track li>time,.zg-figbar>span,.zg-row.zg-row-move>span,.zf-interval>span,.zf-date-bridge time,.zf-document-identity>span,.zf-document>blockquote,dl.zf-dates dd,dl.zf-items dd){font-size:var(--zk-body,15px)}
  .zw-page[data-news-keycard] :is(.zf-card,.zk-card) :is(.zf-document-identity>strong,.zg-company-name>strong){font-size:var(--zk-lead,28px)}
}

/* ---------- 2026-11-05 (Palash: "the filings have a really shit UI too theres no image") ---------- */
/* The filing key card is built like every other key card: the filer's logo on its white tile with the filer's name as the
   graphic, the form and what it is as the lead, the table (label | value in bordered cells, C15) and one foot line (C2).
   Every surface is the page's ground (C8): no tinted panel, no photograph, no gradient. */
.zf-card{background:var(--bg,#080b10)!important}
html[data-news-view] body .zw-page[data-news-keycard] .zf-card{background:transparent!important}
html body .zf-card.zf-card.zf-card .zf-company{display:flex!important;flex-direction:column;align-items:center;justify-content:center!important;gap:20px;background:var(--bg,#080b10)!important;border:1px solid var(--zk-cell,rgba(255,255,255,.2));border-radius:10px;padding:24px!important}
html body .zf-card.zf-card.zf-card .zf-company::after{display:none!important}
html body .zf-card.zf-card.zf-card .zf-issuer{flex-direction:column;align-items:center;text-align:center;gap:16px;padding:0!important;order:0}
html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark{width:clamp(96px,16cqw,168px);aspect-ratio:1;border-radius:18px;padding:16px;background:#fff}
html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark[data-zk-filled=mark]{width:auto;min-width:clamp(96px,16cqw,168px);max-width:min(80%,340px);height:clamp(96px,16cqw,168px);aspect-ratio:auto}
html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark[data-zk-filled=mark]>img{height:100%;width:auto;max-width:100%}
html body .zf-card.zf-card.zf-card .zf-issuer h3{margin:0!important;font-size:clamp(26px,3.4cqw,40px)!important}
html body .zf-card.zf-card.zf-card .zf-company>blockquote{margin:0;max-width:44ch;font:400 var(--zk-body,15px)/1.45 var(--sans,Arial);color:#fff;text-align:center}
html body .zf-card.zf-card.zf-card .zf-document{gap:16px!important;justify-content:center!important}
html body .zf-card.zf-card.zf-card .zf-document-identity{gap:8px}
html body .zf-card.zf-card.zf-card .zf-document-identity>:is(strong,span){font:500 var(--zk-lead,26px)/1.2 var(--sans,Arial)!important;color:#fff;letter-spacing:-.01em}
/* The table is the one table of every key card (news-keycard.css, "The table"). */
.zf-table time{white-space:nowrap}
.zf-foot{margin:0;font:400 var(--zk-body,15px)/1.4 var(--sans,Arial);color:#fff}
@media (max-width:600px){html body .zf-card.zf-card.zf-card .zf-company{padding:16px!important;gap:12px}html body .zf-card.zf-card.zf-card .zf-issuer{flex-direction:row;text-align:left}html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark{width:64px;padding:8px;border-radius:12px}html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark[data-zk-filled=mark]{height:64px;min-width:64px}}
@media (min-width:601px){html body .zf-card.zf-card.zf-card .zf-document-identity{display:block}html body .zf-card.zf-card.zf-card .zf-document-identity>strong::after{content:', '}}

/* Filing card, left side (Palash 2026-11-05: "way too much white space, can have some info on the left"): the filer's
   logo and name sit as one row at the top, and the interval from the event to the filing is drawn under it as a span
   with its day count, so the side carries information instead of one large logo. */
html body .zf-card.zf-card.zf-card .zf-company{justify-content:flex-start!important;align-items:stretch;gap:28px;padding:24px!important}
html body .zf-card.zf-card.zf-card .zf-issuer{flex-direction:row!important;align-items:center;text-align:left!important;gap:16px}
html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark{width:72px!important;height:72px;min-width:0!important;padding:10px;border-radius:14px}
html body .zf-card.zf-card.zf-card .zf-issuer>.zf-mark[data-zk-filled=mark]{width:auto!important;min-width:72px!important;max-width:200px;height:72px}
html body .zf-card.zf-card.zf-card .zf-issuer h3{font:500 var(--zk-lead,26px)/1.15 var(--sans,Arial);color:#fff;margin:0}
.zf-span{display:flex;flex-direction:column;gap:6px;margin-top:auto;margin-bottom:auto}
.zf-span-count{margin:0;font:500 var(--zk-body,15px)/1 var(--sans,Arial);color:#fff}
.zf-span-count b{font:500 clamp(48px,5vw,72px)/1 var(--sans,Arial);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:6px}
.zf-span-what{margin:0 0 18px;font:400 var(--zk-body,15px)/1.3 var(--sans,Arial);color:#fff}
.zf-span-line{position:relative;display:flex;justify-content:space-between;padding-top:18px;border-top:2px solid #fff}
.zf-span-line>span{position:relative;display:flex;flex-direction:column;gap:2px;font:400 var(--zk-body,15px)/1.3 var(--sans,Arial);color:#fff}
.zf-span-line>span:last-child{text-align:right;align-items:flex-end}
.zf-span-line>span>i{position:absolute;top:-25px;width:12px;height:12px;border-radius:50%;background:#fff}
.zf-span-line>span:first-child>i{left:-1px}.zf-span-line>span:last-child>i{right:-1px}
.zf-span-line time{font-weight:500;white-space:nowrap}

/* ---------- Proportions (Palash, 2026-11-06, open item 7 and "the sizing is still horrible for some markets") ---------- */
/* On a laptop and a desktop the filing card is drawn in the key card's proportions (news-keycard.css, "Proportions"): the
   stage 16px under the head (8px in the compact frame), the filer's panel and the record 32px apart (24px compact), both
   starting on one line. The panel reads from its top, never a logo alone in an empty frame: the filer's logo and name as
   one row (the logo on the Companies head's 64px tile, the name a lead value, C7), the event-to-filing span under it, then
   the filing's own words left-aligned with them, each 24px apart (16px compact). The record is the key card's side block:
   no inset of its own, the form and what it is at its top, the table under it on the same column edges as Read report at
   its foot. */
@media (min-width:901px){
  html[data-news-view] .zw-page[data-news-keycard] .zf-card>.zf-stage{gap:32px;padding-top:16px!important}
  html[data-news-view] .zw-page[data-news-keycard] .zw-workspace[data-zw-density=compact] .zf-card>.zf-stage{gap:24px;padding-top:8px!important}
  html[data-news-view] .zw-page[data-news-keycard] .zf-card>.zf-stage>.zf-document{padding:0!important}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card>.zf-stage>.zf-document{justify-content:flex-start!important}
  html[data-news-view] body .zw-page[data-news-keycard] .zw-workspace[data-zw-density=compact] .zf-card.zf-card.zf-card>.zf-stage>.zf-document{gap:8px!important}
  html[data-news-view] .zw-page[data-news-keycard] .zf-card>.zf-stage>.zf-document:has(>.zk-actions)>:first-child{margin-top:0}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card .zf-company{gap:24px;padding:24px!important}
  html[data-news-view] body .zw-page[data-news-keycard] .zw-workspace[data-zw-density=compact] .zf-card.zf-card.zf-card .zf-company{gap:16px;padding:16px!important}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card .zf-issuer>.zf-mark{width:64px!important;height:64px;padding:8px;border-radius:14px}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card .zf-issuer>.zf-mark[data-zk-filled=mark]{width:auto!important;min-width:64px!important;max-width:192px;height:64px}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card .zf-issuer h3{font-size:var(--zk-lead,26px)!important;line-height:1.15!important}
  html[data-news-view] .zw-page[data-news-keycard] .zf-card .zf-span{gap:8px;margin:0}
  html[data-news-view] .zw-page[data-news-keycard] .zf-card .zf-span-what{margin-bottom:16px}
  html[data-news-view] body .zw-page[data-news-keycard] .zf-card.zf-card.zf-card .zf-company>blockquote{max-width:none;text-align:left}
}

/* ---------- Item 16 (Palash, 2026-11-06 night): the finance chart says what its marks are, on the chart ---------- */
/* The blue line's label stands at its foot, in the row under the drawing ("Story, Nov 6, 1:27 AM ET"); the band's label
   inside the band's top ("Nov 5 session"); the key under the axis names both (news-story-graphics.js storyMark, bandMark,
   chartKey). The words are one ink at the body size (W2, C7): the colour is on the swatches. No label takes the pointer
   from the chart's readout. */
.zg-series>.zg-plot-mark{position:relative;height:20px;flex:none}
.zg-series>.zg-plot-mark>.zg-axis-mark{top:2px;font:400 var(--zk-body,13px)/18px var(--sans,Arial);color:#fff;pointer-events:none}
.zg-series>.zg-band-mark>.zg-band-label{font:500 var(--zk-body,13px)/18px var(--sans,Arial);color:#fff;pointer-events:none}
.zg-series>.zg-plot-mark+.zg-axis{margin-top:2px}
.zg-chart-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:6px;font:400 var(--zk-body,13px)/1.4 var(--sans,Arial);color:#fff}
.zg-chart-key>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.zg-key-band{flex:none;width:14px;height:12px;border-radius:2px;box-sizing:border-box;background:#ffffff24;border:1px solid #ffffff59}
.zg-key-band[data-dir=up]{background:#3ecf8e24;border-color:#3ecf8e8c}
.zg-key-band[data-dir=down]{background:#ff6b6b24;border-color:#ff6b6b8c}
.zg-key-line{flex:none;width:0;height:14px;border-left:2px dashed #9bc4ff}

/* ---------- Item 19 (Palash, 2026-11-06 night): the filing card is a finance card ---------- */
/* The card is drawn in the key card's own frame (zk-stage, zk-graphic, zk-side, news-keycard.css): the head row (the
   filer's logo 40px tall on its white tile, the listing beside it), the filer's share line under it on the shared chart,
   and beside them the fact block, its one foot line and Read report at the side's foot. The side's zf-document only holds
   Read report (news-studio.js reportCard puts it there), so it draws no box of its own. A wide mark is the filer's
   wordmark: the name is not printed beside it, so the filer is named once. */
.zf-chart-card .zf-line{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.zf-chart-card .zf-line>.zg-series{flex:1 1 auto;min-height:0}
.zf-chart-card .zf-line>.zf-span{margin:auto 0}
.zf-chart-card .zf-head{flex:none;display:flex;align-items:center;gap:14px;min-width:0}
html body .zf-card.zf-chart-card .zf-head>.zf-mark{flex:none;display:grid;place-items:center;width:auto;min-width:52px;max-width:240px;height:52px;aspect-ratio:auto;padding:6px 10px;border-radius:10px;background:#fff;box-sizing:border-box}
html body .zf-card.zf-chart-card .zf-head>.zf-mark[hidden]{display:none}
html body .zf-card.zf-chart-card .zf-head>.zf-mark>img{width:auto;height:40px;max-width:100%;object-fit:contain}
.zf-chart-card .zf-head:has(>.zf-mark[data-zk-filled=mark][data-zk-art-shape=wide]:not([hidden])) .zg-company-name>strong{display:none}
html body .zf-card.zf-card.zf-card.zf-chart-card .zk-side>.zf-document{display:contents!important}
html body .zf-card.zf-card.zf-card.zf-chart-card .zk-side>.zf-document>.zk-actions{margin:0!important}
.zf-chart-card .zf-chart-held>svg{flex:1 1 auto;min-height:0}
/* Off the desk (no key card to put Read report in the side), the report card's own actions strip sits over the card's
   foot: the card leaves it that room, so it never covers the facts or the dates. */
:is(.zw-workspace,#landingNewsStage,body) .zs-report-card>.zf-card.zf-chart-card:has(+.zs-report-card-actions){padding-bottom:72px!important}
@media (max-width:600px){html body .zf-card.zf-chart-card .zf-head>.zf-mark{height:44px;min-width:44px;padding:5px 8px}html body .zf-card.zf-chart-card .zf-head>.zf-mark>img{height:34px}}
