/* On the business: company and people pages.
   Those pages come from otrecord.news (built by backend/otr_backend/build/pages.py, person_deep.py,
   company_deep.py); the business Worker adds this file and bizpage.js to them on this host only, so
   the markup stays exactly what the iOS app parses on otrecord.news. Everything here is additive:
   a wider page that lines up with our masthead, the price beside the name, a key-numbers grid, a
   sticky section bar under the masthead, an outline rail, and denser tables. Loads after the main
   site's styles.css, so equal specificity wins. Layout rules are CSS only (no shift when the script
   runs); the script adds the bar, the grid, the outline and the "Show all" buttons. */
:root { --bp-top: 56px; --bp-bar: 48px; --bp-off: calc(var(--bp-top) + var(--bp-bar) + 16px); --bp-wash: #F6F6F3; --bp-up: #0B6B2E; --bp-down: #B00020; }
html { scroll-padding-top: var(--bp-off); }
/* The page's own scroll-margin would add to this; the padding alone clears the masthead and bar. */
main .p-body section, main section.sources, main [id] { scroll-margin-top: 0; }
/* Room the section bar will take, so inserting it doesn't move the page (bizpage.js swaps this out). */
main > .p-body { margin-top: var(--bp-bar); }
html.bp-on main > .p-body { margin-top: 0; }

/* ---------- Page width: line up with the black masthead (1480px, 40px gutters) ---------- */
main .wrap { max-width: 1480px; padding: 0 40px; }
@media (max-width: 640px) { main .wrap { padding: 0 16px; } }

/* ---------- Company header: identity on the left, the price on the right ---------- */
.co-head { padding-top: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--rail); }
.co-head h1, .pe-head h1 { font-size: clamp(40px, 5.4vw, 84px); max-width: 20ch; }
.co-head .lede { font-size: 20px; max-width: 60ch; }
@media (min-width: 1100px) {
  .co-head .wrap:has(> .px) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: repeat(8, auto); column-gap: 72px; align-items: start; }
  .co-head .wrap:has(> .px) > * { grid-column: 1; }
  .co-head .wrap:has(> .px) > .px { grid-column: 2; grid-row: 1 / 3; margin: 0; padding-top: 14px; border-top: 3px solid var(--ink); }
  .co-head .wrap:has(> .px) > .bp-perf { grid-column: 2; grid-row: 3 / -1; }
}
.co-head .px-v { font-size: 44px; line-height: 1; }
.co-head .px-ch { font-size: 18px; }

/* Returns and market value under the price (from the market snapshot, movers.json) */
.bp-perf { margin: 18px 0 0; }
.bp-perf dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.bp-perf dl > div { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--rail); min-width: 0; }
.bp-perf dt { font-size: 12.5px; color: var(--quiet); white-space: nowrap; }
.bp-perf dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-perf dd.up { color: var(--bp-up); }
.bp-perf dd.down { color: var(--bp-down); }
.bp-perf .bp-mv { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font-size: 15px; }
.bp-perf .bp-mv b { font-weight: 800; font-variant-numeric: tabular-nums; }
.bp-perf .bp-mv span { color: var(--quiet); }
.bp-perf .bp-note { margin: 8px 0 0; font-size: 12.5px; color: var(--quiet); line-height: 1.45; }

/* ---------- Person header: photo, name, and the facts as figures ---------- */
.pe-head { padding-top: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--rail); }
.pe-head .wrap { align-items: flex-start; gap: 40px; }
.pe-head .pe-photo { flex: none; margin: 10px 0 0; max-width: 200px; }
.pe-head .ph { width: 200px; height: 200px; }
.pe-head .pe-photo figcaption { font-size: 12px; color: var(--quiet); margin-top: 6px; line-height: 1.4; }
.pe-head .pe-lead { font-size: 20px; max-width: 62ch; }
.bp-glance { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 190px); width: max-content; max-width: 100%; margin: 22px 0 0; border-top: 2px solid var(--ink); }
.bp-glance > div { padding: 10px 20px 10px 0; border-bottom: 1px solid var(--rail); min-width: 0; }
.bp-glance dt { font-size: 13px; color: var(--quiet); }
.bp-glance dd { margin: 3px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bp-glance dd small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--quiet); }
.bp-glance dd small a { color: inherit; }
.bp-glance sup.c { font-size: 11px; }
.pe-head .updated.bp-moved { display: none; }
@media (max-width: 640px) {
  .pe-head .wrap { gap: 16px; }
  .pe-head .pe-photo { max-width: 120px; }
  .pe-head .ph { width: 120px; height: 120px; }
  .pe-head .pe-lead { font-size: 18px; }
  .bp-glance { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
  .bp-glance dd { font-size: 19px; }
}

/* ---------- Section bar: sticky under the masthead ---------- */
.bp-bar { position: sticky; top: var(--bp-top); z-index: 50; height: var(--bp-bar); background: var(--paper); border-bottom: 1px solid var(--rail); font-family: var(--sans); }
.bp-bar-in { max-width: 1480px; margin: 0 auto; padding: 0 40px; height: 100%; display: flex; align-items: stretch; gap: 0; }
.bp-who { flex: none; display: flex; align-items: center; gap: 10px; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; text-decoration: none; transition: max-width .25s var(--ease), opacity .2s, margin .25s var(--ease); }
.bp-bar.bp-stuck .bp-who { max-width: 340px; opacity: 1; margin-right: 22px; }
.bp-who b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.bp-who .bp-px { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-who .bp-px .up { color: var(--bp-up); }
.bp-who .bp-px .down { color: var(--bp-down); }
.bp-who img { width: 24px; height: 24px; object-fit: contain; }
html.bp-pe .bp-who img { object-fit: cover; object-position: 50% 20%; border-radius: 50%; }
.bp-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.bp-tabs::-webkit-scrollbar { display: none; }
.bp-tabs li { flex: none; display: flex; margin: 0; }
.bp-tabs a { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 15px; font-weight: 600; color: #3a3a38; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .15s, color .15s; }
.bp-tabs a:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--faint); }
.bp-tabs a[aria-current] { color: var(--ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--ink); }
.bp-tabs .bp-n { font-size: 12.5px; font-weight: 600; color: var(--quiet); font-variant-numeric: tabular-nums; }
.bp-tabs li:last-child a { margin-right: 28px; }
.bp-all { flex: none; align-self: center; margin-left: 8px; display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font: 600 14px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--faint); border-radius: 6px; cursor: pointer; }
.bp-all:hover, .bp-all[aria-expanded="true"] { border-color: var(--ink); }
.bp-all::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
@media (max-width: 1099px) { .bp-all { display: flex; } }
@media (max-width: 999px) { .bp-bar .bp-who { display: none; } }
@media (max-width: 640px) {
  .bp-bar-in { padding: 0 0 0 8px; }
  .bp-who { display: none; }
  .bp-tabs a { padding: 0 10px; font-size: 14.5px; }
  .bp-all { margin: 0 8px 0 2px; padding: 0 10px; }
  .bp-all span { display: none; }
}
@media print { .bp-bar, .bp-rail { display: none !important; } main > .p-body { margin-top: 0; } }

/* ---------- Body: a wide reading column and an outline rail ---------- */
@media (min-width: 1100px) {
  main .p-body { grid-template-columns: minmax(0, 1fr) 260px; justify-content: stretch; gap: 64px; }
}
main .p-body section { padding-bottom: 56px; }
main .p-body p { max-width: 70ch; }
/* Lists that are charts or tables in disguise (the leadership timeline, roles, holdings) take the
   full column, so their rows line up with their axes; prose lists keep a reading measure. */
main .p-body li { max-width: none; }
main .p-body .story-text li, main .p-body section > ul:not([class]) > li, main .p-body section > ol:not([class]) > li { max-width: 70ch; }
/* Small print the main stylesheet sets at 13-14px but its ".p-body p" rule outranks */
main .p-body .pc-meta { font-size: 13px; line-height: 1.5; }
main .p-body .fin-note, main .p-body .src-note { font-size: 14px; line-height: 1.5; }
main .p-body h2 { max-width: none; }
html.bp-on main .p-body > nav.toc { display: none; }

/* The outline: groups, then their sections; the one you're reading is marked */
.bp-rail { min-width: 0; }
.bp-rail .bp-toc { position: sticky; top: calc(var(--bp-off) + 4px); max-height: calc(100vh - var(--bp-off) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 4px 12px 12px; margin-left: -12px; font-size: 14px; }
.bp-rail .bp-toc-h, main .p-body .bp-toc-h { margin: 0 0 8px; font-size: 13px; line-height: 1.3; font-weight: 800; color: var(--quiet); max-width: none; }
.bp-toc ol { list-style: none; margin: 0; padding: 0; }
.bp-toc > ol { border-top: 2px solid var(--ink); }
.bp-rail .bp-toc li { margin: 0; font-size: 14px; line-height: 1.35; max-width: none; }
.bp-rail .bp-toc > ol > li { padding: 7px 0; border-bottom: 1px solid var(--rail); }
.bp-toc a { display: block; text-decoration: none; color: var(--ink); }
.bp-toc .bp-g { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0 4px 12px; margin-left: -12px; font-weight: 800; border-left: 3px solid transparent; }
.bp-toc .bp-g .bp-n { font-weight: 600; font-size: 12.5px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.bp-toc ol ol { margin: 2px 0 0; }
.bp-toc ol ol a { padding: 3px 0 3px 12px; margin-left: -12px; color: #4a4a47; border-left: 3px solid transparent; line-height: 1.35; }
.bp-toc ol ol a small { display: block; font-size: 12px; color: var(--quiet); }
.bp-toc a:hover { text-decoration: underline; }
.bp-toc a[aria-current] { border-left-color: var(--ink); color: var(--ink); }
.bp-toc ol ol a[aria-current] { font-weight: 700; }
.bp-toc .bp-src-link { color: var(--cite); }
@media (max-width: 1099px) {
  .bp-rail { display: none; }
  /* Small screens: the outline opens as a panel from the bar's "Sections" button */
  .bp-rail.bp-open { display: block; position: fixed; z-index: 55; top: calc(var(--bp-top) + var(--bp-bar) + 6px); right: 12px; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - var(--bp-top) - var(--bp-bar) - 24px); overflow: auto; background: var(--paper); border: 1px solid var(--ink); border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); padding: 14px 18px 8px; }
  .bp-rail.bp-open .bp-toc { position: static; max-height: none; overflow: visible; }
}

/* ---------- Key numbers grid (from financials.json and the market snapshot) ---------- */
.bp-stats { margin: 4px 0 8px; }
.bp-stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 2px solid var(--ink); }
.bp-stats dl > div { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--rail); min-width: 0; }
.bp-stats dl > div + div { padding-left: 16px; border-left: 1px solid var(--rail); }
.bp-stats dl > div:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.bp-stats dt { font-size: 13.5px; color: var(--quiet); line-height: 1.3; }
.bp-stats dd { margin: 4px 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bp-stats dd sup.c { font-size: 11px; letter-spacing: 0; }
.bp-stats .bp-d { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--quiet); }
.bp-stats .bp-d.up { color: var(--bp-up); }
.bp-stats .bp-d.down { color: var(--bp-down); }
.bp-stats .bp-note { margin: 10px 0 0; font-size: 13px; color: var(--quiet); max-width: 90ch; line-height: 1.5; }
.bp-stats .bp-note a { color: var(--cite); }
#overview > .tally.bp-moved { display: none; }
@media (max-width: 900px) {
  .bp-stats dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-stats dl > div:nth-child(4n + 1) { padding-left: 16px; border-left: 1px solid var(--rail); }
  .bp-stats dl > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .bp-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-stats dl > div:nth-child(3n + 1) { padding-left: 16px; border-left: 1px solid var(--rail); }
  .bp-stats dl > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .bp-stats dd { font-size: 22px; }
}

/* ---------- Using the width: facts in two columns, charts in three ---------- */
@media (min-width: 1240px) {
  #overview > .ruled { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  #overview > .ruled > li { grid-template-columns: 150px minmax(0, 1fr); }
  #work > .ruled.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  #work > .ruled.roles > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fcharts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-body .tally:not(.fin-tally) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ruled > li > b { font-size: 15.5px; }
.ruled > li > span { font-size: 16.5px; }
.co-photo img { max-height: 420px; width: auto; }

/* ---------- Tables: dense, tabular, right-aligned numbers, scroll inside the table only ---------- */
main .p-body .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 4px 0 12px; }
main .p-body table.fin { font-size: 14.5px; }
main .p-body table.fin th, main .p-body table.fin td { padding: 8px 14px 8px 0; vertical-align: top; }
main .p-body table.fin td:last-child, main .p-body table.fin th:last-child { padding-right: 2px; }
main .p-body table.fin thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); font-size: 13px; font-weight: 700; color: #3a3a38; vertical-align: bottom; box-shadow: inset 0 -2px 0 var(--ink); border-bottom: 0; }
main .p-body table.fin tbody tr:hover > * { background: var(--bp-wash); }
main .p-body table.fin small { display: block; font-size: 12.5px; color: var(--quiet); font-weight: 400; }
main .p-body table.fin td.up { color: var(--bp-up); font-weight: 600; }
main .p-body table.fin td.down { color: var(--bp-down); font-weight: 600; }
/* Long tables, once opened in full, scroll inside a box so the header stays in view */
main .p-body .table-wrap.bp-tall { max-height: 72vh; overflow: auto; border-bottom: 1px solid var(--rail); }

/* ---------- Long lists and tables: the first ten, then "Show all" ---------- */
.bp-cut > li:nth-child(n + 11), table.bp-cut > tbody > tr:nth-child(n + 11) { display: none; }
.bp-more { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 18px; padding: 8px 14px; font: 600 14.5px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.bp-more:hover { background: var(--ink); color: var(--paper); }
.bp-more::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
.bp-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .co-head { padding-top: 28px; }
  .co-head .lede { font-size: 18px; }
  .co-head .px-v { font-size: 36px; }
  .bp-perf dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main .p-body section { padding-bottom: 40px; }
  main .p-body table.fin { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bp-who, .bp-tabs a { transition: none; } }