/* The product pages: search modal, company badges and tiles, the company view.
   Builds on ../styles.css (frame, tokens, buttons) and the chart kit's inspector in
   ../explore/lab/lab.css. */

/* ---------- badges: the company's mark in a small tile ---------- */
.badge { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--surface); border: var(--line) solid var(--stroke); color: var(--text); overflow: hidden; }
.badge svg { width: 20px; height: 20px; fill: currentColor; }
.badge.lg { width: 56px; height: 56px; border-radius: 14px; }
.badge.lg svg { width: 32px; height: 32px; }
.badge.wide svg { width: 28px; }        /* wordmarks (Disney, Costco, Lilly, Oracle) */
.badge.lg.wide svg { width: 44px; }

/* ---------- search modal ---------- */
.srch { position: fixed; inset: 0; z-index: 80; display: grid; align-content: start; justify-items: center; padding: min(12vh, 120px) 12px 24px; }
.srch[hidden] { display: none; }
.srch-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.srch-box { position: relative; width: min(640px, 100%); border: var(--line) solid var(--stroke-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.5); overflow: hidden; animation: srch-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes srch-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: none; } }
.srch-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px dotted var(--guide); }
.srch-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.srch-field input { flex: 1; min-width: 0; height: 58px; border: 0; background: none; color: var(--text); font: 400 17px/1 var(--sans); outline: none; }
.srch-field input::placeholder { color: var(--muted); }
.srch-field kbd, .srch-foot kbd { font: 400 10px/1 var(--mono); padding: 3px 5px 2px; border: var(--line) solid var(--stroke-strong); border-bottom-width: 2px; border-radius: 3px; color: var(--muted); background: var(--bg); }
.srch-list { list-style: none; margin: 0; padding: 6px; max-height: min(56vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.srch-list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.srch-list li[aria-selected="true"] { background: color-mix(in srgb, var(--text) 6%, transparent); }
.srch-name { font: 500 14px/1.2 var(--sans); color: var(--text); }
.srch-t { font: 400 11.5px/1 var(--mono); color: var(--text); padding: 4px 6px; border: var(--line) solid var(--stroke); border-radius: 3px; }
.srch-sec { font: 400 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; min-width: 86px; text-align: right; }
.srch mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 2px; }
.srch-status { margin: 0; padding: 10px 16px 14px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.srch-status:empty { display: none; }
.srch-foot { display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px dotted var(--guide); font: 400 10.5px/1 var(--mono); text-transform: uppercase; color: var(--muted); }
.srch-foot kbd { margin-right: 4px; }
.srch-n { margin-left: auto; }
html.srch-open { overflow: hidden; }
@media (max-width: 560px) {
  .srch { padding-top: 12px; }
  .srch-sec { display: none; }
  .srch-field input { height: 52px; font-size: 16px; }
}

/* the search button that looks like a field (hero) and the nav button */
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 11px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); color: var(--muted); font: 400 12px/1 var(--sans); cursor: text; white-space: nowrap; }
.search-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.search-btn kbd { margin-left: 6px; font: 400 10px/1 var(--mono); padding: 2px 4px; border: var(--line) solid var(--stroke); border-radius: 3px; }
.search-btn:hover { border-color: var(--stroke-strong); color: var(--text); }
.search-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* the nav keeps the search as an icon on phones */
@media (max-width: 560px) { .nav .search-btn { padding: 0 9px; } .nav .search-btn span, .nav .search-btn kbd { display: none; } }

/* ---------- the company tiles on the landing ---------- */
.co-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: calc(-1 * var(--pad)); }
.co-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 18px 20px; border-left: 1px dotted var(--guide); border-top: 1px dotted var(--guide); text-decoration: none; color: var(--text); min-width: 0; }
.co-tile:nth-child(5n + 1) { border-left-color: transparent; }
.co-tile:nth-child(-n + 5) { border-top-color: transparent; }
.co-tile .badge { grid-row: span 2; }
.co-tile b { font: 500 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-tile small { font: 400 11px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.co-tile:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.co-tile:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .co-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .co-tile:nth-child(n) { border-left-color: var(--guide); border-top-color: var(--guide); } .co-tile:nth-child(3n + 1) { border-left-color: transparent; } .co-tile:nth-child(-n + 3) { border-top-color: transparent; } }
@media (max-width: 560px) { .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .co-tile { padding: 14px; gap: 1px 10px; } .co-tile > * { min-width: 0; } .co-tile small { white-space: normal; } .co-tile:nth-child(n) { border-left-color: var(--guide); border-top-color: var(--guide); } .co-tile:nth-child(2n + 1) { border-left-color: transparent; } .co-tile:nth-child(-n + 2) { border-top-color: transparent; } }

/* ---------- the company view ---------- */
/* the badge sits on the name's row only, centred on it; the meta line hangs under the name */
.co-head { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 22px; row-gap: 14px; padding-block: 48px 36px; }
.co-head .badge { grid-row: 1; grid-column: 1; }
.co-head h1 { grid-row: 1; grid-column: 2; margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.co-meta { grid-row: 2; grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 400 11px/1.5 var(--mono); text-transform: uppercase; color: var(--muted); }
.co-meta b { color: var(--text); font-weight: 400; }
/* the EDGAR link, behind a small i: hover or focus shows what it opens */
.co-info { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: var(--line) solid var(--stroke-strong); color: var(--muted); text-decoration: none; }
.co-info i { font: 500 10px/1 var(--sans); font-style: normal; transform: translateY(-0.5px); }
.co-info:hover, .co-info:focus-visible { color: var(--text); border-color: var(--text); outline: none; }
.co-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(3px); padding: 5px 8px; border-radius: 3px; background: var(--tick); color: var(--chart-bg); font: 400 10.5px/1 var(--mono); text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; }
.co-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--tick); }
.co-info:hover .co-tip, .co-info:focus-visible .co-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(-1 * var(--pad)); }
.kpi { padding: 22px var(--pad) 24px; border-left: 1px dotted var(--guide); min-width: 0; }
.kpi:first-child { border-left-color: transparent; }
.kpi small { display: block; font: 400 11px/1.4 var(--mono); text-transform: uppercase; color: var(--muted); }
.kpi b { display: block; margin-top: 6px; font: 600 clamp(24px, 2.6vw, 32px)/1 var(--heading-face); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi i { display: block; margin-top: 6px; font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.kpi .up { color: var(--cobalt); } .kpi .down { color: var(--cherry); }
.co-chart { display: flex; flex-direction: column; gap: 16px; padding-block: 36px 40px; }
.co-chart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.co-chart h2 { font-size: clamp(24px, 2.8vw, 34px); max-width: 24ch; }
.co-chart .lab-deck { font-size: 15px; max-width: 64ch; }
.co-chart .lab-fig { margin-top: 10px; }
.co-chart .lab-note { margin-top: 26px; }
.co-chart .seg { flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend button { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 8px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 11.5px/1 var(--mono); cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.legend button i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); transition: background 0.15s, box-shadow 0.15s; }
.legend button span { font-variant-numeric: tabular-nums; color: var(--muted); }
.legend button:hover { border-color: var(--stroke-strong); }
.legend button:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.legend button[aria-pressed="false"] { color: var(--muted); border-style: dashed; }
.legend button[aria-pressed="false"] i { background: none; box-shadow: inset 0 0 0 1px var(--c); }
.legend .legend-hint { align-self: center; font: 400 10.5px/1 var(--mono); text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.co-stage { padding-bottom: 38px; }
.legend[hidden], .legend button[hidden] { display: none; }
/* the chart toolbar: the metric tabs, then the period and the range */
.co-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.co-toolbar > .lab-row { min-width: 0; max-width: 100%; }
.co-toolbar .seg { flex: 0 1 auto; min-width: 0; } /* on a phone the metric tabs wrap inside their box */
/* the stacked bars: a segment in its colour, a loss as a hollow bar below zero, the rest dimmed while one is hot */
.lab-svg .stk-r { fill: var(--c); transition: opacity 0.15s; }
.lab-svg .stk-r.neg { fill: var(--chart-bg); stroke: var(--c); stroke-width: 1.25; }
.lab-svg g.focus .stk-r:not(.on) { opacity: 0.35; }
/* trend lines over the bars: ink, one dash each, a dot per value; a line draws in from the left and fades out */
.lab-svg .stk-ln { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke-width 0.15s; }
.lab-svg .stk-ln-halo { fill: none; stroke: var(--chart-bg); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.lab-svg .stk-pt { fill: var(--chart-bg); stroke: var(--text); stroke-width: 1.5; cursor: pointer; }
.lab-svg .stk-ln-g { clip-path: inset(0 0 0 0); transition: opacity 0.25s, clip-path 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); }
.lab-svg .stk-ln-g.in { clip-path: inset(0 100% 0 0); transition: none; }
.lab-svg .stk-ln-g.out { opacity: 0; pointer-events: none; }
.lab-svg .stk-ln-g.on .stk-ln { stroke-width: 2.4; }
.lab-svg .stk-lines.focus .stk-ln-g:not(.on) { opacity: 0.35; }
/* the flow: nodes in their colour (costs softened, a loss hollow), ribbons in the source's colour at low opacity;
   hover lights a node's ribbons and fades the rest */
.lab-svg .fl-node { fill: var(--c); transition: opacity 0.15s; }
.lab-svg .fl-node.cost { fill: color-mix(in oklab, var(--c) 78%, var(--chart-bg)); }
.lab-svg .fl-node.income { fill: color-mix(in oklab, var(--c) 62%, var(--chart-bg)); }
.lab-svg .fl-node.loss { fill: var(--chart-bg); stroke: var(--c); stroke-width: 1.25; }
/* each ribbon is painted with its gradient (--g, set by flow.js: source colour into destination colour) */
.lab-svg .fl-link { fill: var(--g, var(--c)); fill-opacity: 0.3; stroke: var(--g, var(--c)); stroke-opacity: 0.45; stroke-width: 0.6; transition: fill-opacity 0.15s, stroke-opacity 0.15s; cursor: pointer; }
.lab-svg .fl-link.on { fill-opacity: 0.62; stroke-opacity: 0.8; }
.lab-svg.focus .fl-link:not(.on) { fill-opacity: 0.08; stroke-opacity: 0.15; }
.lab-svg.focus .fl-node:not(.on) { opacity: 0.35; }
.lab-svg .fl-name { fill: var(--text); font-size: 11px; }
.lab-svg .fl-val { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fl-years { flex: 1 1 100%; min-width: 0; }
.fl-years .yr { width: 100%; }
/* ---------- the company bar: slides in under the nav once the big header has scrolled away. It lies
   over the page rather than pushing it down, so the header keeps one height and nothing jumps (a bar
   that pushed the page could bring the big header back into view and flicker on and off) */
.co-bar { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s; }
.co-bar.on { max-height: 64px; opacity: 1; pointer-events: auto; }
/* a link to a section stops below the bar as well as the nav */
#co > section[id] { scroll-margin-top: 46px; }
.co-bar-cell { display: flex; align-items: center; gap: 12px; padding-block: 8px; min-width: 0; }
.co-bar .badge { width: 28px; height: 28px; border-radius: 7px; }
.co-bar .badge svg { width: 16px; height: 16px; }
.co-bar .badge.wide svg { width: 22px; }
.co-bar-name { font: 600 15px/1 var(--brand-face); letter-spacing: -0.02em; white-space: nowrap; }
.co-bar-t { font: 400 11px/1 var(--mono); color: var(--muted); }
.co-bar-stats { display: flex; gap: 18px; margin-left: 10px; padding-left: 16px; border-left: 1px dotted var(--guide); min-width: 0; overflow: hidden; }
.co-bar-stats > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font: 400 11px/1 var(--mono); }
.co-bar-stats small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.co-bar-stats b { font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.co-bar-stats i { font-style: normal; }
.co-bar-stats .up { color: var(--cobalt); }
.co-bar-stats .down { color: var(--cherry); }
.co-bar-links { margin-left: auto; display: flex; gap: 14px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.co-bar-links a { color: var(--muted); text-decoration: none; }
.co-bar-links a:hover { color: var(--text); }
@media (max-width: 760px) { .co-bar-links, .co-bar-stats > span:nth-child(n + 2), .co-bar-stats small { display: none; } .co-bar-stats { margin-left: 4px; padding-left: 10px; gap: 10px; } }
/* ---------- Deep: an expandable section of modules; two open, the rest for members behind a blurred curtain */
.deep { border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); }
.deep summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.deep summary::-webkit-details-marker { display: none; }
.deep summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.deep summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.deep-sum-t { color: var(--text); }
.deep-sum-n { color: var(--muted); margin-left: auto; }
.deep-chev { width: 8px; height: 8px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: rotate(45deg); transition: transform 0.25s; margin: -3px 2px 0 0; }
.deep[open] .deep-chev { transform: rotate(-135deg); margin-top: 3px; }
.deep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px dotted var(--guide); }
.deep-mod { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 22px; border-bottom: 1px dotted var(--guide); min-width: 0; }
.deep-mod:nth-child(odd) { border-right: 1px dotted var(--guide); }
.deep-mod-h h3 { margin: 0 0 4px; font: 600 17px/1.2 var(--brand-face); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.deep-mod-h p { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--muted); max-width: 48ch; }
.deep-mod .co-stage { padding-bottom: 30px; }
.deep-mod .lab-fig { margin-top: 2px; }
.deep-tag { font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: var(--line) solid var(--stroke-strong); border-radius: 3px; padding: 3px 5px; }
.deep-lock { position: relative; display: flex; align-items: flex-end; gap: 6%; height: 150px; padding: 0 6% 0 6%; border: 1px dotted var(--guide); border-radius: var(--radius); background: var(--chart-bg); overflow: hidden; filter: blur(2.5px); opacity: 0.55; }
.deep-lock i { flex: 1; background: var(--text); border-radius: 2px 2px 0 0; opacity: 0.35; }
.deep-lock i:nth-child(1) { height: 28%; } .deep-lock i:nth-child(2) { height: 36%; } .deep-lock i:nth-child(3) { height: 31%; } .deep-lock i:nth-child(4) { height: 48%; } .deep-lock i:nth-child(5) { height: 54%; } .deep-lock i:nth-child(6) { height: 61%; } .deep-lock i:nth-child(7) { height: 74%; } .deep-lock i:nth-child(8) { height: 86%; }
.deep-unlock { align-self: flex-start; }
.deep-empty { font-size: 14px; margin: 0; }
.deep .lab-note { padding: 16px 18px 20px; margin: 0; }
@media (max-width: 760px) { .deep-grid { grid-template-columns: 1fr; } .deep-mod:nth-child(odd) { border-right: 0; } }
/* ---------- the earnings calendar: a month of weekdays; reported releases solid, projected ones dashed */
.cal-head { padding-block: 48px 8px; }
.cal-wrap { display: flex; flex-direction: column; gap: 16px; padding-block: 28px 40px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-month { font-size: clamp(22px, 2.6vw, 30px); margin: 0 6px; min-width: 9ch; }
.cal-btn { height: 30px; min-width: 30px; padding: 0 9px; border: var(--line) solid var(--stroke-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 12px/1 var(--mono); text-transform: uppercase; cursor: pointer; }
.cal-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.cal-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.cal-key { display: flex; gap: 14px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--text); }
.cal-key .k-rep { background: var(--text); }
.cal-key .k-est { border-style: dashed; }
.cal-key .k-all { border: 0; background: color-mix(in srgb, var(--text) 14%, transparent); }
.cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--chart-bg); overflow: hidden; }
.cal-dow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px dotted var(--guide); }
.cal-dow span { padding: 8px 10px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cal-day { position: relative; min-height: 96px; padding: 8px 8px 26px; border: 0; border-right: 1px dotted var(--guide); border-bottom: 1px dotted var(--guide); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; transition: background 0.15s; animation: cal-in 0.35s both; animation-delay: calc(var(--i, 0) * 12ms); }
.cal-day:nth-child(5n + 1) { border-right: 0; }
.cal-day:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cal-day:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; z-index: 1; }
.cal-day.out { color: var(--muted); }
.cal-day.out .cal-badges { opacity: 0.55; }
.cal-day.sel { background: color-mix(in srgb, var(--text) 7%, transparent); }
.cal-day .cal-n { font: 500 12px/1 var(--mono); }
.cal-day.today .cal-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: -4px 0 0 -5px; border-radius: 10px; background: var(--text); color: var(--on-ink, var(--chart-bg)); }
.cal-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.cal-day .badge { width: 22px; height: 22px; border-radius: 5px; animation: cal-pop 0.3s both; animation-delay: calc(var(--i, 0) * 30ms + 100ms); }
.cal-day .badge svg { width: 13px; height: 13px; }
.cal-day .badge.wide svg { width: 18px; }
.cal-row .badge { width: 26px; height: 26px; border-radius: 6px; }
.cal-row .badge svg { width: 15px; height: 15px; }
.cal-row .badge.wide svg { width: 21px; }
.badge.est, .badge.due { border-style: dashed; border-color: var(--text); }
.badge.due { border-color: var(--cherry); }
/* a filer's own logo, fetched from the website it lists with the SEC; without one, its ticker's first letters */
.badge.img { padding: 3px; background: #fff; }
.badge.img.wide { padding: 2px 1px; }
.badge.img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.badge.mono { font: 500 8.5px/1 var(--mono); letter-spacing: 0.02em; color: var(--muted); }
.cal-chip .chip-logo { width: 14px; height: 14px; object-fit: contain; align-self: center; margin-right: 1px; }
.cal-more { font: 400 10px/1 var(--mono); color: var(--muted); padding: 0 4px; }
.cal-key .k-all { width: auto; height: 12px; padding: 0 2px; font: 500 7px/12px var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--stroke); }
.cal-grid.still .cal-day, .cal-grid.still .badge { animation: none; }
/* the day popover: fades and lifts in; sits over the sticky header */
.cal-pop { position: fixed; z-index: 30; width: min(380px, calc(100vw - 16px)); overflow: auto; padding: 14px 16px 10px; border: var(--line) solid var(--stroke-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); opacity: 0; transform: translateY(5px); transition: opacity 0.16s, transform 0.18s cubic-bezier(0.3, 0.7, 0.2, 1); pointer-events: none; }
.cal-pop.on { opacity: 1; transform: none; pointer-events: auto; }
.cal-pop-h { margin: 0 0 8px; font: 600 14px/1.2 var(--brand-face); letter-spacing: -0.02em; }
.cal-pop .cal-row { padding: 8px 0; }
.cal-pop .cal-sub { margin: 10px 0 6px; }
.cal-pop .cal-chips { gap: 4px; }
.cal-pop .cal-chip { height: 24px; font-size: 10.5px; line-height: 24px; }
.cal-pop .cal-chip span { max-width: 16ch; }
.cal-pop-foot { margin: 10px 0 0; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cal-pop .cal-empty { font-size: 13px; margin: 0; }
.cal-grid.turn-r .cal-day { animation-name: cal-in-r; }
.cal-grid.turn-l .cal-day { animation-name: cal-in-l; }
@keyframes cal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cal-in-r { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes cal-in-l { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes cal-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.cal-detail { border-top: 1px dotted var(--guide); padding-top: 18px; }
.cal-detail-h { margin: 0 0 12px; font: 600 16px/1.2 var(--brand-face); letter-spacing: -0.02em; }
.cal-rows, .cal-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--guide); }
.cal-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-row-t a { color: var(--text); text-decoration: none; font: 600 14px/1.2 var(--sans); }
.cal-row-t a:hover { text-decoration: underline; }
.cal-row-t small, .cal-row-d small { font: 400 11px/1.4 var(--mono); color: var(--muted); }
.cal-row-t small b { color: var(--text); font-weight: 500; }
.cal-row-d { display: flex; flex-direction: column; gap: 3px; min-width: 9ch; }
.cal-row-d b { font: 500 12px/1.2 var(--mono); }
.cal-next .cal-row { cursor: pointer; }
.cal-next .cal-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cal-sub { margin: 16px 0 8px; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; height: 26px; padding: 0 9px; border: var(--line) solid var(--stroke); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font: 400 11px/26px var(--mono); }
.cal-chip b { font-weight: 500; }
.cal-chip span { color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover { border-color: var(--stroke-strong); }
.cal-empty { font-size: 14px; }
@media (max-width: 640px) { .cal-day { min-height: 72px; padding: 6px 4px 8px; } .cal-day .badge { width: 18px; height: 18px; border-radius: 4px; } .cal-day .badge svg { width: 11px; height: 11px; } .badge.mono { font-size: 7.5px; } .cal-key { display: none; } }
/* the trend-line chips: a dash swatch each */
.lines .lines-hint { margin: 0 2px 0 0; }
.lines .ln-chip { gap: 8px; padding-left: 9px; }
.lines .sw { width: 22px; height: 8px; overflow: visible; }
.lines .sw path { stroke: var(--text); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.lines .sw circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.3; }
.lines .ln-chip[aria-pressed="false"] .sw { opacity: 0.45; }
.co-sources summary { cursor: pointer; font: 400 11px/1.6 var(--mono); text-transform: uppercase; color: var(--muted); }
.co-sources summary:hover { color: var(--text); }
.co-sources .lab-note { margin-top: 10px; }
.co-foot { display: flex; flex-direction: column; gap: 10px; padding-block: 36px 44px; }
/* the filings picker: a 10-K / 10-Q switch, the picker (kit.js), a button that opens the filing on EDGAR */
.src-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.src-pick .btn { height: 30px; }
@media (max-width: 960px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(2n + 1) { border-left-color: transparent; } .kpi:nth-child(n + 3) { border-top: 1px dotted var(--guide); } .co-head { padding-block: 36px 24px; column-gap: 16px; row-gap: 10px; } }