/* The robot vacuum pages' control scale: the simulator, its entry pages and the data page. Loaded after each page's own
   styles, so every button, switch, box, list and fold toggle takes its size from here. */
:root {
  --rc-h: 44px;
  --rc-h-compact: 36px;
  --rc-text: 1rem;
  --rc-text-compact: 0.86rem;
  --rc-text-big: 1.1rem;
  --rc-pill: 99px;
  --rc-switch: 12px;
  --rc-box: 10px;
  --rc-line: #E2D3B2;
}

/* Buttons: pills. */
#main-content .btn-secondary, #main-content .btn-primary, #main-content #rv-generate, #main-content .rv-prof-close,
#main-content .rv-cmp-x, #main-content .rv-chip, #main-content .seo-next-steps a.seo-next-step,
#main-content .rv-out-buy a.seo-next-step, #main-content .rv-card-add, #main-content .rv-b-offer-go, #main-content .rv-card-up,
#main-content .rv-card-rug, #main-content .btn-primary.rv-b-next, #main-content .rv-out-redo-go, #main-content .rv-use-home,
#main-content .rv-show-all, #main-content .rv-ab button, #main-content .rv-status button, #main-content a.rn-go,
#main-content .rd-copy, #main-content a.rd-dl, #main-content a.rd-show-all {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--rc-h); padding-block: 0; border-radius: var(--rc-pill);
  font-family: var(--font-body); font-size: var(--rc-text); line-height: 1.2;
}
#main-content #rv-generate { font-size: var(--rc-text-big); }
#main-content .rv-show-all[hidden], #main-content .rv-status button[hidden] { display: none; }
#main-content .rv-sample { min-height: var(--rc-h); font-size: var(--rc-text); }

/* Switches: one segmented switch, the pressed option filling its own segment edge to edge. */
#main-content .rv-seg, #main-content .rv-units {
  display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; box-sizing: border-box;
  min-height: var(--rc-h); border: 0; border-radius: var(--rc-switch); background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--rc-line);
}
#main-content .rv-seg-btn, #main-content .rv-units .units-btn {
  min-height: var(--rc-h); min-width: 44px; padding: 0 14px; border: 0; border-radius: var(--rc-switch);
  font-family: var(--font-body); font-size: var(--rc-text); font-weight: 700; line-height: 1.2;
}
#main-content .rv-units .units-bar { display: none; }

/* Boxes and lists. */
#main-content .rv-controls select, #main-content .rv-controls input:not([type="range"]), #main-content .rv-b-select,
#main-content .rv-b-num input, #main-content .rv-sort-l select, #main-content .rv-cmp-add-l select {
  min-height: var(--rc-h); box-sizing: border-box; padding: 0 12px; border: 2px solid var(--rc-line); border-radius: var(--rc-box);
  font-family: var(--font-body); font-size: var(--rc-text); font-weight: 600; line-height: 1.2;
}
#main-content .rv-max input[type="range"] { min-height: var(--rc-h); }

/* On the map: the camera switch and the map key, one compact size. */
#main-content .rv-map-tools .rv-seg { min-height: var(--rc-h-compact); background: rgba(255,253,248,0.94); box-shadow: none; }
#main-content .rv-map-tools .rv-seg-btn, #main-content .rv-legend > summary {
  min-height: var(--rc-h-compact); padding: 0 12px; border-radius: var(--rc-switch); font-size: var(--rc-text-compact);
}
@media (max-width: 760px) {
  #main-content .rv-controls > .rv-budget-set .rv-seg { display: flex; width: 100%; }
  #main-content .rv-controls > .rv-budget-set .rv-seg-btn { flex: 1 1 0; padding: 0 6px; white-space: nowrap; }
  #main-content .rv-legend > summary { font-size: 0; padding: 0 9px; }
}

/* Fold toggles: the label, then a caret that turns when open. */
#main-content .rv-panel-facts > summary, #main-content .rv-pick-more > summary, #main-content .rv-cmp-more > summary,
#main-content .rv-best-how > summary, #main-content .rv-pick-rules > summary, #main-content .rv-filters > summary,
#main-content .rv-picks-more > summary, #main-content .rv-how > summary, #main-content .rv-how-more > summary,
#main-content .rv-more > summary, #main-content .rv-details > summary, #main-content .rv-out-more > summary,
#main-content details.rv-outcome-note > summary, #main-content .rv-b-more > summary, #main-content .seo-faq summary,
#main-content .rd-table details > summary, #main-content .rv-fc-open {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: fit-content; max-width: 100%;
  min-height: var(--rc-h); box-sizing: border-box; padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
  list-style: none; cursor: pointer; color: inherit;
  font-family: var(--font-body); font-size: var(--rc-text); font-weight: 700; line-height: 1.3; text-align: left; white-space: normal;
}
#main-content .rv-how > summary h2, #main-content .rv-how > summary h3 { display: inline; margin: 0; font: inherit; color: inherit; }
#main-content .rv-how > summary { flex-wrap: wrap; row-gap: 0; }
#main-content .rv-how > summary .rv-how-sub { order: 3; flex-basis: 100%; margin: 0 0 8px; font-size: 0.9rem; font-weight: 400; }
#main-content .rv-panel-facts > summary::-webkit-details-marker, #main-content .rv-pick-more > summary::-webkit-details-marker,
#main-content .rv-cmp-more > summary::-webkit-details-marker, #main-content .rv-best-how > summary::-webkit-details-marker,
#main-content .rv-pick-rules > summary::-webkit-details-marker, #main-content .rv-filters > summary::-webkit-details-marker,
#main-content .rv-picks-more > summary::-webkit-details-marker, #main-content .rv-how > summary::-webkit-details-marker,
#main-content .rv-how-more > summary::-webkit-details-marker, #main-content .rv-more > summary::-webkit-details-marker,
#main-content .rv-details > summary::-webkit-details-marker, #main-content .rv-out-more > summary::-webkit-details-marker,
#main-content details.rv-outcome-note > summary::-webkit-details-marker, #main-content .rv-b-more > summary::-webkit-details-marker,
#main-content .seo-faq summary::-webkit-details-marker, #main-content .rd-table details > summary::-webkit-details-marker { display: none; }
#main-content .rv-panel-facts > summary::after, #main-content .rv-pick-more > summary::after, #main-content .rv-cmp-more > summary::after,
#main-content .rv-best-how > summary::after, #main-content .rv-pick-rules > summary::after, #main-content .rv-filters > summary::after,
#main-content .rv-picks-more > summary::after, #main-content .rv-how > summary::after, #main-content .rv-how-more > summary::after,
#main-content .rv-more > summary::after, #main-content .rv-details > summary::after, #main-content .rv-out-more > summary::after,
#main-content details.rv-outcome-note > summary::after, #main-content .rv-b-more > summary::after, #main-content .seo-faq summary::after,
#main-content .rd-table details > summary::after, #main-content .rv-fc-open::after {
  content: ''; flex: none; width: 7px; height: 7px; margin: -4px 2px 0; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); opacity: 0.7; transition: none;
}
#main-content details[open]:not(.rv-tip):not(.rv-legend) > summary::after, #main-content .rv-fc-open[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
#main-content .rv-tip > summary::after { content: ""; position: absolute; inset: -11px; width: auto; height: auto; margin: 0; border: 0; transform: none; }
#main-content .rv-legend > summary::after { content: none; }
#main-content .seo-faq details { padding-block: 0; }
#main-content .seo-faq details[open] { padding-bottom: 12px; }
#main-content .seo-faq details[open] summary { margin: 0; }
#main-content summary:focus-visible { outline: 3px solid #3B8FD6; outline-offset: 2px; }
#main-content .rv-pick-more > summary:hover, #main-content .rv-panel-facts > summary:hover, #main-content .rv-fc-open:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* Spacing: 8 inside a control group, 16 between rows in a card, 24 between blocks in a card, 32 between page sections;
   one inner padding for every card. */
:root { --rs-group: 8px; --rs-row: 16px; --rs-block: 24px; --rs-section: 32px; --rc-pad: 24px; }
@media (max-width: 760px) { :root { --rc-pad: 16px; } }
#main-content.seo-page { gap: var(--rs-section); }
#main-content.seo-page > * { margin-block: 0; }
#main-content .rv-how-all, #main-content .rv-how-all > :last-child { margin-bottom: 0; padding-bottom: 0; }

#main-content .seo-tool.rv-tool, #main-content .rv-finder { padding: var(--rc-pad); }
#main-content .rv-board, #main-content .rv-outcome, #main-content .rv-build, #main-content .rv-pick-tile, #main-content .rv-prof,
#main-content .rv-fc, #main-content .rv-best, #main-content .rd-cite { padding: var(--rs-row); }
#main-content .rv-filters { padding: 0 var(--rs-row); }
#main-content .rn-item { padding: var(--rs-row) var(--rs-row) var(--rs-row) 62px; }
#main-content .rn-item::before { left: var(--rs-row); top: var(--rs-row); }

#main-content .rv-tool { row-gap: var(--rs-block); column-gap: var(--rs-block); }
#main-content .rv-controls { gap: var(--rs-row); }
#main-content .rv-step { gap: var(--rs-group) var(--rs-row); }
#main-content .rv-tool .rv-step-l { min-height: var(--rc-h); }
#main-content .rv-main { gap: var(--rs-row); }
#main-content .rv-play, #main-content .rv-buys, #main-content .seo-next-steps, #main-content .rv-out-redo { gap: var(--rs-group); }
#main-content .rv-tool[data-layout="race"] .rv-lanes[data-stack="cols"], #main-content .rv-tool[data-layout="race"] .rv-side { column-gap: var(--rs-block); }
#main-content .rv-side { row-gap: var(--rs-row); }
#main-content .rv-outcome > .rv-cmp, #main-content .rv-outcome > .rv-best { margin-top: var(--rs-block); padding-top: var(--rs-block); }
#main-content .rv-picks, #main-content .rv-fgrid, #main-content .rn-list { gap: var(--rs-row); }
#main-content .rv-pick-tile, #main-content .rv-fc { gap: var(--rs-group); }
@media (max-width: 760px) {
  #main-content .rv-tool { row-gap: var(--rs-row); }
}
/* One column in every layout, ordered rather than placed in named rows, so a hidden builder or card leaves no doubled gap. */
#main-content .rv-tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
#main-content .rv-tool > * { grid-area: auto; }
#main-content .rv-tool > .rv-controls { order: 1; }
#main-content .rv-tool > .rv-build { order: 2; }
#main-content .rv-tool > .rv-console { order: 3; }
#main-content .rv-tool > .rv-main { order: 4; }
#main-content .rv-tool > .rv-outcome { order: 5; }
#main-content .rv-tool[data-layout="race"] > .rv-console { order: 6; }
#main-content .rv-tool > .rv-extras { order: 7; }