), and
an optional button at its end. `rs-opts` is a list of them, `rs-opts rs-opts-row` puts them side by side as chips. The edge is the card's light edge; the
pointer (or the key focus) gives the hover tint and the accent edge; a checked row has the accent tint and the accent edge (ONE HOVER above). */
:is(#sb,.rs-side) .rs-opts{display:grid;gap:6px}
:is(#sb,.rs-side) .rs-opts.rs-opts-row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
:is(#sb,.rs-side) .rs-opt{display:flex;align-items:flex-start;gap:10px;margin:0;padding:9px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--rs-card-edge);color:var(--ink);font:13px/1.35 system-ui,sans-serif;cursor:pointer}
:is(#sb,.rs-side) .rs-opts-row .rs-opt{align-items:center;justify-content:center;gap:7px;padding:9px 6px;font-weight:500}
:is(#sb,.rs-side) .rs-opt[hidden]{display:none}
:is(#sb,.rs-side) .rs-opt>input{flex:none;margin:2px 0 0}
:is(#sb,.rs-side) .rs-opts-row .rs-opt>input{margin:0}
:is(#sb,.rs-side) .rs-opt>span{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
:is(#sb,.rs-side) .rs-opts-row .rs-opt>span{flex:none}
:is(#sb,.rs-side) .rs-opt b{font-weight:600}
:is(#sb,.rs-side) .rs-opt small{color:var(--mut);font-size:12px;line-height:1.35}
:is(#sb,.rs-side) .rs-opt>button{flex:none;align-self:center}
:is(#sb,.rs-side) .rs-opt:is(:hover,:focus-within){background:var(--rs-hover-bg);box-shadow:inset 0 0 0 1px var(--accent)}
:is(#sb,.rs-side) .rs-opt:has(>input:checked){background:color-mix(in srgb,var(--card) 88%,var(--accent));box-shadow:inset 0 0 0 1.5px var(--accent)}
:is(#sb,.rs-side) .rs-opt:has(>input:checked):is(:hover,:focus-within){background:color-mix(in srgb,var(--card) 80%,var(--accent))}
:is(#sb,.rs-side) .rs-opt:has(>input:disabled){opacity:.55;cursor:not-allowed}
#sb .rs-chip{display:inline-block;padding:2px 8px;border-radius:10px;background:color-mix(in srgb,var(--mut) 18%,transparent);color:var(--ink);font-size:11px;font-weight:600;line-height:1.35}
#sb .rs-chip.accent{background:color-mix(in srgb,var(--accent) 16%,transparent);color:color-mix(in srgb,var(--accent) 70%,var(--ink))} /* the accent on its own tint: mixed with the text colour, readable in both themes */
#sb .rs-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--mut)}
/* ---- STREET VIEW DOCKED (street_view="dock", streetview.js): a side of the page. The window takes the right part of the screen with a divider, the map takes the rest;
on a phone the window is the lower part. The overlay's `#map{inset:0}` gives way to the window's share (`--rs-sv-w`). ---- */
html.rs-sv-docked.rs-overlay #map{right:var(--rs-sv-w,42%)!important;width:auto!important}
.rs-svw.rs-svw-dock{position:fixed;top:0;right:0;bottom:0;left:auto!important;width:var(--rs-sv-w,42%)!important;height:auto!important;max-width:none;border-radius:0;resize:none;
box-shadow:none;border-left:1px solid var(--rs-tb-border);-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--rs-card-bg)}
.rs-svw-drag{position:fixed;top:0;bottom:0;right:calc(var(--rs-sv-w,42%) - 5px);width:10px;cursor:col-resize;z-index:61;touch-action:none}
.rs-svw.rs-dragging iframe,.rs-svw.rs-dragging .rs-svw-pano,.rs-svw.rs-dragging .rs-svw-alt{pointer-events:none}
.rs-svw-drag:hover{background:color-mix(in srgb,var(--rs-tb-ink) 18%,transparent)}
.rs-svw-drag[hidden]{display:none}
html.rs-phone.rs-sv-docked.rs-overlay #map{right:0!important;bottom:45%!important;height:auto!important}
html.rs-phone .rs-svw.rs-svw-dock{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:45%!important}
/* The editor frame (frame.js, docs/guides/dashboard-parts.md): an editor that uses the whole panel. The title line goes into .sb-top (before the host's hide
button); the head row (the tab row, the editor's own row) stays, only the body scrolls (rs-pbody), and the bar is a flex item under the body, at the bottom
edge of the panel. The bar has no background of its own: nothing scrolls under it, so it has the color of the panel. An empty head row or bar does not show.
The colors are the theme's tokens. */
.rs-frame-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.rs-frame-title .t{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.rs-frame-back{flex:none;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--mut);font:600 12.5px system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.rs-frame-back:is(:hover,:focus-visible){background:var(--rs-hover-bg);color:var(--accent);border-color:var(--accent)}
/* the base look of a plain button and a field in roadstyle's parts (a frame: Ask, Edit design, an editor; the bottom dock), on every page: a roadstyle
page has the same rules for all of #sb in its template, but a host page (duckOSM Studio, duckosm edit) has no template. :where() gives them no
weight, so the part's own rules win. */
:where(.rs-frame, #rs-dock) button{padding:5px 11px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
:where(.rs-frame, #rs-dock) button:is(:hover,:focus-visible):not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--rs-hover-bg)}
:where(#sb, .rs-frame, #rs-dock) button:disabled{opacity:.5;cursor:not-allowed} /* also the panel's own buttons: no weight, so a part's own disabled look wins */
:where(.rs-frame, #rs-dock) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),textarea){box-sizing:border-box;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink);font:inherit;outline:none}
:where(.rs-frame) :is(input[type=password],input[type=text]){width:100%}
:where(.rs-frame, #rs-dock) :is(input,textarea):focus{border-color:var(--accent)}
.rs-frame{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;color:var(--ink);font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.rs-frame [hidden]{display:none!important}
#sb .rs-frame-head{flex:none;margin:0 15px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#sb .rs-frame-head:empty{display:none}
#sb .rs-frame-head .rs-tabs{padding:0;margin:0;border:0}
#sb .rs-panel-tabs{flex:none;padding:0 15px 10px;margin:0} /* Ask as a tab (askPanel tab:): the row under the panel's title, outside the cards and the frame */
.rs-frame-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 15px 24px}
/* the bar's line is inset as the head row's line (Kaveh: the full-width line above Examples, "make it better and shorter"); Ask has no line: its
question box has its own edge */
.rs-frame-bar{flex:none;margin:0 15px;padding:8px 0 10px;border-top:1px solid var(--line);font-size:12.5px}
.rs-frame-bar:has(> .rs-ask-comp){border-top:0}
.rs-frame-bar:empty{display:none}
html.rs-phone .rs-frame-back,html.rs-phone .rs-frame .rs-tab{min-height:44px}
/* on a phone the tab row is one row that scrolls sideways (frame.js scrolls the selected tab into view): the body keeps its room */
html.rs-phone #sb .rs-frame-head .rs-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
html.rs-phone #sb .rs-frame-head .rs-tab{flex:none}
/* The design panel (design/design_panel.js, docs/guides/design-panel.md): its content in the editor frame. */
#sb{--rs-dz-soft:color-mix(in srgb,var(--accent) 12%,transparent)}
.rs-dz-title .dname{font-size:12px;color:var(--mut);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rs-dz-bar .line{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rs-dz-bar b{font-weight:600}
.rs-dz-bar .st{margin:2px 0 0;min-height:1.3em;color:var(--mut);line-height:1.3}
.rs-dz-bar #design-notice{min-height:0;color:var(--ink)}
.rs-dz-bar #design-notice:empty{display:none}
.rs-dz .why,.rs-dz .small{font-size:12px;color:var(--mut);line-height:1.4;margin:0 0 8px}
.rs-dz .small{color:var(--ink)}
.rs-dz .muted,.rs-dz .col small{color:var(--mut)}
.rs-dz .row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.rs-dz .row button{flex:1 1 0;white-space:nowrap}
.rs-dz button.sm{height:28px;padding:0 9px;font-size:12px}
.rs-dz button.danger{border-color:var(--rs-err);color:var(--rs-err)}
.rs-dz .drow2{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin:0 0 6px;font-size:13px}
.rs-dz .drow2>span:first-child{min-width:0;overflow-wrap:anywhere}
.rs-dz .drow2.cls,.rs-dz .rhead{grid-template-columns:1fr 52px 52px}
.rs-dz .drow2.two{grid-template-columns:1fr 70px 70px}
.rs-dz .drow2.rng{grid-template-columns:1fr minmax(90px,140px) 3.6em}
.rs-dz .drow2.rng output{text-align:right;font-variant-numeric:tabular-nums;color:var(--mut);font-size:12px}
.rs-dz .drow2:has(input[type=text]){grid-template-columns:4em 1fr}
.rs-dz .rhead{display:grid;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:4px}
.rs-dz .rhead span{text-align:center}
.rs-dz .rs-cp,.rs-dz .rs-cp-btn{width:100%} /* a colour of the design panel fills its column */
.rs-dz input[type=color]{width:100%;min-width:44px;height:30px;padding:1px 2px;border:1px solid var(--line);border-radius:6px;background:var(--bg);cursor:pointer}
/* a colour box of a panel has the hover of a button: the accent border and the tint */
:is(#sb,.rs-side,.rs-frame,#rs-dock) input[type=color]:is(:hover,:focus-visible):not(:disabled){border-color:var(--accent);background:var(--rs-hover-bg);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.rs-dz input[type=number],.rs-dz input[type=text],.rs-dz input[type=search]{height:32px;min-width:0;width:100%;box-sizing:border-box}
.rs-dz .drow2 .rs-sel,.rs-dz .drow2>select{width:auto;max-width:11em}
.rs-dz .optrow{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;margin-bottom:6px}
.rs-dz .optrow:has(input:checked){border-color:var(--accent-fill);background:var(--rs-dz-soft)}
.rs-dz .optrow input{margin:2px 0 0;accent-color:var(--accent-fill);flex:none}
.rs-dz .optrow .t{display:flex;flex-direction:column;gap:2px}
.rs-dz .optrow small{color:var(--mut);font-size:12px;line-height:1.35}
.rs-dz .themes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rs-dz .theme{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;height:auto;min-width:0}
.rs-dz .theme:hover{border-color:var(--accent-fill)}
.rs-dz .theme[aria-checked=true],.rs-dz .theme.mine[aria-current=true]{border-color:var(--accent-fill);background:var(--rs-dz-soft);box-shadow:inset 3px 0 0 var(--accent-fill)}
.rs-dz .theme small,.rs-dz .themes .kind small{color:var(--mut);font-size:12px;line-height:1.35}
.rs-dz .themes .kind{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.rs-dz .themes .kind:first-child{margin-top:0}
.rs-dz .theme.mine{cursor:default}
.rs-dz .theme.mine .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.rs-dz .sw5{display:flex;width:100%;height:14px;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.rs-dz .sw5 i{flex:1}
.rs-dz .sw5 i.none{background:repeating-conic-gradient(#c8c8c8 0 25%,#ffffff 0 50%) 0 0/8px 8px}
.rs-dz .yours{font-size:10.5px;font-weight:600;padding:0 6px;border-radius:999px;border:1px solid var(--accent-fill);color:var(--accent);background:var(--card);vertical-align:1px}
.rs-dz #theme-search{margin-bottom:6px}
.rs-dz .chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.rs-dz .chip{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer}
.rs-dz .chip[aria-pressed=true]{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.rs-dz #mine-list{margin:8px 0}
.rs-dz .cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;font-size:12.5px}
.rs-dz .cols .col{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.rs-dz .cols.two .col{justify-content:space-between}
.rs-dz .cols.two input[type=number]{width:56px}
.rs-dz .fix-group{margin:12px 0 4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.rs-dz .fix-group:first-child{margin-top:0}
.rs-dz .bad{color:var(--rs-err)}
html.rs-phone .rs-dz .row button,html.rs-phone .rs-dz .chip{min-height:44px}
/* the preview under a transparent ground: the map container has the color of the base map, the checkerboard goes over that color */
.rs-checker{background-image:repeating-conic-gradient(#d4d4d4 0 25%,#ffffff 0 50%);background-size:24px 24px}
/* ONE HOVER, the rest: keyboard focus has a ring as well as the hover look; a link is underlined under the pointer */
:is(#sb,#rs-toolbar,#rs-help,.rs-help-box,#rs-scalebox,.rs-day-cal,.rs-svw) :is(button,select,summary,a[href]):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:is(#sb,#rs-help,.rs-help-box,.rs-svw) a[href]{text-decoration:none}
.sb-card a[href]{color:var(--accent)} /* a link in the panel has the accent (a page's own link rule is more specific and wins); before, it had the browser's blue */
:is(#sb,#rs-help,.rs-help-box,.rs-svw) a[href]:is(:hover,:focus-visible){text-decoration:underline}
:is(#sb,#rs-help,.rs-help-box) summary{border-radius:6px;cursor:pointer}
:is(#sb,#rs-help,.rs-help-box) summary:is(:hover,:focus-visible){background:var(--rs-hover-bg);color:var(--accent)}
/* ---- THE BOTTOM DOCK (dock.js, docs/guides/dashboard-layout.md): a wide area under the map. html.rs-dock-has while it has a content, rs-dock-open or
rs-dock-shut, and --rs-dock-h its height on a desktop (0 on a phone). The map, the panel, the bar along the bottom and the corner box end above it;
with the card look the map goes on under it, and the dock is the panel's glass. Only its top corners are round. ---- */
html{--rs-dock-h:0px}
html.rs-dock-has:not(.rs-phone):not(.rs-panel-card) #map{bottom:var(--rs-dock-h)!important;height:auto!important}
html.rs-dock-has:not(.rs-phone).rs-overlay #sb{bottom:var(--rs-dock-h)}
html.rs-dock-has:not(.rs-phone).rs-overlay.rs-panel-card #sb{bottom:calc(var(--rs-dock-h) + 8px)}
html.rs-dock-has:not(.rs-phone) #rs-toolbar.rs-tb-bottom{bottom:calc(var(--rs-dock-h) + 8px)}
/* a bar at a side: the rule of the bar above (centred, at most the free height, wraps to a second column), in the part above the dock */
html.rs-dock-has:not(.rs-phone) #rs-toolbar:is(.rs-tb-right,.rs-tb-left){top:max(51px,min(calc((100% - var(--rs-dock-h)) / 2),calc(100% - var(--rs-dock-h) - 87px)));max-height:max(86px,calc(100% - var(--rs-dock-h) - 128px))}
html.rs-dock-has:not(.rs-phone) #rs-scalebox{bottom:calc(var(--rs-dock-h) + 8px)}
html.rs-dock-open:not(.rs-phone) #rs-scalebox{display:none} /* the credits: back when the dock closes; on a phone they are in the bar */
#rs-dock{position:fixed;left:0;right:0;bottom:0;z-index:7;height:var(--rs-dock-h);display:flex;flex-direction:column;box-sizing:border-box;
background:var(--bg);color:var(--ink);border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.16);font:13px/1.4 system-ui,sans-serif}
html:not(.rs-dock-has) #rs-dock,html:not(.rs-dock-has) #rs-dock-pill{display:none}
html.rs-panel-card:not(.rs-phone) #rs-dock{background:var(--rs-card-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* the boxes in the dock (the table, the chart, the list of the tables, the road card): with the card look the map shows through them too (Kaveh,
2026-11-06: "background of table, chart need more transparent"); the fixed header row and first column stay nearly solid, else the rows that scroll
under them show through their text. With the frame look and on a phone they are solid. */
#rs-dock{--rs-dk-box:var(--bg);--rs-dk-solid:var(--bg);--rs-dk-head:var(--card)}
html.rs-panel-card:not(.rs-phone) #rs-dock{--rs-dk-box:color-mix(in srgb,var(--bg) 35%,transparent);--rs-dk-solid:color-mix(in srgb,var(--bg) 88%,transparent);--rs-dk-head:color-mix(in srgb,var(--card) 88%,transparent)}
/* the grip: no colour of its own; under the pointer or while it is dragged, the dock's top edge is the accent (an inset shadow follows the round corners) */
.rs-dock-grip{position:absolute;top:-4px;left:14px;right:14px;height:8px;cursor:row-resize;touch-action:none;z-index:1}
#rs-dock:has(.rs-dock-grip:hover),#rs-dock:has(.rs-dock-grip.on){box-shadow:inset 0 2px 0 0 var(--accent),0 -4px 18px rgba(0,0,0,.16)}
.rs-dock-hd{display:flex;align-items:center;gap:10px;height:32px;flex:0 0 32px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);min-width:0}
html.rs-dock-shut .rs-dock-hd{border-bottom:0;cursor:pointer}
.rs-dock-title{font-weight:650;white-space:nowrap}
.rs-dock-tabs{display:flex;gap:2px}
#rs-dock .rs-dock-tabs[hidden],.rs-dock-title[hidden],#rs-dock .rs-dock-x[hidden]{display:none}
.rs-dock-note{color:var(--mut);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dock-sp{flex:1}
.rs-dock-acts{display:flex;gap:6px;align-items:center}
html.rs-dock-shut .rs-dock-acts{display:none}
/* a phone: the actions go to a row of their own under the title (the title row was wider than the screen); the row scrolls sideways */
html.rs-phone .rs-dock-hd{flex-wrap:wrap;height:auto;flex:0 0 auto;min-height:32px;row-gap:4px;padding-bottom:4px}
html.rs-phone .rs-dock-hd > :not(.rs-dock-acts){flex:none}
html.rs-phone .rs-dock-hd > .rs-dock-sp{flex:1 1 0}
html.rs-phone .rs-dock-hd > .rs-dock-note{flex:0 1 auto;min-width:0}
html.rs-phone .rs-dock-acts{order:9;flex:1 0 100%;min-width:0;overflow-x:auto;scrollbar-width:thin}
html.rs-phone .rs-dock-acts > *{flex:none}
.rs-dock-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 14px 10px;gap:6px}
html.rs-dock-shut .rs-dock-body{display:none}
html.rs-dock-shut .rs-dock-arrow svg{transform:rotate(180deg)}
/* the controls: the panel's look (the template gives it only inside #sb) */
#rs-dock button{font:inherit;font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:3px 10px;cursor:pointer}
#rs-dock button.sb-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;font-weight:600}
#rs-dock :is(.rs-dock-arrow,.rs-dock-x){border:0;background:none;color:var(--mut);padding:4px 6px;display:inline-flex;align-items:center}
#rs-dock .rs-tab{border:1px solid transparent;background:none;color:var(--mut);font-weight:600;padding:3px 10px;border-radius:7px}
#rs-dock .rs-tab.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
#rs-dock button:is(:hover,:focus-visible):not(:disabled):not(.sb-primary):not(.rs-tab.on){background:var(--rs-hover-bg);color:var(--accent);border-color:var(--accent)}
#rs-dock :is(.rs-dock-arrow,.rs-dock-x,.rs-tab):is(:hover,:focus-visible):not(.on){border-color:transparent}
#rs-dock :is(button.sb-primary,.rs-tab.on):is(:hover,:focus-visible):not(:disabled){filter:brightness(1.1)}
#rs-dock :is(button,select,summary,a[href],th):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#rs-dock input,#rs-dock select,#rs-dock textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px}
/* the dock's table: as wide as its columns, the height of the dock, both scrollbars always visible, the header row and the first column in view */
#rs-dock .rs-dock-table{flex:1;min-height:0;max-height:none;align-self:flex-start;max-width:100%;box-sizing:border-box;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--rs-dk-box);
scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) var(--rs-thumb,47%),transparent) transparent;-webkit-mask-image:none;mask-image:none}
#rs-dock .rs-dock-table table{table-layout:fixed;width:max-content;border-collapse:separate;border-spacing:0;font:12.5px/1.35 system-ui,sans-serif;font-variant-numeric:tabular-nums}
#rs-dock .rs-dock-table :is(th,td){white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;padding:5px 14px;text-align:left;border-bottom:1px solid var(--line);height:15px}
#rs-dock .rs-dock-table th{position:sticky;top:0;z-index:2;background:var(--rs-dk-head);font-weight:600;vertical-align:bottom;cursor:pointer;user-select:none}
#rs-dock .rs-dock-table th small{display:block;font:500 10px/1.2 system-ui,sans-serif;color:var(--mut);letter-spacing:.03em}
#rs-dock .rs-dock-table .n{text-align:right}
#rs-dock .rs-dock-table tbody tr:nth-child(even){--rs-row:color-mix(in srgb,var(--ink) 4%,transparent)}
#rs-dock .rs-dock-table td{background:var(--rs-row,transparent)}
#rs-dock .rs-dock-table :is(td,th):first-child{position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 var(--line)}
/* the first column stays in view over the cells that scroll under it: the tint of its row over a nearly solid layer */
#rs-dock .rs-dock-table td:first-child{background:linear-gradient(var(--rs-row,transparent),var(--rs-row,transparent)),var(--rs-dk-solid)}
#rs-dock .rs-dock-table th:first-child{z-index:3;background:var(--rs-dk-head)}
#rs-dock .rs-dock-table tr.rs-dock-id{cursor:pointer}
#rs-dock .rs-dock-table tbody tr:hover{--rs-row:color-mix(in srgb,var(--ink) 7%,transparent)}
#rs-dock .rs-dock-table thead th:is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent) 12%,var(--rs-dk-head));color:var(--accent)}
#rs-dock .rs-dock-table tbody tr.rs-dock-id:hover{--rs-row:color-mix(in srgb,var(--accent) 14%,transparent)}
#rs-dock .rs-dock-table tbody tr.rs-dock-id:hover td{color:var(--accent)}
#rs-dock .rs-dock-table thead th:is(:hover,:focus-visible) small{color:var(--accent)}
#rs-dock .rs-dock-table tr.on{--rs-row:color-mix(in srgb,var(--accent) 24%,transparent)}
#rs-dock .rs-dock-table tbody tr.on td:first-child{box-shadow:inset 3px 0 var(--accent),inset -1px 0 var(--line)} /* the selected row: the tint and a bar, as rs-row */
#rs-dock .rs-dock-table tbody tr.rs-dock-id:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#rs-dock .rs-dock-table tr.rs-dock-pad td{padding:0;border:0;background:none}
#rs-dock .rs-dock-null{color:var(--mut);font-style:italic}
#rs-dock .rs-dock-table th[data-sort] span{color:var(--accent)}
#rs-dock .rs-dock-table th[data-sort=asc] span::after{content:" \25B2";font-size:8px;vertical-align:1px}
#rs-dock .rs-dock-table th[data-sort=desc] span::after{content:" \25BC";font-size:8px;vertical-align:1px}
/* a phone: a bottom sheet (40 % or full), one sheet at a time (windows.js); a closed dock is a round button above the panel's sheet */
html.rs-phone #rs-dock{left:0;right:0;height:40dvh;z-index:30}
html.rs-phone.rs-dock-full #rs-dock{height:calc(100dvh - 64px)}
html.rs-phone.rs-dock-shut #rs-dock{display:none}
html.rs-phone .rs-dock-grip{position:static;height:44px;flex:0 0 22px;margin:-11px 0;cursor:pointer;display:flex;justify-content:center;align-items:center;z-index:2}
html.rs-phone .rs-dock-grip::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--mut);opacity:.6}
html.rs-phone #rs-dock .rs-dock-table{max-width:100%}
#rs-dock-pill{position:fixed;right:12px;bottom:calc(40dvh + 8px);z-index:29;display:none;border-radius:999px;padding:6px 12px;font:600 12px system-ui,sans-serif;background:var(--accent-fill);color:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rs-dock-pill:is(:hover,:focus-visible){filter:brightness(1.1)}
html.rs-phone.rs-dock-shut #rs-dock-pill{display:block}
html.rs-phone.rs-dock-shut.rs-sheet-0 #rs-dock-pill{bottom:56px}
html.rs-phone.rs-dock-shut.rs-sheet-2 #rs-dock-pill{display:none}
/* ---- THE DATA DOCK (data/data_dock.js, docs/guides/data-dock.md): in the bottom dock, the SQL line over the table and the road card beside it ---- */
#rs-dock .rs-dd{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.rs-dd-acts{display:flex;gap:12px;align-items:center} /* the groups: their edge is the card edge, clear in the dark theme too (Kaveh) */
/* a group is one joined control, as Table | Chart: one edge round it and a thin line between its buttons; a button that is on (Tables open, Light
on) is filled */
#rs-dock .rs-dd-grp{display:inline-flex;flex:none;border:1px solid var(--rs-card-edge);border-radius:8px;overflow:hidden}
#rs-dock .rs-dd-grp > button{border:0;border-radius:0;padding:3px 10px}
#rs-dock .rs-dd-grp > button + button{border-left:1px solid var(--rs-card-edge)}
#rs-dock .rs-dd-grp > button.on{background:var(--accent-fill);color:#fff}
#rs-dock .rs-dd-acts button.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
#rs-dock .rs-dd-grp label.rs-dd-light{flex:none;margin:0;padding:0 10px;font-size:12px;white-space:nowrap;border-right:1px solid var(--rs-card-edge)} /* the map switch: the first part of the map group, On or Off */
#rs-dock .rs-dd-grp label.rs-dd-light span{min-width:2em} /* On and Off take the same room: Colour and Focus do not move */
.rs-dd-count{min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--accent-fill);color:#fff;font:600 10.5px/16px system-ui,sans-serif;text-align:center;display:inline-block}
.rs-dd-count[hidden]{display:none}
.rs-dd-q{display:flex;gap:8px;align-items:flex-start}
#rs-dock .rs-dd-line{flex:1;min-width:0;text-align:left;cursor:text;background:var(--card);border-radius:8px;padding:6px 10px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rs-dock .rs-dd-line.empty{color:var(--mut)}
.rs-dd-edit{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rs-dd-edit-hint{font-size:11px;color:var(--mut);padding-left:4px}
.rs-dd-ta{flex:1;min-width:0;width:100%;box-sizing:border-box;resize:none;border:1px solid var(--accent)!important;border-radius:8px;padding:6px 10px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;outline:2px solid color-mix(in srgb,var(--accent) 25%,transparent)}
#rs-dock .rs-dd-run{border-radius:8px;padding:6px 16px;white-space:nowrap}
#rs-dock .rs-dd-qb{flex:none;border-radius:8px;padding:6px 12px;white-space:nowrap} /* Tables (before the SQL line) and CSV (after Run) */
#rs-dock .rs-dd-qb.rs-dd-ib{display:inline-flex;align-items:center;padding:6px 9px} /* the icons: the tables (a database) and the download */
#rs-dock .rs-dd-qb.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.rs-dd-err{color:var(--rs-err);font-size:12px;white-space:pre-wrap}
.rs-dd-err:empty{display:none}
/* the list of the tables: in the place of the table while it is open; a search field, a group for each schema, a card for each table */
.rs-dd-tables{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--rs-dk-box);overflow:hidden}
.rs-dd-tables[hidden],.rs-dd-split[hidden],.rs-dd-tgroup[hidden],.rs-dd-tcard[hidden]{display:none!important}
.rs-dd-thead{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--rs-dk-head)}
#rs-dock .rs-dd-tfind{flex:1;min-width:0;padding:5px 10px;border-radius:7px;font-size:12.5px}
#rs-dock .rs-dd-tfind:focus{outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.rs-dd-tcount{flex:1;color:var(--mut);font-size:12px}
#rs-dock .rs-dd-tclose{border:0;background:none;color:var(--mut);padding:2px 8px}
.rs-dd-tbody{flex:1;min-height:0;overflow:auto;padding:4px 10px 10px;scrollbar-width:thin}
.rs-dd-tgroup{margin-top:8px}
.rs-dd-tg-h{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:12px;color:var(--mut)}
.rs-dd-tg-h b{font:600 11px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.rs-dd-tg-own{color:var(--accent);font-weight:600}
.rs-dd-tgrid{display:grid;grid-template-columns:1fr;gap:5px} /* one card under the other in the side column */
#rs-dock .rs-dd-tcard{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 55%,transparent);cursor:pointer}
#rs-dock .rs-dd-tcard:is(:hover,:focus-visible){border-color:var(--accent);background:var(--rs-hover-bg);color:inherit}
.rs-dd-tc-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.rs-dd-tc-name{flex:1;min-width:0;font:600 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rs-dock .rs-dd-tcard:is(:hover,:focus-visible) .rs-dd-tc-name{color:var(--accent)}
.rs-dd-tc-rows{flex:none;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.rs-dd-tc-about{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-tgrid{align-items:start}
.rs-dd-split{flex:1;min-height:0;display:flex;gap:10px}
#rs-dock .rs-dd-split .rs-dock-table{flex:1 1 0;min-width:0;min-height:0;align-self:stretch;max-width:none} /* (#rs-dock: over the table's own align-self: flex-start, which gave it the height of its rows: no scroll) */
.rs-dd-side{flex:0 0 300px;box-sizing:border-box;min-height:0;display:flex;flex-direction:column}
.rs-dd-side[hidden],.rs-dd-card[hidden]{display:none!important}
.rs-dd-side-hint{margin:auto 0;padding:0 20px;text-align:center;color:var(--mut);font-size:12px}
.rs-dd-side-hint[hidden]{display:none}
.rs-dd-side.empty{border:1px dashed var(--line);border-radius:8px}
html.rs-phone .rs-dd-side.empty{display:none}
.rs-dd-chart:not([hidden])~.rs-dd-side.empty{display:none} /* the Chart view: the chart takes the width of an empty side column (the Table view keeps it) */
.rs-dd-card{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:8px;background:var(--rs-dk-box);padding:10px 12px;font:12px/1.4 system-ui,sans-serif;scrollbar-width:thin}
.rs-dd-rc-hd{display:flex;align-items:flex-start;gap:8px}
.rs-dd-rc-name{flex:1;min-width:0;font:600 14px/1.3 system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}
#rs-dock .rs-dd-rc-x{flex:none;border:0;background:none;color:var(--mut);padding:0 4px;font-size:12px;line-height:20px}
.rs-dd-rc-chips{display:flex;flex-wrap:wrap;gap:4px}
.rs-dd-rc-chip{padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);font-size:11.5px;white-space:nowrap}
.rs-dd-rc-chip.strong{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:600}
.rs-dd-rc-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;padding-top:6px;border-top:1px solid var(--line)}
.rs-dd-rc-rows dt{color:var(--mut);white-space:nowrap}
.rs-dd-rc-rows dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-rc-foot{display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.rs-dd-rc-parts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--mut)} /* the parts of an object (a turn): a swatch of the role's colour and the role */
.rs-dd-rc-part{display:inline-flex;align-items:center;gap:5px}
.rs-dd-rc-part .rs-dd-sw{width:14px;height:8px}
.rs-dd-rc-sec{display:flex;flex-direction:column;gap:3px;padding-top:6px;border-top:1px solid var(--line)} /* a section of a kind's card: a small title and rows */
.rs-dd-rc-sec .rs-dd-rc-rows{padding-top:0;border-top:0}
.rs-dd-rc-sec-t{font:600 11px/1.3 system-ui,sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.rs-dd-rc-note{margin:0;font-size:12px;color:var(--mut)}
.rs-dd-rc-note.err{color:var(--rs-err);white-space:pre-wrap}
.rs-dd-rc-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:6px;border-top:1px solid var(--line)} /* the one action of a kind's card: a line and a button */
.rs-dd-rc-act-t{flex:1;min-width:0;color:var(--mut);font-size:12px}
#rs-dock .rs-dd-rc-act button{padding:2px 10px;font-size:11.5px}
.rs-dd-rc-act .rs-dd-rc-note{flex-basis:100%}
.rs-dd-rc-id{flex:1;min-width:0;color:var(--mut);font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rs-dock .rs-dd-rc-foot button{padding:2px 8px;font-size:11.5px}
.rs-dd-card[hidden]{display:none}
html.rs-phone .rs-dd-split{flex-direction:column}
html.rs-phone .rs-dd-side{flex:0 0 auto;max-height:55%}
/* a phone's Chart view: the dock has no height for the settings, the chart and a side card together (they overlapped); the side card (the road or
the list of tables) takes the place of the chart while it shows, and its ✕ gives the chart back: one thing at a time, as the phone's sheets */
html.rs-phone .rs-dd-chart:has(~ .rs-dd-side:not(.empty)){display:none}
html.rs-phone .rs-dd-chart:not([hidden]) ~ .rs-dd-side:not(.empty){flex:1 1 0;max-height:none}
html.rs-phone .rs-dd-q{flex-wrap:wrap}
/* the lists of Colour and Focus: a box in the look of the toolbox's boxes, under its button */
.rs-dd-menu{position:fixed;z-index:31;min-width:300px;max-width:min(420px,calc(100vw - 16px));max-height:50dvh;overflow:auto;box-sizing:border-box;padding:6px;border:1px solid var(--rs-tb-border,var(--line));border-radius:10px;
background:var(--rs-box-bg,var(--bg));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font:12px/1.35 system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.22)}
.rs-dd-menu[hidden]{display:none}
.rs-dd-menu button{font:inherit;color:inherit;background:none;border:0;border-radius:6px;padding:3px 8px;cursor:pointer}
.rs-dd-menu button:is(:hover,:focus-visible):not(:disabled){background:var(--rs-hover-bg);color:var(--accent)}
.rs-dd-menu button:disabled{opacity:.45;cursor:default}
.rs-dd-menu-add{display:block;width:100%;text-align:left;font-weight:600!important;color:var(--accent)!important}
.rs-dd-menu-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer}
.rs-dd-menu-row:hover{background:var(--rs-hover-bg)}
.rs-dd-menu-row.off{opacity:.6}
.rs-dd-menu-row input{margin:0;accent-color:var(--accent)}
.rs-dd-menu-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-dd-menu-row small{color:var(--mut);font-variant-numeric:tabular-nums}
.rs-dd-sw{width:12px;height:4px;border-radius:2px;display:inline-block}
.rs-dd-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.rs-dd-menu .rs-dd-seg button{border-radius:0;padding:1px 7px}
.rs-dd-menu .rs-dd-seg button.on{background:var(--accent-fill);color:#fff}
.rs-dd-menu-empty{margin:4px 8px;color:var(--mut)}
/* ---- ASK (ask/ask_panel.js, docs/guides/ask.md): an editor frame in the panel. The head row is the tool row, the body the conversation (one card for
each question, an outline with no fill), the bar the question box: one box with the text and a round send button inside it ---- */
#sb .rs-ask-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.rs-ask-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sb .rs-ask-top > button:not(.rs-help-btn){font-size:12px;padding:3px 10px}
#sb .rs-ask-top button.rs-ask-keyb.on{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
#sb .rs-ask-top button.rs-ask-keyb.on:is(:hover,:focus-visible){filter:brightness(1.1);background:var(--accent-fill);color:#fff}
.rs-ask-ex{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0 0 4px}
.rs-ask-hint{color:var(--mut);font-size:12px;margin:0 0 4px}
.rs-ask-grp{margin:6px 0 0;font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.rs-ask-grp:first-child{margin-top:0}
.rs-ask-need{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 6px;font-size:12.5px}
.rs-ask-need:empty{display:none}
.rs-ask-need p{margin:0}
/* an example question: a row of the panel's button look, the full width, its text at the left (Kaveh, 2026-11-06: the grey pills, "i dont like
this style and color"; a pill is also the look of a tag that does not click) */
#sb .rs-ask button.rs-ask-q{display:block;width:100%;box-sizing:border-box;padding:7px 11px;border:1px solid var(--line);border-radius:8px;
background:var(--card);color:var(--ink);text-align:left;white-space:normal;font:13px/1.4 system-ui,sans-serif;cursor:pointer}
#sb .rs-ask button.rs-ask-q:is(:hover,:focus-visible){border-color:var(--accent);color:var(--accent);background:var(--rs-hover-bg)}
.rs-ask-turn{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:transparent}
.rs-ask-turn-hd{display:flex;align-items:flex-start;gap:8px}
.rs-ask-turn .q{flex:1;min-width:0;margin:0 0 6px;font-weight:600;overflow-wrap:anywhere}
#sb .rs-ask-x{flex:none;border:0;background:none;color:var(--mut);font-size:12px;padding:2px 6px;border-radius:6px}
.rs-ask-turn .step,.rs-ask-turn .rs-ask-by{color:var(--mut);font-size:12px;margin:2px 0}
/* the sign that Ask works: a turning ring before the step line ("Asking Groq …") while the question runs */
.rs-ask-turn .step::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:-1px;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:rs-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.rs-ask-turn .step::before{animation-duration:3s}}
.rs-ask-key [hidden]{display:none!important} /* Save key and Clear show only when they can act */
.rs-ask-order{margin:4px 0 0;padding-left:20px;font-size:13px}
.rs-ask-turn .a{margin:4px 0 6px;overflow-wrap:anywhere}
.rs-ask-turn .a p{margin:0 0 6px}
.rs-ask-turn .a ul{margin:0 0 4px;padding-left:18px}
.rs-ask-turn .a li{margin:2px 0}
.rs-ask-turn .a code{font:12px ui-monospace,Menlo,monospace;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:0 3px}
#sb .rs-ask-more{border:0;background:none;padding:0 0 4px;color:var(--accent);font-size:12px}
.rs-ask-turn .rs-ask-err{color:var(--rs-err);margin:0 0 6px;font-size:12.5px}
.rs-ask-map{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;margin:4px 0}
.rs-ask-map-k{font:600 10px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:3px 6px}
.rs-ask-map-to{color:var(--mut);font-size:11.5px;margin-left:auto}
.rs-ask-foot{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;margin-top:4px}
.rs-ask-turn details{font-size:12px;color:var(--mut);flex:1;min-width:0}
.rs-ask-turn details code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.45 ui-monospace,Menlo,monospace;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin:4px 0}
.rs-ask-turn .rs-ask-failed{margin:2px 0 0 12px}
.rs-ask-acts{flex:none;display:flex;gap:6px}
#sb .rs-ask-show{font-size:12px;padding:2px 10px}
/* the key form: in place of the conversation, with its own way back to the chat */
.rs-ask-key{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rs-ask-keyhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.rs-ask-keyhd b{font-size:13px}
#sb .rs-ask-krow{margin:0}
#sb .rs-ask-krow > span{display:block;margin-bottom:3px}
.rs-ask-key > a{font-size:12px}
.rs-ask-btns{display:flex;justify-content:flex-end;gap:6px}
.rs-ask-keynote{font-size:11.5px;color:var(--mut);margin:0}
#sb .rs-ask-key .rs-q{font:13px system-ui,-apple-system,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0} /* not the 11 px of the template's label around it */
/* the bar: "Examples ▴" (after the first question; its list opens over the chat, above the box) and the question box */
.rs-ask-exbar{position:relative;display:flex;margin-bottom:6px}
#sb .rs-ask-exb{border:0;background:none;padding:2px 6px;font:500 12px system-ui,sans-serif;color:var(--mut);display:inline-flex;align-items:center;gap:4px;border-radius:6px}
.rs-ask-exb[aria-expanded=false] svg{transform:rotate(180deg)}
/* the list is as high as the free space above the question box at most (ask_panel.js sets max-height from the frame's body) and scrolls inside */
.rs-ask-exlist{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px;
box-sizing:border-box;overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.rs-ask-exlist > *{flex:none}
.rs-ask-comp{display:flex;align-items:flex-end;gap:6px;padding:5px 5px 5px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.rs-ask-comp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
#sb .rs-ask-comp textarea{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;resize:none;
padding:6px 0!important;margin:0;font:13px/20px system-ui,-apple-system,sans-serif;color:var(--ink);height:32px;max-height:132px;overflow-y:auto}
#sb .rs-ask-comp .rs-ask-send{flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent-fill)!important;color:#fff!important}
#sb .rs-ask-comp .rs-ask-send:is(:hover,:focus-visible):not(:disabled){filter:brightness(1.1)}
#sb .rs-ask-comp .rs-ask-send.stop{background:var(--ink)!important;color:var(--bg)!important}
/* the data dock's chart view: the row of Kind, X, Y and SVG over the chart; the chart fills the dock */
#rs-dock .rs-dd-view{display:inline-flex;border:1px solid var(--rs-card-edge);border-radius:8px;overflow:hidden}
#rs-dock .rs-dd-view button{border:0;border-radius:0;padding:3px 10px}
#rs-dock .rs-dd-view button.on{background:var(--accent-fill);color:#fff}
.rs-dd-chart{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
/* three cards in the Chart view: the settings, the chart and the road (Kaveh, 2026-11-06: "divide this to 3 parts not two"); flat cards, no fill */
.rs-dd-chartrow,.rs-dd-cmain{border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:8px;background:transparent;padding:8px 12px}
/* the side card of the Chart view (the road, or the list of tables) is flat as the two chart cards (Kaveh, 2026-11-06: "this card is not like"
the others); the Table view keeps the fill of its table */
.rs-dd-chart:not([hidden])~.rs-dd-side :is(.rs-dd-card,.rs-dd-tables){border-color:color-mix(in srgb,var(--line) 70%,transparent);background:transparent}
.rs-dd-chart[hidden],#rs-dock .rs-dock-table[hidden]{display:none}
.rs-dd-chartrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px}
.rs-dd-cl{display:inline-flex;gap:6px;align-items:center;color:var(--mut);font-size:12px}
.rs-dd-cl .rs-sel{width:170px}
#rs-dock .rs-dd-cl .rs-sel-btn{padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:var(--rs-dk-solid);color:var(--ink);font-size:12.5px}
#rs-dock .rs-dd-cl .rs-sel-btn:hover:not(:disabled){background:var(--rs-hover-bg);color:var(--accent);border-color:var(--accent)}
.rs-dd-kinds{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:8px;background:var(--rs-dk-solid)}
#rs-dock .rs-dd-kind{display:grid;place-items:center;width:30px;height:26px;padding:0;border:0;border-radius:6px;background:none;color:var(--mut)}
#rs-dock .rs-dd-kind:is(:hover,:focus-visible):not(.on){background:var(--rs-hover-bg);color:var(--accent)}
#rs-dock .rs-dd-kind.on{background:var(--accent-fill);color:#fff}
.rs-dd-sp{flex:1}
.rs-dd-chartel{flex:1;min-height:0}
.rs-dd-cmain{position:relative;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column}
#rs-dock .rs-dd-svg{position:absolute;top:6px;right:8px;z-index:1;padding:2px 8px;font-size:11.5px;opacity:.75}
#rs-dock .rs-dd-svg:is(:hover,:focus-visible){opacity:1}
/* a computer: the kinds, X and Y are a column at the chart's left, and the chart has the height of the box under its title line (Kaveh,
2026-11-06: "this part can be vertical"); a phone keeps them in a row over the chart */
html:not(.rs-phone) .rs-dd-chart{flex-direction:row}
html:not(.rs-phone) .rs-dd-chartrow{flex:none;width:180px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;min-height:0;overflow:hidden auto;
direction:rtl;scrollbar-width:thin} /* a short dock: the column scrolls, its thin scrollbar at the left (Kaveh), as the left panel's */
html:not(.rs-phone) .rs-dd-chartrow > *{direction:ltr}
html:not(.rs-phone) .rs-dd-chartrow .rs-dd-kinds{display:flex;box-sizing:border-box;width:100%} /* the kinds share the column's width: no sideways scroll (Kaveh: "it got scroll!") */
html:not(.rs-phone) #rs-dock .rs-dd-chartrow .rs-dd-kind{flex:1 1 0;width:auto;min-width:0}
html:not(.rs-phone) .rs-dd-chartrow .rs-dd-cl{display:grid;grid-template-columns:12px minmax(0,1fr)}
html:not(.rs-phone) .rs-dd-chartrow .rs-dd-cl .rs-sel{width:auto;min-width:0}
/* a chart answer of Ask: a small copy of its chart in the card (the chart is in the data dock) */
#sb .rs-ask-chart{height:140px;margin:8px 0 4px;padding:0;background:none;border:0} /* no box: the chart sits on the card (Kaveh, 2026-11-06) */
/* the look of roadstyle's own classes in the panel: the query field (.rs-q, also Ask's fields), the filled button (.sb-primary), the parts query
and road_card. They were in the dashboard template only, so a host page (duckOSM Studio, duckosm edit) did not have them. They are classes,
so a host's own elements do not change; the template keeps only its rules for the elements (#sb button, select, label). At the end of
the file, where the template's rules were, so each wins as before. */
#sb .rs-q{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink);outline:none}
#sb .rs-q:focus{border-color:var(--accent)}
#sb .rs-q{font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.sb-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
#sb button.sb-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;font-weight:600}
#sb button.sb-primary:is(:hover,:focus-visible):not(:disabled){filter:brightness(1.1);color:#fff;background:var(--accent-fill)}
#sb .rs-q-col{width:28px;height:28px;padding:1px;border:1px solid var(--line);border-radius:6px;
vertical-align:middle;cursor:pointer;background:var(--bg)}
#sb .rs-q-count{color:var(--mut);font-size:12px;margin:10px 0 2px;font-variant-numeric:tabular-nums}
#sb .rs-q-list{max-height:230px;overflow:auto}
#sb .rs-q-list div{padding:4px 0;border-bottom:1px solid var(--line)}
#sb .rs-q-list a{color:var(--accent);text-decoration:none}
#sb .rs-q-list a:hover{text-decoration:underline}
#sb .rs-road-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
margin-top:6px;min-height:38px;color:var(--ink)}
#sb .rs-road-card-none{color:var(--mut)}
#sb .rs-road-card b{color:var(--ink)}
#sb .rs-road-card-ov{color:var(--mut)}
/* the panel's own controls: a label, a select box and a plain button. They were in the dashboard template only, so a host page with its own panel
(duckOSM Studio, duckosm edit) got the browser's buttons. At the end of the file, where the template's rules were, so each wins as before. */
#sb label{display:block;margin:11px 0 3px;font-weight:600;font-size:11px;color:var(--mut);
text-transform:uppercase;letter-spacing:.04em}
#sb select{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--line);
border-radius:5px;background:var(--bg);color:var(--ink);font:inherit;outline:none}
#sb select:focus{border-color:var(--accent)}
#sb button{padding:5px 11px;border:1px solid var(--line);border-radius:6px;
background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
#sb button:is(:hover,:focus-visible):not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--rs-hover-bg)}
#sb button:disabled{opacity:.5;cursor:default}
#sb button.sb-primary:disabled{filter:saturate(.6)}
/* ==== DASHBOARD PARTS 2 (docs/design/dashboard_parts_2.md): the controls that a page drew itself before. Each is a class with the theme's tokens;
the parts with behaviour have a function on `rs` (days.js range, hours.js, fields.js, search.js, drop.js, notice.js, menu.js, more.js). ==== */
/* the "not saved" dot, and the fill of a button that deletes (white text on it: 6.5:1); the status colours --rs-err, --rs-warn and --rs-ok are defined above */
:root{--rs-unsaved:#d97706;--rs-danger-fill:#b91c1c}
/* the accent as text on an accent tint (a pressed button, a selected row, the row under the pointer in a list): mixed with the text colour, 4.5:1 or more in both themes */
:root{--rs-accent-text:color-mix(in srgb,var(--accent) 72%,var(--ink))}
html[data-rs-theme=dark],#sb[data-theme=dark]{--rs-unsaved:#fbbf24}
/* the label above a field and its value at the right: the look of the day picker's label */
:is(#sb,body) .rs-slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
:is(#sb,body) :is(.rs-slider-l,.rs-num-l,.rs-color-l){color:var(--mut);font:600 12px/16px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
:is(#sb,body) :is(.rs-num-l,.rs-color-l){display:block;margin:0 0 6px}
:is(#sb,body) .rs-slider-v{color:var(--ink);font:600 13px system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 1. the date range and the week or month: the day picker's field (.rs-day); the days of the range are tinted, its two ends are filled */
.rs-day-cal .rs-day-cd.in{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.rs-day-cal .rs-day-cd.hov:not(.on){box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.rs-range-cal .rs-day-cd:disabled{background:none}
.rs-range-mg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.rs-range-mg .rs-day-cd{height:40px}
.rs-range-hint{margin-top:8px;font-size:12px;opacity:.75;text-align:center}
/* 2. the hour picker: the day picker's field (.rs-day), with a clock; a click opens a list of the hours in the look of the menu, with a tick at
the chosen hour. A range: "From" and "To", each a field with its list, and the number of hours at the end */
.rs-menu.rs-hours-list{max-height:min(236px,calc(100dvh - 16px));min-width:120px}
.rs-hours-list .rs-menu-item{justify-content:space-between;font-variant-numeric:tabular-nums}
.rs-hours-list .rs-menu-item.on{font-weight:600;color:var(--rs-accent-text)}
.rs-hours-list .rs-menu-item svg{width:14px;height:14px;opacity:1}
:is(#sb,body) .rs-hours-tag{flex:none;color:var(--mut);font:600 12px system-ui,sans-serif}
:is(#sb,body) .rs-hours .rs-hours-field{font-variant-numeric:tabular-nums}
:is(#sb,body) .rs-hours-n{flex:none;min-width:30px;color:var(--mut);font:600 12.5px system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:right}
/* 3. the slider: the browser's range input on a thin track; the fill is the chosen part. Two handles: two inputs on one track */
:is(#sb,body) .rs-slider-track{position:relative;height:24px}
:is(#sb,body) .rs-slider-track::before,.rs-slider-fill{content:"";position:absolute;top:10px;height:4px;border-radius:2px}
:is(#sb,body) .rs-slider-track::before{left:0;right:0;background:color-mix(in srgb,var(--mut) 30%,transparent)}
.rs-slider-fill{background:var(--accent-fill)}
:is(#sb,body) .rs-slider input[type=range]{position:absolute;inset:0;width:100%;height:24px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
:is(#sb,body) .rs-slider input[type=range]:focus{outline:0}
.rs-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--accent-fill);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab;pointer-events:auto}
.rs-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--accent-fill);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab;pointer-events:auto}
.rs-slider input[type=range]::-moz-range-track{background:none}
.rs-slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--rs-hover-bg)}
.rs-slider input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 6px var(--rs-hover-bg)}
.rs-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.rs-slider input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
/* 4. the number field: one box with "−", the number, the unit and "+" */
:is(#sb,body) .rs-num-box{display:inline-flex;align-items:center;height:34px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--ink) 35%,var(--bg));border-radius:10px;background:var(--bg);overflow:hidden}
:is(#sb,body) .rs-num-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
:is(#sb,body) .rs-num-box input[type=number]{width:64px;height:100%;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:600 13px system-ui,sans-serif;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
:is(#sb,body) .rs-num-box input::-webkit-inner-spin-button,:is(#sb,body) .rs-num-box input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:is(#sb,body) .rs-num-u{padding:0 4px 0 2px;color:var(--mut);font-size:12.5px}
:is(#sb,body) .rs-num-st{width:32px;height:100%;margin:0;padding:0;border:0;border-radius:0;background:var(--card);color:var(--ink);font:500 17px/1 system-ui,sans-serif;cursor:pointer}
:is(#sb,body) .rs-num-st:hover:not(:disabled){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-num-off .rs-num-box{opacity:.55}
:is(#sb,body) .rs-num-off .rs-num-box:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--bg))}
:is(#sb,body) .rs-num-st:disabled{opacity:.35;cursor:default}
/* 5. the colour picker: a field with the swatch and its hex; a box with the palette, a hex field and the system's colour window */
:is(#sb,body) .rs-color-btn{display:inline-flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;margin:0;padding:0 10px 0 6px;border:1px solid color-mix(in srgb,var(--ink) 35%,var(--bg));
border-radius:10px;background:var(--bg);color:var(--ink);font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
:is(#sb,body) .rs-color-btn:is(:hover,[aria-expanded=true]){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg));color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
:is(#sb,body) .rs-color-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rs-color-btn svg{color:var(--accent)}
.rs-color-sw{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent)}
/* the boxes that open under a control (the menu, the colour box, the search list): the look of the select list (.rs-sel-list) */
:is(.rs-menu,.rs-color-box,.rs-search-list){position:fixed;z-index:3500;box-sizing:border-box;max-height:min(360px,calc(100dvh - 16px));overflow-y:auto;padding:5px;border-radius:14px;
background:var(--rs-card-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--rs-tb-border);box-shadow:0 6px 22px rgba(0,0,0,.3);color:var(--rs-tb-ink);font:13px system-ui,sans-serif}
:is(.rs-menu,.rs-color-box,.rs-search-list)[hidden]{display:none}
.rs-color-box{width:196px;padding:10px}
.rs-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rs-color-c{height:34px;margin:0;padding:0;border:0;border-radius:8px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.rs-color-c:is(:hover,:focus-visible){outline:2px solid var(--accent);outline-offset:2px;filter:brightness(1.1)} /* a swatch is filled: brighter */
.rs-color-c.on{box-shadow:inset 0 0 0 2px var(--rs-card-bg),0 0 0 2px var(--rs-tb-ink)}
.rs-color-row{display:flex;gap:6px;margin-top:10px}
.rs-color-in{flex:1;min-width:0;box-sizing:border-box;height:32px;padding:0 8px;border:1px solid var(--rs-tb-border);border-radius:8px;background:var(--rs-tb-hover);color:inherit;font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;outline:0}
.rs-color-in:focus{border-color:var(--accent)}
.rs-color-in.bad{border-color:var(--rs-err)}
.rs-color-more{display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:8px;color:inherit;font:inherit;background:var(--rs-tb-hover);font-size:12px;cursor:pointer;white-space:nowrap}
.rs-color-more:is(:hover,:focus-visible){background:var(--rs-hover-bg);color:var(--accent)}
/* 6. the on/off switch: a check box with role=switch; the label at its right */
:is(#sb,body) label.rs-switch{display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--ink);font:13px/1.35 system-ui,sans-serif;text-transform:none;letter-spacing:0;cursor:pointer}
:is(#sb,body) .rs-switch input{flex:none;position:relative;width:34px;height:20px;margin:0;border-radius:10px;background:color-mix(in srgb,var(--mut) 55%,transparent);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .15s}
:is(#sb,body) .rs-switch input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
:is(#sb,body) .rs-switch input:checked{background:var(--accent-fill)}
:is(#sb,body) .rs-switch input:checked::before{transform:translateX(14px)}
:is(#sb,body) .rs-switch:hover input:not(:disabled){box-shadow:0 0 0 4px var(--rs-hover-bg)}
:is(#sb,body) .rs-switch:hover{color:var(--accent)}
:is(#sb,body) .rs-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:is(#sb,body) .rs-switch:has(input:disabled){opacity:.5;cursor:default}
/* 7. the search field: the magnifier, the text, the clear button and a button at the end, in one field; the list under it */
:is(#sb,body) .rs-search-box{display:flex;align-items:center;height:36px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--ink) 35%,var(--bg));border-radius:10px;background:var(--bg);overflow:hidden}
:is(#sb,body) .rs-search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
:is(#sb,body) .rs-search-i{display:flex;padding:0 4px 0 10px;color:var(--mut)}
:is(#sb,body) .rs-search-busy .rs-search-i svg{visibility:hidden}
:is(#sb,body) .rs-search-busy .rs-search-i{position:relative}
:is(#sb,body) .rs-search-busy .rs-search-i::after{content:"";position:absolute;left:10px;top:0;width:11px;height:11px;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:rs-spin .7s linear infinite}
:is(#sb,body) .rs-search-box input[type=search]{flex:1;min-width:0;height:100%;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:13px system-ui,sans-serif;outline:0}
:is(#sb,body) .rs-search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
:is(#sb,body) .rs-search-x{width:28px;height:28px;margin:0 2px;padding:0;border:0;border-radius:50%;background:none;color:var(--mut);font:18px/1 system-ui,sans-serif;cursor:pointer}
:is(#sb,body) .rs-search-x:is(:hover,:focus-visible){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-search-box > .rs-search-end{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 2px;padding:0;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer}
:is(#sb,body) .rs-search-box > .rs-search-end svg{width:16px;height:16px}
:is(#sb,body) .rs-search-box > .rs-search-end:is(:hover,:focus-visible){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-search-go{align-self:stretch;margin:0;padding:0 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--accent-fill);color:#fff;font:600 13px system-ui,sans-serif;cursor:pointer}
:is(#sb,body) .rs-search-go:is(:hover,:focus-visible){border-color:var(--line);background:var(--accent-fill);color:#fff;filter:brightness(1.1)}
.rs-search-opt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:10px;cursor:pointer}
.rs-search-opt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-search-opt span{opacity:.7;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.rs-search-opt:hover,.rs-search-opt.on{background:var(--rs-hover-bg);color:var(--rs-accent-text)}
.rs-search-note{padding:8px 11px;opacity:.75}
/* 8. the file drop zone: a dashed box; a file over it fills it with the accent; then a row with the file's name, its size and "×" */
:is(#sb,body) .rs-drop-zone{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;box-sizing:border-box;margin:0;padding:18px 12px;
border:1.5px dashed color-mix(in srgb,var(--ink) 35%,var(--bg));border-radius:12px;background:var(--bg);color:var(--ink);font:13px/1.4 system-ui,sans-serif;text-align:center;cursor:pointer}
:is(#sb,body) .rs-drop-zone svg{color:var(--accent)}
:is(#sb,body) .rs-drop-zone u{color:var(--accent);text-decoration:none;font-weight:600}
:is(#sb,body) .rs-drop-zone:is(:hover,:focus-visible),:is(#sb,body) .rs-drop-over .rs-drop-zone{border-color:var(--accent);background:var(--rs-hover-bg);color:var(--ink)}
:is(#sb,body) .rs-drop-zone:hover u{text-decoration:underline}
:is(#sb,body) .rs-drop-zone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:is(#sb,body) .rs-drop-h{color:var(--mut);font-size:12px}
:is(#sb,body) .rs-drop-has .rs-drop-zone{flex-direction:row;justify-content:center;padding:8px 12px}
:is(#sb,body) .rs-drop-has .rs-drop-zone :is(svg,.rs-drop-h){display:none}
:is(#sb,body) .rs-drop-files{margin-top:6px}
:is(#sb,body) .rs-drop-file{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border-radius:10px;background:var(--card);color:var(--ink)}
:is(#sb,body) .rs-drop-file svg{flex:none;color:var(--accent)}
:is(#sb,body) .rs-drop-file b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
:is(#sb,body) .rs-drop-file span{color:var(--mut);font-size:12px;white-space:nowrap}
:is(#sb,body) .rs-drop-x{width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--mut);font:18px/1 system-ui,sans-serif;cursor:pointer}
:is(#sb,body) .rs-drop-x:is(:hover,:focus-visible){border:0;background:var(--rs-hover-bg);color:var(--accent)}
/* 9. the progress bar (a label, the value, a bar; with no value a part of the bar moves) and the busy state of a button (a turning ring) */
:is(#sb,body) .rs-progress-head{display:flex;justify-content:space-between;gap:8px;margin:0 0 5px;color:var(--ink);font:12.5px system-ui,sans-serif}
:is(#sb,body) .rs-progress-v{color:var(--mut);font-variant-numeric:tabular-nums}
:is(#sb,body) .rs-progress-bar{position:relative;height:6px;border-radius:3px;background:color-mix(in srgb,var(--mut) 25%,transparent);overflow:hidden}
.rs-progress-fill{height:100%;border-radius:3px;background:var(--accent-fill);transition:width .25s}
.rs-progress-wait .rs-progress-fill{position:absolute;width:35%;animation:rs-progress-move 1.2s ease-in-out infinite}
@keyframes rs-progress-move{0%{left:-35%}100%{left:100%}}
@keyframes rs-spin{to{transform:rotate(360deg)}}
.rs-busy::before,.rs-spinner,.rs-mapbusy-pill::before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rs-spin .7s linear infinite}
.rs-spinner{margin:0}
:is(#sb,body) button.rs-busy:disabled{opacity:.8;cursor:progress}
/* 9b. the veil of a busy map (rs.mapBusy): over the free part of the map (the script sets left, top, width and height), the pointer goes through it */
#rs-mapbusy{position:fixed;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:none;background:color-mix(in srgb,var(--bg) 40%,transparent)}
#rs-mapbusy[hidden]{display:none}
.rs-mapbusy-pill{display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:8px 16px;border-radius:99px;background:var(--rs-pop-bg);color:var(--rs-pop-ink);font:13px/1.3 system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.rs-mapbusy-pill::before{flex:none;width:18px;height:18px;margin:0;vertical-align:baseline;border-width:3px;border-color:var(--accent);border-right-color:transparent}
@media (prefers-reduced-motion:reduce){.rs-mapbusy-pill::before{animation-duration:3s}}
/* 10. the toast: a box over the map at the bottom (at the top of a phone, over the sheet), with an icon in the colour of its kind; a status line is
the same look in a card: ...
*/
#rs-toasts{position:fixed;z-index:4500;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column-reverse;gap:8px;width:max-content;max-width:min(440px,calc(100vw - 32px));pointer-events:none}
.rs-toast,:is(#sb,body) .rs-status{display:flex;align-items:flex-start;gap:9px;box-sizing:border-box;padding:9px 10px 9px 15px;border-radius:12px;box-shadow:inset 4px 0 0 var(--rs-k);font:13px/1.45 system-ui,sans-serif} /* the edge in the kind's colour: a shadow, not a border */
.rs-toast{--rs-k:var(--accent);pointer-events:auto;background:var(--rs-pop-bg);color:var(--rs-pop-ink);box-shadow:inset 4px 0 0 var(--rs-k),0 6px 22px rgba(0,0,0,.28);animation:rs-toast-in .18s ease-out}
.rs-toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
@keyframes rs-toast-in{from{opacity:0;transform:translateY(8px)}}
:is(#sb,body) .rs-status{--rs-k:var(--accent);margin:0 0 10px;padding:7px 10px 7px 13px;background:var(--card);color:var(--ink);border-radius:0 8px 8px 0;font-size:12.5px}
/* the kind of a toast or a status line: its colour (the edge and the icon) and, for a status line, its icon (a mask in the colour) */
:is(#sb,body) .rs-status{--rs-ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 7.2v4M8 4.8v.1'/%3E%3C/svg%3E")}
.rs-toast.ok,:is(#sb,body) .rs-status.ok{--rs-k:var(--rs-ok);--rs-ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m5.2 8.2 2 2 3.6-4'/%3E%3C/svg%3E")}
.rs-toast.warn,:is(#sb,body) .rs-status.warn{--rs-k:var(--rs-warn);--rs-ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 1.8 15 14H1z'/%3E%3Cpath d='M8 6.3v3.6M8 11.8v.1'/%3E%3C/svg%3E")}
.rs-toast.error,:is(#sb,body) .rs-status.error{--rs-k:var(--rs-err);--rs-ki:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m5.6 5.6 4.8 4.8m0-4.8-4.8 4.8'/%3E%3C/svg%3E")}
:is(#sb,body) .rs-status:empty{display:none}
:is(#sb,body) .rs-status::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:var(--rs-k);-webkit-mask:var(--rs-ki) center/16px no-repeat;mask:var(--rs-ki) center/16px no-repeat}
.rs-toast-i{flex:none;color:var(--rs-k);display:flex;margin-top:1px}
.rs-toast-t{flex:1;min-width:0}
.rs-toast :is(.rs-toast-x,.rs-toast-a){flex:none;margin:-3px 0;border:0;background:none;color:inherit;cursor:pointer;border-radius:8px}
.rs-toast .rs-toast-x{width:26px;height:26px;padding:0;font:18px/1 system-ui,sans-serif;opacity:.7}
.rs-toast .rs-toast-a{height:26px;padding:0 9px;color:var(--accent);font:600 12.5px system-ui,sans-serif}
.rs-toast :is(.rs-toast-x,.rs-toast-a):is(:hover,:focus-visible){opacity:1;background:var(--rs-hover-bg);color:var(--accent)}
html.rs-phone #rs-toasts{left:50%!important;top:max(8px,env(safe-area-inset-top));bottom:auto;flex-direction:column;width:calc(100vw - 16px)}
/* 11. the confirm dialog: the look of the help window; a sheet at the bottom of a phone. The OK button is filled (.sb-primary), or red (.sb-danger) */
.rs-dialog{width:min(400px,calc(100vw - 32px));box-sizing:border-box;margin:auto;padding:18px 20px 16px;border:1px solid var(--rs-tb-border);border-radius:14px;
background:var(--rs-pop-bg);color:var(--rs-pop-ink);box-shadow:0 12px 36px rgba(0,0,0,.35);font:13px/1.5 system-ui,sans-serif}
.rs-dialog::backdrop{background:var(--rs-box-bg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} /* the boxes' layer of the settings, not a colour of its own */
.rs-dialog-ttl{font-size:16px;font-weight:700;margin-bottom:4px}
.rs-dialog-text{color:color-mix(in srgb,var(--rs-pop-ink) 80%,var(--rs-pop-bg))}
.rs-dialog-bar{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.rs-dialog button{height:34px;padding:0 16px;border:1px solid var(--rs-tb-border);border-radius:10px;background:none;color:inherit;font:600 13px system-ui,sans-serif;cursor:pointer}
.rs-dialog button:is(:hover,:focus-visible){background:var(--rs-hover-bg);color:var(--rs-accent-text);border-color:var(--rs-tb-border);box-shadow:inset 0 0 0 1px var(--accent)}
.rs-dialog button:focus-visible,:is(#sb,body) button.sb-danger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rs-dialog button.sb-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
:is(#sb,body,.rs-dialog) button.sb-danger{background:var(--rs-danger-fill);border-color:var(--rs-danger-fill);color:#fff;font-weight:600}
.rs-dialog button:is(.sb-primary,.sb-danger):is(:hover,:focus-visible),:is(#sb,body) button.sb-danger:is(:hover,:focus-visible):not(:disabled){filter:brightness(1.1);color:#fff}
.rs-dialog button.sb-primary:is(:hover,:focus-visible){background:var(--accent-fill);border-color:var(--accent-fill)}
:is(#sb,body,.rs-dialog) button.sb-danger:is(:hover,:focus-visible):not(:disabled){background:var(--rs-danger-fill);border-color:var(--rs-danger-fill)}
html.rs-phone .rs-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom))}
html.rs-phone .rs-dialog-bar button{flex:1;height:44px}
/* 12. the action menu: the "⋯" button, and its list */
:is(#sb,body) .rs-more-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer;vertical-align:middle}
:is(#sb,body) .rs-more-btn:is(:hover,:focus-visible,[aria-expanded=true]){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rs-menu{min-width:180px}
.rs-menu-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin:0;padding:8px 11px;border:0;border-radius:10px;background:none;color:inherit;font:13px system-ui,sans-serif;text-align:left;cursor:pointer}
.rs-menu-item svg{flex:none;width:16px;height:16px;opacity:.8}
.rs-menu-item:is(:hover,:focus-visible):not(:disabled){outline:0;background:var(--rs-hover-bg);color:var(--rs-accent-text)}
.rs-menu-item.danger{color:var(--rs-err)}
.rs-menu-item.danger:is(:hover,:focus-visible):not(:disabled){background:color-mix(in srgb,var(--rs-err) 14%,transparent);color:var(--rs-err)}
.rs-menu-item:disabled{opacity:.45;cursor:default}
.rs-menu-line{height:1px;margin:4px 6px;background:var(--rs-tb-border)}
html.rs-phone .rs-menu-item{padding:12px 13px}
/* 13. a count on a tab or a button, and the amber "not saved" dot */
.rs-badge{display:inline-block;min-width:18px;height:18px;box-sizing:border-box;margin-left:6px;padding:0 5px;border-radius:9px;background:color-mix(in srgb,var(--accent) 16%,transparent);
color:color-mix(in srgb,var(--accent) 70%,var(--ink));font:700 11px/18px system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums;vertical-align:1px}
:is(.on,.sb-primary,[aria-selected=true]) > .rs-badge{background:color-mix(in srgb,var(--accent-fill) 55%,#000);color:#fff} /* on a fill: a darker teal with white text (8:1 or more), in both themes */
.rs-unsaved{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--rs-unsaved);vertical-align:1px}
:is(.on,[aria-selected=true]) > .rs-unsaved{box-shadow:0 0 0 2px #fff}
/* 14. steps: numbered cards; a done step has a check mark, the open step an accent edge, a step that waits is dimmed and says what it waits for */
:is(#sb,body) .rs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rs-card-gap,12px)}
:is(#sb,body) .rs-step{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
:is(#sb,body) .rs-step.on{border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent),inset 3px 0 0 var(--accent)}
:is(#sb,body) .rs-step-b{flex:1;min-width:0}
:is(#sb,body) .rs-step-b > b{display:block;font-size:13.5px;line-height:24px}
:is(#sb,body) .rs-step-b > p{margin:2px 0 0;color:color-mix(in srgb,var(--ink) 72%,var(--card));font-size:12.5px}
:is(#sb,body) :is(.rs-step-n,.rs-sec-n){flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;border-radius:50%;
box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,var(--card));color:var(--ink);font:700 12px/1 system-ui,sans-serif}
:is(#sb,body) .rs-step.on .rs-step-n{box-shadow:none;background:var(--accent-fill);color:#fff}
:is(#sb,body) :is(.rs-step.done .rs-step-n,.sb-sec[data-rs-done] > .rs-sec-hd > .rs-sec-n){box-shadow:inset 0 0 0 1.5px var(--accent);font-size:0;position:relative} /* the check mark in place of the number */
:is(#sb,body) :is(.rs-step.done .rs-step-n,.sb-sec[data-rs-done] > .rs-sec-hd > .rs-sec-n)::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
:is(#sb,body) .rs-step.wait{opacity:.6}
:is(#sb,body) .rs-step-note{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:9px;background:color-mix(in srgb,var(--mut) 18%,transparent);color:var(--ink);font-size:11.5px;font-weight:600}
/* 15. a tool row: icon buttons in one group; the pressed one has the accent tint and edge (one pressed: rs.tabs.use on it) */
:is(#sb,body) .rs-toolrow{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:color-mix(in srgb,var(--mut) 18%,transparent)}
:is(#sb,body) .rs-toolrow button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer}
:is(#sb,body) .rs-toolrow button svg{width:18px;height:18px}
:is(#sb,body) .rs-toolrow button:is(:hover,:focus-visible):not(:disabled){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-toolrow button:is(.on,[aria-pressed=true]){background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
:is(#sb,body) .rs-toolrow button:is(.on,[aria-pressed=true]):is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent) 12%,var(--card))} /* as the selected button of rs-seg */
:is(#sb,body) .rs-toolrow button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:is(#sb,body) .rs-toolrow button:disabled{opacity:.4;cursor:default}
/* 16. an empty state: a line in the middle, and a button under it (any place, not only the old side panel) */
:is(#sb,body) .rs-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 12px;color:var(--mut);font:12.5px/1.5 system-ui,sans-serif;text-align:center}
:is(#sb,body) .rs-empty svg{width:28px;height:28px;opacity:.7}
:is(#sb,body) .rs-empty b{color:var(--ink);font-size:13px}
/* 17. "show more": the count of the list and a button to show the next page */
:is(#sb,body) .rs-more{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px 2px;color:var(--mut);font:12px system-ui,sans-serif}
:is(#sb,body) .rs-more[hidden]{display:none}
:is(#sb,body) .rs-more-b{margin:0;padding:4px 10px;border:0;border-radius:8px;background:none;color:var(--accent);font:600 12.5px system-ui,sans-serif;cursor:pointer}
:is(#sb,body) .rs-more-b:is(:hover,:focus-visible){border:0;background:var(--rs-hover-bg);color:var(--accent)}
/* 18. a list of rows that a click selects (no check box): a title, a line under it, a value at the end; the selected row has the accent tint and an accent bar */
:is(#sb,body) .rs-rows{display:flex;flex-direction:column;gap:2px}
:is(#sb,body) .rs-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;box-sizing:border-box;margin:0;padding:7px 10px;
border:0;border-radius:8px;background:none;color:var(--ink);font:13px/1.35 system-ui,sans-serif;text-align:left;cursor:pointer}
:is(#sb,body) .rs-row > :not(.rs-row-i,.rs-row-v){grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#sb,body) .rs-row > b{font-weight:600}
:is(#sb,body) .rs-row > small{color:var(--mut);font-size:12px}
:is(#sb,body) .rs-row-i{grid-column:1;grid-row:1 / span 2;display:flex;color:var(--mut)}
:is(#sb,body) .rs-row-i svg{width:18px;height:18px}
:is(#sb,body) .rs-row-v{grid-column:3;grid-row:1 / span 2;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#sb,body) .rs-row:is(:hover,:focus-visible):not(:disabled){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-row:is(.on,[aria-selected=true]){background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
:is(#sb,body) .rs-row:is(.on,[aria-selected=true]) :is(.rs-row-i,.rs-row-v){color:var(--rs-accent-text)}
:is(#sb,body) .rs-row:is(.on,[aria-selected=true]) > small{color:color-mix(in srgb,var(--ink) 78%,var(--mut))}
:is(#sb,body) .rs-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* 19. a toggle button: a plain button that stays pressed (aria-pressed): the accent tint, the accent edge and text */
:is(#sb,body) button.rs-toggle{display:inline-flex;align-items:center;gap:6px}
:is(#sb,body) button.rs-toggle svg{width:16px;height:16px;flex:none}
:is(#sb,body) button.rs-toggle[aria-pressed=true],:is(#sb,body) button.rs-toggle[aria-pressed=true]:hover{background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent);color:var(--rs-accent-text);font-weight:600}
/* 20. an icon button for a card's title row (and any place): 24 px, no edge, muted; in a title row it is at the right end, before the "?" and the chevron */
:is(#sb,body) .rs-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;margin:-4px 0;padding:0;border:0;border-radius:6px;background:none;color:var(--mut);cursor:pointer;vertical-align:middle}
:is(#sb,body) .rs-icon-btn svg{width:16px;height:16px;display:block}
:is(#sb,body) .rs-icon-btn:is(:hover,:focus-visible):not(:disabled){border:0;background:var(--rs-hover-bg);color:var(--accent)}
:is(#sb,body) .rs-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:is(#sb,body) .rs-icon-btn:disabled{opacity:.4;cursor:default}
#sb .rs-card-title .rs-icon-btn{float:right;margin:-4px 0 -4px 6px}
html.rs-phone :is(#sb,body) .rs-row{padding:11px 10px}
html.rs-phone :is(#sb,body) .rs-icon-btn{width:36px;height:36px;margin:-10px 0}
/* 21. the fixed bar of the panel (rs.panel.bar()): the look of the editor frame's bar (.rs-frame-bar), under the cards; the frame's own bar takes its place */
.sb-card:has(> .rs-frame) > .rs-panel-bar{display:none}
.rs-panel-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rs-panel-bar > :is(b,span,.sb-note):first-child{flex:1;min-width:0;margin:0}
/* 22. a select box in an editor frame has the thin edge of a field, as on a card (a form in a frame) */
#sb .rs-frame .rs-sel-btn{border:1px solid var(--line);padding:5px 8px}
/* 23. a field's error and warning: a line under the field (red or amber, with an icon) and a red edge on the field that is wrong (aria-invalid="true") */
:is(#sb,body) :is(input,textarea,.rs-sel-btn)[aria-invalid=true],:is(#sb,body) .rs-sel:has(select[aria-invalid=true]) .rs-sel-btn{border-color:var(--rs-err)!important;box-shadow:0 0 0 1px var(--rs-err)}
:is(#sb,body) .rs-field-msg{display:flex;gap:6px;align-items:flex-start;margin:4px 0 0;color:var(--rs-err);font:12px/1.4 system-ui,sans-serif}
:is(#sb,body) .rs-field-msg.warn{color:var(--rs-warn)}
:is(#sb,body) .rs-field-msg::before{content:"";flex:none;width:14px;height:14px;margin-top:1px;background:currentColor;
-webkit-mask:var(--rs-fm-i) center/14px no-repeat;mask:var(--rs-fm-i) center/14px no-repeat;
--rs-fm-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.6v4.2M8 11.3v.1'/%3E%3C/svg%3E")}
:is(#sb,body) .rs-field-msg:empty{display:none}
/* 24. a row of rs-rows with a control in it (a select box, a button): the row is a , and the control is at its end */
:is(#sb,body) div.rs-row > :is(select,.rs-sel,button){grid-column:3;grid-row:1 / span 2;width:auto;min-width:96px;margin:0}
/* a phone: the controls are 40 px or more high, so that a finger hits them */
html.rs-phone :is(#sb,body) :is(.rs-num-box,.rs-color-btn,.rs-search-box){height:42px}
html.rs-phone :is(#sb,body) .rs-day :is(button,.rs-day-step){height:42px} /* the day picker, the date range and the hour picker */
html.rs-phone :is(#sb,body) .rs-day .rs-day-step{width:42px}
html.rs-phone :is(#sb,body) .rs-num-st{width:42px}
html.rs-phone :is(#sb,body) :is(.rs-toolrow button,.rs-more-btn){width:40px;height:40px}
html.rs-phone :is(#sb,body) .rs-slider-track{height:36px}
html.rs-phone :is(#sb,body) .rs-slider input[type=range]{height:36px}
html.rs-phone :is(#sb,body) .rs-slider-track::before,html.rs-phone .rs-slider-fill{top:16px}
html.rs-phone .rs-slider input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
html.rs-phone :is(#sb,body) .rs-more-b{padding:10px 12px}
html.rs-phone :is(#sb,body) label.rs-switch{min-height:40px;margin:2px 0}