/* ETCH'D desktop rail: one file, every page. The feed adds body.deskflow, which
   reveals the feed-only rows (the lens toggle, the algo, the view, the filter). */
.sb{position:fixed;left:0;top:0;bottom:0;width:80px;background:var(--bg);border-right:1px solid var(--sb-border);
    display:flex;flex-direction:column;padding:0 0 20px;z-index:40;transition:width .2s ease;overflow:hidden}
.sb:hover{width:240px}
.sb-brands{display:flex;min-height:80px}
/* the mark at the top: no hover ground, it is the page's mark, not a button */
.sb-brand{width:52px;height:52px;margin:14px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);background:none;border:none;transition:background .2s;text-decoration:none}
.sb-brand:hover{background:none}
.sb .spacer{flex:1}
.sb-gap{flex:none;height:6px}
.sb-item{background:none;border:none;color:var(--ink);cursor:pointer;padding:12px 14px;height:52px;transition:background .2s;
         display:flex;align-items:center;gap:16px;width:100%;position:relative;border-radius:0;text-decoration:none}
.sb-item:hover{background:var(--sb-hover)}
.sb-item.active{background:var(--sb-active)}
.sb-ic{flex-shrink:0;width:52px;height:28px;display:flex;align-items:center;justify-content:center}
.sb-ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sb-item .f{display:none}.sb-item.active .f{display:inline}.sb-item.active svg:not(.nf) .o{display:none}.sb-item .f path,.sb-item .f circle{fill:currentColor;stroke:currentColor}.sb-item.active svg.nf{stroke-width:2.75}
.sb-lbl{font-size:15px;letter-spacing:1px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;opacity:0;transition:opacity .15s ease;pointer-events:none}
.sb:hover .sb-lbl{opacity:1;pointer-events:auto}
html[data-theme="light"] .i-sun{display:none}
html:not([data-theme="light"]) .i-moon{display:none}
.sb-lens{display:none}
body.deskflow .sb-lens{display:flex}
.sb-ic svg.sb-lens-mark{width:24px;height:24px;fill:currentColor;stroke:none;transition:transform .49s cubic-bezier(.3,1.4,.4,1)}
.sb-feed{display:none}
body.deskflow .sb-feed{display:flex}
#sb-palg .sb-ic svg.pk{width:22px;height:22px;stroke:none;fill:none}
#sb-palg .pk-full{fill:currentColor}
/* the eye stands upright on the vertical feed, lies flat on the wall */
#sb-wall .sb-ic svg{width:24px;height:24px;stroke-width:1.7;transition:transform .3s ease}   /* the angle rides inline: it only ever turns one way */
#sb-palg[aria-pressed="false"] .sb-ic{color:var(--faint)}
#sb-palg[aria-pressed="false"]:hover .sb-ic{color:var(--soft)}
/* the funnel stays an outline; while its list is open it reads in ink, and the list makes way below */
#sb-sort .sb-ic svg{width:24px;height:24px;stroke-width:1.7}#sb-sort .sb-ic svg .f{display:none}
#sb-sort.on,#sb-more.on{color:var(--ink);background:var(--sb-active)}   /* a row with its card open sits on the current ground */
/* create, the way X does post: a filled disc that grows into a pill when the rail opens */
.sb-create{margin-top:14px;height:52px;padding:0 14px;background:none}
.sb-create:hover{background:none}
.sb-create .sb-ic{width:52px;height:52px;border-radius:4px;background:var(--ink);color:var(--bg);transition:width .2s ease}
.sb-create .sb-ic svg{width:24px;height:24px;stroke-width:2.2}
.sb-create:hover .sb-ic{opacity:.88}
.sb:hover .sb-create .sb-ic,.sb.pinned .sb-create .sb-ic{width:100%}
.sb:hover .sb-create svg,.sb.pinned .sb-create svg{display:none}
.sb-create .sb-lbl{position:absolute;left:14px;right:14px;text-align:center;color:var(--bg);font-weight:700;letter-spacing:2px}
/* the account at the foot, big like X's */
#s-connect{height:68px}
#s-connect .sb-ic{height:44px}
#s-connect .sb-ic svg{width:26px;height:26px}
#s-connect .sb-ic img{width:40px!important;height:40px!important}
/* the menus float the way X's More does: a card over the rail, opening down or up to fit */
.sb-sub{display:none;position:fixed;left:14px;z-index:46;min-width:240px;padding:8px 0;background:var(--bg);border:1px solid var(--rule);border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.22),0 0 3px 1px rgba(0,0,0,.12)}
html:not([data-theme="light"]) .sb-sub{box-shadow:0 0 15px rgba(255,255,255,.14),0 0 3px 1px rgba(255,255,255,.1)}
a.sb-subitem{text-decoration:none}
.sb-sub.open{display:block;animation:sbcard .24s cubic-bezier(.2,.8,.3,1)}
@keyframes sbcard{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sb-sub.open{animation:none}}
.sb-subitem{display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;height:52px;background:none;border:0;color:var(--ink);font-family:inherit;font-size:15px;letter-spacing:1px;line-height:1;padding:0 24px 0 22px;cursor:pointer;text-align:left;white-space:nowrap;transition:background .15s}
.sb-subitem:hover{background:var(--sb-hover)}.sb-subitem.on{font-weight:700}
.sb-subitem svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-subitem .tick{margin-left:auto;width:16px;height:16px;display:none}.sb-subitem.on .tick{display:block}
.sb.pinned{width:240px}
.sb.pinned .sb-lbl{opacity:1;pointer-events:auto}
/* the filled house: black ink on a light ground reads its door too wide, white on dark reads it right;
   a heavier stroke on the light side narrows the door a touch there */
html[data-theme="light"] .sb-item.active svg.hm .f path{stroke-width:3.4}
#sb-more.on{color:var(--ink)}
.sb-subitem svg.pxm{fill:currentColor;stroke:none;width:22px;height:22px}   /* the pixel marks in the card weigh like the algo mark in the rail */
/* the open search leaves the rail in view and in use: the veil starts past it, and the rail rides above it */
body .gs-ov{left:80px}
body.gs-open .sb{z-index:301}
@media (max-width:720px),((pointer:coarse) and (max-width:1200px)){body .gs-ov{left:0}}
/* optical sizes: the filled house reads big, so only the current (filled) one sits a touch smaller */
.sb-item.active .sb-ic svg.hm{width:23px;height:23px}
/* the feed rows fold away under Home on a click there (see the rail script): they
   slide up under it and back down, the rows beneath following */
.sb-feedrows{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.sb-feedrows>div{min-height:0;overflow:hidden;transition:opacity .22s ease,transform .34s cubic-bezier(.4,0,.2,1)}
body.feedrows-hid .sb-feedrows{grid-template-rows:0fr}
body.feedrows-hid .sb-feedrows>div{opacity:0;transform:translateY(-10px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.sb-feedrows,.sb-feedrows>div{transition:none}}
/* on the feed, Home carries a small chevron at its right edge: up while the feed rows
   are open (a click folds them), down while folded (a click brings them back) */
.sb-chev{display:none;margin-left:auto;margin-right:2px;width:16px;height:16px;align-items:center;justify-content:center;color:var(--faint);opacity:0;transition:opacity .15s ease,transform .34s cubic-bezier(.4,0,.2,1)}
.sb-chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-item.active[href="/"] .sb-chev{display:flex}
.sb:hover .sb-chev,.sb.pinned .sb-chev{opacity:1}
.sb-item.active[href="/"]:hover .sb-chev{color:var(--ink)}
body.feedrows-hid .sb-chev{transform:rotate(180deg)}
/* while the search is open, it is the current thing: the page's own mark goes back to
   an outline and Search reads as current (bold outline on its ground) */
body.gs-open .sb-item.active{background:none}
body.gs-open .sb-item.active .f{display:none}
body.gs-open .sb-item.active svg:not(.nf) .o{display:inline}
body.gs-open .sb-item.active svg.nf{stroke-width:2}
body.gs-open .sb-item.active .sb-ic svg.hm{width:26px;height:26px}
body.gs-open #sb-search{background:var(--sb-active)}
body.gs-open #sb-search svg.nf{stroke-width:2.75}
/* the search box in the dark: a whiter frame and rule, whiter words (the veil behind
   it is near black, so the page's grey rule vanished) */
html:not([data-theme="light"]) .gs-ov .gs{border-color:rgba(255,255,255,.34)}
html:not([data-theme="light"]) .gs-ov .gs-in{border-bottom-color:rgba(255,255,255,.34);color:#fff}
html:not([data-theme="light"]) .gs-ov .gs-in::placeholder{color:#b4b4b4}
html:not([data-theme="light"]) .gs-ov .gs-none,html:not([data-theme="light"]) .gs-ov .gs-h{color:#9a9a9a}
/* the current page's word is bold, like its mark; the search's word too while the search is open */
.sb-item.active .sb-lbl{font-weight:700}
#sb-palg.active .sb-lbl{font-weight:400}   /* Algo On is a switch, not a page */
body.gs-open .sb-item.active .sb-lbl{font-weight:400}
body.gs-open #sb-search .sb-lbl{font-weight:700}
/* the feed rows sit a step in from Home, being its dropdown; only while the rail is open, collapsed they line up with the rest */
.sb:hover .sb-feedrows .sb-item,.sb.pinned .sb-feedrows .sb-item{padding-left:24px}
/* the size slider under the view toggle: width of the column, height of the wall */
.sb-size{height:0;padding:0 18px 0 14px;overflow:hidden;align-items:center;cursor:default;opacity:0;pointer-events:none;transition:opacity .15s ease,height .2s ease,padding .2s ease}
.sb:hover .sb-size,.sb.pinned .sb-size{height:24px;padding-bottom:4px;opacity:1;pointer-events:auto}
.sb-size:hover{background:none}
.sb-size input{-webkit-appearance:none;appearance:none;width:100%;height:2px;margin:0;background:var(--rule);border-radius:1px;outline:none;cursor:pointer}
.sb-size input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--soft);border:0}
.sb-size input:hover::-webkit-slider-thumb,.sb-size input:active::-webkit-slider-thumb{background:var(--ink)}
.sb-size input::-moz-range-track{height:2px;background:var(--rule);border:0}
.sb-size input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--soft);border:0}
.sb-size input:hover::-moz-range-thumb{background:var(--ink)}
/* phones: every modal card sits on the page's own ground, white in the light, black in the dark,
   with no outer border or shadow; the blurred veil behind it and the inner rules stay */
@media (max-width:720px),((pointer:coarse) and (max-width:1200px)){
  .risk-sh,.gs,.warn,.wd,.cele,.rev-sh,.ig,.igbox,.pmodal,.pinfo,.modal,.cpw,.eb-card{background:var(--bg)!important;border:0!important;box-shadow:none!important}
  .eb-card{color:var(--ink)!important}   /* the explain card is inverted on desktop; on the page ground its words turn to ink */
}
/* the verified seal: its tick is a knockout, so the filled twin takes no stroke (a stroke closes the tick) */
.sb-item svg.vf .f path,.bnav svg.vf .f path,.bn-strip svg.vf .f path{stroke:none!important}

.sb-subsep{height:1px;background:var(--rule);margin:6px 10px}