/* v31.4 lists that scroll inside their card, and the card's height by hand */
.ch-card{position:relative}
.ch-list{flex:0 1 auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 25%,transparent) transparent}
.ch-list::-webkit-scrollbar{width:6px}.ch-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 25%,transparent);border-radius:6px}
.ch-fixed{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 25%,transparent) transparent}
.ch-fixed::-webkit-scrollbar{width:6px}.ch-fixed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 25%,transparent);border-radius:6px}
.ch-fixed>.ch-resize{position:sticky;display:grid;left:auto;bottom:0;margin:-12px auto 0;flex:none}
.ch-resize{all:unset;position:absolute;left:50%;bottom:0;width:56px;height:12px;margin-left:-28px;cursor:ns-resize;z-index:3;display:grid;place-items:center;touch-action:none}
.ch-resize:before{content:'';width:32px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--text) 30%,transparent);opacity:0;transition:opacity .15s}
.ch-card:hover>.ch-resize:before,.ch-resize:focus-visible:before,.ch-card.is-resizing>.ch-resize:before{opacity:1}
.ch-resize:focus-visible{outline:2px solid var(--text);outline-offset:1px;border-radius:6px}
body.ch-resizing{cursor:ns-resize;user-select:none}
@media (max-width:900px){.ch-resize{display:none}}
.ch-fixed .ch-list{flex-shrink:0!important}

/* v31.7 — one look for resizing on every page: a small pill on the side for the width, a small pill at the bottom for the height.
   Both appear when the pointer is over the card, both have the same border, colour and grip. */
:is(.home-resize,.hc-resize,.pg-resize){box-sizing:border-box!important;position:absolute!important;inset-inline-end:4px!important;top:50%!important;transform:none!important;margin-top:-20px!important;
 width:12px!important;height:40px!important;min-width:0!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center!important;
 border:1px solid var(--border)!important;border-radius:6px!important;background:var(--surface)!important;color:var(--muted)!important;cursor:ew-resize!important;z-index:3}
:is(.home-resize,.hc-resize,.pg-resize) svg{width:10px;height:10px}
.pg-card.pg-flip>.pg-resize{inset-inline-end:auto!important;inset-inline-start:4px!important}
:is(.home-resize,.hc-resize,.pg-resize):hover,.is-resizing>:is(.home-resize,.hc-resize,.pg-resize){color:var(--text)!important;border-color:var(--text)!important}
.ch-resize{box-sizing:border-box;bottom:4px;width:40px;height:12px;margin-left:-20px;border:1px solid var(--border);border-radius:6px;background:var(--surface);opacity:0;transition:opacity .15s}
.ch-resize:before{width:14px;height:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding-top:2px;background:none;border-radius:0;opacity:1;color:var(--muted)}
.ch-card:hover>.ch-resize,.ch-resize:focus-visible,.ch-card.is-resizing>.ch-resize{opacity:1}
.ch-resize:hover,.ch-card.is-resizing>.ch-resize{border-color:var(--text)}
.ch-resize:hover:before,.ch-card.is-resizing>.ch-resize:before{color:var(--text)}
.ch-fixed>.ch-resize{margin:-16px auto 4px}
@media (hover:none){.ch-resize{opacity:.55}}
/* the side pills keep the screens where they were hidden before */
@media (max-width:1150px){.home-resize{display:none!important}}
@media (max-width:650px){.health-page .hc-resize{display:none!important}}
@media (max-width:900px){.pg-resize{display:none!important}}
/* v31.11 a card of a chosen height: the height pill stays at the card's bottom edge even when the card has little in it
   (it used to sit right under the last line, over the text). When the card scrolls, it stays visible at the bottom. */
.ch-fixed:not(.ch-block)>.ch-resize{margin:auto auto 4px!important}
.ch-fixed.ch-block>.ch-resize{position:absolute;margin:0 0 0 -20px!important;bottom:4px}
/* v31.11 a menu that would be cut off by its card comes out over the page */
.ch-float{position:fixed!important;inset:auto!important;z-index:1200!important;margin:0!important;max-height:calc(100vh - 16px);overflow:auto}