; the wrapper scrolls sideways and fades at the ends that have more (CSS scroll-driven; without support it simply scrolls) */ .sg-prose :where(.sg-prose-scroll):not(:where(.sg-not-prose, .sg-not-prose *)) { margin: 1.25em 0; overflow-x: auto; scrollbar-width: thin; border-radius: var(--radius-xs); } .sg-prose :where(.sg-prose-scroll > table):not(:where(.sg-not-prose, .sg-not-prose *)) { min-width: max-content; margin: 0; } .sg-prose .sg-prose-scroll:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } @property --sg-pf-l { syntax: ''; inherits: false; initial-value: 0px; } @property --sg-pf-r { syntax: ''; inherits: false; initial-value: 0px; } @keyframes sg-prose-fade-l { from { --sg-pf-l: 0px; } to { --sg-pf-l: 24px; } } @keyframes sg-prose-fade-r { from { --sg-pf-r: 24px; } to { --sg-pf-r: 0px; } } @supports (animation-timeline: scroll(x self)) { .sg-prose .sg-prose-scroll { animation: sg-prose-fade-l linear both, sg-prose-fade-r linear both; animation-timeline: scroll(x self), scroll(x self); animation-range: 0px 24px, calc(100% - 24px) 100%; -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--sg-pf-l), black calc(100% - var(--sg-pf-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black var(--sg-pf-l), black calc(100% - var(--sg-pf-r)), transparent 100%); } } /* pictures and captions */ .sg-prose :where(img, video):not(:where(.sg-not-prose, .sg-not-prose *)) { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .sg-prose :where(figcaption):not(:where(.sg-not-prose, .sg-not-prose *)) { margin-top: var(--space-2); font-size: 12px; line-height: 18px; color: var(--ink-2); } .sg-prose :where(figure):not(:where(.sg-not-prose, .sg-not-prose *)) { margin: 1.5em 0; } @media (prefers-reduced-motion: reduce) { /* nothing here moves except the link underline colour, which keeps its (colour-only) change */ .sg-prose :where(a) { transition: none; } } @media (pointer: coarse) { /* links in running text are text, not buttons: they keep their size (WCAG 2.5.8 exempts inline links); the scroll wrapper is a swipe area */ .sg-prose :where(a) { text-underline-offset: 4px; } } /* ---------- QRCode: dark modules on a light plate in BOTH themes (the one place solid is not "the selected thing": a reader cannot decode light-on-dark). Over it, loading / expired / scanned sit on a glass-overlay veil that blurs the code behind. ---------- */ .sg-qr { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 100%; box-sizing: border-box; } .sg-qr-box { position: relative; flex: none; max-width: 100%; } .sg-qr-face { position: relative; box-sizing: border-box; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--solid); border: 1px solid var(--line); border-radius: var(--radius-sm); } .sg-qr-svg { display: block; fill: var(--nebula-deep); flex: none; } /* the mark over the middle: a solid rounded square, an odd number of modules across, about 9% of the code */ .sg-qr-icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; box-sizing: border-box; display: grid; place-items: center; padding: 10%; overflow: hidden; background: var(--solid); border-radius: min(var(--radius-xs), 22%); color: var(--nebula-deep); } .sg-qr-icon > * { max-width: 100%; max-height: 100%; } .sg-qr-ov { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass-overlay); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity calc(var(--duration-base) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-base) * 2 / 3); } .sg-qr-ov[data-on="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--duration-base) var(--ease-liquid), visibility 0s; } .sg-qr-ov-in { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3); color: var(--ink-2); } .sg-qr-title { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); } .sg-qr-sub { font-size: 12px; line-height: 18px; color: var(--ink-2); } .sg-qr-ok { width: 24px; height: 24px; color: var(--status-good); } .sg-qr-cap { margin: 0; max-width: 100%; text-align: center; font-size: 13px; line-height: 20px; color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { /* the veil switches on and off without fading */ .sg-qr-ov, .sg-qr-ov[data-on="true"] { transition: none; } } @media (pointer: coarse) { /* the one control, the refresh Button sm, reaches 44px through Button's own touch rule */ } /* ---------- RadioGroup: 20px circle (recipe B), or a glass card that gets an ink outline and a tick when chosen. Every "chosen" style reads the native :checked, never a class: a Radio outside a group is not controlled by React, and form.reset() or a sibling radio changes it too. ---------- */ .sg-radio-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; } .sg-radio-group--row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-6); } .sg-radio-group--card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--space-3); } .sg-radio-group--card.sg-radio-group--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .sg-radio { position: relative; display: inline-grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; max-width: 100%; min-height: 24px; cursor: pointer; color: var(--ink); font-size: 15px; line-height: 22px; -webkit-tap-highlight-color: transparent; } .sg-radio.is-bare { grid-template-columns: 20px; min-height: 20px; } .sg-radio--sm { column-gap: var(--space-2); font-size: 14px; line-height: 20px; min-height: 20px; } .sg-radio-input { position: absolute; z-index: 1; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: inherit; } .sg-radio--sm .sg-radio-input { top: 0; } .sg-radio-mark { position: relative; grid-column: 1; grid-row: 1; margin-top: 1px; width: 20px; height: 20px; box-sizing: border-box; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--glass-strong); transition: border-color var(--duration-quick) var(--ease-liquid), box-shadow var(--duration-quick) var(--ease-liquid), background-color var(--duration-quick) var(--ease-liquid), transform var(--duration-quick) var(--ease-liquid); } .sg-radio--sm .sg-radio-mark { margin-top: 0; } .sg-radio-input:checked ~ .sg-radio-mark { border-color: var(--ink); } /* the dot pops in on a bouncy spring; leaving takes 2/3 of that, ease-exit */ .sg-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform calc(var(--duration-spring) * 2 / 3) var(--ease-exit); } .sg-radio-input:checked ~ .sg-radio-mark .sg-radio-dot { transform: scale(1); transition: transform var(--duration-spring) var(--ease-spring-bouncy); } .sg-radio-text, .sg-radio-body { grid-column: 2; display: grid; min-width: 0; } .sg-radio-title { overflow-wrap: anywhere; } .sg-radio-hint { font-size: 13px; line-height: 18px; color: var(--ink-2); } .sg-radio--sm .sg-radio-hint { font-size: 12px; line-height: 16px; } @media (hover: hover) { .sg-radio:not(.is-disabled):hover .sg-radio-mark { box-shadow: 0 0 0 6px var(--state-hover); } .sg-radio:not(.is-disabled):hover .sg-radio-input:not(:checked) ~ .sg-radio-mark { border-color: var(--ink-2); } } .sg-radio:not(.is-disabled):active .sg-radio-mark { transform: scale(.92); box-shadow: 0 0 0 6px var(--state-pressed); } .sg-radio-input:focus-visible + .sg-radio-mark, .sg-radio:not(.is-disabled):hover .sg-radio-input:focus-visible + .sg-radio-mark { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .sg-radio.is-invalid .sg-radio-input:not(:checked) ~ .sg-radio-mark { border-color: var(--status-bad); } .sg-radio.is-invalid .sg-radio-input:checked ~ .sg-radio-mark { box-shadow: 0 0 0 2px var(--status-bad); } .sg-radio.is-invalid .sg-radio-input:focus-visible + .sg-radio-mark, .sg-radio.is-invalid:not(.is-disabled):hover .sg-radio-input:focus-visible + .sg-radio-mark { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--status-bad); } .sg-radio.is-disabled { opacity: var(--disabled); cursor: not-allowed; } /* card variant: recipe F glass, outline turns ink when chosen, a tick sits top right (the mark itself, with the tick instead of the dot) */ .sg-radio--card { display: block; width: 100%; box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); transition: border-color var(--duration-quick) var(--ease-liquid), box-shadow var(--duration-quick) var(--ease-liquid); } .sg-radio--card .sg-radio-input { inset: 0; width: 100%; height: 100%; } .sg-radio--card .sg-radio-mark { position: absolute; top: 14px; right: 14px; margin: 0; background: var(--glass-strong); } .sg-radio--card .sg-radio-dot { display: none; } .sg-radio--card .sg-radio-body { display: grid; gap: 2px; padding-right: 28px; } .sg-radio--card .sg-radio-icon { margin-bottom: var(--space-2); color: var(--ink); } .sg-radio--card .sg-radio-title { font-weight: 500; } .sg-radio--card .sg-radio-input:checked ~ .sg-radio-mark { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } .sg-radio-tick { position: absolute; inset: -1.5px; width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset calc(var(--duration-quick) * 2 / 3) var(--ease-exit), opacity calc(var(--duration-quick) * 2 / 3) var(--ease-exit); } .sg-radio-input:checked ~ .sg-radio-mark .sg-radio-tick { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--duration-quick) var(--ease-liquid), opacity var(--duration-instant) linear; } .sg-radio-ring { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; } .sg-radio-input:focus-visible ~ .sg-radio-ring { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .sg-radio--card:has(.sg-radio-input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-glass); } .sg-radio--card.is-invalid:not(:has(.sg-radio-input:checked)) { border-color: var(--status-bad); } .sg-radio--card.is-invalid .sg-radio-input:focus-visible ~ .sg-radio-ring { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--status-bad); } @media (hover: hover) { .sg-radio--card:not(.is-disabled):not(:has(.sg-radio-input:checked)):hover { border-color: var(--ink-2); } .sg-radio--card:not(.is-disabled):hover .sg-radio-mark { box-shadow: none; } .sg-radio--card:not(.is-disabled):hover .sg-radio-input:not(:checked) ~ .sg-radio-mark { border-color: var(--ink-2); } } .sg-radio--card:not(.is-disabled):active .sg-radio-mark { transform: scale(.92); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .sg-radio-mark { transition-property: background-color, border-color, box-shadow; } .sg-radio:not(.is-disabled):active .sg-radio-mark { transform: none; } .sg-radio-dot, .sg-radio-input:checked ~ .sg-radio-mark .sg-radio-dot { transform: scale(1); transition-property: opacity; opacity: 0; } .sg-radio-input:checked ~ .sg-radio-mark .sg-radio-dot { opacity: 1; } .sg-radio-tick, .sg-radio-input:checked ~ .sg-radio-mark .sg-radio-tick { stroke-dashoffset: 0; transition-property: opacity; } } @media (pointer: coarse) { .sg-radio:not(.sg-radio--card) { min-height: 44px; } .sg-radio.is-bare:not(.sg-radio--card) { min-height: 20px; } .sg-radio:not(.sg-radio--card) .sg-radio-input { top: 12px; } .sg-radio:not(.sg-radio--card) .sg-radio-mark { margin-top: 12px; } .sg-radio:not(.sg-radio--card) .sg-radio-text { padding-block: 11px; } .sg-radio--sm:not(.sg-radio--card) .sg-radio-text { padding-block: 12px; } .sg-radio.is-bare:not(.sg-radio--card) .sg-radio-input, .sg-radio.is-bare:not(.sg-radio--card) .sg-radio-mark { top: 0; margin-top: 0; } .sg-radio.is-bare:not(.sg-radio--card)::after { content: ""; position: absolute; inset: -12px; } .sg-radio-group:not(.sg-radio-group--card) { gap: 0; } .sg-radio-group--row:not(.sg-radio-group--card) { gap: 0 var(--space-6); } } /* ---------- Rating: five stars. Empty = 1.5px line-strong outline; set = ink fill + ink outline (Checkbox's "chosen = solid ink"); hover previews in ink at 40% ---------- */ .sg-rating { --sg-rt: 20px; --sg-rt-gap: 4px; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; vertical-align: middle; } .sg-rating--sm { --sg-rt: 16px; --sg-rt-gap: 2px; } .sg-rating--lg { --sg-rt: 28px; } .sg-rating-stars { display: inline-flex; align-items: center; gap: var(--sg-rt-gap); border-radius: var(--radius-xs); } /* a star: base outline + a hover-preview layer + a fill layer, stacked in one cell. The layers are clipped to the fraction (left to right) */ .sg-rating-star { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--sg-rt); height: var(--sg-rt); border-radius: calc(var(--sg-rt) / 4); } .sg-rating-star > * { grid-area: 1 / 1; } .sg-rating .sg-icon { width: var(--sg-rt); height: var(--sg-rt); } .sg-rating-base { stroke: var(--line-strong); fill: none; } .sg-rating-layer { display: grid; pointer-events: none; } .sg-rating-fill { clip-path: inset(0 calc(100% - var(--sg-rt-fill, 0%)) 0 0); } .sg-rating-prev { clip-path: inset(0 calc(100% - var(--sg-rt-prev, 0%)) 0 0); } .sg-rating-fill .sg-icon { fill: var(--ink); stroke: var(--ink); } .sg-rating-prev .sg-icon { fill: color-mix(in srgb, var(--ink) 40%, transparent); stroke: color-mix(in srgb, var(--ink) 40%, transparent); } /* the radios: invisible, laid over the star (over each half with allowHalf) so a press lands on the value under the pointer */ .sg-rating-input { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 1; } .sg-rating-input.is-l { width: 50%; } .sg-rating-input.is-r { left: 50%; width: 50%; } .sg-rating.is-interactive .sg-rating-star { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-spring) var(--ease-spring-bouncy); } /* pressed: .92, released: springs back past 1 and settles */ .sg-rating.is-interactive .sg-rating-star:active { transform: scale(.92); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-liquid); } .sg-rating-star.is-focus { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* words and number: 13px ink-2. All level words share one cell, so the row does not change width as the level changes */ .sg-rating-text { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; } .sg-rating:lang(zh) .sg-rating-text, .sg-rating-text:lang(zh) { line-height: 20px; } .sg-rating-value { min-width: 2.2ch; font-variant-numeric: tabular-nums; } .sg-rating-value.is-empty { color: var(--ink-3); } .sg-rating-label { display: inline-grid; } .sg-rating-word { grid-area: 1 / 1; opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-rating-word.is-on { opacity: 1; } .sg-rating.is-disabled { opacity: var(--disabled); } .sg-rating.is-disabled .sg-rating-input { cursor: not-allowed; } .sg-rating.is-invalid .sg-rating-base { stroke: var(--status-bad); } @media (forced-colors: active) { .sg-rating-base { stroke: CanvasText; } .sg-rating-fill .sg-icon { fill: Highlight; stroke: Highlight; } .sg-rating-prev .sg-icon { fill: GrayText; stroke: GrayText; } } @media (prefers-reduced-motion: reduce) { /* the star does not shrink or bounce; the fill still changes at once */ .sg-rating.is-interactive .sg-rating-star { transition: none; } .sg-rating.is-interactive .sg-rating-star:active { transform: none; } .sg-rating-word { transition: none; } } @media (pointer: coarse) { /* under a finger every star is a 44 x 44 cell (the stars spread out; a read-only score stays compact) */ .sg-rating.is-interactive .sg-rating-stars { gap: 0; } .sg-rating.is-interactive .sg-rating-star { width: 44px; height: 44px; border-radius: var(--radius-xs); } .sg-rating.is-interactive .sg-rating-text { margin-left: var(--space-1); } } /* ---------- Result: the same column as EmptyState (visual, title, words, actions), left-aligned on the area's left edge ---------- */ .sg-result { min-width: 0; color: var(--ink); } .sg-result-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } /* a page: the column is centred in the viewport, at most 480 wide, text inside stays left-aligned */ .sg-result--page .sg-result-col { box-sizing: border-box; max-width: 480px; margin-inline: auto; padding: var(--space-12) var(--space-4); } .sg-result--card .sg-result-col { max-width: 46ch; } /* the mark: a 56px glass disc with a 28px icon in the status colour; 404 / 500 have no disc, the code itself is the visual */ .sg-result-visual { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 56px; height: 56px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); color: var(--ink-2); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); } .sg-result-visual .sg-icon { width: 28px; height: 28px; } .sg-result-visual.is-good { color: var(--status-good); } .sg-result-visual.is-bad { color: var(--status-bad); } .sg-result-visual.is-warn { color: var(--status-warn); } .sg-result-code { width: auto; height: auto; margin-bottom: var(--space-3); border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); place-items: start; } .sg-result-code .sg-dot { color: var(--ink); } .sg-result-title { margin: 0; color: var(--ink); overflow-wrap: anywhere; outline: none; } .sg-result-desc { margin: var(--space-2) 0 0; color: var(--ink-2); } .sg-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); } .sg-result--card .sg-result-actions { gap: var(--space-2); margin-top: var(--space-4); } .sg-result-extra { width: 100%; margin-top: var(--space-4); } /* success and failure draw their strokes once, when the status changes (path lengths are measured into --sg-len) */ .sg-result-visual.is-draw .sg-icon path { stroke-dasharray: var(--sg-len, 60); stroke-dashoffset: var(--sg-len, 60); animation: sg-result-draw var(--duration-smooth) var(--ease-liquid) calc(var(--sg-i, 0) * 90ms) forwards; } @keyframes sg-result-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .sg-result-visual.is-draw .sg-icon path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } } @media (pointer: coarse) { /* a status page has no small targets of its own; the buttons in `actions` bring their own hit areas */ } /* ---------- ScrollArea: the wrapper holds layout, size limits and the focus ring; the viewport scrolls and carries the fade mask ---------- */ .sg-scrollarea { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--radius-xs); } .sg-scrollarea.is-focus { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .sg-scrollarea-viewport { flex: 1 1 auto; min-width: 0; min-height: 0; box-sizing: border-box; overscroll-behavior: contain; scroll-behavior: auto; border-radius: inherit; outline: none; } .sg-scrollarea--vertical > .sg-scrollarea-viewport { overflow-x: hidden; overflow-y: auto; } .sg-scrollarea--horizontal > .sg-scrollarea-viewport { overflow-x: auto; overflow-y: hidden; } .sg-scrollarea--both > .sg-scrollarea-viewport { overflow: auto; } /* scrollbar: the system's own thin bar (the --scrollbar token); "hidden" removes it, scrolling still works */ .sg-scrollarea-viewport.is-bare { scrollbar-width: none; } .sg-scrollarea-viewport.is-bare::-webkit-scrollbar { display: none; } /* fade: a mask, not a coat of background colour, so a glass card behind stays glass. Depths (0..24px) are written by script from the scroll position */ .sg-scrollarea-viewport.is-fade { --sg-fade-t: 0px; --sg-fade-b: 0px; --sg-fade-l: 0px; --sg-fade-r: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--sg-fade-t), black calc(100% - var(--sg-fade-b)), transparent 100%), linear-gradient(to right, transparent 0, black var(--sg-fade-l), black calc(100% - var(--sg-fade-r)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, black var(--sg-fade-t), black calc(100% - var(--sg-fade-b)), transparent 100%), linear-gradient(to right, transparent 0, black var(--sg-fade-l), black calc(100% - var(--sg-fade-r)), transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* arrows (horizontal only): an xs glass IconButton at each edge, hidden at the ends */ .sg-scrollarea-arrow { position: absolute; top: 50%; z-index: 2; margin-top: calc(var(--control-xs) / -2); background: var(--glass-overlay); transition: opacity var(--duration-quick) var(--ease-liquid), background-color var(--duration-instant), transform var(--duration-quick) var(--ease-liquid); } .sg-scrollarea-arrow.is-start { left: 4px; } .sg-scrollarea-arrow.is-end { right: 4px; } .sg-scrollarea-arrow:not([disabled]):hover { background: var(--glass-overlay); box-shadow: var(--shadow-lift); } .sg-scrollarea-arrow.is-off { opacity: 0; pointer-events: none; } .sg-scrollarea-arrow .sg-icon { width: 14px; height: 14px; } @media (prefers-reduced-motion: reduce) { /* arrows only fade, they do not scale on press; the script scrolls by a jump instead of gliding */ .sg-scrollarea-arrow { transition-property: opacity, background-color; } .sg-scrollarea-arrow:active { transform: none; } } @media (pointer: coarse) { /* a touch screen scrolls by swiping and the fade shows there is more: no 24px arrows to tap */ .sg-scrollarea-arrow { display: none; } } /* ---------- SegmentedControl: glass track (44 / 32 high, 3px inside), solid thumb with shadow-lift, 14 / 500 text ---------- */ .sg-seg { position: relative; display: inline-flex; align-items: stretch; box-sizing: border-box; width: fit-content; max-width: 100%; height: var(--control-md); padding: 3px; vertical-align: middle; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); } .sg-seg--sm { height: var(--control-sm); } .sg-seg--block { display: flex; width: 100%; } .sg-seg.is-invalid { border-color: var(--status-bad); } .sg-seg.is-disabled { opacity: var(--disabled); cursor: not-allowed; } /* a Field around it (hint or error): the track keeps its own width */ .sg-field > .sg-seg { align-self: flex-start; } .sg-field > .sg-seg--block { align-self: stretch; } /* thumb: only transform and width move; the style attribute switches the glide off for the first paint and for resizes */ .sg-seg-thumb { position: absolute; z-index: 0; top: 3px; left: 0; height: calc(100% - 6px); border-radius: var(--radius-pill); background: var(--solid); box-shadow: var(--shadow-lift); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring-soft), width var(--duration-spring) var(--ease-spring-soft), scale var(--duration-quick) var(--ease-liquid); } .sg-seg:has(.sg-seg-opt.is-on:active:not(.is-disabled)) .sg-seg-thumb { scale: .96; } /* option: a label over a real radio (invisible, covers the whole segment) */ .sg-seg-opt { position: relative; z-index: 1; flex: 0 0 auto; display: flex; min-width: 0; border-radius: var(--radius-pill); cursor: pointer; -webkit-tap-highlight-color: transparent; } .sg-seg--block .sg-seg-opt { flex: 1 1 0; } .sg-seg-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .sg-seg-text { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink-2); transition: color var(--duration-quick) var(--ease-liquid), background-color var(--duration-instant), scale var(--duration-quick) var(--ease-liquid); } .sg-seg--sm .sg-seg-text { padding: 0 var(--space-3); font-size: 13px; } .sg-seg-opt.is-icon .sg-seg-text { padding: 0 14px; } .sg-seg--sm .sg-seg-opt.is-icon .sg-seg-text { padding: 0 8px; } .sg-seg-opt.is-on .sg-seg-text { color: var(--ink); } @media (hover: hover) { .sg-seg-opt:not(.is-on):not(.is-disabled):hover .sg-seg-text { background: var(--state-hover); color: var(--ink); } } .sg-seg-opt:not(.is-disabled):active .sg-seg-text { scale: .96; } .sg-seg-opt.is-disabled { opacity: var(--disabled); cursor: not-allowed; } /* focus: the double ring sits on the current segment */ .sg-seg-input:focus-visible + .sg-seg-text { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .sg-seg-input:disabled { cursor: not-allowed; } /* the chosen text sits on the solid thumb, which is light in both themes: dark text on it, as PillTabs does */ [data-theme="dark"] .sg-seg-opt.is-on .sg-seg-text { color: var(--ink-inverse); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sg-seg-opt.is-on .sg-seg-text { color: var(--ink-inverse); } } @media (forced-colors: active) { .sg-seg-thumb { background: Highlight; forced-color-adjust: none; } .sg-seg-opt.is-on .sg-seg-text { color: HighlightText; forced-color-adjust: none; } } @media (prefers-reduced-motion: reduce) { /* the thumb jumps, nothing scales */ .sg-seg-thumb { transition: none !important; } .sg-seg:has(.sg-seg-opt.is-on:active) .sg-seg-thumb, .sg-seg-opt:not(.is-disabled):active .sg-seg-text { scale: none; } } @media (pointer: coarse) { /* the 32px size gets a 44px target: each option's input reaches 6px above and below the track; a short label or an icon alone is widened to 44 */ .sg-seg--sm .sg-seg-input { top: -10px; bottom: -10px; height: auto; } .sg-seg-opt { min-width: 44px; } } /* ---------- Select: recipe-A shell whose face is a button (value + chevron); the list is the shared recipe-D / recipe-E panel ---------- */ /* min-width: 0 lets the shell shrink to its container, so a long value can fall back to its ellipsis */ .sg-sel.sg-field-box { padding: 0; min-width: 0; cursor: pointer; } .sg-sel.is-disabled { cursor: not-allowed; } .sg-sel.is-open:not(.is-invalid) { border-color: var(--ink); } /* the shell's focus rings belong to the keyboard (:focus-visible), like Button's: a press with the mouse leaves the border change (open) but no rings. The shared .sg-field-box:focus-within rule is written for text boxes, which show their rings for every kind of focus. */ .sg-sel.sg-field-box:focus-within:not(:has(:focus-visible)) { box-shadow: none; } .sg-field.is-error .sg-sel.sg-field-box:focus-within:not(:has(:focus-visible)) { box-shadow: none; } .sg-sel-trigger { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; margin: 0; padding: 0 0 0 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; font-size: 15px; text-align: start; cursor: inherit; outline: none; } .sg-sel.sg-field-box--sm .sg-sel-trigger { padding-left: 12px; font-size: 14px; } .sg-sel-icon { width: 18px; height: 18px; flex: none; color: var(--ink-2); } .sg-sel-icon.is-option { width: 16px; height: 16px; } .sg-sel-value { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-sel-value.is-placeholder { color: var(--ink-2); } .sg-sel-chev { flex: none; align-self: stretch; display: grid; place-items: center; padding-right: 14px; color: var(--ink-2); cursor: inherit; } .sg-sel.sg-field-box--sm .sg-sel-chev { padding-right: 12px; } .sg-sel-chev .sg-icon { width: 16px; height: 16px; transition: transform var(--duration-quick) var(--ease-liquid); } .sg-sel.is-open .sg-sel-chev .sg-icon { transform: rotate(180deg); } /* the 24px clear button keeps the same margin to the box edge above and below (the box is 1px bordered) */ .sg-sel-clear { flex: none; } /* the line that says there is nothing to pick is a message, not a greyed-out option: no extra dimming on top of ink-2 */ .sg-menu-item.sg-sel-none[aria-disabled="true"] { opacity: 1; cursor: default; } .sg-sel-none .sg-menu-title { color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { /* the arrow still turns over to show the list is open, it just does not turn slowly */ .sg-sel-chev .sg-icon { transition: none; } } @media (pointer: coarse) { /* the 24px clear button reaches 44px through IconButton's own touch rule; in a 32px shell it sits above the shell's 6px strips */ .sg-sel-clear { position: relative; z-index: 1; } .sg-sel .sg-sel-chev { padding-left: 6px; } } /* ---------- SendCodeButton: a Button whose width never changes; waiting states are dimmer words, not a dimmed button ---------- */ .sg-btn.sg-sendcode > .sg-busy { display: none; } /* the three dots live inside the stack, so the width does not move */ .sg-sendcode-stack { display: inline-grid; justify-items: center; } .sg-sendcode-stack > * { grid-area: 1 / 1; } .sg-sendcode-live { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); max-width: 100%; font-variant-numeric: tabular-nums; } .sg-sendcode-ghost { visibility: hidden; height: 0; overflow: hidden; pointer-events: none; font-variant-numeric: tabular-nums; } /* cooling, locked, sending: still readable (ink-2, no opacity), still focusable, nothing lifts or presses */ .sg-btn.sg-sendcode.is-wait, .sg-btn.sg-sendcode.is-sending { color: var(--ink-2); cursor: default; } .sg-btn.sg-sendcode.is-wait:not([disabled]):hover:not(:focus-visible), .sg-btn.sg-sendcode.is-sending:not([disabled]):hover:not(:focus-visible) { box-shadow: var(--shadow-glass); } .sg-btn.sg-sendcode--ghost.is-wait:not([disabled]):hover:not(:focus-visible), .sg-btn.sg-sendcode--ghost.is-sending:not([disabled]):hover:not(:focus-visible) { box-shadow: none; } .sg-btn.sg-sendcode.is-wait:active, .sg-btn.sg-sendcode.is-sending:active { transform: none; } /* text: no fill, no frame; a soft pill on hover. It sits on its own line under a PinInput. */ .sg-btn.sg-sendcode--text { background: transparent; border-color: transparent; box-shadow: none; padding: 0 12px; color: var(--ink); } .sg-btn.sg-sendcode--text:not([disabled]):hover:not(:focus-visible) { box-shadow: none; } .sg-btn.sg-sendcode--text:not([disabled]):not(.is-wait):not(.is-sending):hover { background: var(--state-hover); } .sg-btn.sg-sendcode--text.is-wait, .sg-btn.sg-sendcode--text.is-sending { color: var(--ink-2); } .sg-btn.sg-sendcode--text:active:not(.is-wait):not(.is-sending) { background: var(--state-pressed); } @media (prefers-reduced-motion: reduce) { /* nothing here moves: the words just change */ .sg-btn.sg-sendcode:active { transform: none; } } @media (pointer: coarse) { /* sm buttons already reach 44px through Button's own rule; the text variant at md is 44 high */ } /* ---------- Sidebar: 256 px glass panel (or a mist edge) with grouped rows, one level of nesting, a sliding solid pill on the current row, and a 72 px icon rail when collapsed ---------- */ @property --sg-sb-w { syntax: ""; inherits: false; initial-value: 256px; } .sg-sidebar { position: relative; box-sizing: border-box; flex: none; display: flex; flex-direction: column; width: var(--sg-sb-w); min-width: 0; overflow: hidden; color: var(--ink); font-size: 15px; line-height: 22px; padding: var(--space-3) 14px; --sg-badge-ring: var(--mist-100); transition: --sg-sb-w var(--duration-smooth) var(--ease-spring-soft); } /* glass: floats 12px from the window's top, bottom and left edge */ .sg-sidebar--glass { height: calc(100% - var(--space-6)); margin: var(--space-3) 0 var(--space-3) var(--space-3); border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } /* mist: flat against the edge, a hairline on its right (a docs site) */ .sg-sidebar--mist { height: 100%; padding-left: 15px; background: var(--mist-100); border-right: 1px solid var(--line); } /* hidden off-canvas: gone (no animation; a rail that slides away is the icon collapse's job) */ .sg-sidebar.is-off { display: none; } /* inside an AppShell's drawer: the drawer is the glass, the sidebar is just its content */ .sg-sidebar.is-drawer { flex: 1 0 auto; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; --sg-badge-ring: var(--mist-100); } .sg-sidebar-top { flex: none; display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); } .sg-sidebar-header { flex: 1 1 auto; min-width: 0; } .sg-sidebar-toggle { flex: none; margin-inline-start: auto; } /* with no header slot the button still sits at the right */ .sg-sidebar.is-rail .sg-sidebar-toggle { margin-inline-start: 0; } .sg-sidebar.is-rail .sg-sidebar-top { flex-direction: column; } .sg-sidebar.is-rail .sg-sidebar-header { flex: none; display: flex; width: 44px; height: 44px; overflow: hidden; } /* in the drawer the drawer's own body scrolls: the list takes its natural height instead of the leftover space */ .sg-sidebar.is-drawer .sg-sidebar-scroll { flex: 1 0 auto; } /* the scrolling middle: 8px of room each side so rows and their focus rings are not cut at the edge */ .sg-sidebar-scroll { flex: 1 1 0; min-height: 0; margin-inline: -8px; border-radius: 0; } .sg-sidebar-nav { position: relative; isolation: isolate; padding: 4px 8px; } .sg-sidebar-group + .sg-sidebar-group { margin-top: var(--space-4); } .sg-sidebar-group-title { margin: 0 0 var(--space-1); padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 20px; font-weight: 400; letter-spacing: normal; color: var(--ink-2); } .sg-sidebar-gdiv { display: none; } .sg-sidebar-list, .sg-sidebar-sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sg-sidebar-sublist { padding-top: 2px; } .sg-sidebar-li { position: relative; } .sg-sidebar-row { position: relative; display: flex; align-items: center; } .sg-sidebar-row .sg-badge-wrap { display: flex; flex: 1 1 auto; min-width: 0; } /* the row: 40 high, radius-sm; the icon column sits so its centre is 36px from the panel's edge in both widths (the rail's icons do not move when the panel narrows) */ .sg-sidebar-main { position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; width: 100%; min-width: 0; height: var(--row-sm); margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; line-height: 22px; font-weight: 400; text-align: start; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-instant) var(--ease-liquid), color var(--duration-base) var(--ease-liquid); } .sg-sidebar-main:not(.is-current):not(.is-disabled):hover { background: var(--state-hover); color: var(--ink); } .sg-sidebar-main:not(.is-current):not(.is-disabled):active { background: var(--state-pressed); } .sg-sidebar-main.is-ancestor { color: var(--ink); } /* on the solid pill: ink on white in the light theme, ink-inverse on the bright pill in the dark one */ .sg-sidebar-main.is-current { color: var(--ink); color: light-dark(var(--ink), var(--ink-inverse)); font-weight: 500; } .sg-sidebar-main.is-disabled, .sg-sidebar-main:disabled { opacity: var(--disabled); cursor: not-allowed; } .sg-sidebar-main.is-child { padding-left: 42px; } .sg-sidebar-icon { width: 18px; height: 18px; flex: none; color: inherit; } .sg-sidebar-initial { display: none; } .sg-sidebar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-sidebar-end { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-sidebar-count { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sg-sidebar-main.is-current .sg-sidebar-count { color: inherit; } .sg-sidebar-chev { width: 16px; height: 16px; flex: none; margin-inline-start: auto; color: var(--ink-3); transition: transform calc(var(--duration-smooth) * 2 / 3) var(--ease-exit); } .sg-sidebar-end + .sg-sidebar-chev { margin-inline-start: 0; } .sg-sidebar-main.is-current .sg-sidebar-chev { color: inherit; } .sg-sidebar-li.is-open > .sg-sidebar-row .sg-sidebar-chev { transform: rotate(90deg); transition: transform var(--duration-smooth) var(--ease-spring-soft); } /* the secondary action of a row (an xs ghost IconButton, a menu trigger): shown on hover and while the row has focus, always in the tab order */ .sg-sidebar-action { position: absolute; z-index: 2; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-sidebar-row.is-parent .sg-sidebar-action { right: 30px; } .sg-sidebar-row:hover .sg-sidebar-action, .sg-sidebar-row:focus-within .sg-sidebar-action { opacity: 1; pointer-events: auto; } .sg-sidebar-row.has-action:hover .sg-sidebar-end, .sg-sidebar-row.has-action:focus-within .sg-sidebar-end { opacity: 0; } /* nested rows open with grid-template-rows 0fr → 1fr; closed they leave the tab order once the exit has finished; the clip has room for the focus ring */ .sg-sidebar-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows calc(var(--duration-smooth) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-smooth) * 2 / 3); } .sg-sidebar-li.is-open > .sg-sidebar-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-smooth) var(--ease-spring-soft), visibility 0s; } .sg-sidebar-clip { min-height: 0; overflow: hidden; margin: -4px -6px; padding: 4px 6px; } /* the sliding pill (recipe C) */ .sg-sidebar-ind { position: absolute; z-index: 0; top: 0; left: 0; border-radius: var(--radius-sm); background: var(--solid); box-shadow: var(--shadow-lift); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring-soft); } .sg-sidebar-ind.is-still { transition: none; } .sg-sidebar-footer { flex: none; min-width: 0; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); } .sg-sidebar.is-rail .sg-sidebar-footer { display: flex; width: 44px; margin-inline: auto; overflow: hidden; border-top-color: transparent; } /* collapsed to the rail: 72px (border included), 44px round icon buttons like NavRail; names come from the Tooltip, nested rows from the flyout, group titles become a short hairline */ .sg-sidebar.is-rail { padding-inline: 13px; } .sg-sidebar--mist.is-rail { padding-left: 14px; } .sg-sidebar.is-rail .sg-sidebar-list { align-items: center; gap: var(--space-2); } .sg-sidebar.is-rail .sg-sidebar-group + .sg-sidebar-group { margin-top: var(--space-3); } .sg-sidebar.is-rail .sg-sidebar-group-title, .sg-sidebar.is-rail .sg-sidebar-label, .sg-sidebar.is-rail .sg-sidebar-end, .sg-sidebar.is-rail .sg-sidebar-chev, .sg-sidebar.is-rail .sg-sidebar-action, .sg-sidebar.is-rail .sg-sidebar-sub { display: none; } .sg-sidebar.is-rail .sg-sidebar-gdiv { display: block; width: 24px; margin: 0 auto var(--space-3); } .sg-sidebar.is-rail .sg-sidebar-row { width: 44px; } .sg-sidebar.is-rail .sg-sidebar-row .sg-badge-wrap { flex: none; width: 44px; } .sg-sidebar.is-rail .sg-sidebar-main { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--radius-pill); } .sg-sidebar.is-rail .sg-sidebar-icon { width: 20px; height: 20px; } .sg-sidebar.is-rail .sg-sidebar-initial { display: grid; place-items: center; width: 22px; height: 22px; font-size: 16px; line-height: 22px; font-weight: 500; } .sg-sidebar.is-rail .sg-sidebar-ind { border-radius: var(--radius-pill); } /* the flyout of a nested item on the rail: a Popover-shaped panel (recipe D, radius-md) with the links */ .sg-overlay.sg-sidebar-fly { padding: var(--space-2); min-width: 200px; max-width: min(320px, var(--sg-avail-w, 100vw)); } .sg-sidebar-fly-title { padding: 6px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-2); } .sg-sidebar-fly-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sg-sidebar-fly-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; margin: 0; padding: 6px 12px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 20px; text-align: start; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-instant) var(--ease-liquid); } .sg-sidebar-fly-item:hover { background: var(--state-hover); } .sg-sidebar-fly-item:active { background: var(--state-pressed); } .sg-sidebar-fly-item:disabled { opacity: var(--disabled); cursor: not-allowed; } /* on glass-overlay a solid pill would not show: the current row takes the selected wash and a check */ .sg-sidebar-fly-item.is-current { font-weight: 500; background: var(--state-selected); } .sg-sidebar-fly-check { width: 16px; height: 16px; flex: none; margin-inline-start: auto; visibility: hidden; } .sg-sidebar-fly-item.is-current .sg-sidebar-fly-check { visibility: visible; } @media (hover: none) { /* no hover on a touch screen: a row's action is simply there, in place of its count */ .sg-sidebar-action { opacity: 1; pointer-events: auto; } .sg-sidebar-row.has-action .sg-sidebar-end { opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* width changes at once, the pill jumps, groups open without growing; colours and opacity still change */ .sg-sidebar { transition: none; } .sg-sidebar-ind { transition: none; } .sg-sidebar-sub, .sg-sidebar-li.is-open > .sg-sidebar-sub { transition: visibility 0s; } .sg-sidebar-chev, .sg-sidebar-li.is-open > .sg-sidebar-row .sg-sidebar-chev { transition: none; } } @media (pointer: coarse) { /* rows are 44px, the flyout's rows too; the xs action buttons get their 44px reach from core */ .sg-sidebar:not(.is-rail) .sg-sidebar-main { min-height: 44px; } .sg-sidebar-fly-item { min-height: 44px; } } /* ---------- SiteHeader: 64 px (56 narrow) bar; hover pill between items; one shared panel viewport that morphs between items ---------- */ @property --sg-sh-x { syntax: ""; inherits: false; initial-value: 0px; } @property --sg-sh-w { syntax: ""; inherits: false; initial-value: 0px; } @property --sg-sh-h { syntax: ""; inherits: false; initial-value: 0px; } @property --sg-sh-hw { syntax: ""; inherits: false; initial-value: 0px; } .sg-siteheader { --sg-page-px: var(--space-4); position: relative; isolation: isolate; box-sizing: border-box; width: 100%; color: var(--ink); font-size: 15px; line-height: 22px; } @media (min-width: 640px) { .sg-siteheader { --sg-page-px: var(--space-6); } } @media (min-width: 1024px) { .sg-siteheader { --sg-page-px: var(--space-8); } } @media (min-width: 1440px) { .sg-siteheader { --sg-page-px: var(--space-12); } } .sg-siteheader.is-sticky { position: sticky; top: 0; z-index: var(--z-sticky); } /* the glass layer: faded in once the page has scrolled (opacity is the one thing animated) */ .sg-siteheader::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: var(--glass-overlay); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); transition: opacity var(--duration-base) var(--ease-liquid); } .sg-siteheader[data-stuck]::before { opacity: 1; } .sg-siteheader.in-shell::before { display: none; } .sg-siteheader-in { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-6); height: 64px; max-width: calc(var(--sg-content-max, 1200px) + 2 * var(--sg-page-px)); margin-inline: auto; padding-inline: var(--sg-page-px); } .sg-siteheader.is-narrow .sg-siteheader-in { height: 56px; gap: var(--space-2); } .sg-siteheader-brand { flex: none; display: flex; align-items: center; min-width: 0; } .sg-siteheader-end { margin-inline-start: auto; flex: none; display: flex; align-items: center; gap: var(--space-1); } .sg-siteheader-actions { margin-inline-start: auto; flex: none; display: flex; align-items: center; gap: var(--space-2); } /* the "skip to content" link: out of sight until it takes focus, then an ink button in the top-left corner */ .sg-siteheader-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sg-siteheader-skip:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: calc(var(--z-sticky) + 1); } /* the main links */ .sg-siteheader-nav { position: relative; flex: 1 1 auto; min-width: 0; } .sg-siteheader-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); } .sg-siteheader-li { display: flex; } .sg-siteheader-item { position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1); height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; line-height: 22px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-quick) var(--ease-liquid); } .sg-siteheader-item:hover, .sg-siteheader-item.is-open, .sg-siteheader-item.is-current { color: var(--ink); } /* the current page: ink text and a 2px ink bar under the words */ .sg-siteheader-item.is-current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px; border-radius: var(--radius-pill); background: var(--ink); } .sg-siteheader-chev { width: 14px; height: 14px; flex: none; transition: transform calc(var(--duration-base) * 2 / 3) var(--ease-exit); } .sg-siteheader-item.is-open .sg-siteheader-chev { transform: rotate(180deg); transition: transform var(--duration-base) var(--ease-spring-soft); } /* the hover pill: one block behind the items; it slides between them, and fades in place when the pointer leaves */ .sg-siteheader-hover { position: absolute; z-index: 0; top: 0; left: 0; width: var(--sg-sh-hw); border-radius: var(--radius-pill); background: var(--state-hover); opacity: 0; pointer-events: none; transition: transform var(--duration-base) var(--ease-liquid), --sg-sh-hw var(--duration-base) var(--ease-liquid), opacity var(--duration-base) var(--ease-liquid); } .sg-siteheader-hover.is-on { opacity: 1; } .sg-siteheader-hover.is-still { transition: opacity var(--duration-base) var(--ease-liquid); } /* the shared panel viewport: under the header, recipe D at radius-md; its size and place are custom properties, so moving between items morphs it */ .sg-siteheader-viewport { position: absolute; z-index: 1; top: calc(100% + var(--space-2)); left: 0; box-sizing: border-box; width: var(--sg-sh-w); height: var(--sg-sh-h); translate: var(--sg-sh-x) 0; overflow: hidden; border-radius: var(--radius-md); background: var(--glass-overlay); border: 1px solid var(--line); box-shadow: var(--shadow-float); transform-origin: 50% 0; --sg-ov-dx: 0px; --sg-ov-dy: -4px; -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); transition: --sg-sh-w var(--duration-smooth) var(--ease-spring-soft), --sg-sh-h var(--duration-smooth) var(--ease-spring-soft), --sg-sh-x var(--duration-smooth) var(--ease-spring-soft); } .sg-siteheader-viewport.is-still { transition: none; } .sg-siteheader-viewport[data-state="open"] { animation: sg-ov-in var(--duration-quick) var(--ease-liquid) both; } .sg-siteheader-viewport[data-state="closed"] { animation: sg-ov-out calc(var(--duration-quick) * 2 / 3) var(--ease-exit) both; pointer-events: none; } /* the pointer's way from an item to its panel crosses 8px of nothing: a bridge keeps it inside */ .sg-siteheader-viewport::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; } /* contents are laid on top of each other from the top-left corner; the viewport clips them, so the slide never shows outside */ .sg-siteheader-content { position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); width: max-content; max-width: min(960px, calc(100vw - 32px)); padding: var(--space-3); } .sg-siteheader-content[data-dir] { animation: sg-sh-in var(--duration-base) var(--ease-liquid) both; } .sg-siteheader-content.is-exit { animation: sg-sh-out calc(var(--duration-base) * 2 / 3) var(--ease-exit) both; pointer-events: none; } .sg-siteheader-content[data-dir="1"] { --sg-sh-dir: 1; } .sg-siteheader-content[data-dir="-1"] { --sg-sh-dir: -1; } @keyframes sg-sh-in { from { opacity: 0; transform: translateX(calc(var(--sg-sh-dir, 1) * 8px)); } } @keyframes sg-sh-out { to { opacity: 0; transform: translateX(calc(var(--sg-sh-dir, 1) * -8px)); } } .sg-siteheader-col { width: 240px; min-width: 0; } .sg-siteheader-col-title { margin: 0; padding: 6px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-2); } .sg-siteheader-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sg-siteheader-link { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); padding: 8px 12px; border-radius: var(--radius-xs); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-instant) var(--ease-liquid); } .sg-siteheader-link:hover { background: var(--state-hover); } .sg-siteheader-link:active { background: var(--state-pressed); } /* on glass-overlay a solid fill would not show: the current link takes the selected wash */ .sg-siteheader-link.is-current { background: var(--state-selected); } .sg-siteheader-link-icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ink-2); } .sg-siteheader-link-text { min-width: 0; display: grid; } .sg-siteheader-link-title { font-size: 15px; line-height: 22px; font-weight: 500; } .sg-siteheader-link-desc { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sg-siteheader-featured { width: 240px; flex: none; } /* narrow: the Drawer's list. Link rows are 52px like Accordion's title rows, with a hairline between every two */ .sg-overlay.sg-siteheader-drawer .sg-modal-title { display: flex; align-items: center; min-height: 32px; } .sg-siteheader-m { display: block; } .sg-siteheader-m > * + * { border-top: 1px solid var(--line); } .sg-siteheader-m-row { box-sizing: border-box; display: flex; align-items: center; min-height: var(--row-md); width: calc(100% + 24px); margin-inline: -12px; padding: 12px; border-radius: var(--radius-xs); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; font-weight: 500; transition: background-color var(--duration-instant) var(--ease-liquid); } .sg-siteheader-m-row:hover { background: var(--state-hover); } .sg-siteheader-m-row.is-current { background: var(--state-selected); } .sg-siteheader-m-sec .sg-accordion-body { padding-bottom: var(--space-2); } .sg-siteheader-m-links { display: grid; gap: var(--space-2); } .sg-siteheader-m-links .sg-siteheader-col { width: auto; } .sg-siteheader-m-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; justify-content: flex-end; } @media (prefers-reduced-motion: reduce) { /* the panel appears and goes with a fade, changes size and place at once, and the content swaps without sliding; the hover pill jumps and fades */ .sg-siteheader-viewport { transition: none; } .sg-siteheader-viewport[data-state="open"] { animation-name: sg-ov-fade; } .sg-siteheader-viewport[data-state="closed"] { animation-name: sg-ov-fade-out; } .sg-siteheader-content[data-dir], .sg-siteheader-content.is-exit { animation: none; } .sg-siteheader-content.is-exit { display: none; } .sg-siteheader-hover { transition: opacity var(--duration-instant) linear; } .sg-siteheader-chev, .sg-siteheader-item.is-open .sg-siteheader-chev { transition: none; } } @media (pointer: coarse) { /* the items are 40px tall and only shown from 1024px up (a laptop with a touch screen): their reach is stretched to 44px; the menu button and rows are 44px+ already */ .sg-siteheader-item::before { content: ""; position: absolute; inset: -2px 0; } .sg-siteheader-link { min-height: 44px; } } /* ---------- Slider: 6px track (mist-200 + 1px line-strong), ink fill, a ring-edged thumb, an ink bubble while it is held ---------- */ /* container-type makes the content width count as 0, so in a flex row (or an inline-block, a grid auto column) the slider would collapse: it asks to fill the row and never goes below 160px */ .sg-slider { container-type: inline-size; --sg-thumb: 24px; --sg-track: 6px; --sg-slider-h: var(--control-md); position: relative; display: block; flex: 1 1 auto; min-width: 160px; color: var(--ink); font-size: 15px; } .sg-slider--sm { --sg-thumb: 20px; --sg-track: 4px; --sg-slider-h: var(--control-sm); font-size: 14px; } .sg-slider-row { display: flex; align-items: flex-start; gap: var(--space-4); } .sg-slider-main { flex: 1; min-width: 0; } .sg-slider-control { position: relative; height: var(--sg-slider-h); touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .sg-slider-bar { position: absolute; left: 0; right: 0; top: 50%; height: var(--sg-track); margin-top: calc(var(--sg-track) / -2); box-sizing: border-box; border-radius: var(--radius-pill); background: var(--mist-200); border: 1px solid var(--line-strong); } /* the rail is the bar without the thumb's half width at each end: left % of the rail = the thumb's centre */ .sg-slider-rail { position: absolute; top: 0; bottom: 0; left: calc(var(--sg-thumb) / 2); right: calc(var(--sg-thumb) / 2); } .sg-slider-fill { position: absolute; top: 50%; height: var(--sg-track); margin-top: calc(var(--sg-track) / -2); border-radius: var(--radius-pill); background: var(--ink); pointer-events: none; } .sg-slider-dot { position: absolute; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--ink-3); pointer-events: none; } .sg-slider--sm .sg-slider-dot { width: 2px; height: 2px; margin: -1px 0 0 -1px; } .sg-slider-dot.is-on { background: var(--ink-inverse); opacity: .7; } .sg-slider-thumb { position: absolute; z-index: 1; top: 50%; width: var(--sg-thumb); height: var(--sg-thumb); margin-top: calc(var(--sg-thumb) / -2); box-sizing: border-box; border-radius: var(--radius-pill); background: var(--ink-inverse); border: 2px solid var(--ink); box-shadow: var(--shadow-lift); transform: translateX(-50%); outline: none; cursor: grab; transition: width var(--duration-spring) var(--ease-spring-bouncy), box-shadow var(--duration-quick) var(--ease-liquid); } .sg-slider-thumb.is-top { z-index: 2; } /* held: it stretches sideways like Switch's thumb, and springs back when let go */ .sg-slider-thumb.is-dragging { width: calc(var(--sg-thumb) * 1.25); cursor: grabbing; transition: width var(--duration-base) var(--ease-liquid), box-shadow var(--duration-quick) var(--ease-liquid); } .sg-slider-thumb.is-kb { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } .sg-slider-control:active { cursor: grabbing; } /* recipe G: ink bubble, 12px, 6 x 10, radius-xs, 8px above the thumb, no arrow */ .sg-slider-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); max-width: 240px; padding: 6px 10px; box-sizing: border-box; border-radius: var(--radius-xs); background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-lift); font-size: 12px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; pointer-events: none; opacity: 0; transform: translate(calc(-50% + var(--sg-tip-dx, 0px)), 4px) scale(.96); transform-origin: 50% 100%; transition: opacity calc(var(--duration-quick) * 2 / 3) var(--ease-exit), transform calc(var(--duration-quick) * 2 / 3) var(--ease-exit); } .sg-slider-thumb.is-dragging .sg-slider-tip, .sg-slider-thumb.is-tip .sg-slider-tip { opacity: 1; transform: translate(calc(-50% + var(--sg-tip-dx, 0px)), 0); transition: opacity var(--duration-quick) var(--ease-liquid), transform var(--duration-quick) var(--ease-liquid); } .sg-slider-marks { position: relative; height: 18px; margin: -4px calc(var(--sg-thumb) / 2) 0; font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sg-slider-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .sg-slider-mark.is-start { left: calc(var(--sg-thumb) / -2); transform: none; } .sg-slider-mark.is-end { right: calc(var(--sg-thumb) / -2); transform: none; } .sg-slider-value { flex: none; align-self: flex-start; min-height: var(--sg-slider-h); display: inline-flex; align-items: center; justify-content: flex-end; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); } .sg-slider--sm .sg-slider-value { font-size: 14px; } /* narrow containers (a phone column): the readout moves above the track instead of squeezing it */ @container (max-width: 320px) { .sg-slider-row { flex-wrap: wrap; gap: 0; } .sg-slider-value { order: -1; flex: 1 0 100%; min-width: 0 !important; min-height: 0; justify-content: flex-start; margin-bottom: -2px; } .sg-slider-main { flex: 1 1 100%; } } @media (hover: hover) { .sg-slider:not(.is-disabled) .sg-slider-thumb:hover { box-shadow: var(--shadow-lift), 0 0 0 6px var(--state-hover); } .sg-slider:not(.is-disabled) .sg-slider-thumb.is-dragging:hover { box-shadow: var(--shadow-lift), 0 0 0 6px var(--state-pressed); } .sg-slider:not(.is-disabled) .sg-slider-thumb.is-kb:hover { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } } .sg-slider.is-invalid .sg-slider-fill { background: var(--status-bad); } .sg-slider.is-invalid .sg-slider-thumb { border-color: var(--status-bad); } .sg-slider.is-invalid .sg-slider-thumb.is-kb { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--status-bad); } @media (hover: hover) { .sg-slider.is-invalid:not(.is-disabled) .sg-slider-thumb.is-kb:hover { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--status-bad); } } .sg-slider.is-disabled { opacity: var(--disabled); } .sg-slider.is-disabled .sg-slider-control, .sg-slider.is-disabled .sg-slider-thumb { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .sg-slider-thumb, .sg-slider-thumb.is-dragging { transition-property: box-shadow; } .sg-slider-thumb.is-dragging { width: var(--sg-thumb); } .sg-slider-tip, .sg-slider-thumb.is-dragging .sg-slider-tip, .sg-slider-thumb.is-tip .sg-slider-tip { transform: translate(calc(-50% + var(--sg-tip-dx, 0px)), 0); transition-property: opacity; } } @media (pointer: coarse) { /* the 32px small slider gets 6px more above and below: a finger lands anywhere in a 44px band */ .sg-slider--sm .sg-slider-control::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } } /* ---------- SocialLogin: round glass buttons (IconButton md) or full-width Buttons; the platform's own mark sits inside, uncoloured by us ---------- */ .sg-social { display: grid; min-width: 0; } .sg-social .sg-social-divider { margin: 0 0 var(--space-4); } .sg-social-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); } .sg-social-list { display: grid; gap: var(--space-3); } .sg-social-mark { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; line-height: 0; } .sg-social-mark > * { max-width: 100%; max-height: 100%; } .sg-social-b .sg-social-mark { width: 20px; height: 20px; } .sg-iconbtn--sm.sg-social-btn .sg-social-mark { width: 18px; height: 18px; } .sg-social--icons .sg-social-btn { flex: none; } /* while one platform is signing in, the others wait: dimmer, still focusable, nothing to press */ .sg-social-btn.is-dim, .sg-social-b.is-dim { opacity: var(--disabled); cursor: default; } .sg-social-btn[aria-busy="true"] { cursor: progress; } @media (prefers-reduced-motion: reduce) { /* the busy dots stop pulsing (core), nothing else here moves */ } @media (pointer: coarse) { /* round buttons are 44px; the sm ones (32px) get the IconButton sm reach from core */ .sg-iconbtn--sm.sg-social-btn { position: relative; } .sg-iconbtn--sm.sg-social-btn::after { content: ""; position: absolute; inset: -7px; } } /* ---------- Sparkline (uses the data-colour variables and .sg-ch--nebula from the BarChart slice) ---------- */ .sg-spark { display: inline-block; vertical-align: middle; line-height: 0; color: var(--sg-ch-ink, var(--ink)); } .sg-spark--fill { display: block; width: 100%; } .sg-spark svg { display: block; overflow: visible; } .sg-spark-line { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .sg-spark-area { fill: color-mix(in srgb, var(--c) 10%, transparent); stroke: none; } /* the reference interval (a target or normal range) is neutral, so it never competes with the series colour */ .sg-spark-band { fill: color-mix(in srgb, var(--sg-ch-ink, var(--ink)) 8%, transparent); } .sg-spark-dot, .sg-spark-lone { fill: var(--c); } .sg-spark-empty { stroke: var(--sg-ch-ink-2, var(--ink-2)); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 5; fill: none; } .sg-spark[role="status"] { display: inline-flex; flex-direction: column; justify-content: center; } .sg-spark--fill[role="status"] { display: flex; } .sg-spark-skel { display: block; width: 100%; height: 8px; border-radius: var(--radius-pill); } /* data change: the line draws in from the left, the end dot arrives with it (never on the first render) */ @keyframes sg-spark-draw { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } } @keyframes sg-spark-dot { from { opacity: 0; transform: scale(.4); } } .sg-spark g.is-draw { animation: sg-spark-draw var(--duration-slow) var(--ease-liquid) both; } .sg-spark g.is-draw .sg-spark-dot { transform-box: fill-box; transform-origin: center; animation: sg-spark-dot var(--duration-base) var(--ease-spring-bouncy) backwards; animation-delay: calc(var(--duration-slow) * .75); } @media (prefers-reduced-motion: reduce) { .sg-spark g.is-draw, .sg-spark g.is-draw .sg-spark-dot { animation: none !important; } } @media (pointer: coarse) { /* not interactive: nothing to enlarge */ } /* ---------- Splitter: panes sized in % through a registered property, 12px bars that draw as a 1px line (2px ink-2 when hovered, focused or dragged) ---------- */ @property --sg-pane-size { syntax: ""; inherits: false; initial-value: 50; } .sg-split { display: flex; flex-direction: row; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; } .sg-split.is-vertical { flex-direction: column; } /* basis = the pane's share; it may shrink when the min sizes of its neighbours need the room */ .sg-split-pane { position: relative; box-sizing: border-box; flex: 0 1 calc(var(--sg-pane-size) * 1%); min-width: 0; min-height: 0; overflow: auto; } .sg-split-pane[data-collapsed] { overflow: hidden; } /* closing and reopening a whole pane glides on the soft spring; dragging never animates */ .sg-split.is-snapping .sg-split-pane { transition: --sg-pane-size var(--duration-base) var(--ease-spring-soft); } .sg-split.is-dragging { user-select: none; -webkit-user-select: none; } .sg-split.is-dragging > .sg-split-pane { pointer-events: none; } /* the bar: 12px to grab, net 0 in the layout (negative margins), the line itself is drawn in the middle */ .sg-split-handle { position: relative; z-index: 2; flex: none; box-sizing: border-box; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .sg-split:not(.is-vertical) > .sg-split-handle { width: 12px; margin: 0 -6px; cursor: col-resize; } .sg-split.is-vertical > .sg-split-handle { height: 12px; margin: -6px 0; cursor: row-resize; } .sg-split-line { position: absolute; pointer-events: none; background: var(--line); transition: background-color var(--duration-quick) var(--ease-liquid); } .sg-split:not(.is-vertical) .sg-split-line { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; } .sg-split.is-vertical .sg-split-line { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; } .sg-split-handle:hover .sg-split-line, .sg-split-handle:focus-visible .sg-split-line, .sg-split-handle.is-active .sg-split-line { background: var(--ink-2); } .sg-split:not(.is-vertical) .sg-split-handle:hover .sg-split-line, .sg-split:not(.is-vertical) .sg-split-handle:focus-visible .sg-split-line, .sg-split:not(.is-vertical) .sg-split-handle.is-active .sg-split-line { width: 2px; margin-left: -1px; } .sg-split.is-vertical .sg-split-handle:hover .sg-split-line, .sg-split.is-vertical .sg-split-handle:focus-visible .sg-split-line, .sg-split.is-vertical .sg-split-handle.is-active .sg-split-line { height: 2px; margin-top: -1px; } .sg-split-handle:focus-visible .sg-split-line { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* grip: a 4 x 24 pill in the middle of the bar, always shown */ .sg-split-grip { position: absolute; left: 50%; top: 50%; pointer-events: none; border-radius: var(--radius-pill); background: var(--line-strong); transition: background-color var(--duration-quick) var(--ease-liquid); } .sg-split:not(.is-vertical) .sg-split-grip { width: 4px; height: 24px; margin: -12px 0 0 -2px; } .sg-split.is-vertical .sg-split-grip { width: 24px; height: 4px; margin: -2px 0 0 -12px; } .sg-split-handle:hover .sg-split-grip, .sg-split-handle:focus-visible .sg-split-grip, .sg-split-handle.is-active .sg-split-grip { background: var(--ink-2); } @media (prefers-reduced-motion: reduce) { /* the pane jumps shut instead of gliding; colours still change */ .sg-split.is-snapping .sg-split-pane { transition: none; } } @media (pointer: coarse) { /* the bar is 24px wide to grab with a finger (the line stays 1px) */ .sg-split:not(.is-vertical) > .sg-split-handle { width: 24px; margin: 0 -12px; } .sg-split.is-vertical > .sg-split-handle { height: 24px; margin: -12px 0; } } /* ---------- Steps: 28 px markers joined by a 2 px connector (dashed line-strong ahead, ink behind). Title 13/500, description 12. ---------- */ .sg-steps { list-style: none; margin: 0; padding: 0; display: flex; color: var(--ink); } .sg-steps--v { flex-direction: column; } .sg-step { position: relative; min-width: 0; } .sg-step-head { display: flex; align-items: center; gap: var(--space-2); } /* marker */ .sg-step-mark { position: relative; box-sizing: border-box; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); background: var(--glass); color: var(--ink-2); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); font-family: var(--font-mono); font-size: 12px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--duration-base) var(--ease-liquid), border-color var(--duration-base) var(--ease-liquid), color var(--duration-base) var(--ease-liquid), box-shadow var(--duration-base) var(--ease-liquid), transform var(--duration-quick) var(--ease-liquid); } .sg-step-mark .sg-icon { width: 16px; height: 16px; stroke-width: 2; } .sg-step[data-state="done"] .sg-step-mark { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); -webkit-backdrop-filter: none; backdrop-filter: none; } /* current and loading: a 2 px ink ring around a solid disc (recipe C), a 2 px gap of glass between the two. The gap is what tells it from a finished step: in the dark theme the ring, the disc and the finished marker are all the same bright colour, and a ring flush against the disc would vanish into it. The number is ink on white, or dark on the bright disc in the dark theme */ .sg-step-mark::before { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 50%; background: var(--solid); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-liquid); } .sg-step[data-state="current"] .sg-step-mark, .sg-step[data-status="loading"] .sg-step-mark { isolation: isolate; border: 2px solid var(--ink); box-shadow: var(--shadow-lift); color: var(--ink); color: light-dark(var(--ink), var(--ink-inverse)); } .sg-step[data-state="current"] .sg-step-mark::before, .sg-step[data-status="loading"] .sg-step-mark::before { opacity: 1; } .sg-step[data-status="error"] .sg-step-mark { background: var(--status-bad); border: 2px solid var(--status-bad); box-shadow: var(--shadow-lift); color: var(--on-status-bad); -webkit-backdrop-filter: none; backdrop-filter: none; } /* a filled disc, not a ringed one: status-bad on the bright solid disc would be 2:1 in the dark theme */ .sg-step[data-status="error"] .sg-step-mark::before { opacity: 0; } /* connector: dashed behind a 2 px ink bar that grows when the step before it is done */ .sg-step-line { position: relative; overflow: hidden; flex: 1; min-width: 0; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); } .sg-step-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-spring) var(--ease-spring-soft); } .sg-step[data-state="done"] .sg-step-fill { transform: scaleX(1); } /* text */ .sg-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; } .sg-step-title { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; } .sg-step[data-state="done"] .sg-step-title, .sg-step[data-state="current"] .sg-step-title { color: var(--ink); } .sg-step-desc { max-width: 28em; font-size: 12px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; } .sg-step[data-status="error"] .sg-step-desc { color: var(--status-bad); } /* horizontal: marker + connector on top, text underneath, left-aligned with the marker */ .sg-steps--h .sg-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; } .sg-steps--h .sg-step-line { height: 2px; margin-right: var(--space-2); } .sg-steps--h .sg-step-body { padding-right: var(--space-3); } .sg-steps--h .sg-step-btn, .sg-steps--h .sg-step-cur { padding: 4px var(--space-2); margin: -4px var(--space-1) -4px calc(-1 * var(--space-2)); } /* room for the focus ring around the text; the negative margin keeps the text where it was, and the 4 px on the right keeps the ring off the next step's title */ /* vertical: markers in a column with the connector running down between them, text to the right */ .sg-steps--v .sg-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); } .sg-steps--v .sg-step-head { flex-direction: column; gap: var(--space-1); } .sg-steps--v .sg-step-line { width: 2px; min-height: 20px; margin-bottom: var(--space-1); background: repeating-linear-gradient(180deg, var(--line-strong) 0 4px, transparent 4px 8px); } .sg-steps--v .sg-step-fill { transform: scaleY(0); transform-origin: center top; } .sg-steps--v .sg-step[data-state="done"] .sg-step-fill { transform: scaleY(1); } .sg-steps--v .sg-step-body { margin: 4px 0 var(--space-6); } /* 4 px down: the 20 px title line centres on the 28 px marker; the margin, not padding, carries the gap so a button's ring hugs its text */ .sg-steps--v .sg-step:last-child .sg-step-body { margin-bottom: 0; } .sg-steps--v .sg-step-btn, .sg-steps--v .sg-step-cur { padding: 4px var(--space-2); margin: 0 0 20px calc(-1 * var(--space-2)); } /* no negative margin on the right: it would push the list's scroll width past its box */ .sg-steps--v .sg-step:last-child .sg-step-btn, .sg-steps--v .sg-step:last-child .sg-step-cur { margin-bottom: -4px; } /* going back: finished steps are buttons. The current step's text takes the same box (and a focus ring of its own): when a keyboard user goes back, the focus lands there */ .sg-step-btn, .sg-step-cur { position: relative; border-radius: var(--radius-xs); -webkit-tap-highlight-color: transparent; } .sg-step-btn { cursor: pointer; } .sg-step.is-click .sg-step-mark { cursor: pointer; } .sg-step.is-click:hover .sg-step-mark { box-shadow: var(--shadow-lift); } .sg-step.is-click:hover .sg-step-title { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; } .sg-step.is-click:active .sg-step-mark { transform: scale(.92); } @media (prefers-reduced-motion: reduce) { /* the ink fills the connector with a fade instead of a slide; colours still change, nothing grows, nothing shrinks */ .sg-step-fill, .sg-steps--v .sg-step-fill { transform: none; opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-step[data-state="done"] .sg-step-fill, .sg-steps--v .sg-step[data-state="done"] .sg-step-fill { transform: none; opacity: 1; } .sg-step-mark { transition-property: background-color, border-color, color !important; } .sg-step-mark::before { transition-duration: var(--duration-instant); } .sg-step.is-click:active .sg-step-mark { transform: none; } } @media (pointer: coarse) { /* a finished step is a 44 px target on its text and on its marker */ .sg-step-btn::after { content: ""; position: absolute; inset: -10px 0 -10px -6px; } /* nothing sticks out on the right: the button is as wide as its step, and an overhang would widen the list */ /* the marker has a 1.5–2 px border and the pseudo-element starts at its padding edge, so it reaches 10 px out to make 44+ */ .sg-step.is-click .sg-step-mark::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; } } /* ---------- SwipeCell: the row and its action panels sit on one track; the track slides, the clip hides what is off to the side ---------- */ .sg-swipe { position: relative; display: grid; grid-template-rows: 1fr; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--ink); transition: grid-template-rows var(--duration-smooth) var(--ease-spring-soft), visibility 0s; } /* removed by the caller: the row folds shut (2/3 of the time), then leaves the accessibility tree and the tab order */ .sg-swipe.is-removed { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows calc(var(--duration-smooth) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-smooth) * 2 / 3); } /* a hairline between neighbouring cells; --sg-swipe-inset moves its start to the text edge */ .sg-swipe + .sg-swipe::before { content: ""; position: absolute; z-index: 2; top: 0; left: var(--sg-swipe-inset, 0px); right: 0; height: 1px; background: var(--line); pointer-events: none; } .sg-swipe-clip { position: relative; min-height: 0; overflow: clip; } .sg-swipe-track { position: relative; } .sg-swipe.is-swipe .sg-swipe-track { transition: transform var(--duration-smooth) var(--ease-spring-soft); will-change: transform; } .sg-swipe-content { position: relative; min-width: 0; outline: none; } .sg-swipe.is-swipe .sg-swipe-content { touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .sg-swipe[data-drag] .sg-swipe-content { -webkit-user-select: none; user-select: none; } /* touch: the action panels hang off the track, just outside the row (the first action sits next to the row) */ .sg-swipe-panel { position: absolute; top: 0; bottom: 0; display: flex; } .sg-swipe-panel--right { left: 100%; } .sg-swipe-panel--left { right: 100%; } .sg-swipe-act { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-width: 72px; margin: 0; padding: 0 var(--space-4); border: 0; border-radius: 0; background: var(--ink); color: var(--ink-inverse); font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sg-swipe-act.is-muted { background: var(--mist-200); color: var(--ink); } .sg-swipe-act.is-danger { z-index: 1; isolation: isolate; background: var(--status-bad); color: var(--on-status-bad); } .sg-swipe-lab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform var(--duration-smooth) var(--ease-spring-soft); } .sg-swipe-act .sg-icon { width: 18px; height: 18px; } .sg-swipe-act:active { filter: brightness(.92); } .sg-swipe-act.sg-focusable:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-halo), inset 0 0 0 4px var(--focus-ring); } .sg-swipe-act.is-busy { cursor: progress; } .sg-swipe-act .sg-busy { color: inherit; } /* 2-step danger: on the first press the danger fill grows over the whole panel (clip-path, from its own slot to the panel's full width) and the label moves to the middle */ .sg-swipe-act.is-danger::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: calc(var(--sg-sw-l, 0px) * -1); background: var(--status-bad); clip-path: inset(0 0 0 var(--sg-sw-l, 0px)); transition: clip-path var(--duration-smooth) var(--ease-spring-soft); } .sg-swipe-act.is-danger.is-confirm::before { clip-path: inset(0); } .sg-swipe-act.is-confirm .sg-swipe-lab { transform: translateX(var(--sg-sw-s, 0px)); } /* mouse: the same actions at the row's end, shown on hover and while focus is in the row; always in the tab order. Overlay glass (recipe D), over a mist-100 underlay: it covers whatever the row has at its end. A backdrop-filter nested inside the glass list or card cannot blur what is under it (Chrome only shows it what is behind both), so the underlay is what keeps a covered time or count from showing through */ .sg-swipe-inline { position: absolute; z-index: 3; top: 50%; right: var(--space-3); display: flex; align-items: center; gap: 2px; padding: 2px; transform: translateY(-50%); border-radius: var(--radius-sm); background: linear-gradient(var(--glass-overlay), var(--glass-overlay)), var(--mist-100); border: 1px solid var(--line); box-shadow: var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-swipe:hover .sg-swipe-inline, .sg-swipe:focus-within .sg-swipe-inline, .sg-swipe-inline.is-pinned { opacity: 1; } @media (hover: none) { .sg-swipe-inline { opacity: 1; } } .sg-swipe-inline .sg-btn--ghost { border-color: transparent; } .sg-swipe-ia.is-danger { color: var(--status-bad); } @media (prefers-reduced-motion: reduce) { /* no spring and no growing: the row jumps to where it belongs; the danger fill and label still change */ .sg-swipe, .sg-swipe.is-removed { transition: visibility 0s; } .sg-swipe.is-swipe .sg-swipe-track { transition: none; } .sg-swipe-act.is-danger::before, .sg-swipe-lab { transition: none; } .sg-swipe-inline { transition-duration: 0s; } } @media (pointer: coarse) { /* the panels are as tall as the row and at least 72px wide; nothing here is smaller than a finger */ } /* ---------- TabBar: glass capsule 12 px above the bottom edge + safe area; the current item rides a solid capsule (recipe C) on the soft spring ---------- */ .sg-tabbar { box-sizing: border-box; width: 100%; left: 0; right: 0; bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); display: flex; justify-content: center; padding: 0 var(--space-3); pointer-events: none; } /* the strip passes taps through; only the capsule takes them */ .sg-tabbar[data-position="fixed"] { position: fixed; } .sg-tabbar[data-position="absolute"] { position: absolute; } .sg-tabbar[data-position="static"] { position: relative; bottom: auto; } .sg-tabbar-bar { position: relative; box-sizing: border-box; width: min(100%, calc(var(--sg-tabbar-n, 4) * 76px + 12px)); padding: 6px; border-radius: var(--radius-pill); color: var(--ink); pointer-events: auto; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); --sg-badge-ring: var(--mist-100); } .sg-tabbar-list { list-style: none; margin: 0; padding: 0; display: flex; } .sg-tabbar-li { flex: 1 1 0; min-width: 0; display: flex; } .sg-tabbar .sg-tabbar-badge { display: flex; width: 100%; } .sg-tabbar-item { position: relative; z-index: 1; box-sizing: border-box; flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 2px; border: 0; border-radius: var(--radius-pill); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-base), transform var(--duration-quick) var(--ease-liquid); } .sg-tabbar-item .sg-icon { width: 22px; height: 22px; } .sg-tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-tabbar-item:not(.is-current):not(.is-disabled):hover { color: var(--ink); } .sg-tabbar-item:not(.is-disabled):active { transform: scale(.94); } .sg-tabbar-item.is-current { color: var(--ink); color: light-dark(var(--ink), var(--ink-inverse)); } .sg-tabbar-item.is-disabled { opacity: var(--disabled); cursor: not-allowed; } /* the badge sits on the icon's top-right corner, not the cell's: its left edge 4 px right of the cell's middle, its centre 9 px below the top. Anchored by the left edge, a wide count ("99+") grows outwards instead of covering the icon; a one-digit count lands where a centred one would (centre 13 px right), a dot is nudged to the same spot */ .sg-tabbar .sg-tabbar-badge .sg-badge.is-pinned { top: 9px; right: auto; left: calc(50% + 4px); translate: 0 -50%; } .sg-tabbar .sg-tabbar-badge .sg-badge--dot.is-pinned { left: calc(50% + 9px); } .sg-tabbar-ind { position: absolute; z-index: 0; top: 0; left: 0; border-radius: var(--radius-pill); background: var(--solid); box-shadow: var(--shadow-lift); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring-soft), width var(--duration-spring) var(--ease-spring-soft); } .sg-tabbar-ind.is-still { transition: none; } @media (prefers-reduced-motion: reduce) { /* the capsule jumps instead of gliding; the press does not shrink */ .sg-tabbar-item { transition-property: color, opacity !important; } .sg-tabbar-ind { transition: none; } } @media (pointer: coarse) { /* cells are 52 px tall and over 56 px wide even with five items on a 320 px screen: already past 44; no double-tap zoom */ .sg-tabbar-item { touch-action: manipulation; } } /* ---------- Table: recipe F surface. Header 40px, rows row-md 52 (sm: row-sm 40), hairlines between rows, tabular numerals, numbers right-aligned ---------- */ .sg-table { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: var(--radius-md); color: var(--ink); font-size: 15px; line-height: 22px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } .sg-table--bare { overflow: visible; border-radius: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .sg-table-frame { position: relative; } .sg-table-scroll { overflow: auto; max-height: var(--sg-table-h, none); overscroll-behavior-x: contain; } .sg-table-scroll:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--focus-halo); } .sg-table-table { width: 100%; min-width: var(--sg-table-min, 0); border-collapse: separate; border-spacing: 0; table-layout: auto; } /* header cells */ .sg-table-th { box-sizing: border-box; height: 40px; padding: 0 var(--space-4); text-align: start; white-space: nowrap; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); background: transparent; border-bottom: 1px solid var(--line); } .sg-table-th.is-end, .sg-table-td.is-end { text-align: end; } .sg-table-th.is-center, .sg-table-td.is-center { text-align: center; } .sg-table-sort { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: 28px; margin: 0 -8px; padding: 0 6px 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-instant) var(--ease-liquid), color var(--duration-instant) var(--ease-liquid); } .sg-table-sort.is-end { flex-direction: row-reverse; padding: 0 8px 0 6px; } .sg-table-sort:hover { background: var(--state-hover); color: var(--ink); } .sg-table-sort:active { background: var(--state-pressed); } .sg-table-sort .sg-icon { width: 14px; height: 14px; color: var(--ink-3); } .sg-table-sort.is-sorted { color: var(--ink); } .sg-table-sort.is-sorted .sg-icon { color: var(--ink); } /* body cells */ .sg-table-td { box-sizing: border-box; height: var(--row-md); padding: 8px var(--space-4); vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--line); background: transparent; } .sg-table-td.is-wrap { white-space: normal; min-width: 200px; } th.sg-table-td { font-weight: 500; text-align: start; } /* names and codes keep their normal digits ("Juno-118", not "Juno-1 1 8"); only the number columns (type="number", or aligned to the end) are set in tabular numerals */ .sg-table-td, .sg-table-th { font-variant-numeric: normal; } .sg-table-td.is-end, .sg-table-th.is-end, .sg-table-td.is-num, .sg-table-th.is-num { font-variant-numeric: tabular-nums; } .is-sm .sg-table-td { height: var(--row-sm); padding-block: 4px; font-size: 13px; line-height: 18px; } .sg-table-row:last-child > .sg-table-td { border-bottom: 0; } .sg-table-row:hover > .sg-table-td { background-image: linear-gradient(var(--state-hover), var(--state-hover)); } .sg-table-row.is-selected > .sg-table-td { background-image: linear-gradient(var(--state-selected), var(--state-selected)); } .sg-table-row.is-selected:hover > .sg-table-td { background-image: linear-gradient(var(--state-hover), var(--state-hover)), linear-gradient(var(--state-selected), var(--state-selected)); } .sg-table-row.is-skeleton:hover > .sg-table-td { background-image: none; } .sg-table-row.is-clickable { cursor: pointer; } .sg-table-row.is-clickable:focus-visible { outline: none; } /* keyboard focus on a clickable row: the system's double ring (outer focus-ring 2px, inner focus-halo 2px) drawn inside the row — each cell paints its top and bottom edge, the first one the left, the last one the right */ .sg-table-row.is-clickable:focus-visible > .sg-table-td { background-image: linear-gradient(var(--state-hover), var(--state-hover)); --rg-l: inset 0 0 0 0 transparent; --rg-r: inset 0 0 0 0 transparent; --hl-l: inset 0 0 0 0 transparent; --hl-r: inset 0 0 0 0 transparent; box-shadow: inset 0 2px 0 0 var(--focus-ring), inset 0 -2px 0 0 var(--focus-ring), var(--rg-l), var(--rg-r), inset 0 4px 0 0 var(--focus-halo), inset 0 -4px 0 0 var(--focus-halo), var(--hl-l), var(--hl-r); } .sg-table-row.is-clickable:focus-visible > .sg-table-td:first-child { --rg-l: inset 2px 0 0 0 var(--focus-ring); --hl-l: inset 4px 0 0 0 var(--focus-halo); } .sg-table-row.is-clickable:focus-visible > .sg-table-td:last-child { --rg-r: inset -2px 0 0 0 var(--focus-ring); --hl-r: inset -4px 0 0 0 var(--focus-halo); } .sg-table-none { color: var(--ink-3); } .sg-table-cell { display: flex; align-items: center; min-width: 0; } .is-end > .sg-table-cell { justify-content: flex-end; } .is-center > .sg-table-cell { justify-content: center; } .sg-table-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-table-sel { width: 48px; min-width: 48px; padding: 0 0 0 var(--space-4); } .sg-table-sel .sg-check-wrap { display: flex; align-items: center; } .sg-table-sel .sg-check.is-bare { min-height: 20px; } .sg-table-sel .sg-check.is-bare .sg-check-box { margin-top: 0; } .sg-table-sel .sg-check.is-bare .sg-check-input { top: 0; } .sg-table-emptycell { height: auto; padding: 0; white-space: normal; } .sg-table-empty { position: sticky; left: 0; max-width: 100%; box-sizing: border-box; padding: var(--space-4) 0; } .sg-table-empty .sg-empty { max-width: none; } .sg-table-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); } .sg-table--bare .sg-table-footer { padding-inline: 0; } .sg-table--bare .sg-table-th:first-child, .sg-table--bare .sg-table-td:first-child { padding-left: 0; } .sg-table--bare .sg-table-th:last-child, .sg-table--bare .sg-table-td:last-child { padding-right: 0; } .sg-table--bare .sg-table-sel { padding-left: 0; } /* row details: a closed detail row is 0 high; it opens like an Accordion panel (grid-template-rows 0fr → 1fr) */ .sg-table-exp { width: 44px; min-width: 44px; padding: 0 0 0 var(--space-3); } .sg-table-th.sg-table-exp { padding-left: 0; } .sg-table-expbtn .sg-icon { transition: transform calc(var(--duration-smooth) * 2 / 3) var(--ease-exit); } .sg-table-expbtn.is-open .sg-icon { transform: rotate(90deg); transition: transform var(--duration-smooth) var(--ease-spring-soft); } .sg-table-row.is-expanded > .sg-table-td { border-bottom-color: transparent; } .sg-table-detail > .sg-table-detailcell { height: auto; padding: 0; white-space: normal; border-bottom: 1px solid var(--line); } .sg-table-detail:not(.is-open) > .sg-table-detailcell, .sg-table-detail:last-child > .sg-table-detailcell { border-bottom: 0; } /* closed: the whole row (tr, td and the panel inside) is visibility:hidden once the close has finished, so a screen reader does not count an empty row for every closed detail */ .sg-table-detail { visibility: hidden; transition: visibility 0s linear calc(var(--duration-smooth) * 2 / 3); } .sg-table-detail.is-open { visibility: visible; transition: visibility 0s; } .sg-table-detailpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(var(--duration-smooth) * 2 / 3) var(--ease-exit); } .sg-table-detail.is-open .sg-table-detailpanel { grid-template-rows: 1fr; transition: grid-template-rows var(--duration-smooth) var(--ease-spring-soft); } .sg-table-detailclip { min-height: 0; overflow: hidden; } .sg-table-detailbody { box-sizing: border-box; width: var(--sg-table-vw, 100%); max-width: 100%; padding: var(--space-1) var(--space-4) var(--space-4) calc(var(--space-4) + 44px); font-size: 15px; line-height: 22px; color: var(--ink-2); opacity: 0; transition: opacity calc(var(--duration-base) * 2 / 3) var(--ease-exit); } .sg-table-detail.is-open .sg-table-detailbody { opacity: 1; transition: opacity var(--duration-base) var(--ease-liquid); } .sg-table--bare .sg-table-detailbody { padding-right: 0; } /* sticky header: it floats over the rows as overlay glass once something has scrolled under it */ .has-sticky-head .sg-table-th { position: sticky; top: 0; z-index: 2; transition: background-color var(--duration-quick) var(--ease-liquid); } .has-sticky-head[data-scroll-top="true"] .sg-table-th { background-color: var(--glass-overlay); } /* the soft shadow under the stuck header is one strip across the visible width, stuck 40px (the header's height) from the top: a box-shadow on every cell breaks at the cell borders */ .has-sticky-head .sg-table-scroll::before { content: ""; display: block; position: sticky; top: 40px; left: 0; z-index: 2; box-sizing: border-box; width: var(--sg-table-vw, 100%); height: 12px; margin-bottom: -12px; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--scrim) 35%, transparent), transparent); transition: opacity var(--duration-quick) var(--ease-liquid); } .has-sticky-head[data-scroll-top="true"] .sg-table-scroll::before { opacity: 1; } /* sticky columns: the table sets `left` (or `right`) from the measured header widths. They look like any other cell until content actually slides under them, then they turn to frosted glass so the rows moving by are blurred, not cut */ .sg-table-th.is-sticky, .sg-table-td.is-sticky { position: sticky; z-index: 1; } .sg-table[data-scroll-start="true"] .is-sticky-start, .sg-table[data-scroll-end="true"] .is-sticky-end { background-color: var(--glass-overlay); } /* the blur sits on a pseudo-element: Chrome does not apply backdrop-filter to a table cell itself */ .has-sticky-head .sg-table-th::before, .sg-table[data-scroll-start="true"] .is-sticky-start::before, .sg-table[data-scroll-end="true"] .is-sticky-end::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); } .has-sticky-head .sg-table-th.is-sticky { z-index: 3; } .sg-table-th.is-edge-start::after, .sg-table-td.is-edge-start::after, .sg-table-th.is-edge-end::after, .sg-table-td.is-edge-end::after { content: ""; position: absolute; top: 0; bottom: -1px; width: 16px; pointer-events: none; opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-table-th.is-edge-start::after, .sg-table-td.is-edge-start::after { right: -16px; background: linear-gradient(90deg, color-mix(in srgb, var(--scrim) 45%, transparent), transparent); } .sg-table-th.is-edge-end::after, .sg-table-td.is-edge-end::after { left: -16px; background: linear-gradient(270deg, color-mix(in srgb, var(--scrim) 45%, transparent), transparent); } .sg-table[data-scroll-start="true"] .is-edge-start::after, .sg-table[data-scroll-end="true"] .is-edge-end::after { opacity: 1; } /* edge fades where nothing is stuck: a hint that there is more to scroll to */ .sg-table-frame::before, .sg-table-frame::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 4; width: 24px; pointer-events: none; opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); } .sg-table-frame::before { left: 0; background: linear-gradient(90deg, var(--scrim), transparent); } .sg-table-frame::after { right: 0; background: linear-gradient(270deg, var(--scrim), transparent); } .sg-table[data-scroll-start="true"]:not(.has-sticky-start) .sg-table-frame::before { opacity: 1; } .sg-table[data-scroll-end="true"]:not(.has-sticky-end) .sg-table-frame::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .sg-table-detail, .sg-table-detail.is-open { transition: visibility 0s; } .sg-table-detailpanel, .sg-table-detail.is-open .sg-table-detailpanel { transition: none; } .sg-table-expbtn .sg-icon, .sg-table-expbtn.is-open .sg-icon { transition: none; } .sg-table-detailbody, .sg-table-detail.is-open .sg-table-detailbody { transition-property: opacity; transition-duration: var(--duration-quick); transition-timing-function: linear; } .sg-table-sort, .has-sticky-head .sg-table-th { transition-property: background-color, color, opacity; } .has-sticky-head .sg-table-scroll::before { transition-property: opacity; } .sg-table-frame::before, .sg-table-frame::after, .is-edge-start::after, .is-edge-end::after { transition-property: opacity; } } @media (pointer: coarse) { /* header sort buttons are 28px: a finger gets 44 */ .sg-table-sort { position: relative; } .sg-table-sort::after { content: ""; position: absolute; inset: -8px 0; } .sg-table-td.is-sticky::after, .sg-table-th.is-sticky::after { pointer-events: none; } } /* ---------- TableOfContents: 1px rail, 13/20 links, a 2px ink bar on the heading being read (glides on the soft spring) ---------- */ .sg-toc { box-sizing: border-box; width: 220px; max-width: 100%; color: var(--ink); } .sg-toc.is-compact { width: auto; max-width: 100%; } .sg-toc-title { margin: 0 0 var(--space-3); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); } .sg-toc-rail { position: relative; border-left: 1px solid var(--line); } .sg-toc-list { list-style: none; margin: 0; padding: 0; } .sg-toc-link { display: block; padding: 6px 0 6px 16px; border-radius: var(--radius-xs); color: var(--ink-2); font-size: 13px; line-height: 20px; font-weight: 400; text-decoration: none; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; transition: color var(--duration-quick) var(--ease-liquid); } .sg-toc-link.is-l3 { padding-left: 28px; } .sg-toc-link:hover { color: var(--ink); } .sg-toc-link.is-current { color: var(--ink); font-weight: 500; } .sg-toc-ind { position: absolute; top: 0; left: -1px; width: 2px; border-radius: var(--radius-pill); background: var(--ink); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring-soft); } .sg-toc-ind.is-still { transition: none; } /* folded: a ghost sm button "本页目录 · 当前章节名"; the list opens in a Popover with the same rail */ .sg-toc-trigger { max-width: 100%; } .sg-toc-trigger-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-popover .sg-toc-rail { margin: 2px 0; } .sg-popover .sg-toc-link { padding-right: 8px; } @media (prefers-reduced-motion: reduce) { /* the bar jumps to the next heading; colours still change */ .sg-toc-ind { transition: none; } } @media (pointer: coarse) { /* links in the folded list are 44px rows; the wide list is not shown on touch widths (it folds below 1024) */ .sg-popover .sg-toc-link { padding-top: 12px; padding-bottom: 12px; } } /* ---------- Tabs: "line" = underline indicator that glides; "pill" reuses .sg-tabs / .sg-tab / .sg-tabs-ind from PillTabs ---------- */ .sg-tabbed { min-width: 0; } .sg-tabbed--v { display: flex; align-items: flex-start; gap: var(--space-6); } .sg-tabbed--v > .sg-tabbed-panel { flex: 1 1 0; min-width: 0; } .sg-tabbed-bar { position: relative; min-width: 0; border-bottom: 1px solid var(--line); } .sg-tabbed--pill > .sg-tabbed-bar { border-bottom: 0; } .sg-tabbed-list { position: relative; box-sizing: border-box; display: flex; gap: var(--space-1); min-width: 100%; width: max-content; } /* a tab: 44 high (sm 36), 12 either side, 15 / 500 ink-2; the current one is ink */ .sg-tabbed-tab--line { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: var(--ink-2); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-quick) var(--ease-liquid); } .sg-tabbed--sm .sg-tabbed-tab--line { height: 36px; font-size: 14px; } .sg-tabbed-tab--line:hover, .sg-tabbed-tab--line[aria-selected="true"] { color: var(--ink); } /* the ring is drawn inside the tab: the strip scrolls, so an outer ring would be cut off at its edge */ .sg-tabbed-tab--line:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--focus-halo); } .sg-tabbed-tab[disabled] { opacity: var(--disabled); cursor: not-allowed; } .sg-tabbed-in { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .sg-tabbed-label { min-width: 0; } .sg-tabbed-icon { width: 16px; height: 16px; } /* indicator: 2px ink, as wide as the tab's content; glides on the spring (the style attribute switches it off for the first paint and for resizes) */ .sg-tabbed-ind { position: absolute; z-index: 1; left: 0; bottom: 0; height: 2px; border-radius: var(--radius-pill); background: var(--ink); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring-soft), width var(--duration-spring) var(--ease-spring-soft), height var(--duration-spring) var(--ease-spring-soft); } .sg-tabbed--v .sg-tabbed-ind { top: 0; bottom: auto; width: 2px; height: auto; } /* fill: equal-width tabs across the bar (2–4 tabs on a phone) */ .sg-tabbed--fill .sg-tabbed-tab--line { flex: 1 1 0; min-width: max-content; } .sg-tabbed--fill.sg-tabbed--pill .sg-tab { flex: 1 1 0; max-width: none; min-width: max-content; } /* vertical: 200 wide, left-aligned, indicator on the left, a hairline on the right */ .sg-tabbed--v .sg-tabbed-list { flex: none; flex-direction: column; gap: 2px; width: min(200px, 40%); min-width: 0; border-right: 1px solid var(--line); box-sizing: border-box; } .sg-tabbed--v .sg-tabbed-tab--line { width: 100%; height: 40px; justify-content: flex-start; } .sg-tabbed--pill.sg-tabbed--v .sg-tabbed-list { border-right: 0; padding: 2px; } .sg-tabbed--pill.sg-tabbed--v .sg-tab { max-width: none; width: 100%; justify-content: flex-start; } /* pill: the .sg-tab button is inline-block; lay out icon, words and count in a row. The strip scrolls inside a ScrollArea, which needs room for the focus ring */ .sg-tabbed-tab--pill { display: inline-flex; align-items: center; justify-content: center; } .sg-tabbed--pill .sg-tabbed-list.sg-tabs { overflow: visible; width: max-content; min-width: 100%; padding: 2px; margin: 0; } /* PillTabs' own 4px / −2px room for the ring is not needed here */ .sg-tabbed--pill:not(.sg-tabbed--v) .sg-scrollarea-viewport { padding: 4px; margin: -4px; } .sg-tabbed--pill .sg-tabbed-label { overflow: hidden; text-overflow: ellipsis; } /* PillTabs hides the ring of the selected tab (its box-shadow: none comes later); here every tab shows it */ .sg-tabbed--pill .sg-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } /* a count in the selected pill: the pill is light in both themes, so in dark the badge turns dark (PillTabs flips its text the same way, by attribute) */ [data-theme="dark"] .sg-tabbed--pill .sg-tab[aria-selected="true"] .sg-badge.is-ink { --bg: var(--ink-inverse); --fg: var(--ink); } @media (prefers-color-scheme: dark) { /* the same for a page that follows the system theme without data-theme (PillTabs itself only handles the attribute) */ :root:not([data-theme="light"]) .sg-tabbed--pill .sg-tab[aria-selected="true"] { color: var(--ink-inverse); } :root:not([data-theme="light"]) .sg-tabbed--pill .sg-tab[aria-selected="true"] .sg-badge.is-ink { --bg: var(--ink-inverse); --fg: var(--ink); } } .sg-tabbed-tab--pill[disabled] { pointer-events: none; } /* panel: fades in and rises 4px on a change (not on the first paint); no height animation */ .sg-tabbed-panel { min-width: 0; } .sg-tabbed:not(.sg-tabbed--v) > .sg-tabbed-panel { padding-top: var(--space-4); } .sg-tabbed-panel.is-anim { animation: sg-tabbed-in var(--duration-quick) var(--ease-liquid) both; } @keyframes sg-tabbed-in { from { opacity: 0; transform: translateY(4px); } } @keyframes sg-tabbed-fade { from { opacity: 0; } } .sg-tabbed-panel[tabindex]:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } @media (forced-colors: active) { .sg-tabbed-ind { background: Highlight; forced-color-adjust: none; } .sg-tabbed-tab--line[aria-selected="true"] { text-decoration: underline; } } @media (prefers-reduced-motion: reduce) { /* the indicator jumps, the panel only fades */ .sg-tabbed-ind, .sg-tabs-ind { transition: none !important; } .sg-tabbed-panel.is-anim { animation-name: sg-tabbed-fade; } } @media (pointer: coarse) { /* 44px targets: the strip clips an extended hit area, so the small size grows instead */ .sg-tabbed--sm .sg-tabbed-tab--line, .sg-tabbed--v .sg-tabbed-tab--line { height: 44px; } } /* ---------- Tag: glass-strong + 1px line, 28 / 24 high, radius-pill. Status carries a StatusLight (shape + colour); selectable rises to solid (recipe C). ---------- */ .sg-tag { --th: 28px; position: relative; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; height: var(--th); padding: 0 10px; vertical-align: middle; border-radius: var(--radius-pill); background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; } .sg-tag--sm { --th: 24px; gap: 4px; padding: 0 8px; font-size: 12px; line-height: 16px; } .sg-tag--mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; } .sg-tag--sm.sg-tag--mono { font-size: 11px; } .sg-tag .sg-icon { width: 14px; height: 14px; stroke-width: 1.75; } .sg-tag--sm .sg-icon { width: 12px; height: 12px; } .sg-tag-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the remove button is the IconButton xs ghost, scaled to sit inside the pill */ .sg-tag.has-remove { padding-right: 3px; } .sg-tag .sg-tag-x.sg-iconbtn--xs { width: 20px; height: 20px; margin: 0; } .sg-tag--sm .sg-tag-x.sg-iconbtn--xs { width: 18px; height: 18px; } .sg-tag .sg-tag-x .sg-icon { width: 12px; height: 12px; } .sg-tag.is-disabled { opacity: var(--disabled); cursor: not-allowed; } /* selectable: a switch for a filter. Off = quiet glass, on = solid lifted by shadow-lift. */ .sg-tag--select { cursor: pointer; background: var(--glass); color: var(--ink-2); box-shadow: none; transition: background-color var(--duration-base) var(--ease-liquid), color var(--duration-base) var(--ease-liquid), border-color var(--duration-base) var(--ease-liquid), box-shadow var(--duration-base) var(--ease-liquid), transform var(--duration-quick) var(--ease-liquid); } .sg-tag--select:not(:disabled):hover { color: var(--ink); background: var(--glass-strong); } .sg-tag--select:not(:disabled):active { transform: scale(.96); } .sg-tag--select.is-on { background: var(--solid); border-color: transparent; box-shadow: var(--shadow-lift); color: var(--ink); color: light-dark(var(--ink), var(--ink-inverse)); } /* inside a near-white overlay a solid tag cannot be told from an off one: variant="ink" fills with ink instead (recipe C note) */ .sg-tag--select.sg-tag--ink.is-on { background: var(--ink); color: var(--ink-inverse); box-shadow: none; } .sg-tag--select:disabled { opacity: var(--disabled); cursor: not-allowed; } /* the lifted shadow of a selected tag has the same specificity as the focus ring and comes later: say it again so the keyboard ring wins */ .sg-tag--select:focus-visible, .sg-tag--select.is-on:focus-visible, .sg-tag--select.sg-tag--ink.is-on:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); } @media (prefers-reduced-motion: reduce) { .sg-tag--select { transition-property: background-color, color, border-color, opacity !important; } .sg-tag--select:not(:disabled):active { transform: none; } } @media (pointer: coarse) { /* 28 / 24 high targets get a 44px hit area; the ::after starts at the padding edge, so it reaches 1px further than the maths says. Up and down it reaches the full 44px; sideways it stops 2px past the edge, because the gap between two neighbours belongs to neither (a tap in it must not go to the right-hand one, or to a disabled one) */ .sg-tag--select::after { content: ""; position: absolute; inset: -9px -3px; } .sg-tag--sm.sg-tag--select::after { inset: -11px -3px; } .sg-tag .sg-tag-x::after { inset: -13px; } .sg-tag--sm .sg-tag-x::after { inset: -14px; } } /* ---------- TextArea: the recipe-A shell (FieldBox multiline: 10px above and below, 22px lines; 5px and 20px for sm) around a bare

---------- */
.sg-ta.sg-field-box { align-items: flex-start; min-width: 0; cursor: text; }
.sg-ta-input { display: block; width: 100%; resize: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
.sg-ta-input.is-resizable { resize: vertical; min-height: 1lh; }
.sg-ta-input:disabled { cursor: not-allowed; }
/* 汉字 text needs more air between lines than the 22px / 20px the shared shell sets: 24px (15px type) and 22px (14px type), the system's 中文 body leading (clreq: at least 1.5 times the size).
   The vertical padding gives up 1px (md) / 1px (sm) so that one line still makes the 44px / 32px control height. */
.sg-ta.sg-field-box.sg-field-box--multi:lang(zh) { padding-top: 9px; padding-bottom: 9px; }
.sg-ta.sg-field-box.sg-field-box--multi.sg-field-box--sm:lang(zh) { padding-top: 4px; padding-bottom: 4px; }
.sg-ta.sg-field-box .sg-ta-input:lang(zh) { line-height: 24px; }
.sg-ta.sg-field-box--sm .sg-ta-input:lang(zh) { line-height: 22px; }

@media (prefers-reduced-motion: reduce) {
  /* nothing here moves: the height follows the text without an animation */
}
@media (pointer: coarse) {
  /* the whole shell is the text area (a press on its padding focuses it), so a 32px shell needs nothing beyond the 6px strips the shared shell already adds */
}

/* ---------- Timeline: <ol>; each item is a small grid: [time] [marker rail] [title / words / content] ---------- */
.sg-timeline { --tl-col: 28px; --tl-mark: 24px; --tl-gap: var(--space-5); list-style: none; margin: 0; padding: 0; color: var(--ink); font-size: 15px; line-height: 24px; }
.sg-timeline--sm { --tl-col: 24px; --tl-mark: 20px; --tl-gap: var(--space-4); font-size: 14px; line-height: 20px; }
.sg-timeline-item { display: grid; grid-template-columns: var(--tl-col) minmax(0, 1fr); grid-template-rows: auto auto auto auto var(--tl-gap); grid-template-areas: ". time" "rail title" "rail desc" "rail content" "rail gap"; margin: 0; padding: 0; }
.sg-timeline-item:last-child { --tl-gap: 0px; }
.sg-timeline--aside .sg-timeline-item { grid-template-columns: 120px var(--tl-col) minmax(0, 1fr); grid-template-areas: "time rail title" ". rail desc" ". rail content" ". rail gap"; grid-template-rows: auto auto auto var(--tl-gap); column-gap: 0; }

.sg-timeline-time { grid-area: time; margin: 0; font-family: inherit; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-timeline--aside .sg-timeline-time { align-self: start; padding-top: calc((var(--tl-mark) - 18px) / 2); padding-right: var(--space-3); text-align: right; }
.sg-timeline-title { grid-area: title; min-width: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.sg-timeline-desc { grid-area: desc; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
.sg-timeline--sm .sg-timeline-desc { font-size: 12px; }
.sg-timeline-content { grid-area: content; min-width: 0; margin-top: var(--space-2); }
.sg-timeline-gap { grid-area: gap; }

/* the rail: a marker the height of the title's first line, then a hairline that fills the rest of the item */
.sg-timeline-rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.sg-timeline-mark { flex: none; display: grid; place-items: center; width: var(--tl-col); height: var(--tl-mark); }
.sg-timeline-line { flex: 1 1 auto; width: 0; min-height: 8px; margin: -4px 0 calc(var(--tl-next, -4px) - var(--tl-ahead, 0px)); border-left: 1px solid var(--line-strong); }
.sg-timeline-item.has-icon .sg-timeline-line { margin-top: 4px; }
.sg-timeline-item.next-icon { --tl-next: 4px; }
/* stacked: the next item's time sits above its marker, so the hairline reaches down through that row (18px) */
.sg-timeline:not(.sg-timeline--aside) .sg-timeline-item.next-time { --tl-ahead: 18px; }
.sg-timeline-item.is-dashed .sg-timeline-line { border-left-style: dashed; }

.sg-timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.sg-timeline-icon { display: grid; place-items: center; box-sizing: border-box; width: var(--tl-mark); height: var(--tl-mark); border-radius: 50%; background: var(--glass); border: 1px solid var(--line); color: var(--ink);
  -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
.sg-timeline-icon .sg-icon { width: 14px; height: 14px; }
/* events are over: a state light keeps its shape and colour but does not spin or blink */
.sg-timeline .sg-light { animation: none !important; }
.sg-timeline-busy { color: var(--ink-2); }
.sg-timeline-item.is-pending .sg-timeline-title { font-weight: 400; color: var(--ink-2); }

.sg-timeline-wrap { min-width: 0; }
.sg-timeline-more { margin-top: var(--space-3); margin-left: var(--tl-col, 28px); }
.sg-timeline--sm + .sg-timeline-more { margin-left: 24px; }

/* a new event arrives: fades in 8px low; several arriving together are staggered (at most 7 steps, under 240ms) */
.sg-timeline-item.is-new { animation: sg-timeline-in var(--duration-smooth) var(--ease-liquid) calc(var(--sg-i, 0) * var(--stagger)) both; }
@keyframes sg-timeline-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  @keyframes sg-timeline-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (pointer: coarse) {
  /* nothing here is a tap target except the expand button, which gets the shared 44px hit area */
}

/* ---------- TimePicker: recipe A shell (clock · input · clear · chevron button); the desktop panel is recipe D (radius-md) with hour / minute columns ---------- */
.sg-timepick.sg-field-box { min-width: 0; gap: var(--space-2); padding-right: calc((var(--control-md) - var(--control-xs)) / 2 - 1px); }
.sg-timepick.sg-field-box--sm { padding-right: calc((var(--control-sm) - var(--control-xs)) / 2 - 1px); }
.sg-timepick.is-open { border-color: var(--ink); }
.sg-timepick-input { letter-spacing: .02em; }
.sg-timepick-clear, .sg-timepick-btn { flex: none; }
.sg-timepick-btn .sg-icon { transition: transform var(--duration-quick) var(--ease-liquid); }
.sg-timepick.is-open .sg-timepick-btn .sg-icon { transform: rotate(180deg); }
.sg-timepick-msg.is-solo { margin: 6px 0 0; }
.sg-timepick-msg.sg-field-error { display: flex; align-items: flex-start; gap: 6px; }

/* the panel: 64px columns, 240 high, 4px apart */
.sg-timepick-panel { width: max-content; }
.sg-timepick-cols { display: flex; gap: var(--space-1); }
.sg-timepick-scroll { flex: none; width: 64px; }
.sg-timepick-lb { flex: none; outline: none; border-radius: var(--radius-xs); }
.sg-timepick-list { padding: 4px; gap: 2px; }
.sg-timepick-opt { justify-content: center; min-height: 32px; padding: 4px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
/* the chosen row in a floating panel: ink with ink-inverse text (recipe C written for a near-white surface) */
.sg-timepick-opt[aria-selected="true"], .sg-timepick-opt[aria-selected="true"][data-active] { background: var(--ink); color: var(--ink-inverse); font-weight: 500; }
.sg-timepick-opt[aria-selected="true"]:active { background: var(--ink); }
.sg-timepick-lb:focus-visible .sg-timepick-opt[data-active] { box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); z-index: 1; }
.sg-timepick-foot { display: flex; justify-content: flex-end; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sg-timepick-foot .sg-btn[aria-disabled="true"] { opacity: var(--disabled); cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .sg-timepick-opt { transition-property: background-color, color, opacity; }
}
@media (pointer: coarse) {
  /* an xs button is 24px: IconButton's own touch rule reaches 44. Rows grow to 44 with every menu row (_primitives); the 4 + 4px list padding still holds the focus ring. */
  .sg-timepick-scroll { width: 72px; }
}

/* ---------- Toast: recipe D (glass-overlay, blur-lg, line, shadow-float, radius-md). The Toaster is a zero-height anchor at the screen edge; every toast is placed on it by transform, so the stack can fold and unfold on a spring. ---------- */
.sg-toaster { position: fixed; z-index: var(--z-toast); box-sizing: border-box; width: min(420px, calc(100vw - 24px)); height: 0; pointer-events: none; font-family: var(--font-sans); --sg-toast-gap: 8px; }
.sg-toaster[data-y="bottom"] { bottom: calc(var(--sg-toast-offset, 12px) + env(safe-area-inset-bottom, 0px)); --sg-toast-dy: 12px; --sg-toast-oy: 8px; }
.sg-toaster[data-y="top"] { top: calc(var(--sg-toast-offset, 12px) + env(safe-area-inset-top, 0px)); --sg-toast-dy: -12px; --sg-toast-oy: -8px; }
.sg-toaster[data-x="right"] { right: calc(var(--sg-toast-offset, 12px) + env(safe-area-inset-right, 0px)); --sg-toast-ox: 8px; --sg-toast-oy: 0px; }
.sg-toaster[data-x="left"] { left: calc(var(--sg-toast-offset, 12px) + env(safe-area-inset-left, 0px)); --sg-toast-ox: -8px; --sg-toast-oy: 0px; }
.sg-toaster[data-x="center"] { left: 0; right: 0; margin-inline: auto; --sg-toast-ox: 0px; }

.sg-toast-slot { position: absolute; left: 0; right: 0; pointer-events: auto; transform: translateY(var(--sg-toast-y, 0px)) scale(var(--sg-toast-s, 1));
  transition: transform var(--duration-smooth) var(--ease-spring-soft); }
.sg-toaster[data-y="bottom"] .sg-toast-slot { bottom: 0; transform-origin: 50% 100%; }
.sg-toaster[data-y="top"] .sg-toast-slot { top: 0; transform-origin: 50% 0; }
.sg-toast-slot[data-hidden], .sg-toast-slot[data-state="closed"] { pointer-events: none; }
/* unfolded: a bridge across the gap keeps the pointer "inside" while it travels from one toast to the next */
.sg-toaster.is-expanded .sg-toast-slot::before { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--sg-toast-gap) + 2px); }
.sg-toaster[data-y="bottom"].is-expanded .sg-toast-slot::before { bottom: 100%; }
.sg-toaster[data-y="top"].is-expanded .sg-toast-slot::before { top: 100%; }

.sg-toast { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; padding: 12px 12px 12px 16px; border-radius: var(--radius-md); color: var(--ink);
  background: var(--glass-overlay); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
  clip-path: inset(-80px round var(--radius-md)); transition: clip-path var(--duration-smooth) var(--ease-spring-soft), opacity var(--duration-base) var(--ease-liquid); }
.sg-toast.has-desc { align-items: flex-start; }
.sg-toast.has-action { padding-top: 10px; padding-bottom: 10px; }
.sg-toast.has-action:not(.has-desc) { padding-top: 9px; padding-bottom: 9px; }   /* 32px button + 18 + 2px border = the 52px minimum, same as a toast without an action */
.sg-toast > * { transition: opacity var(--duration-base) var(--ease-liquid); }
.sg-toast-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink-2); }
.sg-toast.has-desc .sg-toast-icon { margin-top: 4px; }
.sg-toast.is-success .sg-toast-icon { color: var(--status-good); }
.sg-toast.is-warning .sg-toast-icon { color: var(--status-warn); }
.sg-toast.is-error .sg-toast-icon { color: var(--status-bad); }
.sg-toast.is-loading .sg-toast-icon { color: var(--ink); }
.sg-toast-text { flex: 1; min-width: 0; padding-block: 2px; overflow-wrap: anywhere; }
.sg-toast .sg-toast-title { font-weight: 500; color: var(--ink); }
.sg-toast .sg-toast-desc { margin-top: 2px; color: var(--ink-2); }
.sg-toast-action { flex: none; align-self: center; }
.sg-toast-close { flex: none; }
.sg-toast.has-desc .sg-toast-close { align-self: flex-start; margin-top: 2px; }

/* folded: toasts behind the front one are blank glass plates, 12px apart, 5% smaller, clipped to the front toast's height */
.sg-toaster:not(.is-expanded) .sg-toast-slot[data-back] .sg-toast > * { opacity: 0; }
.sg-toaster:not(.is-expanded) .sg-toast-slot[data-back] .sg-toast { clip-path: inset(var(--sg-toast-cut, 0px) 0 0 0 round var(--radius-md)); }
.sg-toaster[data-y="top"]:not(.is-expanded) .sg-toast-slot[data-back] .sg-toast { clip-path: inset(0 0 var(--sg-toast-cut, 0px) 0 round var(--radius-md)); }
.sg-toaster:not(.is-expanded) .sg-toast-slot[data-hidden] .sg-toast { opacity: 0; }

/* Alt+T moves focus by script; browsers do not treat a shortcut chord as keyboard use, so after a mouse click :focus-visible stays off. The Toaster marks that focus itself. */
.sg-toaster[data-kb] .sg-focusable:focus { outline: none; box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }

/* in: 12px from the edge while it fades up out of a 6px blur; out: 8px outward while fading, 2/3 of the time */
.sg-toast.is-enter { animation: sg-toast-in var(--duration-smooth) var(--ease-spring-soft), sg-toast-fade var(--duration-smooth) var(--ease-liquid); }
.sg-toast-slot[data-state="closed"] .sg-toast { animation: sg-toast-out calc(var(--duration-smooth) * 2 / 3) var(--ease-exit) both; pointer-events: none; }
@keyframes sg-toast-in { from { translate: 0 var(--sg-toast-dy, 12px); } }
@keyframes sg-toast-fade { from { opacity: 0; filter: blur(6px); } }
@keyframes sg-toast-out { to { opacity: 0; translate: var(--sg-toast-ox, 0px) var(--sg-toast-oy, 8px); } }
@keyframes sg-toast-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sg-toast-slot { transition-property: opacity; }
  .sg-toast { transition-property: opacity; }
  .sg-toast.is-enter { animation: sg-toast-fade-only var(--duration-base) var(--ease-liquid); }
  .sg-toast-slot[data-state="closed"] .sg-toast { animation-name: sg-toast-fade-out; }
}
@keyframes sg-toast-fade-only { from { opacity: 0; } }
@media (pointer: coarse) {
  /* the close button (IconButton xs) and the action (Button sm) already carry their own 44px reach from core; the card stays clear of the screen edge */
  .sg-toast-close, .sg-toast-action { position: relative; }
  /* the two reaches (7px around the action, 10px around the close) would overlap across the 12px gap, so a tap just right of "撤销" could dismiss the toast: 6px more air keeps them apart */
  .sg-toast-action + .sg-toast-close { margin-inline-start: 6px; }
}

/* ---------- Tooltip: ink tip (recipe G) — ink fill, ink-inverse text, 12 px, 6 × 10, radius-xs, shadow-lift, 240 max, no arrow, 8 px off the anchor ---------- */
.sg-tooltip-anchor { display: contents; }
.sg-tooltip { position: fixed; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); max-width: min(240px, var(--sg-avail-w, 100vw)); margin: 0; padding: 6px 10px;
  border-radius: var(--radius-xs); background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-lift);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; text-align: start; overflow-wrap: anywhere; text-wrap: pretty;
  pointer-events: none; user-select: none; -webkit-user-select: none; transform-origin: var(--sg-origin, 50% 100%); }
.sg-tooltip:lang(zh) { line-height: 18px; }
.sg-tooltip[data-anchor-hidden] { visibility: hidden; }
/* hoverable: the pointer may rest on the tip (WCAG 1.4.13); text can then be selected and copied */
.sg-tooltip[data-hoverable] { pointer-events: auto; user-select: text; -webkit-user-select: text; }
.sg-tooltip-text { min-width: 0; }
.sg-tooltip-keys { flex: none; display: inline-flex; gap: 2px; }
/* keycaps on ink: outline only, drawn from the inverse colour so they flip with the theme */
.sg-tooltip .sg-kbd { height: 18px; min-width: 18px; padding: 0 4px; background: transparent; border-color: color-mix(in srgb, var(--ink-inverse) 32%, transparent); box-shadow: none; color: color-mix(in srgb, var(--ink-inverse) 88%, transparent); }
/* enter: fade + scale .96 + 4 px toward the anchor; exit: 2/3 of the time (keyframes are the overlay ones from the shared primitives) */
.sg-tooltip[data-side="bottom"] { --sg-ov-dx: 0px; --sg-ov-dy: -4px; }
.sg-tooltip[data-side="top"] { --sg-ov-dx: 0px; --sg-ov-dy: 4px; }
.sg-tooltip[data-side="right"] { --sg-ov-dx: -4px; --sg-ov-dy: 0px; }
.sg-tooltip[data-side="left"] { --sg-ov-dx: 4px; --sg-ov-dy: 0px; }
.sg-tooltip[data-state="open"] { animation: sg-ov-in var(--duration-quick) var(--ease-liquid) both; }
.sg-tooltip[data-state="closed"] { animation: sg-ov-out calc(var(--duration-quick) * 2 / 3) var(--ease-exit) both; }
.sg-tooltip[data-instant][data-state="open"] { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sg-tooltip[data-state="open"] { animation-name: sg-ov-fade; }
  .sg-tooltip[data-state="closed"] { animation-name: sg-ov-fade-out; }
}
/* no tap targets in a tooltip; on touch it only appears for a hardware keyboard, so keep it clear of the screen edge */
@media (pointer: coarse) {
  .sg-tooltip { max-width: min(240px, calc(100vw - 24px)); }
}

/* ---------- Tree: option-row language (recipe E): 36px rows (sm 32), radius-xs, indent per level, twist 14px that turns 90deg ---------- */
.sg-tree { --tr-row: 36px; --tr-pad: 8px; --tr-indent: 20px; list-style: none; margin: 0; padding: 0; min-width: 0; color: var(--ink); font-size: 15px; line-height: 22px; }
.sg-tree--sm { --tr-row: 32px; font-size: 14px; line-height: 20px; }
.sg-tree-item { position: relative; margin: 0; padding: 0; list-style: none; outline: none; }
.sg-tree-row { position: relative; display: flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: var(--tr-row); padding: 0 8px 0 calc(var(--tr-pad) + var(--tr-level, 0) * var(--tr-indent));
  border-radius: var(--radius-xs); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-instant) var(--ease-liquid); }
@media (hover: hover) { .sg-tree-item:not(.is-disabled) > .sg-tree-row:hover { background: var(--state-hover); } }
.sg-tree-item:not(.is-disabled) > .sg-tree-row:active { background: var(--state-pressed); }
.sg-tree-item.is-selected > .sg-tree-row { background: var(--state-selected); font-weight: 500; }
@media (hover: hover) { .sg-tree-item.is-selected:not(.is-disabled) > .sg-tree-row:hover { background: linear-gradient(var(--state-hover), var(--state-hover)), var(--state-selected); } }
.sg-tree-item.is-disabled > .sg-tree-row { opacity: var(--disabled); cursor: not-allowed; }
/* the ring is drawn inward: the tree often sits in a clipped, scrolling panel */
.sg-tree-item:focus-visible > .sg-tree-row { box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--focus-halo); }

.sg-tree-twist { flex: none; display: grid; place-items: center; width: 14px; height: 14px; color: var(--ink-2); }
.sg-tree-twist .sg-icon { width: 14px; height: 14px; transition: transform calc(var(--duration-base) * 2 / 3) var(--ease-exit); }
.sg-tree-item.is-open > .sg-tree-row .sg-tree-twist .sg-icon { transform: rotate(90deg); transition: transform var(--duration-base) var(--ease-spring-soft); }
.sg-tree-check { flex: none; display: grid; place-items: center; }
.sg-tree-check .sg-check-wrap { display: block; line-height: 0; }
.sg-tree-check .sg-check { display: grid; min-height: 20px; }
.sg-tree-check .sg-check-box { margin-top: 0; }
.sg-tree-check .sg-check-input { top: 0; }
.sg-tree-icon { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.sg-tree-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tree-hit { font-weight: 500; color: var(--ink); }
.sg-tree-busy { flex: none; margin-left: auto; color: var(--ink-2); }
.sg-tree-actions { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); }
.sg-tree-row:hover .sg-tree-actions, .sg-tree-row:focus-within .sg-tree-actions, .sg-tree-item:focus-visible > .sg-tree-row .sg-tree-actions, .sg-tree-item.is-selected > .sg-tree-row .sg-tree-actions { opacity: 1; }

/* children fold with grid-template-rows (0fr to 1fr); closed ones leave the accessibility tree and the tab order after they have finished closing */
.sg-tree-collapse { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows calc(var(--duration-smooth) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-smooth) * 2 / 3); }
.sg-tree-item.is-open > .sg-tree-collapse { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-smooth) var(--ease-spring-soft), visibility 0s; }
.sg-tree-group { position: relative; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
/* guides: one hairline per level, under the parent's twist */
.sg-tree--guides .sg-tree-group::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--tr-pad) + var(--tr-level, 0) * var(--tr-indent) + 6.5px); width: 1px; background: var(--line); pointer-events: none; }

.sg-tree-item.is-retry > .sg-tree-row { color: var(--ink-2); font-size: 13px; cursor: default; }
.sg-tree-item.is-retry .sg-btn { margin-left: var(--space-1); }
.sg-tree-empty { margin: 0; padding: 0 0 0 calc(var(--tr-pad) + var(--tr-level, 0) * var(--tr-indent) + 20px); list-style: none; }
.sg-tree-empty .sg-empty { padding: 6px 8px 6px 0; }
.sg-tree-empty .sg-empty-title { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .sg-tree-collapse, .sg-tree-item.is-open > .sg-tree-collapse { transition: visibility 0s; }
  .sg-tree-twist .sg-icon, .sg-tree-item.is-open > .sg-tree-row .sg-tree-twist .sg-icon { transition: none; }
}
@media (pointer: coarse) {
  /* a finger gets 44px rows, the twist and the checkbox keep their size and reach further, and row actions stay in sight */
  .sg-tree { --tr-row: 44px; }
  .sg-tree-twist::after { content: ""; position: absolute; inset: -14px -8px; }
  .sg-tree-twist { position: relative; }
  .sg-tree-actions { opacity: 1; }
}

/* ---------- WheelPicker: native scrolling columns that snap to rows; a band marks the chosen row; top and bottom fade out ---------- */
.sg-wheel { --sg-wheel-row: 44px; --sg-wheel-rows: 5; position: relative; display: flex; box-sizing: border-box; width: 100%; height: calc(var(--sg-wheel-rows) * var(--sg-wheel-row)); color: var(--ink); font-size: 17px; line-height: 24px; }
.sg-wheel--sm { font-size: 15px; line-height: 20px; }
/* the chosen row: state-selected, 8px in from the sides, behind the numbers */
.sg-wheel-band { position: absolute; z-index: 0; left: var(--space-2); right: var(--space-2); top: calc((var(--sg-wheel-rows) - 1) / 2 * var(--sg-wheel-row)); height: var(--sg-wheel-row);
  border-radius: var(--radius-sm); background: var(--state-selected); pointer-events: none; }
.sg-wheel-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 100%; }
.sg-wheel-scroll { height: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none;
  -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--sg-wheel-row), black calc(100% - var(--sg-wheel-row)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--sg-wheel-row), black calc(100% - var(--sg-wheel-row)), transparent 100%); }
.sg-wheel-scroll::-webkit-scrollbar { display: none; }
.sg-wheel--r3 .sg-wheel-scroll { -webkit-mask-image: none; mask-image: none; }
.sg-wheel-pad { flex: none; }
.sg-wheel-item { position: relative; display: flex; align-items: center; justify-content: center; height: var(--sg-wheel-row); scroll-snap-align: center; box-sizing: border-box; padding: 0 var(--space-2);
  color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  transition: color var(--duration-quick) var(--ease-liquid); }
.sg-wheel-item.is-sel { color: var(--ink); font-weight: 500; }
.sg-wheel-item.is-disabled { opacity: var(--disabled); cursor: not-allowed; }
.sg-wheel-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the unit sits just right of the chosen number, inside the band (zero width, so the number itself stays centred) */
.sg-wheel-sfx { width: 0; margin-left: 4px; overflow: visible; font-size: 15px; font-weight: 400; color: var(--ink-2); opacity: 0; transition: opacity var(--duration-quick) var(--ease-liquid); }
.sg-wheel-item.is-sel .sg-wheel-sfx { opacity: 1; }
.sg-wheel--sm .sg-wheel-sfx { font-size: 13px; }
/* keyboard focus: the ring goes round the chosen row of the focused column (the column itself fades at its ends and would cut it) */
.sg-wheel-col.is-focus::after { content: ""; position: absolute; z-index: 2; left: 4px; right: 4px; top: calc((var(--sg-wheel-rows) - 1) / 2 * var(--sg-wheel-row)); height: var(--sg-wheel-row);
  border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--focus-halo), inset 0 0 0 4px var(--focus-ring); pointer-events: none; }
.sg-wheel.is-disabled { opacity: var(--disabled); pointer-events: none; }
@media (hover: hover) {
  .sg-wheel-item:not(.is-sel):not(.is-disabled):hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  /* scrolling jumps (the script uses behavior: auto); only colour and opacity are left to ease */
  .sg-wheel-item, .sg-wheel-sfx { transition-property: color, opacity; }
}
@media (pointer: coarse) {
  /* rows are 44 (md) or 36 (sm) high: the small wheel is a reading size, a finger still scrolls anywhere in the column, so nothing needs widening */
  .sg-wheel-scroll { touch-action: pan-y; }
}

/* ---------- Chat kit: ChatThread · ChatMessage (+ ChatToolCall, ChatSources, ChatCitation) · ChatComposer ---------- */
/* thread: the log scrolls, the 回到最新 pill floats over its bottom edge */
.sg-chat { position: relative; display: flex; flex-direction: column; min-height: 0; }
.sg-chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-sm); }
.sg-chat-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--focus-halo); }
.sg-chat-inner { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; margin: 0 auto; padding: var(--space-4); box-sizing: border-box; }
.sg-chat-latest { position: absolute; left: 50%; bottom: var(--space-3); z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity calc(var(--duration-quick) * 2 / 3) var(--ease-exit), transform calc(var(--duration-quick) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-quick) * 2 / 3); }
.sg-chat-latest[data-show] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity var(--duration-quick) var(--ease-liquid), transform var(--duration-spring) var(--ease-spring-soft), visibility 0s; }
.sg-chat-latest .sg-btn { box-shadow: var(--shadow-float); }

/* messages */
.sg-chatmsg { display: flex; min-width: 0; color: var(--ink); font-size: 15px; line-height: 24px; }
.sg-chatmsg-body { min-width: 0; overflow-wrap: anywhere; }
.sg-chatmsg-body.is-plain { white-space: pre-wrap; }
.sg-chatmsg-body > :first-child { margin-top: 0; }
.sg-chatmsg-body > :last-child { margin-bottom: 0; }
.sg-chatmsg-body p { margin: 0 0 var(--space-3); }
/* the streaming mark: three breathing dots right after the last token */
.sg-chatmsg-caret { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--ink-2); }
/* user: a glass bubble on the right, the corner by the speaker tucked in */
.sg-chatmsg--user { flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.sg-chatmsg-bubble { max-width: min(80%, 560px); box-sizing: border-box; padding: 10px var(--space-4); border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md);
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
.sg-chatmsg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); max-width: min(80%, 560px); }
.sg-chatmsg-foot { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-xs); font-size: 12px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-chatmsg--user .sg-chatmsg-actions { opacity: 0; transition: opacity calc(var(--duration-base) * 2 / 3) var(--ease-exit); }
.sg-chatmsg--user:hover .sg-chatmsg-actions, .sg-chatmsg--user:focus-within .sg-chatmsg-actions { opacity: 1; transition: opacity var(--duration-base) var(--ease-liquid); }
/* assistant: plain text beside a 28px dot-sphere mark (ThinkingOrb: working while thinking, breathing while streaming, a still globe when done) */
.sg-chatmsg--assistant { gap: var(--space-3); align-items: flex-start; }
.sg-chatmsg-mark { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); }
.sg-chatmsg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sg-chatmsg-head { display: flex; align-items: baseline; gap: var(--space-2); min-height: 28px; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-chatmsg-head b { font-weight: 500; color: var(--ink); }
.sg-chatmsg-head time { font-size: 12px; }
.sg-chatmsg-tools { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-chatmsg-thinking { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.sg-chatmsg-error { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 6px 6px 6px var(--space-3); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-bad) 8%, transparent); border: 1px solid color-mix(in srgb, var(--status-bad) 28%, transparent); font-size: 13px; line-height: 20px; }
.sg-chatmsg-error > .sg-icon { width: 16px; height: 16px; color: var(--status-bad); }
.sg-chatmsg-error > span { flex: 1 1 160px; min-width: 0; }
.sg-chatmsg-actions { display: flex; align-items: center; gap: 2px; margin-left: -4px; color: var(--ink-2); }
.sg-chatmsg--user .sg-chatmsg-actions { margin-left: 0; }
.sg-chatmsg-actions .sg-iconbtn { color: var(--ink-2); }
.sg-chatmsg-actions .sg-iconbtn:not([disabled]):hover { color: var(--ink); }
/* system: one centred line between hairlines */
.sg-chatmsg--system { align-items: center; gap: var(--space-3); font-size: 12px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-chatmsg--system::before, .sg-chatmsg--system::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sg-chatmsg-sys { flex: 0 1 auto; max-width: 80%; text-align: center; }

/* attachment chip (composer and user messages) */
.sg-chatfile { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 260px; height: 36px; box-sizing: border-box; padding: 0 4px 0 10px; border-radius: var(--radius-xs);
  background: var(--glass-strong); border: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink); }
.sg-chatmsg .sg-chatfile { padding-right: 10px; }
.sg-chatfile > .sg-icon { width: 16px; height: 16px; color: var(--ink-2); }
.sg-chatfile-name { display: inline-flex; min-width: 0; white-space: nowrap; }
.sg-chatfile-head { overflow: hidden; text-overflow: ellipsis; }
.sg-chatfile-tail { flex: none; }
.sg-chatfile-meta { flex: none; display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-chatfile.is-error { border-color: color-mix(in srgb, var(--status-bad) 40%, transparent); }
/* a failed file keeps its name on the first line; the reason and the fix take the second */
.sg-chatfile.is-error { flex-wrap: wrap; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; row-gap: 2px; }
.sg-chatfile.is-error .sg-chatfile-name { flex: 1; }
.sg-chatfile.is-error .sg-chatfile-meta { order: 5; flex: 1 0 100%; padding-left: 24px; box-sizing: border-box; color: var(--status-bad); white-space: normal; }

/* tool call: a quiet glass row that folds open (grid-template-rows) to its input and result */
.sg-chattool { border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); font-size: 13px; line-height: 18px; overflow: hidden; }
.sg-chattool-head { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; box-sizing: border-box; margin: 0; padding: 0 var(--space-3); border: 0; border-radius: inherit; background: transparent;
  font: inherit; color: var(--ink); text-align: left; }
button.sg-chattool-head { cursor: pointer; transition: background-color var(--duration-instant); }
button.sg-chattool-head:hover { background: var(--state-hover); }
button.sg-chattool-head:active { background: var(--state-pressed); }
button.sg-chattool-head:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--focus-halo); }
.sg-chattool-mark { flex: none; width: 16px; display: grid; place-items: center; color: var(--ink-2); }
.sg-chattool-mark .sg-icon { width: 16px; height: 16px; }
.sg-chattool.is-done .sg-chattool-mark { color: var(--status-good); }
.sg-chattool.is-error .sg-chattool-mark { color: var(--status-bad); }
.sg-chattool-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); font-weight: 500; white-space: nowrap; }
/* when the row is narrow the function name gives way first, the words last */
.sg-chattool-title > span { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
.sg-chattool-title code { flex: 0 1000 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.sg-chattool-meta { flex: none; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-chattool.is-error .sg-chattool-meta { color: var(--status-bad); }
.sg-chattool-chev, .sg-chatsrc-chev { width: 16px; height: 16px; flex: none; color: var(--ink-2); transition: transform calc(var(--duration-smooth) * 2 / 3) var(--ease-exit); }
.sg-chattool.is-open .sg-chattool-chev, .sg-chatsrc.is-open .sg-chatsrc-chev { transform: rotate(180deg); transition: transform var(--duration-smooth) var(--ease-spring-soft); }
.sg-chattool-panel, .sg-chatsrc-panel { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows calc(var(--duration-smooth) * 2 / 3) var(--ease-exit), visibility 0s linear calc(var(--duration-smooth) * 2 / 3); }
.sg-chattool.is-open > .sg-chattool-panel, .sg-chatsrc.is-open > .sg-chatsrc-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-smooth) var(--ease-spring-soft), visibility 0s; }
.sg-chattool-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-3); }
.sg-chattool.is-open .sg-chattool-in { padding-bottom: var(--space-3); }
.sg-chattool-sec { display: flex; flex-direction: column; gap: 4px; }
.sg-chattool-sec > span { font-size: 12px; color: var(--ink-2); }
.sg-chattool-sec.is-error > span { color: var(--status-bad); }
.sg-chattool-sec pre { margin: 0; max-height: 200px; overflow: auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--mist-100);
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* sources: numbered chips, then the list */
.sg-chatsrc { font-size: 13px; line-height: 18px; }
.sg-chatsrc-head { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-sm); margin: 0 0 0 -8px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: transparent;
  font: inherit; color: var(--ink-2); cursor: pointer; transition: background-color var(--duration-instant), color var(--duration-instant); }
.sg-chatsrc-head:hover { background: var(--state-hover); color: var(--ink); }
.sg-chatsrc-head:active { background: var(--state-pressed); }
.sg-chatsrc-nums { display: inline-flex; }
.sg-chatsrc-nums i, .sg-chatsrc-num, .sg-chatcite { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--line-strong); font-style: normal; font-size: 11px; line-height: 1; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-chatsrc-nums i + i { margin-left: -4px; }
.sg-chatsrc-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sg-chatsrc.is-open .sg-chatsrc-list { padding-top: var(--space-2); }
.sg-chatsrc-list li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.sg-chatsrc-num { flex: none; margin-top: 1px; }
.sg-chatsrc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-chatsrc-title { color: var(--ink); font-weight: 500; text-decoration: none; border-radius: 4px; overflow-wrap: anywhere; }
a.sg-chatsrc-title:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sg-chatsrc-site { font-size: 12px; color: var(--ink-2); }
.sg-chatsrc-body p { margin: 2px 0 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the inline mark sits a little above the baseline, like a footnote */
.sg-chatcite { position: relative; top: -0.35em; margin: 0 1px; vertical-align: baseline; text-decoration: none; cursor: default; }
a.sg-chatcite { cursor: pointer; transition: background-color var(--duration-instant), border-color var(--duration-instant); }
a.sg-chatcite:hover { background: var(--solid); border-color: var(--ink-2); }

/* composer: recipe A on a larger scale — glass-strong shell, line-strong, radius-md; hover ink-2, focus ink + the double ring */
.sg-composer { position: relative; display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-2); border-radius: var(--radius-md);
  background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); cursor: text;
  transition: border-color var(--duration-instant), box-shadow var(--duration-base) var(--ease-liquid); }
.sg-composer:hover { border-color: var(--ink-2); }
.sg-composer:focus-within { border-color: var(--ink); box-shadow: var(--shadow-glass), 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring); }
.sg-composer:has(.sg-composer-bar :focus-visible) { box-shadow: var(--shadow-glass); border-color: var(--ink-2); }
.sg-composer.is-drag { border-color: var(--ink); border-style: dashed; }
.sg-composer.is-disabled { opacity: var(--disabled); cursor: not-allowed; }
.sg-composer-files { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sg-composer-input { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0 var(--space-1); border: 0; outline: none; background: transparent; resize: none;
  font: inherit; font-family: var(--font-sans); font-size: 15px; line-height: 24px; color: var(--ink); }
.sg-composer-input::placeholder { color: var(--ink-3); }
.sg-composer-input:disabled { cursor: not-allowed; }
.sg-composer-bar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); }
.sg-composer-gap { flex: 1; }
/* a narrow composer (under 480px) drops the key hint first, so the send button never leaves the box */
.sg-composer { container-type: inline-size; }
@container (max-width: 479px) { .sg-composer-hint { display: none; } }
.sg-composer-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
/* send: an empty composer shows it as glass (pressing it only focuses the box); with text it turns ink, the one primary of the view; while replying it is the stop button */
.sg-composer-send { flex: none; display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--glass); color: var(--ink-2); border: 1px solid var(--line-strong);
  transition: background-color var(--duration-base) var(--ease-liquid), color var(--duration-base) var(--ease-liquid), border-color var(--duration-base), transform var(--duration-quick) var(--ease-liquid); }
.sg-composer-send .sg-icon { width: 16px; height: 16px; stroke-width: 2; }
.sg-composer-send.is-ready, .sg-composer-send.is-stop { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); box-shadow: var(--shadow-lift); }
.sg-composer-send.is-stop .sg-icon { width: 12px; height: 12px; fill: currentColor; stroke-width: 1.5; }
.sg-composer-send:active { transform: scale(.92); }
.sg-composer-send[disabled] { cursor: not-allowed; transform: none; }
.sg-composer-drop { position: absolute; inset: 4px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: calc(var(--radius-md) - 4px);
  background: var(--glass-overlay); font-size: 13px; font-weight: 500; color: var(--ink); pointer-events: none; }
.sg-composer-drop .sg-icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .sg-chat-latest, .sg-chat-latest[data-show] { transform: translate(-50%, 0); transition-property: opacity, visibility; }
  .sg-chattool-panel, .sg-chatsrc-panel, .sg-chattool.is-open > .sg-chattool-panel, .sg-chatsrc.is-open > .sg-chatsrc-panel { transition: visibility 0s; }
  .sg-chattool-chev, .sg-chatsrc-chev, .sg-chattool.is-open .sg-chattool-chev, .sg-chatsrc.is-open .sg-chatsrc-chev { transition: none; }
  .sg-composer-send:active { transform: none; }
  .sg-chatmsg-caret .sg-busy i { animation: none; opacity: .6; }
}
@media (pointer: coarse) {
  /* phones: the actions stay visible (there is no hover), the hint about keys goes away, and the small targets grow to 44px without changing their look */
  .sg-chatmsg--user .sg-chatmsg-actions { opacity: 1; }
  .sg-composer-hint { display: none; }
  .sg-composer-send, .sg-chatsrc-head, a.sg-chatcite { position: relative; }
  .sg-composer-send::after, .sg-chatsrc-head::after { content: ""; position: absolute; inset: -6px; }
  a.sg-chatcite::after { content: ""; position: absolute; inset: -13px; }
  .sg-chattool-head { min-height: 44px; }
}

/* ---------- LineChart (shares the data-colour variables and .sg-ch--nebula with BarChart) ---------- */
.sg-lines { position: relative; display: block; width: 100%; box-sizing: border-box; color: var(--sg-ch-ink); border-radius: var(--radius-xs); font-family: var(--font-sans);
  --sg-ch-ring: var(--mist-000); }
.sg-lines.sg-ch--nebula { --sg-ch-ring: var(--nebula-deep); }
.sg-lines.is-loading { opacity: .5; transition: opacity var(--duration-base) var(--ease-liquid); }
.sg-lines-plot { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sg-lines-svg { display: block; overflow: visible; }
.sg-lines-svg text { font-family: var(--font-sans); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; fill: var(--sg-ch-ink-2); transition: fill var(--duration-base) var(--ease-liquid); }
.sg-lines-svg text.is-cur { fill: var(--sg-ch-ink); font-weight: 500; }
.sg-lines-grid { stroke: var(--sg-ch-line); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.sg-lines-base { stroke: var(--sg-ch-line); stroke-width: 1; fill: none; }
.sg-lines-series { transition: opacity var(--duration-base) var(--ease-liquid); }
.sg-lines-series.is-dim { opacity: .24; }
.sg-lines-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-lines--one .sg-lines-line { stroke-width: 1.75; }
.sg-lines-series.is-cur .sg-lines-line { stroke-width: 2.5; }
.sg-lines-lone { fill: var(--c); }
.sg-lines-cross { stroke: var(--sg-ch-ink); stroke-opacity: .32; stroke-width: 1; transition: transform var(--duration-spring) var(--ease-spring-soft); }
.sg-lines-dots circle { fill: var(--c); stroke: var(--sg-ch-ring); stroke-width: 2; transition: opacity var(--duration-base) var(--ease-liquid); }
.sg-lines-dots circle.is-dim { opacity: .24; }
/* data change: each line draws in from the left (series 40ms apart); its area fades in under it — never on the first render */
@keyframes sg-lines-draw { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes sg-lines-fade { from { opacity: 0; } }
.sg-lines-line.is-draw { animation: sg-lines-draw var(--duration-slow) var(--ease-liquid) backwards; animation-delay: var(--d, 0ms); }
.sg-lines-area.is-fade { animation: sg-lines-fade var(--duration-slow) var(--ease-liquid) backwards; animation-delay: var(--d, 0ms); }
/* the readout: the glass of the BarChart pill, a few rows tall, sliding beside the crosshair */
.sg-lines-tip { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--glass-overlay); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
  font-size: 12px; line-height: 16px; color: var(--sg-ch-ink); font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform var(--duration-spring) var(--ease-spring-soft); }
.sg-lines-tip-cat { color: var(--sg-ch-ink-2); }
.sg-lines-tip-row { display: flex; align-items: center; gap: 6px; transition: opacity var(--duration-base); }
.sg-lines-tip-row.is-dim { opacity: .4; }
.sg-lines-tip-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.sg-lines-tip-row span { flex: 1; color: var(--sg-ch-ink-2); padding-right: var(--space-3); }
.sg-lines-tip-row b { font-weight: 500; margin-left: auto; }
.sg-ch--nebula .sg-lines-tip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); box-shadow: none; }
/* legend: a short stroke of the series colour, so it reads as a line, not a bar */
.sg-lines-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 18px; color: var(--sg-ch-ink-2); }
.sg-lines-legend li { display: inline-flex; align-items: center; gap: 6px; transition: color var(--duration-instant); }
.sg-lines-legend li.is-cur { color: var(--sg-ch-ink); }
.sg-lines-legend i { width: 14px; height: 3px; border-radius: var(--radius-pill); background: var(--c); flex: none; }
.sg-lines-skel { display: block; width: 100%; height: calc(100% - 28px); padding-top: 12px; box-sizing: border-box; overflow: visible; }
.sg-lines-skel path { fill: none; stroke: var(--skeleton); stroke-width: 3; stroke-linecap: round; animation: sg-lines-pulse var(--duration-loop) var(--ease-in-out) infinite alternate; }
@keyframes sg-lines-pulse { to { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .sg-lines-tip, .sg-lines-cross { transition-property: opacity !important; }
  .sg-lines-line.is-draw { animation-name: sg-lines-fade !important; animation-duration: var(--duration-base) !important; animation-delay: 0ms !important; }
  .sg-lines-area.is-fade { animation-duration: var(--duration-base) !important; animation-delay: 0ms !important; }
  .sg-lines-skel path { animation: none; }
}
@media (pointer: coarse) {
  /* the whole plot is the target: the finger picks the nearest point by its x position */
  .sg-lines-plot { min-height: 44px; }
}

/* ---------- SortableList: rows that slide aside on a soft spring while one is lifted as overlay glass ---------- */
.sg-sort { --sl-row: var(--row-md); color: var(--ink); font-size: 15px; line-height: 22px; }
.sg-sort--sm { --sl-row: var(--row-sm); font-size: 14px; line-height: 20px; }
.sg-sort--surface { border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); padding: 4px; }
.sg-sort-list { position: relative; list-style: none; margin: 0; padding: 0; }
.sg-sort-item { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: var(--sl-row); box-sizing: border-box; padding: 4px var(--space-3) 4px 4px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; translate: 0 var(--sl-y, 0px);
  transition: translate var(--duration-spring) var(--ease-spring-soft), scale var(--duration-quick) var(--ease-liquid), box-shadow var(--duration-base) var(--ease-liquid), background-color var(--duration-instant); }
/* the hairline between rows starts at the text, like List */
.sg-sort-item + .sg-sort-item::before { content: ""; position: absolute; top: -1px; left: 44px; right: var(--space-3); height: 1px; background: var(--line); transition: opacity var(--duration-instant); }
.sg-sort.is-dragging .sg-sort-item::before { opacity: 0; }
.sg-sort.is-dragging, .sg-sort.is-dragging * { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.sg-sort-item.is-lifted { z-index: 2; scale: 1.02; background: var(--glass-overlay); border-color: var(--line); box-shadow: var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4); backdrop-filter: blur(var(--blur-lg)) saturate(1.4); }
.sg-sort-item.is-follow { transition: scale var(--duration-quick) var(--ease-liquid), box-shadow var(--duration-base) var(--ease-liquid); }
.sg-sort-item.is-drop { z-index: 2; }
/* the frame of a drop: every row snaps to its new place with no transition; the next frame the dropped row slides home */
.sg-sort.is-settling .sg-sort-item { transition: none; }
.sg-sort-handle { flex: none; display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); margin: 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--ink-3); cursor: grab; touch-action: none; transition: background-color var(--duration-instant), color var(--duration-instant); }
.sg-sort-handle .sg-icon { width: 18px; height: 18px; }
.sg-sort-handle:not(:disabled):hover { background: var(--state-hover); color: var(--ink); }
.sg-sort-handle:not(:disabled):active, .sg-sort-handle[aria-pressed="true"] { background: var(--state-pressed); color: var(--ink); cursor: grabbing; }
.sg-sort-handle:disabled { cursor: not-allowed; }
.sg-sort.is-disabled .sg-sort-list { opacity: var(--disabled); }
.sg-sort-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.sg-sort-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-2); }
.sg-sort-icon .sg-icon { width: 16px; height: 16px; }
.sg-sort-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-sort-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sort-desc { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sort-meta { flex: none; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sg-sort-index { flex: none; min-width: 20px; text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .sg-sort-item { transition: box-shadow var(--duration-base) linear, background-color var(--duration-instant); }
  .sg-sort-item.is-lifted { scale: none; }
}
@media (pointer: coarse) {
  .sg-sort-handle { position: relative; }
  .sg-sort-handle::after { content: ""; position: absolute; inset: -6px; }
}