.sort-control,.layout-picker-trigger,.display-pop,.layout-preview-pill{--dc-ink:var(--index-ink,var(--sv-fg));--dc-body:var(--index-body,var(--sv-fg-strong));--dc-muted:var(--index-muted,var(--sv-fg-muted));--dc-line:var(--index-line,var(--sv-border));--dc-line-soft:var(--index-line-soft,var(--sv-border-soft));--dc-surface:var(--index-surface,var(--sv-bg-surface));--dc-hover:var(--index-hover,var(--sv-bg-subtle));--dc-inset:var(--index-header,var(--sv-bg-inset));--dc-focus:var(--index-brand,var(--sv-accent))}.sort-control{border:1px solid var(--dc-line);background:var(--dc-surface);min-width:0;height:36px;color:var(--dc-body);border-radius:8px;flex-shrink:0;align-items:stretch;font-size:14px;line-height:20px;display:inline-flex}.sort-control>button{white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;min-width:0;display:inline-flex}.sort-control>button:hover:not(:disabled),.sort-control-key[data-state=open]{background:var(--dc-hover)}.sort-control>button:focus-visible{outline:2px solid var(--dc-focus);outline-offset:-2px}.sort-control-key{border-radius:7px 0 0 7px;padding:0 10px 0 12px}.sort-control-prefix{color:var(--dc-muted)}.sort-control-value{color:var(--dc-ink);text-overflow:ellipsis;font-weight:600;overflow:hidden}.sort-control-chevron{color:var(--dc-muted);flex-shrink:0}.sort-control-direction{box-shadow:inset 1px 0 0 var(--dc-line);border-radius:0 7px 7px 0;padding:0 12px 0 10px}.sort-control-direction:disabled{color:var(--dc-muted);cursor:default}.sort-control-direction svg{flex-shrink:0;transition:transform .22s}.sort-control-direction svg[data-reversed]{transform:scaleY(-1)}@media (prefers-reduced-motion:reduce){.sort-control-direction svg{transition:none}}.display-pop{z-index:50;box-sizing:border-box;border:1px solid var(--dc-line);background:var(--dc-surface);color:var(--dc-body);border-radius:12px;flex-direction:column;font-size:14px;line-height:20px;display:flex;box-shadow:0 12px 32px #1616181a,0 1px 3px #1616180f}.display-pop-heading{color:var(--dc-muted);padding:8px 10px 4px;font-size:12px;font-weight:600}.display-pop-rule{background:var(--dc-line-soft);height:1px;margin:4px 6px}.display-pop-note{color:var(--dc-muted);align-items:center;gap:8px;padding:6px 10px 8px;font-size:12px;display:flex}.display-pop-note svg{flex-shrink:0}.sort-control-menu{border-radius:10px;gap:2px;width:min(340px,100vw - 24px);padding:6px}.sort-control-menu .sort-control-item{cursor:pointer;border-radius:6px;outline:none;align-items:flex-start;gap:10px;min-height:44px;padding:8px 10px;display:flex}.sort-control-item[data-highlighted],.sort-control-item[data-state=checked]{background:var(--dc-hover)}.sort-control-item-icon{color:var(--dc-muted);flex-shrink:0;margin-top:2px}.sort-control-item-text{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.sort-control-item-label{color:var(--dc-ink);font-weight:500}.sort-control-item[data-state=checked] .sort-control-item-label{font-weight:600}.sort-control-item-hint{color:var(--dc-muted);font-size:12px;line-height:16px}.sort-control-item-check{width:16px;color:var(--dc-ink);flex-shrink:0;justify-content:center;margin-top:2px;display:flex}.layout-picker-trigger{padding-right:10px}.layout-picker-trigger[data-state=open]{background:var(--dc-hover)}.layout-pop{gap:12px;width:min(344px,100vw - 24px);padding:14px}.layout-pop .display-pop-heading{margin:0;padding:0}.layout-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.layout-card{border:1px solid var(--dc-line);background:var(--dc-surface);color:inherit;text-align:left;cursor:pointer;border-radius:10px;flex-direction:column;gap:10px;padding:8px;transition:border-color .15s,box-shadow .15s;display:flex;position:relative}.layout-card[aria-pressed=false]:hover{border-color:var(--dc-muted)}.layout-card[aria-pressed=true]{border-color:var(--dc-ink);box-shadow:0 0 0 1px var(--dc-ink)}.layout-card:focus-visible{outline:2px solid var(--dc-focus);outline-offset:2px}.layout-card-sketch{box-sizing:border-box;background:var(--dc-inset);border-radius:6px;flex-direction:column;justify-content:center;gap:7px;height:76px;padding:0 12px;display:flex}.layout-card-sketch[data-grouped]{gap:5px}.layout-sketch-row{align-items:center;gap:6px;display:flex}.layout-sketch-row[data-indent]{padding-left:8px}.layout-sketch-bar{background:var(--dc-line);border-radius:3px;height:5px}.layout-sketch-bar[data-w=key]{background:var(--dc-muted);opacity:.45;width:22px}.layout-sketch-bar[data-w=fill]{flex:1}.layout-sketch-bar[data-w=end]{background:var(--dc-muted);opacity:.45;width:16px}.layout-sketch-bar[data-w=head]{background:var(--dc-muted);opacity:.75;width:30px}.layout-sketch-bar[data-w=count]{background:var(--dc-muted);opacity:.45;width:9px}.layout-sketch-bar[data-push]{margin-left:auto}.layout-card-text{flex-direction:column;gap:2px;padding:0 4px 4px;display:flex}.layout-card-label{color:var(--dc-ink);font-weight:600}.layout-card-hint{color:var(--dc-muted);font-size:12px;line-height:16px}.layout-card-check{background:var(--dc-ink);width:18px;height:18px;color:var(--dc-surface);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:14px;right:14px}.layout-pop-footer{box-shadow:inset 0 1px 0 var(--dc-line-soft);color:var(--dc-muted);flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:10px;font-size:12px;display:flex}.layout-pop-footer>span{align-items:center;gap:6px;display:inline-flex}.layout-pop-footer kbd{box-sizing:border-box;border:1px solid var(--dc-line);background:var(--dc-surface);min-width:18px;height:18px;color:var(--dc-body);border-bottom-width:2px;border-radius:4px;justify-content:center;align-items:center;padding:0 4px;font-family:inherit;font-size:11px;display:inline-flex}.layout-pop-footer .layout-pop-tip{margin-left:auto}.layout-preview-pill{z-index:60;color:#fafafa;pointer-events:none;background:#18181b;border-radius:999px;align-items:center;height:30px;padding:0 12px;font-size:12px;display:inline-flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #16161833}@container index-page (width<720px){.sort-control-prefix,.sort-control-direction-label{display:none}}@container index-page (width<540px){.sort-control-value{max-width:110px}}.index-page-toolbar[data-mobile] .sort-control{height:44px}.index-page-toolbar[data-mobile] .sort-control>button{justify-content:center;min-width:44px;padding:0 10px}.layout-pop-group{box-shadow:inset 0 1px 0 var(--dc-line-soft);justify-content:space-between;align-items:center;gap:12px;padding-top:12px;display:flex}.layout-pop-group label{color:var(--dc-body)}.layout-pop-group .layout-pop-select{flex-shrink:0;width:168px}
