/* Robots we price: the shelf (robots.html) and one page per robot (robots-<id>.html). Classes start with r-. Every size here comes from the one scale in site.css.
   One grid: 12 columns between the header's own edges. --gl is the edge, --g the gutter. A robot's box takes whole columns and its height follows from its own shape (--ar), so what is drawn lands on the grid. */
[data-page^="robots"]{--g:24px}
@media (max-width:720px){[data-page^="robots"]{--g:16px}}
[data-page^="robots"] .lead-1{max-width:620px}
.r-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0}
.r-act .tlink{margin:0}

/* ------------------------------------------------------------------ one robot: the title with its listings straight under it, across seven columns. Beside them on flat ink, from column nine to the header's right edge, the price and the robot built from those listings. The ink bleeds to the screen's edge and holds still while a long list scrolls. */
.r-one{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-left:var(--gl);padding-right:var(--gl);min-height:calc(100svh - 72px)}
.r-one-l{grid-column:1 / 8;min-width:0}
.r-one-li{padding:clamp(32px,4vw,56px) 0 clamp(32px,4vw,48px)}
.page .r-h1{margin:0;color:var(--ink);text-wrap:balance}
.r-kind{margin:18px 0 0;color:#3e4656}
.r-kind-m{display:none}
/* the ink starts a gutter into column eight, and its words start on the line of column nine */
.r-one-r{grid-column:8 / 13;min-width:0;color:#fff;margin-right:calc(-1 * var(--gl));margin-left:var(--g)}
.r-one-st{--c1:calc((100vw - 2 * var(--gl) - 11 * var(--g)) / 12);position:sticky;top:72px;min-height:calc(100svh - 72px);display:flex;flex-direction:column;padding:clamp(32px,4vw,56px) var(--gl) 0 calc(var(--c1))}
.r-sum{flex:none}
.r-big{display:block;color:#fff;white-space:nowrap}
.r-say{margin:10px 0 0;color:#fff;text-wrap:pretty}
.r-admit{margin:0 0 8px;font-weight:500;color:#fff;text-wrap:pretty}
.r-one .r-act{margin-top:clamp(16px,2vh,24px)}
.r-why{margin:clamp(10px,1.4vh,16px) 0 0;color:rgba(255,255,255,.92)}
.r-one-bot{flex:none;margin-top:auto;padding-top:16px;width:100%}
.r-one-bot canvas{display:block;width:100%;aspect-ratio:var(--ar);height:auto;cursor:default;touch-action:pan-y}
.r-one>.r-tip{z-index:8}
/* on a shorter screen the robot takes three columns, so the price and the whole robot still fit, and below that nothing holds */
@media (min-width:961px) and (max-height:860px){.r-one-bot{width:calc(3 * var(--c1) + 2 * var(--g))}}
@media (min-width:961px) and (max-height:620px){.r-one-st{position:static}}
.r-und{margin-top:8px}
.r-und summary{list-style:none;cursor:pointer}
.r-und summary::-webkit-details-marker{display:none}
.r-und[open] summary{margin-bottom:0}
.r-ls-n{margin:clamp(16px,2vw,24px) 0 0;color:#4a5262;max-width:52ch}

/* the listing a dot stands for: solid and small. It ignores the pointer, so a mouse clicks the dot; on a touch screen its link is the way through. */
.r-tip{position:absolute;z-index:5;width:290px;max-width:calc(100% - 16px);background:#fff;color:var(--ink);border-radius:2px;padding:10px 12px;font-size:var(--t-small);line-height:1.4;pointer-events:none;box-shadow:0 0 0 1px var(--line)}
.r-tip b{display:block;font-weight:500}
.r-tip span{display:block;margin-top:2px;color:#3e4656}
.r-tip a{display:block;margin-top:4px;font-weight:500;color:var(--c)}
.r-tip.touch{pointer-events:auto;padding-bottom:0}
.r-tip.touch a{display:inline-flex;align-items:center;min-height:44px;margin-top:0}

/* ------------------------------------------------------------------ one short chart */
/* the heading, its short line under it, then the age being read: its figure on the page's left edge, its words beside it, both standing on one line */
.r-ch-h .h2{margin:0 0 12px}
.r-read{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:8px;align-items:end;margin-top:clamp(24px,2.8vw,40px)}
.r-read>div{min-width:0}
.r-read>div:first-child{grid-column:1 / 5}
.r-read>div:last-child{grid-column:5 / 11}
.r-rk{margin:0 0 4px;color:#3e4656}
.r-rv{display:block;color:var(--c);white-space:nowrap}
.r-rs{margin:0;color:#3e4656;text-wrap:pretty}
.tlink.r-rl{margin:0;min-height:32px}
.r-plot{position:relative;height:clamp(380px,38vw,540px);margin-top:clamp(24px,3vw,40px)}
.r-cv,.r-ax{position:absolute;inset:0;width:100%;height:100%;display:block}
.r-cv{touch-action:pan-y;cursor:default}
.r-ax{pointer-events:none;font-family:var(--sans);overflow:visible}
.r-ax text{fill:var(--ink);font-size:16px;font-variant-numeric:lining-nums tabular-nums;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.r-ax .lb{fill:var(--ink);font-weight:500}
.r-ax .pl{fill:var(--ink)}
.r-ax .ax{stroke:rgba(14,22,38,.4);stroke-width:1}
.r-ax .ld{fill:none;stroke:rgba(14,22,38,.35);stroke-width:1}
.r-ax .k-line{fill:none;stroke:var(--c);stroke-width:2}
.r-ax .k-band{fill:rgba(40,71,206,.14)}
.r-ax .k-dot{fill:var(--ink)}
/* the age control: the chart's own axis is the track */
.r-age{position:absolute;z-index:3;height:44px;display:block}
.r-age input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:none;cursor:ew-resize;outline:0;box-shadow:none}
.r-age input:focus-visible{outline:2px solid var(--c);outline-offset:-4px;box-shadow:none}
.r-age input::-webkit-slider-runnable-track{background:none}
.r-age input::-moz-range-track{background:none}
.r-age input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;background:none}
.r-age input::-moz-range-thumb{width:44px;height:44px;border:0;background:none}
.r-th{position:absolute;z-index:2;left:0;display:flex;align-items:center;justify-content:center;height:26px;padding:0 11px;border-radius:2px;background:var(--c);color:#fff;font-size:var(--t-small);font-weight:500;white-space:nowrap;pointer-events:none;will-change:transform}

/* ------------------------------------------------------------------ tables: one rule under the head, and rows part with space */
.r-tbl{width:100%;border-collapse:collapse;margin-top:clamp(24px,3vw,40px);font-size:16px;line-height:1.4;font-variant-numeric:lining-nums tabular-nums}
.r-tbl thead th{font-size:var(--t-small);font-weight:500;color:var(--muted);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.r-tbl .r{text-align:right}
.r-tbl tbody th,.r-tbl tbody td{padding:9px 16px 9px 0;vertical-align:baseline;text-align:left;font-weight:400}
.r-tbl tbody td.r{text-align:right}
.r-tbl tbody tr:first-child th,.r-tbl tbody tr:first-child td{padding-top:16px}
.r-tbl th a{color:var(--c);font-weight:500}
.r-tbl th a:hover{text-decoration:underline;text-underline-offset:3px}
.r-tb{white-space:nowrap}
.r-tbl .r-tp{text-align:right;font-weight:500;white-space:nowrap;padding-right:24px}
.r-tbl thead th:nth-child(3){padding-right:24px}
.r-tbl tbody tr[data-u]:hover th a{text-decoration:underline;text-underline-offset:3px}
/* the listings: the two tables share their columns, so prices line up down the page */
.r-tbl[data-listings]{table-layout:fixed}
.r-cb{width:64px}.r-ca{width:108px}.r-cw{width:170px}
.r-tbl-u{margin-top:clamp(14px,1.6vw,20px)}
.r-tbl-u tbody tr:first-child th,.r-tbl-u tbody tr:first-child td{padding-top:9px}
.r-ls-h{margin:clamp(32px,4vw,48px) 0 0;color:var(--ink)}
.r-tw{color:#3e4656}
.r-tw span{display:block;color:var(--muted)}
.r-more{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:0;border:0;background:none;color:var(--c);font:500 16px/1 var(--sans);text-align:left;cursor:pointer}
.r-more:hover{text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------------ what buyers paid, and what a buyer would likely pay */
.r-au-say{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:8px;align-items:baseline;margin:clamp(20px,2.6vw,32px) 0 0}
.r-au-say b{grid-column:1 / 4}
.r-au-say b{color:var(--c);white-space:nowrap}
.r-au-say p{grid-column:4 / 10;margin:0;color:#3e4656;text-wrap:pretty}
.r-au-both{margin:clamp(14px,2vw,22px) 0 0;max-width:32em;font:500 var(--t-lead)/1.45 var(--sans);letter-spacing:0;color:var(--ink);text-wrap:pretty}
.r-au-both b{color:var(--c)}
.r-like{margin:clamp(32px,4vw,48px) 0 0;max-width:30em;color:var(--ink);text-wrap:pretty}
.r-like b{color:var(--c)}
/* an auction row: the share reads as a figure, and on a phone the three middle cells fold into one line */
.r-au-p b{font-weight:500}
.r-tbl-a .r-au-p,.r-tbl-a thead th:last-child{padding-right:0}
.r-au-p span,.r-tbl .r-au-m{display:none}
/* one for sale, one sold: two real records as paper */
.r-pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px var(--g);margin-top:clamp(64px,7vw,88px)}
.r-lot{position:relative;display:flex;flex-direction:column;background:#fff;padding:22px 30px 18px;font:400 16px/1.45 var(--doc);font-variant-numeric:lining-nums tabular-nums;filter:drop-shadow(0 1px 1px rgba(14,22,38,.1)) drop-shadow(0 16px 24px rgba(14,22,38,.16));min-width:0}
.r-lot .dr{align-items:baseline;gap:20px;border-bottom:0;padding:8px 0}
.r-lot .dr span{flex:none}
.r-fp b{font-size:var(--t-sub);line-height:1}
.r-tab{position:absolute;left:0;top:-32px;height:32px;display:flex;align-items:center;padding:0 30px 0 18px;background:#fff;font:600 var(--t-small) var(--doc);font-style:normal;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 100%,0 100%)}
.r-stamp{display:block;margin-bottom:6px;color:var(--c);font:700 var(--t-sub)/1.2 var(--doc);letter-spacing:-.01em}
.r-stamp.a{color:var(--ink)}
.r-dl{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:8px;font-weight:500;color:var(--c);text-decoration:none}
.r-dl:hover{text-decoration:underline;text-underline-offset:4px}

/* how much to trust this */
.r-tr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--g);align-items:start;margin-top:clamp(24px,2.8vw,40px)}
.r-tally{display:block;width:100%;height:auto;overflow:visible}
.r-tally path{fill:none;stroke-linecap:round}
.r-tally .s{stroke:var(--c);stroke-width:5}
.r-tally .y{stroke:rgba(40,71,206,.62);stroke-width:5}
.r-tally .p{stroke:rgba(40,71,206,.32);stroke-width:5}
.r-tally .n{stroke:rgba(40,71,206,.14);stroke-width:5}
/* the count chain: the figure on the column's left edge, its shade at the end of that column, the words from the next line */
.r-chain{list-style:none;margin:0;padding:0;font-size:var(--t-body);line-height:1.4;color:var(--ink)}
.r-chain li{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--g);align-items:center;min-height:40px}
.r-chain b{grid-column:1;grid-row:1;font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.r-key{grid-column:1;grid-row:1;justify-self:end}
.r-chain span{grid-column:2 / -1;grid-row:1}
@media (max-width:1060px){.r-chain li{grid-template-columns:repeat(12,minmax(0,1fr))}.r-chain b,.r-key{grid-column:1 / 4}.r-chain span{grid-column:4 / -1}}
.r-key.s circle{fill:var(--c)}.r-key.y circle{fill:rgba(40,71,206,.62)}.r-key.p circle{fill:rgba(40,71,206,.32)}.r-key.n circle{fill:rgba(40,71,206,.14)}
.r-tr-t{margin-top:clamp(20px,2.8vw,40px)}
.r-tr-t p{margin:0 0 12px;color:#3e4656;max-width:32em}
.r-tr-t .tlink{margin:0}

/* look up one model: one row, and the rest folded behind "See all" */
.r-mds-more summary{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;list-style:none;cursor:pointer}
.r-mds-more summary::-webkit-details-marker{display:none}
.r-mds-more[open] summary{display:none}
.r-mds-more .r-mds{margin-top:0}
.r-mds-more:not([open]) .r-mds{display:none}
/* the models fill the width in two columns, on the same grid as the section above */
.r-mdl{padding-top:0}
.r-mdl .h2{margin:0}
.r-mds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(20px,2.4vw,28px)}
@media (max-width:980px){.r-mds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.r-md-l{margin:12px 0 0;color:#3e4656}
/* one row shape for every list of robots: a name, a quiet figure, an arrow */
.r-mds a,.r-find-list a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:14px;min-height:44px;padding:6px 0;color:var(--ink)}
/* a model's name, its count and its arrow read as one thing */
.r-mds a{display:flex;align-items:baseline;justify-content:flex-start;gap:12px;align-self:center}
.r-mds b,.r-find-list b{font-weight:500;font-size:var(--t-body);line-height:1.25;transition:color .15s ease;min-width:0}
.r-mds span,.r-find-list span{color:var(--muted);white-space:nowrap}
.r-mds i,.r-find-list i{font-style:normal;font-size:16px;color:var(--c);font-weight:500;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.r-mds a:hover b,.r-find-list a:hover b{color:var(--c)}
.r-mds a:hover i,.r-find-list a:hover i{transform:translateX(3px)}

/* the page's one ask, the same on the Price report, the shelf and every robot's page. Pale, with a plain edge. */
.r-close{padding-bottom:calc(var(--sec) - 8px)}
.r-close .t-statement{max-width:15em}
.r-act-c{margin-top:clamp(24px,2.6vw,32px)}
/* the ask's button takes whole columns */
.r-act-c .btn{width:calc((100% - 11 * var(--g)) / 12 * 2 + var(--g))}
@media (max-width:720px){.r-act-c .btn{width:calc((100% - var(--g)) / 2)}}

/* ------------------------------------------------------------------ the shelf: robots drawn at the size of their evidence, in whole columns, all standing on lines */
.r-shelf{position:relative;color:#fff;padding-bottom:var(--sec);overflow:clip}
.r-wrap{container-type:inline-size}
.r-wrap.in{padding-top:var(--sec)}
.r-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:stretch}
.r-top-t{grid-column:1 / 6;padding-top:0;display:flex;flex-direction:column;align-self:stretch;min-width:0}
.page .r-s-h{margin:0 0 clamp(16px,1.6vw,24px);color:#fff}
.r-s-l{margin:0;color:rgba(255,255,255,.96);text-wrap:pretty}
.r-cells{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:0;margin-top:clamp(48px,5.6vw,80px);margin-bottom:calc(-1 * clamp(44px,5vw,72px))}
.r-cells>:last-child{margin-bottom:clamp(44px,5vw,72px)}
.r-cell{display:grid;grid-column:span var(--sd);grid-row:span 3;grid-template-rows:subgrid;min-width:0;color:#fff;margin-bottom:clamp(44px,5vw,72px)}
.r-c-go{display:grid;grid-row:span 2;grid-template-rows:subgrid;min-width:0;color:#fff;border-radius:2px}
.r-c-go:focus-visible,.r-cell:focus-visible{outline:2px solid #fff;outline-offset:6px}
.r-c-bot{display:block;align-self:end;width:100%;border-bottom:1px solid rgba(255,255,255,.55)}
.r-c-bot canvas{display:block;width:100%;aspect-ratio:var(--ar);height:auto;cursor:pointer}
.r-c-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:14px 0 0}
.r-c-nm{font:600 var(--t-smallh)/1.35 var(--sans);text-wrap:pretty}
.r-c-kd{margin-top:2px;color:rgba(255,255,255,.88)}
/* the figure's line keeps its height as the age moves, so the shelf does not jump under the reader's hand. Two figure sizes from the one scale, by the listings near that age, and words for a rough guess. */
.r-c-pr{display:flex;align-items:flex-end;margin-top:12px;min-height:calc(var(--t-sub) * 1.25)}
.r-c-pr.t{font:500 var(--t-lead)/1.25 var(--sans)}
.r-c-at,.r-c-ct{color:rgba(255,255,255,.92)}
.r-shelf.aged .r-cell:not(.r-c-top) .r-c-at{display:none}
.r-c-at{margin-top:3px}
.r-c-ct{margin-top:8px;display:grid}
/* every card says the short count; the card the reader rests on says the long one, in the room kept for it, so nothing moves under the hand */
.r-c-ct>span{grid-area:1 / 1;transition:opacity .15s ease}
.r-ct-l{opacity:0}
@media (hover:hover){.r-cell:hover .r-ct-s{opacity:0}.r-cell:hover .r-ct-l{opacity:1}}
@media (hover:none){.r-ct-l{display:none}}
/* a card with sub-series: its words and links are one column, so the links sit straight under its own words */
.r-c-has>.r-c-go{display:block;grid-row:1;align-self:end}
.r-c-tw{grid-row:2 / span 2;min-width:0}
.r-c-tl{display:block;color:#fff;border-radius:2px}
.r-c-tl:focus-visible{outline:2px solid #fff;outline-offset:6px}
.r-c-subs{display:flex;flex-direction:column;align-items:flex-start;padding-top:4px}
.r-c-subs a{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-weight:500;color:#fff}
.r-c-subs a:hover{text-decoration:underline;text-underline-offset:4px}
.r-c-subs span{font-weight:400}
.r-c-subs i{font-style:normal;font-weight:500}
/* the biggest robot stands beside the heading, four columns wide, with its words in the three beside it, on one floor */
.r-wrap .r-c-top{display:block;grid-column:6 / 13;margin:0}
.r-wrap .r-c-top .r-c-go{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;column-gap:var(--g);align-items:end;border-bottom:1px solid rgba(255,255,255,.55)}
.r-c-top .r-c-bot{grid-column:1 / 5;border-bottom:0}
.r-c-top .r-c-t{grid-column:5 / 8;padding:0 0 14px}
.r-c-top .r-c-pr{min-height:calc(var(--t-section) * 1.08)}
.r-c-top .r-c-nm{font:600 var(--t-lead)/1.25 var(--sans)}
.r-shelf>.r-tip{z-index:8}
/* one age for the whole shelf: a plain white strip, edge to edge, its words on the grid. It rides along at the top of the screen until the shelf ends, and steps down when the bar comes back */
.r-dial{position:sticky;top:0;z-index:6;margin:clamp(28px,3vw,44px) calc(-1 * var(--gl)) 0;background:#fff;color:var(--ink)}
html:has(.fbar.on) .r-dial{top:72px}
.r-dial[hidden]{display:none}
.r-dial-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center;min-height:56px;padding-inline:var(--gl)}
.r-dial-k{grid-column:1 / 3;color:#3e4656;white-space:nowrap}
.r-dial-v{grid-column:3 / 5;font-weight:600;color:var(--c);white-space:nowrap}
.r-dial input{grid-column:5 / 13;-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:none;cursor:ew-resize}
.r-dial input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(40,71,206,.26)}
.r-dial input::-moz-range-track{height:4px;border-radius:2px;background:rgba(40,71,206,.26)}
.r-dial input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border:0;border-radius:50%;background:var(--c)}
.r-dial input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--c)}
.r-dial input:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:4px}

/* know the model: on the first screen. Without the script the list stands open; with it, it opens as a solid panel under the field. */
.r-find{position:relative;margin-top:auto;padding-top:clamp(20px,3vh,36px);color:#fff}
.r-find-h{margin:0;color:#fff}
.r-find-in{display:block;margin-top:12px}
.r-find-in[hidden]{display:none}
.r-find-in input{display:block;width:100%;height:48px;-webkit-appearance:none;appearance:none}
.r-find-in input::placeholder{color:#55617a;opacity:1}
.r-find-in input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.r-find-r{margin-top:12px}
.r-find-n{margin:0 0 8px}
.r-find-list a{color:inherit}
.r-find.live .r-find-r{position:absolute;z-index:7;left:0;right:0;top:100%;margin-top:4px;padding:12px 16px 8px;background:#fff;color:var(--ink);border-radius:2px;box-shadow:0 0 0 1px var(--line);display:none}
.r-find.live.open .r-find-r{display:block}
.r-find.live .r-find-n{color:#4a5262;min-height:21px}
.r-find-any{color:var(--c)!important;font-weight:500;display:inline-flex!important}

/* the robots we do not price yet: seven moving robots standing on one line, in whole columns, each with its name */
.r-miss .h2{max-width:none}
.r-miss-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:stretch;margin-top:clamp(40px,5vw,72px)}
.r-miss-r{grid-column:span var(--sd);min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.r-miss-bot.ff-bot{flex:none;display:block;width:100%;padding:0;border-bottom:1px solid var(--line)}
.r-miss-bot canvas{transform:translateX(var(--dx,0))}
.r-miss-r b{display:block;margin-top:14px;font-weight:500;color:var(--ink);white-space:nowrap}

/* ------------------------------------------------------------------ narrower */
@media (max-width:1060px){
 .r-tr-g{grid-template-columns:minmax(0,1fr)}
 .r-read>div:first-child,.r-read>div:last-child{grid-column:1 / -1}
}
@media (max-width:960px){
 /* the title and its listings, then the price and the robot, standing on the bottom edge of the ink */
 .r-one{display:block;min-height:0;padding:0}
 .r-one-li{padding:24px var(--gl) 32px}
 .r-kind-m{display:inline}
 .r-one-r{margin:0}
 .r-one-st{position:static;min-height:0;display:block;padding:32px var(--gl) 0}
 .r-one-bot{margin-top:0;width:min(100%,560px)}
}
@media (max-width:760px){
 .r-tip{width:calc(100% - 32px);max-width:320px}
 .r-plot{height:480px}
 .r-au-say b,.r-au-say p{grid-column:1 / -1}
 .r-pair{grid-template-columns:minmax(0,1fr)}
 .r-lot{padding:18px 22px 14px}
 .r-lot .dr span{max-width:40%}
 /* each listing becomes a small block of its own */
 .r-tbl,.r-tbl tbody{display:block}
 .r-tbl thead{display:none}
 .r-tbl tr{display:grid;padding:12px 0}
 .r-tbl tr[hidden]{display:none}
 .r-tbl tbody th{grid-column:1 / -1;padding:0;font-size:16px}
 .r-tbl tbody th a{display:inline-flex;align-items:center;min-height:44px}
 .r-tbl tbody td,.r-tbl tbody td.r,.r-tbl .r-tp,.r-tbl tbody tr:first-child td,.r-tbl tbody tr:first-child th{padding:0;text-align:left;font-size:var(--t-body);white-space:normal}
 .r-tbl-a tr{grid-template-columns:minmax(0,1fr) auto;gap:0 14px;padding:4px 0 12px}
 .r-tbl-a tbody th{grid-column:1;grid-row:1}
 .r-tbl-a .r-au-d{display:none}
 .r-tbl-a .r-au-p,.r-tbl-a tbody tr:first-child td.r-au-p{grid-column:2;grid-row:1;align-self:center;text-align:right;white-space:nowrap}

 .r-tbl-a tr:first-child .r-au-p span{display:inline;color:var(--muted)}
 .r-tbl-a tbody td.r-au-m,.r-tbl-a tbody tr:first-child td.r-au-m{display:block;grid-column:1 / -1;grid-row:2;color:#3e4656;font-size:var(--t-small)}
 /* a listing on a phone: its name, then the price and the year, then where it is */
 [data-listings] tr{grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;padding:8px 0}
 [data-listings] .r-tp{order:1}
 [data-listings] .r-tb{order:2;color:#3e4656}
 [data-listings] .r-tb::before{content:"Built "}
 [data-listings] .r-tw{order:3;grid-column:1 / -1;margin-top:2px}
 .r-tw span{display:inline;margin-left:6px}
 /* the shelf: two robots a row under the biggest one, and the age control under the words, riding along at the top of the screen where it covers no card */
 .r-wrap{display:flex;flex-direction:column}
 .r-top{display:contents}
 .r-top-t{order:1;min-width:0;display:block}
 .r-find{padding-top:24px}
 .r-dial{order:2;margin-top:24px}
 .r-wrap .r-c-top{order:3;margin-top:20px}
 .r-wrap .r-c-top .r-c-go{display:block}
 .r-c-top .r-c-t{padding:14px 0}
 .r-cells{order:4;width:100%;margin-top:44px}
 .r-cells .r-cell{grid-column:span 6;margin-bottom:36px}
 .r-dial-in{grid-template-columns:auto minmax(0,1fr);column-gap:12px;min-height:44px}
 .r-dial-k{display:none}
 .r-dial-v{grid-column:auto;min-width:4.2em}
 .r-dial input{grid-column:auto}
 .r-mds{grid-template-columns:minmax(0,1fr)}
 .r-c-subs a{white-space:nowrap}
 .r-c-subs span{display:none}
 /* three to a row, each on four columns */
 .r-miss-g{row-gap:32px}
 .r-miss-r{grid-column:span 4}
 .r-miss-r b{margin-top:10px;white-space:normal}
}
/* the notes line stays on the same ground as the last section, so no edge shows before the footer */
[data-page^="robots"] .notes{background:var(--g-pale)!important}
/* notes keep a reading measure */
[data-page^="robots"] .notes li{max-width:500px}
/* a heading that must break never leaves one word alone */
[data-page^="robots"] .r-mdl .h2,[data-page^="robots"] .r-ch .h2{text-wrap:balance}
@media (max-width:900px){.tlink.r-rl{min-height:44px}.r-c-subs a{display:inline-flex;align-items:center;min-height:44px}}
/* the closing band's long heading takes columns 1 to 9 so it holds two lines; the button sits from column 10 */
@media (min-width:761px){.page .cb.cb-wide .cb-h{grid-column:1 / 10}.page .cb.cb-wide .cb-r{grid-column:10 / -1}}
.r-nb{white-space:nowrap}
/* the shelf's one toolbar (spec 22): the model search and the age, one row on the white bar that rides at the top of the screen.
   Both are 44px boxes with one border and one radius. The search's list opens as a panel under it. */
.r-dial .tb{--tb-b:#cfd5e0;--tb-bg:#fff;--tb-fg:var(--ink);--tb-on-bg:var(--ink);--tb-on-fg:#fff;--tb-hov:#f2f4f8}
.r-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center;min-height:64px;padding:10px var(--gl);gap:0 var(--g)}
.r-bar .r-find{grid-column:1 / 5;position:relative;margin:0;padding:0;color:var(--ink)}
.r-bar .r-find-in{margin:0;display:flex}
.r-bar .r-find-in[hidden]{display:none}
.r-bar .r-find-in input{height:var(--tb-h);width:100%;border:1px solid var(--tb-b);border-radius:var(--r-field);background:#fff;padding:0 14px}
.r-bar .r-find-in input:hover{box-shadow:none;background:var(--tb-hov)}
.r-bar .r-find-in input::placeholder{color:#5b6474}
.r-bar .r-find:not(.live) .r-find-r{display:none}
.r-bar .r-find.live .r-find-r{margin-top:6px}
.r-agebox{grid-column:5 / 13;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:16px;height:var(--tb-h);padding:0 16px;border:1px solid var(--tb-b);border-radius:var(--r-field);background:#fff}
.r-agebox .r-dial-k{grid-column:auto;color:#3e4656;white-space:nowrap}
.r-agebox .r-dial-v{grid-column:auto;font:600 16px/1 var(--sans);color:var(--c);white-space:nowrap;min-width:4.6em}
.r-dial .r-agebox input{grid-column:auto;height:42px}
@media (max-width:760px){
  .r-bar{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:8px;min-height:56px;padding:6px var(--gl)}
  .r-bar .r-find{grid-column:auto;position:static}
  .r-bar{position:relative}
  .r-bar .r-find.live .r-find-r{left:var(--gl);right:var(--gl)}
  .r-agebox{grid-column:auto;grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding:0 10px}
  .r-agebox .r-dial-k{display:none}
  .r-agebox .r-dial-v{min-width:4.2em}
}
/* both boxes in the shelf's toolbar carry the same border and radius on their outer edge, with a full 44px inside for the finger */
.r-bar .r-find,.r-agebox{box-sizing:content-box;height:44px;border:1px solid var(--tb-b);border-radius:var(--r-field);background:#fff}
.r-bar .r-find-in input{height:44px;border:0;border-radius:0;background:transparent}
.r-bar .r-find-in input:focus-visible{outline:2px solid var(--c);outline-offset:2px;box-shadow:none}
.r-bar .r-find:hover{background:var(--tb-hov)}
.r-dial .r-agebox input{height:44px}
.r-bar .r-find:not(.live){height:auto;border:0;background:none}
/* the line under "What buyers really paid." stays no wider than the heading (spec 11) */
@media (min-width:1001px){.r-au-s .r-au-both{max-width:30em}}
/* the search is a 46px tool field (the site's field rule), so both boxes hold 46px inside their one border */
.r-bar .r-find,.r-agebox{height:46px}
.r-bar .r-find-in input,.r-dial .r-agebox input{height:46px}
.r-bar .r-find:not(.live){height:auto}