/* UI controls v1. See design-system/MASTER.md. Own all visual states here. */
:root{
 --ui-control-ink:#272a27;--ui-control-hit:44px;
 --ui-close-hover:#eceee8;--ui-close-radius:4px;--ui-close-duration:120ms;
 --ui-glass-surface:#fafaf766;--ui-glass-border:#fafaf755;--ui-glass-hover:#fafaf7b3;--ui-glass-active:#fafaf7f5;
 --ui-glass-shadow:0 2px 8px #333c2008;--ui-glass-blur:12px;--ui-glass-disabled:.35;
 --ui-segment-hover:#d3d7cd;--ui-segment-shadow:0 1px 4px #242a170a;
 --ui-page-surface:var(--ui-glass-surface);--ui-page-border:var(--ui-glass-border);--ui-page-hover:var(--ui-glass-hover);
 --ui-page-shadow:var(--ui-glass-shadow);--ui-page-open:120px;--ui-page-disabled:var(--ui-glass-disabled);
 --ui-page-ease:cubic-bezier(.2,.7,.25,1);
 --ui-scrollbar-size:4px;--ui-scrollbar-thumb:#6d716b80;--ui-scrollbar-radius:4px;--ui-scrollbar-duration:180ms;
}
/* Opt-in materials: close/menu buttons never receive these classes. */
.ui-segmented,button.ui-glass-button,.ui-glass-card{
 box-sizing:border-box;border:1px solid var(--ui-glass-border);background:var(--ui-glass-surface);
 box-shadow:var(--ui-glass-shadow);backdrop-filter:blur(var(--ui-glass-blur));-webkit-backdrop-filter:blur(var(--ui-glass-blur));
 overflow:hidden;isolation:isolate;contain:paint;
}
.ui-segmented{display:flex;gap:4px;padding:3px;border-radius:26px;clip-path:inset(0 round 26px)}
.ui-segmented>.ui-segment{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;
 padding:0 16px;border:0;border-radius:22px;background:transparent;box-shadow:none;color:var(--muted);
 font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;transform:none;
 transition:background-color 120ms ease-out,color 120ms ease-out,box-shadow 120ms ease-out;
}
.ui-segmented>.ui-segment[aria-pressed="true"]{background:var(--ui-glass-active);box-shadow:var(--ui-segment-shadow);color:var(--ui-control-ink)}
.ui-segmented>.ui-segment:is(:disabled,[aria-disabled="true"]){opacity:var(--ui-glass-disabled);cursor:default}
.ui-segmented>.ui-segment:focus-visible{outline:2px solid var(--ui-control-ink);outline-offset:-3px;background:var(--ui-segment-hover);color:var(--ui-control-ink)}
.ui-segmented>.ui-segment:not(:disabled):not([aria-disabled="true"]):active{background:var(--ui-segment-hover);color:var(--ui-control-ink);transform:none}
.ui-segmented--compact>.ui-segment{min-width:64px}
/* The existing home capsule expands without changing either button's target. */
.ui-segmented--reveal{width:52px;transition:width 300ms var(--ui-page-ease),opacity 400ms var(--ui-page-ease),transform 400ms var(--ui-page-ease)}
.ui-segmented--reveal>.ui-segment{display:grid;flex:0 0 44px;width:100%;grid-template-columns:44px max-content;column-gap:8px;padding:0;overflow:hidden;color:var(--ui-control-ink)}
.ui-segmented--reveal>.ui-segment svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.ui-segment-label{justify-self:start;margin-right:12px;font-size:13px;line-height:1.2;opacity:0;transform:translateX(6px);transition:opacity 150ms ease-out,transform 300ms var(--ui-page-ease)}
button.ui-glass-button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;flex-shrink:0;
 padding:0 12px;border-radius:22px;font-size:13px;line-height:1.4;white-space:nowrap;text-decoration:none;
 color:var(--ui-control-ink);transform:none;transition:background-color 120ms ease-out,color 120ms ease-out;
}
button.ui-glass-button--icon{width:44px;padding:0}
button.ui-glass-button--value{min-width:52px;padding-inline:4px;font-size:12px;font-variant-numeric:tabular-nums}
button.ui-glass-button--label{padding-inline:16px}
button.ui-glass-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
button.ui-glass-button:is([aria-expanded="true"],[aria-pressed="true"]){background:var(--ui-glass-active)}
button.ui-glass-button:is(:disabled,[aria-disabled="true"]){opacity:var(--ui-glass-disabled);cursor:default;color:var(--muted)}
button.ui-glass-button:not(:disabled):not([aria-disabled="true"]):active{background:var(--ui-glass-active);transform:none}
button.ui-glass-button:focus-visible,.ui-glass-card:focus-visible{outline:2px solid var(--ui-control-ink);outline-offset:-3px}
button.ui-glass-button:focus-visible{background:var(--ui-glass-hover)}
.ui-glass-card{border-radius:10px}
.ui-glass-card>img{background:var(--ui-glass-hover)}
.ui-glass-card>span{display:block;padding-top:8px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ui-glass-card[aria-current="true"]{background:var(--ui-glass-active);border-color:var(--muted)}
.ui-glass-card[aria-current="true"]>span{color:var(--ui-control-ink)}
@media(hover:hover){
 .ui-segmented>.ui-segment:not(:disabled):not([aria-disabled="true"]):hover{background:var(--ui-segment-hover);color:var(--ui-control-ink)}
 button.ui-glass-button:not(:disabled):not([aria-disabled="true"]):hover{background:var(--ui-glass-hover);color:var(--ui-control-ink)}
 .ui-glass-card:hover{background:var(--ui-glass-hover)}
}
@media(min-width:768px){
 .ui-segmented--reveal:has(>.ui-segment:focus-visible){width:148px}
 .ui-segmented--reveal:has(>.ui-segment:focus-visible) .ui-segment-label{opacity:1;transform:none}
}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
 .ui-segmented--reveal:hover{width:148px}
 .ui-segmented--reveal:hover .ui-segment-label{opacity:1;transform:none}
}
@media(max-width:767px){
 .ui-segmented--reveal{width:100px}
 .ui-segmented--reveal>.ui-segment{width:44px;grid-template-columns:44px;column-gap:0}
 .ui-segmented--reveal .ui-segment-label{display:none}
 .ui-segmented--compact>.ui-segment{min-width:52px;padding-inline:12px;font-size:12px}
}
/* Scrollbar: native hit testing; identical material in either orientation. */
[data-ui-scrollbar]{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color var(--ui-scrollbar-duration) ease}
[data-ui-scrollbar].is-scrollbar-visible{scrollbar-color:var(--ui-scrollbar-thumb) transparent}
/* Standard thin/color overrides WebKit sizing in Chromium; use one path only. */
@supports selector(::-webkit-scrollbar){
 [data-ui-scrollbar],[data-ui-scrollbar].is-scrollbar-visible{scrollbar-width:auto;scrollbar-color:auto}
 [data-ui-scrollbar]::-webkit-scrollbar{width:var(--ui-scrollbar-size);height:var(--ui-scrollbar-size);background:transparent}
 [data-ui-scrollbar]::-webkit-scrollbar-track,[data-ui-scrollbar]::-webkit-scrollbar-corner{background:transparent}
 [data-ui-scrollbar]::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--ui-scrollbar-radius);transition:background var(--ui-scrollbar-duration) ease}
 [data-ui-scrollbar].is-scrollbar-visible::-webkit-scrollbar-thumb{background:var(--ui-scrollbar-thumb)}
}
button:is([data-ui="close"],[data-ui="menu"]){
 --ui-close-line:22px;--ui-close-stroke:1.4px;--ui-close-scale:1;
 position:relative;display:grid;place-items:center;flex-shrink:0;
 width:var(--ui-control-hit);height:var(--ui-control-hit);min-width:var(--ui-control-hit);min-height:var(--ui-control-hit);
 padding:0;margin:0;border:0;border-radius:var(--ui-close-radius);background:transparent;
 color:var(--ui-control-ink);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
 transform:none;isolation:isolate;
}
button:is([data-ui="close"],[data-ui="menu"])::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:calc(var(--ui-control-hit)*var(--ui-close-scale));height:calc(var(--ui-control-hit)*var(--ui-close-scale));border-radius:calc(var(--ui-close-radius)*var(--ui-close-scale));transform:translate(-50%,-50%);background:transparent;pointer-events:none;transition:background-color var(--ui-close-duration) ease-out}
button[data-ui-size="sm"]{--ui-close-line:18px;--ui-close-stroke:1.14545455px;--ui-close-scale:.8181818182}
.ui-close-line{position:absolute;z-index:1;left:calc(50% - var(--ui-close-line)/2);top:calc(50% - var(--ui-close-stroke)/2);width:var(--ui-close-line);height:var(--ui-close-stroke);margin:0;background:currentColor;transform-origin:center}
.ui-close-line:first-child{transform:rotate(45deg)}
.ui-close-line:last-child{transform:rotate(-45deg)}
[data-ui="menu"]>.ui-close-line{transition:transform 240ms var(--ui-page-ease),height 240ms var(--ui-page-ease),top 240ms var(--ui-page-ease)}
[data-ui="menu"]:not([aria-expanded="true"])>.ui-close-line{height:2px;top:calc(50% - 1px)}
[data-ui="menu"]:not([aria-expanded="true"])>.ui-close-line:first-child{transform:translateY(-3.5px)}
[data-ui="menu"]:not([aria-expanded="true"])>.ui-close-line:last-child{transform:translateY(3.5px)}
@media(hover:hover){
 button[data-ui="close"]:hover::before,button[data-ui="menu"][aria-expanded="true"]:hover::before{background:var(--ui-close-hover)}
}
button:is([data-ui="close"],[data-ui="menu"]):active{transform:none}
button:is([data-ui="close"],[data-ui="menu"]):active::before{background:var(--ui-close-hover)}
button:is([data-ui="close"],[data-ui="menu"]):focus-visible{outline:none}
button:is([data-ui="close"],[data-ui="menu"]):focus-visible::before{outline:2px solid var(--ui-control-ink);outline-offset:2px;background:var(--ui-close-hover)}

[data-ui-slot]{position:relative;display:block;flex:0 0 var(--ui-control-hit);width:var(--ui-control-hit);height:var(--ui-control-hit);min-width:0}
button[data-ui="page"]{
 position:absolute;top:0;display:block;width:var(--ui-control-hit);height:var(--ui-control-hit);min-height:var(--ui-control-hit);
 padding:0;border:1px solid var(--ui-page-border);border-radius:22px;overflow:hidden;isolation:isolate;contain:paint;
 clip-path:inset(0 round 22px);background:var(--ui-page-surface);color:var(--ui-control-ink);box-shadow:var(--ui-page-shadow);
 backdrop-filter:blur(var(--ui-glass-blur));-webkit-backdrop-filter:blur(var(--ui-glass-blur));transform:none;
 transition:width 280ms var(--ui-page-ease),background 120ms ease-out;
}
button[data-ui-direction="previous"]{right:0}
button[data-ui-direction="next"]{left:0}
.ui-page-symbol{position:absolute;top:9px;display:block;width:24px;height:24px;transform:none}
[data-ui-direction="previous"]>.ui-page-symbol{left:9px}
[data-ui-direction="next"]>.ui-page-symbol{right:9px}
.ui-page-glyph{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ui-page-label{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;opacity:0;transform:translateX(var(--ui-page-label-offset,-6px));transition:opacity 140ms ease-out,transform 280ms var(--ui-page-ease)}
[data-ui-direction="previous"]>.ui-page-label{left:40px;right:16px;justify-content:flex-start;--ui-page-label-offset:6px}
[data-ui-direction="next"]>.ui-page-label{left:16px;right:40px;justify-content:flex-end}
button[data-ui="page"]:focus-visible{outline:2px solid var(--ui-control-ink);outline-offset:-4px}
button[data-ui="page"]:is(:disabled,[aria-disabled="true"]){opacity:var(--ui-page-disabled);cursor:default}
/* Quiet rail arrows: the visible glass disc is compact; the hit area stays 44px. */
button[data-ui="page"][data-ui-variant="icon"]{border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;contain:none;clip-path:none;transition:none}
button[data-ui="page"][data-ui-variant="icon"]::before{content:"";position:absolute;box-sizing:border-box;inset:4px;border:1px solid var(--ui-page-border);border-radius:50%;background:var(--ui-page-surface);box-shadow:var(--ui-page-shadow);backdrop-filter:blur(var(--ui-glass-blur));-webkit-backdrop-filter:blur(var(--ui-glass-blur));pointer-events:none;transition:background-color 120ms ease-out}
button[data-ui-variant="icon"]>.ui-page-symbol{left:12px;right:auto;top:12px;width:20px;height:20px;opacity:.7}
button[data-ui-variant="icon"] .ui-page-glyph{width:20px;height:20px}
button[data-ui-variant="icon"]>.ui-page-label{display:none}
button[data-ui="page"][data-ui-variant="icon"]:focus-visible{outline:none}
button[data-ui="page"][data-ui-variant="icon"]:focus-visible::before{outline:2px solid var(--ui-control-ink);outline-offset:2px;background:var(--ui-page-hover)}
button[data-ui="page"][data-ui-variant="icon"]:not(:disabled):not([aria-disabled="true"]):active::before{background:var(--ui-page-hover)}
@media(min-width:768px){
 [data-ui-slot]:not([data-ui-variant="icon"]){flex-basis:var(--ui-page-open);width:var(--ui-page-open)}
 button[data-ui="page"]:not([data-ui-variant="icon"]):not(:disabled):not([aria-disabled="true"]):focus-visible{width:var(--ui-page-open);background:var(--ui-page-hover)}
 button[data-ui="page"]:not([data-ui-variant="icon"]):not(:disabled):not([aria-disabled="true"]):focus-visible>.ui-page-label{opacity:1;transform:translateX(0)}
}
@media(hover:hover){
 button[data-ui="page"]:not([data-ui-variant="icon"]):not(:disabled):not([aria-disabled="true"]):hover{background:var(--ui-page-hover)}
 button[data-ui="page"][data-ui-variant="icon"]:not(:disabled):not([aria-disabled="true"]):hover::before{background:var(--ui-page-hover)}
}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
 button[data-ui="page"]:not([data-ui-variant="icon"]):not(:disabled):not([aria-disabled="true"]):hover{width:var(--ui-page-open)}
 button[data-ui="page"]:not([data-ui-variant="icon"]):not(:disabled):not([aria-disabled="true"]):hover>.ui-page-label{opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
 .ui-segmented,.ui-segmented>.ui-segment,.ui-segment-label,button.ui-glass-button{transition:none}
 [data-ui-scrollbar],[data-ui-scrollbar]::-webkit-scrollbar-thumb{transition:none}
 button:is([data-ui="close"],[data-ui="menu"],[data-ui="page"]),button[data-ui]::before,.ui-close-line,.ui-page-label{transition:none}
}