/* The prices pages (R164, 20 October 2026): /prices/ and the pages under it, on the docs' own sheets (docs.css,
   shared/site-header.css, shared/site-nav.css), which give the header, the type, the stats band, the strip and the
   footer. This sheet adds what only these pages have, from the canvas "Prices pages" (version 10): the screener, the
   price block, the chart, the lots on sale, the questions and the related cards. Every value is the canvas's own.
   Under /shared/, which _headers serves revalidating, so a change needs no ?v= bump. One radius (--r1), and 50% for a
   chart's dot only. */
.pp { --up: #6FD49A; --down: #FF8A8A; --line: rgba(243,242,242,.1); --line2: rgba(243,242,242,.14); --mut: rgba(243,242,242,.6); --mut2: rgba(243,242,242,.45); color-scheme: dark; }
.pp .tabs a.on { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(243,242,242,.5); text-underline-offset: 8px; }
.pp .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pp-main.pp-crumbed { padding-top: 40px; }
.pp .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mut2); }
.pp .crumbs a { color: var(--mut); }
.pp .crumbs a:hover { color: #fff; }
.pp .crumbs + .eyebrow-bar { margin-top: 40px; }
.pp .crumbs-low { display: none; margin: 40px 0 0; }
.pp .stats { margin-top: 56px; }
.pp .stat .num { font-variant-numeric: tabular-nums; }
.pp .stats-cap { margin-top: 6px; padding-left: 22px; }
.pp .cap-short { display: none; }

/* the screener */
.pp .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 48px; padding: 8px; border: 1px solid var(--line2); border-radius: var(--r1); background: rgba(243,242,242,.03); }
.pp .seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r1); background: rgba(243,242,242,.06); overflow-x: auto; max-width: 100%; }
.pp .seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r1); background: transparent; color: rgba(243,242,242,.72); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pp .seg button:hover { color: #fff; }
.pp .seg button.on { background: var(--paper); color: var(--ink); }
.pp .find { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); background: rgba(243,242,242,.06); color: var(--mut); }
.pp .find:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(143,167,240,.18); }
.pp .find input { width: 190px; border: 0; background: transparent; color: var(--paper); font: 14px var(--sans); outline: none; }
.pp .find input::placeholder { color: rgba(243,242,242,.55); }
.pp .cur { font-size: 12px; letter-spacing: .12em; color: var(--mut); padding: 0 6px; }
.pp .grid { margin-top: 10px; border: 1px solid var(--line2); border-radius: var(--r1); overflow: hidden; }
.pp .row { display: grid; grid-template-columns: 32px minmax(0,2.4fr) minmax(0,1fr) 68px 68px 60px minmax(0,.9fr) 52px 56px 80px; align-items: center; gap: 0 12px; padding: 0 16px; min-height: 56px; border-top: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.pp .row.head { min-height: 40px; border-top: 0; background: rgba(243,242,242,.04); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pp [data-pp="rows"] .row:first-child { border-top: 1px solid var(--line); }
.pp .row:not(.head):hover { background: rgba(243,242,242,.035); }
/* The whole row opens its model, as DEX Screener's rows do (Henry, 20 October: "Every number opens onto the results
   behind it"): the name's link is stretched over its row. An n/a change sits above it, so its reason shows on hover. */
.pp .row:not(.head):not(.empty) { position: relative; }
.pp .row .mname[href]::after { content: ""; position: absolute; inset: 0; }
.pp .row .chg.na { position: relative; z-index: 1; }
.pp .row:has(.mname:focus-visible) { outline: 2px solid var(--blue-light); outline-offset: -2px; }
.pp .row.empty { display: block; padding: 18px 16px; color: var(--mut); }
.pp .row .num { text-align: right; } /* the table's figures; a stat's figure (docs.css .stat .num) keeps its own */
.pp .rank { color: var(--mut2); font-size: 13px; }
.pp .model { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp .mono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: var(--r1); background: rgba(243,242,242,.05); font-family: var(--serif); font-size: 15px; color: rgba(243,242,242,.85); }
.pp .mt { display: flex; flex-direction: column; min-width: 0; }
.pp .mname { color: var(--paper); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .mname:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,242,242,.4); }
.pp .mbrand { font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .msub { display: none; font-size: 12px; color: var(--mut2); }
.pp .med { font-weight: 600; }
.pp .up { color: var(--up); }
.pp .down { color: var(--down); }
.pp .na, .pp .flat, .pp .dim { color: var(--mut2); }
.pp .c-trend { display: flex; justify-content: flex-end; }
.pp .more { display: block; margin: 14px auto 0; height: 40px; padding: 0 18px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); background: transparent; color: rgba(243,242,242,.85); font-size: 14px; }
.pp .more:hover { color: #fff; border-color: rgba(243,242,242,.6); background: rgba(243,242,242,.06); }
.pp .hide-note { margin: 10px 0 0; font-size: 12.5px; color: var(--mut2); }
.pp .pp-notes { margin-top: 28px; max-width: 780px; font-size: 13.5px; line-height: 1.65; color: rgba(243,242,242,.55); } /* not .notes: docs.css lays its own .notes out in a grid */
.pp .pp-notes p { margin: 0 0 8px; }
.pp .h2-28 { margin: 88px 0 0; font-size: 32px; line-height: 1.1; }
.pp .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pp .chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: var(--r1); color: rgba(243,242,242,.88); font-size: 14px; }
.pp .chip:hover { border-color: rgba(243,242,242,.4); color: #fff; }
.pp .chip span { font-size: 12px; color: var(--mut2); }
.pp .strip { margin-top: 96px; }

/* a model's or a reference's page: the price block */
.pp .quote { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 24px; margin-top: 48px; padding: 24px; border: 1px solid var(--line2); border-radius: var(--r1); background: rgba(243,242,242,.03); }
.pp .q-lab { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.pp .q-price { margin-top: 8px; font-family: var(--serif); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.pp .q-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pp .qchip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--r1); font-size: 13px; font-variant-numeric: tabular-nums; }
.pp .qchip b { font-weight: 600; }
.pp .qchip .k { font-size: 11px; letter-spacing: .12em; color: var(--mut); }
.pp .cells { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; align-self: start; }
.pp .cell { background: var(--ground); padding: 14px 16px; }
.pp .cell .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp .cell .l { margin-top: 4px; font-size: 12.5px; color: var(--mut); }
.pp .srcs { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mut2); }
.pp .h2 { margin: 80px 0 0; font-size: 36px; line-height: 1.1; }
.pp .h2-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pp .sub-h { margin: 8px 0 0; font-size: 14px; color: var(--mut); }
.pp .bar-chart { margin-top: 20px; padding: 0; border: 0; background: transparent; }

/* the chart */
.pp .legend { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--mut); }
.pp .legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp .lg-a { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-light); }
.pp .lg-d { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(243,242,242,.8); }
.pp .lg-l { width: 18px; height: 2px; background: #F3F2F2; opacity: .9; }
.pp .lg-m { width: 18px; height: 0; border-top: 1.5px dashed rgba(243,242,242,.45); }
.pp .lg-a0 { width: 9px; height: 9px; border-radius: 50%; background: rgba(243,242,242,.85); }
.pp .lg-band { width: 16px; height: 10px; background: rgba(var(--bc),.2); border-top: 1px solid rgba(var(--bc),.7); border-bottom: 1px solid rgba(var(--bc),.7); }
.pp .lg-out { width: 9px; height: 9px; border-radius: 50%; background: rgba(243,242,242,.85); opacity: .3; }
.pp .lg-red { width: 18px; height: 0; border-top: 2px solid #E5484D; }
.pp .chart { margin-top: 12px; padding: 20px 72px 0 16px; border: 1px solid var(--line2); border-radius: var(--r1); background: rgba(243,242,242,.02); }
.pp .plot-box { position: relative; }
.pp .plot { position: relative; height: 320px; }
.pp .gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(243,242,242,.07); }
.pp .gl span { position: absolute; left: calc(100% + 10px); top: -8px; font-size: 11.5px; color: var(--mut2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp .lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp .k1 { --bc: 106,136,232; }
.pp .k2 { --bc: 188,135,48; }
.pp .k3 { --bc: 196,106,168; }
.pp .band-area { fill: rgba(var(--bc),.16); }
.pp .band-edge { fill: none; stroke: rgba(var(--bc),.85); stroke-width: 1.5; stroke-linejoin: round; }
.pp .dot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0; border: 0; border-radius: 50%; background: none; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pp .dot:focus { outline: none; }
.pp .dot:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -2px; }
.pp .dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; transition: transform .12s; }
.pp .dot.a::after { background: var(--blue-light); }
.pp .dot.d::after { border: 1.5px solid rgba(243,242,242,.82); background: rgba(15,14,14,.6); }
.pp .dot.a.k0::after { background: rgba(243,242,242,.85); }
.pp .dot.a.k1::after, .pp .dot.a.k2::after, .pp .dot.a.k3::after { background: rgb(var(--bc)); }
.pp .dot.d.k1::after, .pp .dot.d.k2::after, .pp .dot.d.k3::after { border-color: rgb(var(--bc)); }
.pp .dot.out::after { opacity: .3; }
.pp .dot:hover::after, .pp .dot.on::after, .pp .dot:focus-visible::after { transform: scale(1.6); }
.pp .tip { position: absolute; z-index: 5; min-width: 210px; max-width: 260px; padding: 10px 12px; border: 1px solid rgba(243,242,242,.3); border-radius: var(--r1); background: #1b1a19; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 12.5px; line-height: 1.45; pointer-events: none; }
.pp .tip b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.pp .tip .t-m { color: var(--mut); }
.pp .xaxis { position: relative; height: 34px; border-top: 1px solid var(--line); }
.pp .xaxis span { position: absolute; top: 9px; transform: translateX(-50%); font-size: 11.5px; color: var(--mut2); white-space: nowrap; }
.pp .empty-plot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mut); }
.pp .c-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mut2); }

/* the lots on sale now */
.pp .live { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.pp .live-none { margin: 20px 0 0; font-size: 15px; color: var(--mut); }
.pp .lot { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line2); border-radius: var(--r1); min-width: 0; }
.pp .lot-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--mut); }
.pp .clock { color: var(--up); font-weight: 600; white-space: nowrap; }
.pp .lot-title { font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pp .lot-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--mut); }
.pp .lot-meta b { display: block; color: var(--paper); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp .lot-go { align-self: flex-start; margin-top: 4px; padding: 8px 12px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); color: var(--paper); font-size: 13px; }
.pp .lot-go:hover { border-color: rgba(243,242,242,.6); background: rgba(243,242,242,.06); color: #fff; }

/* the questions and the related cards */
.pp .faq { margin-top: 20px; border-top: 1px solid var(--line); }
.pp .faq details { border-bottom: 1px solid var(--line); }
.pp .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 600; }
.pp .faq summary::-webkit-details-marker { display: none; }
.pp .faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--mut); }
.pp .faq details[open] summary::after { content: "\00d7"; }
.pp .faq p { margin: 0 0 18px; max-width: 720px; font-size: 15.5px; line-height: 1.65; color: rgba(243,242,242,.8); }
.pp .rel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.pp .rcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line2); border-radius: var(--r1); color: var(--paper); min-width: 0; }
.pp .rcard:hover { border-color: rgba(243,242,242,.4); background: rgba(243,242,242,.03); color: var(--paper); }
.pp .rc-name { font-weight: 600; }
.pp .rc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.pp .rc-row b { color: var(--paper); font-weight: 600; }

@media (max-width: 900px) {
  .pp-main.pp-crumbed { padding-top: 32px; }
  .pp .c-vol, .pp .c-last, .pp .c-trend { display: none; }
  .pp .row { grid-template-columns: 28px minmax(0,1fr) 88px 64px 64px 56px 56px; }
  .pp .h2-28 { margin-top: 64px; }
  .pp .quote { grid-template-columns: 1fr; }
  .pp .rel { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp .h2 { margin-top: 64px; }
}
/* A phone (Henry, 20 October): nothing between the nav and the H1, the H1 and its intro centred, the figures centred
   and the line under them one short line; the breadcrumb is under the page instead. */
@media (max-width: 720px) {
  .pp .eyebrow-bar, .pp .crumbs:not(.crumbs-low) { display: none; }
  .pp .crumbs-low { display: flex; justify-content: center; }
  .pp .h1-64 { margin-top: 0; font-size: 40px; text-align: center; }
  .pp .lede { margin-left: auto; margin-right: auto; font-size: 17px; text-align: center; }
  .pp .lede-2 { display: none; }
  .pp .stat { --stat-pad: 16px; text-align: center; }
  .pp .stat .num { font-size: 34px; text-align: center; }
  .pp .stats-cap { padding-left: 0; font-size: 11px; text-align: center; white-space: nowrap; }
  .pp .cap-long { display: none; }
  .pp .cap-short { display: inline; }
  .pp .find { margin-left: 0; width: 100%; }
  .pp .find input { width: 100%; font-size: 16px; } /* R169: a field is 16px so that iOS does not zoom the page (app.css) */
  .pp .c-7d, .pp .c-res, .pp .c-sale { display: none; }
  .pp .row { grid-template-columns: 22px minmax(0,1fr) auto 62px; gap: 0 10px; padding: 0 12px; min-height: 66px; }
  .pp .msub { display: block; }
  .pp .q-price { font-size: 52px; }
  .pp .cells { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp .chart { padding: 16px 56px 0 8px; }
  .pp .plot { height: 260px; }
  .pp .xaxis span.alt { display: none; }
  .pp .legend { margin-left: 0; gap: 6px 16px; }
  .pp .live, .pp .rel { grid-template-columns: 1fr; }
  .pp .h2 { font-size: 30px; }
}