@layer site-base, arachne.tokens, arachne.components; /* * Arachne UI stylesheet. * Everything lives in cascade layers, so any unlayered app CSS overrides the kit * without specificity fights. Order: tokens → components. */ @layer arachne.tokens, arachne.components; @layer arachne.tokens { :root { /* Graphite — kit default (brand: #FFFFFF #E5E5E5 #FCA311 #14213D) */ --a-ink: #0f172a; --a-paper: #ffffff; --a-canvas: #e5e5e5; --a-muted: #56627a; --a-accent: #14213d; --a-accent-ink: #ffffff; --a-accent-soft: #e8ebf0; --a-danger: #e11d48; --a-success: #047857; --a-warning: #f59e0b; --a-info: #14213d; --a-line: #e2e8f0; --a-surface: #ffffff; --a-radius-none: 0px; --a-radius-sm: 0.5rem; --a-radius-lg: 1rem; --a-radius: var(--a-radius-sm); --a-ease: cubic-bezier(0.22, 1, 0.36, 1); --a-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --a-duration: 160ms; --a-duration-slow: 280ms; --a-font: "Source Sans 3", "Segoe UI", sans-serif; --a-font-display: "Source Sans 3", "Segoe UI", sans-serif; --a-shadow: 0 1px 2px color-mix(in oklab, var(--a-ink) 6%, transparent); --a-shadow-md: 0 8px 24px color-mix(in oklab, var(--a-ink) 10%, transparent); } :root { --a-surface-raised: var(--a-paper); /* Text on solid tone surfaces (buttons, tags, badges). */ --a-danger-ink: #ffffff; --a-success-ink: #ffffff; --a-info-ink: #ffffff; --a-warning-ink: #1a1204; --a-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --a-duration-fast: 120ms; /* Gentle overshoot for things that arrive (toasts, pops). */ --a-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --a-ring: color-mix(in oklab, var(--a-accent) 60%, transparent); --a-focus-ring: 0 0 0 2px var(--a-paper), 0 0 0 4px var(--a-ring); --a-hairline: color-mix(in oklab, var(--a-ink) 9%, transparent); /* Text highlighter (Mark, Highlight). */ --a-highlight: color-mix(in oklab, #facc15 55%, var(--a-paper)); --a-highlight-ink: #1a1204; --a-backdrop: color-mix(in oklab, var(--a-ink) 38%, transparent); --a-backdrop-blur: 8px; --a-shadow-lg: 0 1px 2px color-mix(in oklab, var(--a-ink) 6%, transparent), 0 10px 28px -6px color-mix(in oklab, var(--a-ink) 16%, transparent); --a-shadow-xl: 0 2px 4px color-mix(in oklab, var(--a-ink) 6%, transparent), 0 24px 64px -12px color-mix(in oklab, var(--a-ink) 28%, transparent); /* Stacking scale: later-opened overlays of the same tier stack above earlier ones. */ --a-z-sticky: 20; --a-z-dropdown: 30; --a-z-overlay: 50; --a-z-toast: 70; --a-z-tooltip: 80; } /* Dark theme — opt in with , a `.a-theme-dark` subtree, * or follow the OS with . */ :root[data-theme="dark"], .a-theme-dark { color-scheme: dark; --a-ink: #e6e9ef; --a-paper: #151922; --a-canvas: #0c0f15; --a-muted: #98a1b3; --a-accent: #fca311; --a-accent-ink: #1b1204; --a-accent-soft: color-mix(in oklab, #fca311 16%, #151922); --a-highlight: #e8c547; --a-danger: #fb7185; --a-success: #34d399; --a-warning: #fbbf24; --a-info: #93c5fd; --a-line: #272d3a; --a-surface: #181d27; --a-surface-raised: #1c2230; --a-danger-ink: #2b0710; --a-success-ink: #04231a; --a-info-ink: #0a1a33; --a-warning-ink: #1a1204; --a-hairline: color-mix(in oklab, white 9%, transparent); --a-backdrop: color-mix(in oklab, black 55%, transparent); --a-shadow: 0 1px 2px rgb(0 0 0 / 0.4); --a-shadow-md: 0 8px 24px rgb(0 0 0 / 0.45); --a-shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -6px rgb(0 0 0 / 0.55); --a-shadow-xl: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 72px -12px rgb(0 0 0 / 0.7); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --a-ink: #e6e9ef; --a-paper: #151922; --a-canvas: #0c0f15; --a-muted: #98a1b3; --a-accent: #fca311; --a-accent-ink: #1b1204; --a-accent-soft: color-mix(in oklab, #fca311 16%, #151922); --a-highlight: #e8c547; --a-danger: #fb7185; --a-success: #34d399; --a-warning: #fbbf24; --a-info: #93c5fd; --a-line: #272d3a; --a-surface: #181d27; --a-surface-raised: #1c2230; --a-danger-ink: #2b0710; --a-success-ink: #04231a; --a-info-ink: #0a1a33; --a-warning-ink: #1a1204; --a-hairline: color-mix(in oklab, white 9%, transparent); --a-backdrop: color-mix(in oklab, black 55%, transparent); --a-shadow: 0 1px 2px rgb(0 0 0 / 0.4); --a-shadow-md: 0 8px 24px rgb(0 0 0 / 0.45); --a-shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -6px rgb(0 0 0 / 0.55); --a-shadow-xl: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 72px -12px rgb(0 0 0 / 0.7); } } } @layer arachne.components { .a-radius-none { --a-radius: var(--a-radius-none); } .a-radius-sm { --a-radius: var(--a-radius-sm); } .a-radius-lg { --a-radius: var(--a-radius-lg); } .a-stack { display: flex; flex-direction: column; gap: var(--a-stack-gap, 0.75rem); min-width: 0; max-width: 100%; } .a-stack-row { flex-direction: row; align-items: center; } .a-text { margin: 0; font-family: var(--a-font); color: var(--a-ink); line-height: 1.5; font-size: 1rem; } .a-text-muted { color: var(--a-muted); } .a-text-danger { color: var(--a-danger); font-size: 0.875rem; } .a-label { display: block; margin: 0 0 0.35rem; font-family: var(--a-font); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--a-ink); } .a-field { display: flex; flex-direction: column; gap: 0.35rem; } .a-field-label { margin: 0; } .a-field-control { display: flex; flex-direction: column; gap: 0.35rem; } .a-field-hint { margin: 0; font-size: 0.8125rem; color: var(--a-muted); } /* ── button ── */ .a-btn { --a-btn-face: var(--a-accent); --a-btn-ink: var(--a-accent-ink); --a-btn-border: transparent; --a-btn-shadow: inset 0 1px 0 color-mix(in oklab, white 16%, transparent), 0 1px 2px color-mix(in oklab, var(--a-ink) 18%, transparent); --a-btn-height: 2.375rem; --a-btn-px: 1rem; --a-btn-font-size: 0.9375rem; --a-btn-radius: var(--a-radius); appearance: none; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: var(--a-btn-height); padding: 0 var(--a-btn-px); border: 1px solid var(--a-btn-border); border-radius: var(--a-btn-radius); background: var(--a-btn-face); color: var(--a-btn-ink); box-shadow: var(--a-btn-shadow); font-family: var(--a-font); font-size: var(--a-btn-font-size); font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--a-duration-fast) var(--a-ease), border-color var(--a-duration-fast) var(--a-ease), color var(--a-duration-fast) var(--a-ease), box-shadow var(--a-duration-fast) var(--a-ease), transform var(--a-duration-fast) var(--a-ease); } /* State layer: one overlay drives hover/press for every variant (opacity only). */ .a-btn::after { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--a-duration-fast) var(--a-ease); } .a-btn:hover:not(:disabled, [aria-disabled="true"])::after { opacity: 0.08; } .a-btn:active:not(:disabled, [aria-disabled="true"])::after { opacity: 0.14; } .a-btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(0.98); } .a-btn:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 2px; } .a-btn:disabled, .a-btn[aria-disabled="true"]:not(.a-btn-loading) { opacity: 0.48; cursor: not-allowed; box-shadow: none; } .a-btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .a-btn-label-text { display: inline-flex; align-items: center; gap: 0.35rem; } .a-btn-section { display: inline-flex; align-items: center; flex: none; margin-inline: -0.1rem; } .a-btn-loading { cursor: progress; } .a-btn-loading .a-btn-label { visibility: hidden; } .a-btn-spinner { position: absolute; inset: 0; z-index: 1; margin: auto; pointer-events: none; } .a-btn-solid { --a-btn-face: var(--a-accent); } .a-btn-default { --a-btn-face: var(--a-paper); --a-btn-ink: var(--a-ink); --a-btn-border: color-mix(in oklab, var(--a-line) 80%, var(--a-ink) 8%); --a-btn-shadow: 0 1px 2px color-mix(in oklab, var(--a-ink) 7%, transparent); } .a-btn-soft { --a-btn-face: color-mix(in oklab, var(--a-accent) 12%, var(--a-paper)); --a-btn-ink: color-mix(in oklab, var(--a-accent) 78%, var(--a-ink)); --a-btn-shadow: none; } .a-btn-outline { --a-btn-face: transparent; --a-btn-ink: color-mix(in oklab, var(--a-accent) 85%, var(--a-ink)); --a-btn-border: color-mix(in oklab, var(--a-accent) 45%, transparent); --a-btn-shadow: none; } .a-btn-ghost { --a-btn-face: transparent; --a-btn-ink: var(--a-ink); --a-btn-shadow: none; } .a-btn-link { --a-btn-face: transparent; --a-btn-ink: color-mix(in oklab, var(--a-accent) 85%, var(--a-ink)); --a-btn-shadow: none; --a-btn-px: 0.1rem; min-height: auto; text-underline-offset: 0.2em; } .a-btn-link::after { display: none; } .a-btn-link:hover:not(:disabled, [aria-disabled="true"]) { text-decoration: underline; } .a-btn-danger { --a-btn-face: var(--a-danger); --a-btn-ink: var(--a-danger-ink); } .a-btn-success { --a-btn-face: var(--a-success); --a-btn-ink: var(--a-success-ink); } .a-btn-warning { --a-btn-face: var(--a-warning); --a-btn-ink: var(--a-warning-ink); } .a-btn-xs { --a-btn-height: 1.625rem; --a-btn-px: 0.55rem; --a-btn-font-size: 0.78rem; } .a-btn-sm { --a-btn-height: 2rem; --a-btn-px: 0.75rem; --a-btn-font-size: 0.875rem; } .a-btn-lg { --a-btn-height: 2.875rem; --a-btn-px: 1.35rem; --a-btn-font-size: 1rem; } .a-btn-icon { --a-btn-px: 0; width: var(--a-btn-height); aspect-ratio: 1; } .a-btn-block { display: flex; width: 100%; } @keyframes a-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes a-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes a-scale-in { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes a-slide-in-left { from { opacity: 0.6; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes a-slide-in-right { from { opacity: 0.6; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes a-fade-out { to { opacity: 0; } } @keyframes a-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.965); } } @keyframes a-dialog-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } } @keyframes a-pop-in { from { opacity: 0; transform: translateY(var(--a-pop-y, -4px)) scale(0.97); } } @keyframes a-pop-out { to { opacity: 0; transform: translateY(var(--a-pop-y, -4px)) scale(0.98); } } @keyframes a-toast-in { from { opacity: 0; transform: translateY(var(--a-toast-y, 12px)) scale(0.96); } } @keyframes a-toast-out { to { opacity: 0; transform: translateX(24px) scale(0.98); } } @keyframes a-slide-out-left { to { transform: translateX(-100%); } } @keyframes a-slide-out-right { to { transform: translateX(100%); } } @keyframes a-slide-in-top { from { transform: translateY(-100%); } } @keyframes a-slide-out-top { to { transform: translateY(-100%); } } @keyframes a-slide-in-bottom { from { transform: translateY(100%); } } @keyframes a-slide-out-bottom { to { transform: translateY(100%); } } /* Reduced motion: collapse every animation/transition, keep spinners turning slowly. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ animation-duration: 1ms !important; /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ animation-iteration-count: 1 !important; /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ transition-duration: 1ms !important; /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ scroll-behavior: auto !important; } .a-icon-spin, .a-spinner, .a-btn-spinner { /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ animation-duration: 1.6s !important; /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat component rules */ animation-iteration-count: infinite !important; } } .a-input, .a-textarea { width: 100%; border: 1px solid var(--a-line); background: var(--a-paper); color: var(--a-ink); font-family: var(--a-font); font-size: 1rem; line-height: 1.5; padding: 0.55rem 0.75rem; border-radius: var(--a-radius); box-shadow: var(--a-shadow); transition: border-color var(--a-duration) var(--a-ease), box-shadow var(--a-duration) var(--a-ease), background-color var(--a-duration) var(--a-ease); } .a-textarea { min-height: 5rem; resize: vertical; } .a-input::placeholder, .a-textarea::placeholder { color: color-mix(in oklab, var(--a-muted) 80%, var(--a-paper)); } .a-input:hover, .a-textarea:hover { border-color: color-mix(in oklab, var(--a-muted) 40%, var(--a-line)); } .a-input:focus, .a-textarea:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); } .a-input-invalid, .a-textarea-invalid { border-color: var(--a-danger); } .a-input-invalid:focus, .a-textarea-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-danger) 18%, white); } .a-input:disabled, .a-textarea:disabled, .a-select:disabled { background: color-mix(in oklab, var(--a-canvas) 55%, var(--a-paper)); color: var(--a-muted); cursor: not-allowed; opacity: 0.85; box-shadow: none; } .a-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; padding: 0.15rem 0.45rem; border: 1px solid transparent; border-radius: 999px; background: var(--a-accent-soft); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-transform: none; color: var(--a-accent); } .a-badge-success { background: color-mix(in oklab, var(--a-success) 14%, var(--a-paper)); color: var(--a-success); } .a-badge-warning { background: color-mix(in oklab, var(--a-warning) 14%, var(--a-paper)); color: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-badge-danger { background: color-mix(in oklab, var(--a-danger) 14%, var(--a-paper)); color: var(--a-danger); } .a-badge-muted { background: color-mix(in oklab, var(--a-canvas) 70%, var(--a-paper)); color: color-mix(in oklab, var(--a-muted) 70%, var(--a-ink)); } .a-badge-rounded { border-radius: 999px; } .a-select { width: 100%; appearance: none; border: 1px solid var(--a-line); background: var(--a-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7385' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.75rem center; color: var(--a-ink); font-family: var(--a-font); font-size: 1rem; line-height: 1.5; padding: 0.55rem 2.25rem 0.55rem 0.75rem; border-radius: var(--a-radius); box-shadow: var(--a-shadow); cursor: pointer; transition: border-color var(--a-duration) var(--a-ease), box-shadow var(--a-duration) var(--a-ease); } .a-select:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); } .a-select-invalid { border-color: var(--a-danger); } .a-check-row, .a-switch-row, .a-radio-row { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--a-font); font-size: 0.9375rem; color: var(--a-ink); cursor: pointer; user-select: none; } .a-radio-group { display: flex; flex-direction: column; gap: 0.45rem; } .a-radio-group-inline { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .a-check, .a-radio-row input { width: 1.05rem; height: 1.05rem; accent-color: var(--a-accent); cursor: pointer; } .a-check-invalid { outline: 1px solid var(--a-danger); } .a-switch { appearance: none; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--a-line); position: relative; cursor: pointer; transition: background var(--a-duration) var(--a-ease); flex-shrink: 0; } .a-switch::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: white; box-shadow: var(--a-shadow); transition: transform var(--a-duration) var(--a-ease); } .a-switch:checked { background: var(--a-accent); } .a-switch:checked::after { transform: translateX(1.05rem); } .a-switch:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; } .a-alert { --a-alert-tone: var(--a-accent); border: 0; border-radius: var(--a-radius); padding: 0.85rem 1rem; font-family: var(--a-font); font-size: 0.9375rem; line-height: 1.45; background: color-mix(in oklab, var(--a-alert-tone) 9%, var(--a-paper)); color: var(--a-ink); box-shadow: inset 3px 0 0 var(--a-alert-tone); animation: a-rise-in var(--a-duration-slow) var(--a-ease-out); } .a-alert-title { display: block; margin-bottom: 0.2rem; font-weight: 500; color: var(--a-alert-heading, color-mix(in oklab, var(--a-alert-tone) 78%, var(--a-ink))); } .a-alert-info { --a-alert-tone: var(--a-accent); background: color-mix(in oklab, var(--a-accent) 10%, var(--a-paper)); } .a-alert-success { --a-alert-tone: var(--a-success); } .a-alert-warning { --a-alert-tone: var(--a-warning); --a-alert-heading: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-alert-danger { --a-alert-tone: var(--a-danger); } .a-divider { border: 0; border-top: 1px solid var(--a-line); margin: 0.75rem 0; } .a-heading { margin: 0; font-family: var(--a-font-display); color: var(--a-ink); letter-spacing: -0.02em; line-height: 1.25; } .a-heading-1 { font-size: 1.75rem; font-weight: 700; } .a-heading-2 { font-size: 1.25rem; font-weight: 700; } .a-heading-3 { font-size: 1.05rem; font-weight: 600; } [data-a-portal] { display: contents; } /* ── dialog ── */ .a-modal-root, .a-drawer-root { position: fixed; inset: 0; z-index: var(--a-z-overlay); display: grid; overscroll-behavior: contain; } .a-modal-root { --a-modal-gutter: clamp(0.75rem, 3vw, 2rem); place-items: center; padding: var(--a-modal-gutter); overflow-y: auto; } .a-modal-root:has(.a-modal-top) { align-items: start; padding-top: min(12vh, 6rem); } .a-modal-backdrop, .a-drawer-backdrop { position: fixed; inset: 0; background: var(--a-backdrop); backdrop-filter: blur(var(--a-backdrop-blur)) saturate(1.1); -webkit-backdrop-filter: blur(var(--a-backdrop-blur)) saturate(1.1); cursor: pointer; animation: a-fade-in var(--a-duration-slow) var(--a-ease) both; } .a-modal-backdrop[data-state="closed"], .a-drawer-backdrop[data-state="closed"] { animation: a-fade-out var(--a-duration) var(--a-ease) forwards; } .a-modal, .a-drawer { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--a-surface-raised); color: var(--a-ink); box-shadow: var(--a-shadow-xl), 0 0 0 1px var(--a-hairline); outline: none; } .a-modal { --a-modal-width: 32rem; width: min(100%, var(--a-modal-width)); max-height: calc(100dvh - var(--a-modal-gutter) * 2); border-radius: calc(var(--a-radius) * 1.5); animation: a-dialog-in var(--a-duration-slow) var(--a-ease-out) both; } .a-modal[data-state="closed"] { animation: a-dialog-out var(--a-duration) var(--a-ease) forwards; } .a-modal-sm { --a-modal-width: 24rem; } .a-modal-lg { --a-modal-width: 44rem; } .a-modal-xl { --a-modal-width: 60rem; } .a-modal-full { --a-modal-width: 100%; height: calc(100dvh - var(--a-modal-gutter) * 2); } .a-modal-header, .a-drawer-header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.15rem 1.25rem 0; } .a-modal-title, .a-drawer-title { flex: 1; margin: 0; font-family: var(--a-font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; } .a-modal-close, .a-drawer-close { margin: -0.2rem -0.35rem 0 auto; } .a-modal-description, .a-drawer-description { margin: 0.3rem 1.25rem 0; color: var(--a-muted); font-size: 0.9375rem; line-height: 1.5; } .a-modal-body, .a-drawer-body { flex: 1; min-height: 0; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; } .a-modal-footer, .a-drawer-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--a-hairline); background: color-mix(in oklab, var(--a-canvas) 30%, var(--a-surface-raised)); } .a-modal-footer { border-radius: 0 0 calc(var(--a-radius) * 1.5) calc(var(--a-radius) * 1.5); } .a-drawer { --a-drawer-size: 22rem; grid-area: 1 / 1; } .a-drawer-left, .a-drawer-right { width: min(100vw, var(--a-drawer-size)); height: 100dvh; } .a-drawer-top, .a-drawer-bottom { width: 100%; max-height: min(85dvh, var(--a-drawer-size)); } .a-drawer-sm { --a-drawer-size: 18rem; } .a-drawer-lg { --a-drawer-size: 32rem; } .a-drawer-full { --a-drawer-size: 100vw; } .a-drawer-left { justify-self: start; animation: a-slide-in-left var(--a-duration-slow) var(--a-ease-out) both; } .a-drawer-right { justify-self: end; animation: a-slide-in-right var(--a-duration-slow) var(--a-ease-out) both; } .a-drawer-top { align-self: start; border-radius: 0 0 calc(var(--a-radius) * 1.5) calc(var(--a-radius) * 1.5); animation: a-slide-in-top var(--a-duration-slow) var(--a-ease-out) both; } .a-drawer-bottom { align-self: end; border-radius: calc(var(--a-radius) * 1.5) calc(var(--a-radius) * 1.5) 0 0; animation: a-slide-in-bottom var(--a-duration-slow) var(--a-ease-out) both; } .a-drawer-left[data-state="closed"] { animation: a-slide-out-left var(--a-duration) var(--a-ease) forwards; } .a-drawer-right[data-state="closed"] { animation: a-slide-out-right var(--a-duration) var(--a-ease) forwards; } .a-drawer-top[data-state="closed"] { animation: a-slide-out-top var(--a-duration) var(--a-ease) forwards; } .a-drawer-bottom[data-state="closed"] { animation: a-slide-out-bottom var(--a-duration) var(--a-ease) forwards; } /* ── tabs ── */ .a-tabs-shell { --a-tabs-gap: 0.25rem; display: flex; flex-direction: column; gap: 0.85rem; width: 100%; min-width: 0; max-width: 100%; } .a-tabs-bar { display: flex; align-items: stretch; gap: 0.15rem; min-width: 0; } .a-tabs-viewport { position: relative; flex: 1; min-width: 0; } .a-tabs-viewport.a-tabs-fade-right { mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); } .a-tabs-viewport.a-tabs-fade-left { mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); } .a-tabs-viewport.a-tabs-fade-left.a-tabs-fade-right { mask-image: linear-gradient( to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent ); } .a-tabs-track { position: relative; display: flex; gap: var(--a-tabs-gap); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .a-tabs-track::-webkit-scrollbar { display: none; } .a-tabs-scroll { flex: none; width: 1.75rem; border: 0; border-radius: var(--a-radius); background: transparent; color: var(--a-muted); font-size: 1.1rem; cursor: pointer; } .a-tabs-scroll:hover:not(:disabled) { color: var(--a-ink); background: color-mix(in oklab, var(--a-canvas) 50%, transparent); } .a-tabs-scroll:disabled { opacity: 0.3; cursor: default; } .a-tab { --a-tab-py: 0.55rem; --a-tab-px: 0.85rem; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; flex: none; padding: var(--a-tab-py) var(--a-tab-px); border: 0; border-radius: var(--a-radius); background: transparent; color: var(--a-muted); font-family: var(--a-font); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: color var(--a-duration-fast) var(--a-ease); } .a-tab:hover:not(:disabled) { color: var(--a-ink); } .a-tab-active { color: var(--a-ink); } .a-tab:disabled { opacity: 0.42; cursor: not-allowed; } .a-tab:focus-visible { outline: 2px solid var(--a-ring); outline-offset: -2px; } .a-tab-icon { display: inline-flex; } .a-tab-badge { min-width: 1.25rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in oklab, var(--a-canvas) 70%, var(--a-paper)); color: var(--a-muted); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; } .a-tab-active .a-tab-badge { background: color-mix(in oklab, var(--a-accent) 14%, var(--a-paper)); color: color-mix(in oklab, var(--a-accent) 80%, var(--a-ink)); } /* Indicator geometry comes from --a-tab-x / --a-tab-w set on the track. */ .a-tabs-indicator { position: absolute; left: 0; pointer-events: none; } .a-tabs-line .a-tabs-track { box-shadow: inset 0 -1px 0 var(--a-line); } /* Line: 1px bar scaled to the tab width — transform-only motion. */ .a-tabs-line .a-tabs-indicator { bottom: 0; width: 1px; height: 2px; border-radius: 2px; background: var(--a-accent); transform-origin: left; transform: translateX(var(--a-tab-x, 0)) scaleX(var(--a-tab-w, 0)); } /* Pills / segmented: rounded plate, so width is set directly (absolutely positioned — no reflow). */ .a-tabs-pills .a-tabs-indicator, .a-tabs-segmented .a-tabs-indicator { top: var(--a-tabs-inset, 0); bottom: var(--a-tabs-inset, 0); width: calc(var(--a-tab-w, 0) * 1px); translate: var(--a-tab-x, 0) 0; border-radius: var(--a-radius); } .a-tabs-pills .a-tabs-indicator { background: color-mix(in oklab, var(--a-accent) 13%, var(--a-paper)); } .a-tabs-pills .a-tab-active { color: color-mix(in oklab, var(--a-accent) 82%, var(--a-ink)); } .a-tabs-segmented .a-tabs-track { --a-tabs-inset: 3px; --a-tabs-gap: 0; padding: var(--a-tabs-inset); border-radius: calc(var(--a-radius) + 3px); background: color-mix(in oklab, var(--a-canvas) 75%, var(--a-paper)); } .a-tabs-segmented .a-tabs-indicator { background: var(--a-paper); box-shadow: 0 1px 3px color-mix(in oklab, var(--a-ink) 14%, transparent), 0 0 0 1px var(--a-hairline); } .a-tabs-segmented .a-tab { --a-tab-py: 0.4rem; } .a-tabs-enclosed .a-tabs-track { --a-tabs-gap: 0.15rem; box-shadow: inset 0 -1px 0 var(--a-line); } .a-tabs-enclosed .a-tabs-indicator { display: none; } .a-tabs-track[data-indicator-ready] .a-tabs-indicator { transition: transform var(--a-duration-slow) var(--a-ease-out), translate var(--a-duration-slow) var(--a-ease-out), width var(--a-duration-slow) var(--a-ease-out); } .a-tabs-enclosed .a-tab { border: 1px solid transparent; border-bottom: 0; border-radius: var(--a-radius) var(--a-radius) 0 0; } .a-tabs-enclosed .a-tab-active { border-color: var(--a-line); background: var(--a-paper); box-shadow: 0 1px 0 var(--a-paper); } .a-tabs-grow .a-tab { flex: 1; justify-content: center; } .a-tabs-sm .a-tab { --a-tab-py: 0.35rem; --a-tab-px: 0.65rem; font-size: 0.8125rem; } .a-tabs-lg .a-tab { --a-tab-py: 0.7rem; --a-tab-px: 1.05rem; font-size: 1rem; } .a-tabs-panel { min-width: 0; border-radius: var(--a-radius); animation: a-fade-in var(--a-duration) var(--a-ease) both; } .a-tabs-panel:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 4px; } /* Keyboard-scrollable regions. */ .a-scroll-area:focus-visible, .a-reel:focus-visible, .a-codeblock-pre:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 2px; } .a-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; font-family: var(--a-font); font-size: 0.875rem; color: var(--a-muted); } .a-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.25rem; } .a-breadcrumb-sep { opacity: 0.55; } .a-breadcrumb-link { appearance: none; border: 0; background: transparent; padding: 0; color: var(--a-accent); font: inherit; cursor: pointer; } .a-breadcrumb-link:hover { text-decoration: underline; } .a-breadcrumb-current { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--a-ink); font-weight: 500; } a.a-breadcrumb-link { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; } /* ── menu ── */ .a-menu { --a-menu-min-width: 12rem; --a-pop-y: -4px; z-index: var(--a-z-dropdown); display: flex; flex-direction: column; gap: 1px; min-width: var(--a-menu-min-width); padding: 0.3rem; border-radius: calc(var(--a-radius) + 0.2rem); background: var(--a-surface-raised); box-shadow: var(--a-shadow-lg), 0 0 0 1px var(--a-hairline); transform-origin: top left; animation: a-pop-in var(--a-duration) var(--a-ease-out) both; outline: none; } .a-menu[data-state="closed"] { pointer-events: none; animation: a-pop-out var(--a-duration-fast) var(--a-ease) forwards; } .a-menu-host { position: relative; display: inline-block; } .a-menu-host .a-menu { position: absolute; top: calc(100% + 0.4rem); left: 0; } .a-menu-host .a-menu[data-placement="bottom-end"] { left: auto; right: 0; transform-origin: top right; } .a-menu-host .a-menu[data-placement^="top"] { --a-pop-y: 4px; top: auto; bottom: calc(100% + 0.4rem); transform-origin: bottom left; } .a-menu-host .a-menu[data-placement="top-end"] { left: auto; right: 0; transform-origin: bottom right; } .a-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--a-radius); background: transparent; color: var(--a-ink); font-family: var(--a-font); font-size: 0.9rem; line-height: 1.3; text-align: left; cursor: pointer; outline: none; transition: background-color var(--a-duration-fast) var(--a-ease); } .a-menu-item:hover:not(:disabled), .a-menu-item:focus-visible { background: color-mix(in oklab, var(--a-accent) 9%, transparent); } .a-menu-item-danger { color: var(--a-danger); } .a-menu-item-danger:hover:not(:disabled), .a-menu-item-danger:focus-visible { background: color-mix(in oklab, var(--a-danger) 10%, transparent); } .a-menu-item:disabled { opacity: 0.45; cursor: not-allowed; } .a-menu-icon { display: inline-flex; flex: none; color: var(--a-muted); } .a-menu-item-danger .a-menu-icon { color: inherit; } .a-menu-label { display: flex; flex: 1; flex-direction: column; min-width: 0; } .a-menu-description { color: var(--a-muted); font-size: 0.78rem; } .a-menu-shortcut { margin-left: auto; padding-left: 1rem; color: var(--a-muted); font-family: var(--a-font-mono); font-size: 0.75rem; letter-spacing: 0.02em; } .a-menu-separator { margin: 0.25rem 0.35rem; border: 0; border-top: 1px solid var(--a-hairline); } .a-menu-group { padding: 0.45rem 0.6rem 0.2rem; color: var(--a-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .a-pagination { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .a-pagination-arrow { font-size: 1.1em; line-height: 1; } .a-pagination-status { font-family: var(--a-font); font-size: 0.875rem; color: var(--a-muted); min-width: 3.5rem; text-align: center; } .a-pagination-pages { display: inline-flex; align-items: center; gap: 0.25rem; } .a-pagination-page { appearance: none; min-width: 2rem; height: 2rem; padding: 0 0.45rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); color: var(--a-ink); font-family: var(--a-font); font-size: 0.875rem; font-weight: 600; cursor: pointer; } .a-pagination-page:hover:not(.a-pagination-page-active) { border-color: var(--a-accent); color: var(--a-accent); background: color-mix(in oklab, var(--a-accent) 6%, var(--a-paper)); } .a-pagination-page-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); } .a-pagination-page-active:hover { background: color-mix(in oklab, var(--a-accent) 86%, white); border-color: color-mix(in oklab, var(--a-accent) 86%, white); color: var(--a-accent-ink); } .a-pagination-ellipsis { min-width: 1.5rem; text-align: center; color: var(--a-muted); font-size: 0.875rem; } /* Narrow screens: arrows only, one row (buttons keep "Previous/Next page" names). */ @media (max-width: 30rem) { .a-pagination { flex-wrap: nowrap; gap: 0.2rem; } .a-pagination-control-text { display: none; } .a-pagination-control { --a-btn-px: 0.5rem; } .a-pagination-pages { gap: 0.2rem; } .a-pagination-page { min-width: 2rem; padding-inline: 0.35rem; } } .a-spinner { display: inline-block; width: 1.35rem; height: 1.35rem; border: 2px solid var(--a-line); border-top-color: var(--a-accent); border-radius: 999px; animation: a-spin 0.7s linear infinite; vertical-align: middle; } .a-spinner-sm { width: 1rem; height: 1rem; } @keyframes a-spin { to { transform: rotate(360deg); } } .a-progress { height: 0.75rem; border-radius: 999px; background: var(--a-line); overflow: hidden; } .a-progress-sm { height: 0.45rem; } .a-progress-lg { height: 1.1rem; } .a-progress-bar { width: 0; height: 100%; background: var(--a-accent); border-radius: inherit; transition: width 0.2s ease; } .a-progress-info .a-progress-bar { background: var(--a-info); } .a-progress-success .a-progress-bar { background: var(--a-success); } .a-progress-warning .a-progress-bar { background: var(--a-warning); } .a-progress-danger .a-progress-bar { background: var(--a-danger); } .a-progress-primary .a-progress-bar { background: var(--a-accent); } .a-progress-indeterminate .a-progress-bar { width: 40%; animation: a-progress-indeterminate 1.1s ease-in-out infinite; } @keyframes a-progress-indeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } .a-box { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); padding: 1.25rem; box-shadow: var(--a-shadow); } .a-table { width: 100%; border-collapse: collapse; font-family: var(--a-font); font-size: 0.9375rem; } .a-table th, .a-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--a-line); text-align: left; vertical-align: top; } .a-table th { font-weight: 700; color: var(--a-muted); font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; } .a-table-fullwidth { width: 100%; } .a-table-bordered th, .a-table-bordered td { border: 1px solid var(--a-line); } .a-table-narrow th, .a-table-narrow td { padding: 0.35rem 0.5rem; } .a-table-striped tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--a-canvas) 55%, var(--a-paper)); } .a-table-hoverable tbody tr:hover td { background: color-mix(in oklab, var(--a-accent-soft) 55%, var(--a-paper)); } .a-table tbody tr:hover td { background: color-mix(in oklab, var(--a-canvas) 65%, var(--a-paper)); } .a-navbar { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); position: relative; overflow: visible; } .a-navbar-sticky { position: sticky; top: 0; z-index: 40; width: 100%; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: var(--a-shadow); } .a-navbar-fixed { position: fixed; top: 0; left: 0; /* Stay put while a modal locks scroll and removes the scrollbar. */ right: var(--a-scrollbar-gap, 0px); z-index: 40; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: var(--a-shadow-md); } .a-navbar-brand { font-family: var(--a-font); font-weight: 700; font-size: 1.05rem; color: var(--a-ink); white-space: nowrap; flex-shrink: 0; } .a-navbar-desktop { display: flex; flex: 1; min-width: 0; overflow: visible; } .a-navbar-shell { display: flex; align-items: stretch; gap: 0.15rem; width: 100%; min-width: 0; max-width: 100%; } .a-navbar-viewport { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; mask-image: linear-gradient(#000, #000); -webkit-mask-image: linear-gradient(#000, #000); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } .a-navbar-viewport.a-navbar-fade-right { mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 2rem), transparent 100%); -webkit-mask-image: linear-gradient( to right, #000 0%, #000 calc(100% - 2rem), transparent 100% ); } .a-navbar-viewport.a-navbar-fade-left { mask-image: linear-gradient(to right, transparent 0%, #000 2rem, #000 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2rem, #000 100%); } .a-navbar-viewport.a-navbar-fade-left.a-navbar-fade-right { mask-image: linear-gradient( to right, transparent 0%, #000 2rem, #000 calc(100% - 2rem), transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 2rem, #000 calc(100% - 2rem), transparent 100% ); } .a-navbar-track { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .a-navbar-track::-webkit-scrollbar { display: none; } .a-nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; } .a-navbar-track > .a-nav-list { flex-wrap: nowrap; } .a-navbar-scroll { appearance: none; flex: 0 0 auto; align-self: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--a-radius); background: transparent; color: var(--a-muted); font-family: var(--a-font); font-size: 1.15rem; line-height: 1; cursor: pointer; } .a-navbar-scroll:hover:not(:disabled) { color: var(--a-ink); background: var(--a-canvas); } .a-navbar-scroll:disabled { opacity: 0.35; cursor: default; } .a-navbar-end { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } .a-navbar-link { appearance: none; border: 0; background: transparent; color: var(--a-muted); font-family: var(--a-font); font-size: 0.9375rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: var(--a-radius); cursor: pointer; } .a-navbar-link:hover { color: var(--a-ink); background: var(--a-accent-soft); } .a-navbar-link-active { color: var(--a-accent); background: var(--a-accent-soft); } .a-nav-item { position: relative; } .a-nav-link { appearance: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--a-muted); font-family: var(--a-font); font-size: 0.9375rem; font-weight: 600; padding: 0.45rem 0.7rem; border-radius: var(--a-radius); cursor: pointer; white-space: nowrap; } .a-nav-link:hover, .a-nav-item-open > .a-nav-link, .a-nav-link-active { color: var(--a-accent); background: var(--a-accent-soft); } .a-nav-item-disabled > .a-nav-link { opacity: 0.45; cursor: not-allowed; } .a-nav-caret { font-size: 0.7rem; opacity: 0.75; line-height: 1; } .a-nav-sub { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; min-width: 12rem; padding: 0.4rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); box-shadow: 0 10px 28px color-mix(in oklab, var(--a-ink) 12%, transparent); } .a-nav-flyout { z-index: 60; } .a-nav-flyout-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; min-width: 12rem; padding: 0.4rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); box-shadow: 0 10px 28px color-mix(in oklab, var(--a-ink) 12%, transparent); } .a-nav-sub-nested { top: -0.4rem; left: calc(100% - 2px); } .a-nav-sub .a-nav-link, .a-nav-flyout-menu .a-nav-link { width: 100%; justify-content: space-between; } a.a-nav-link { text-decoration: none; } /* Inset ring: the navbar track scrolls horizontally, so an outer outline gets clipped. */ .a-nav-link:focus-visible { outline: 2px solid var(--a-ring); outline-offset: -2px; } .a-nav-link:focus:not(:focus-visible) { outline: none; } .a-navbar-burger { display: none; appearance: none; border: 1px solid var(--a-line); background: var(--a-paper); border-radius: var(--a-radius); width: 2.4rem; height: 2.4rem; padding: 0.55rem; flex-direction: column; justify-content: space-between; cursor: pointer; } .a-navbar-burger span { display: block; height: 2px; background: var(--a-ink); border-radius: 1px; } .a-navbar-mobile { display: none; } @media (max-width: 768px) { .a-navbar-desktop { display: none; } .a-navbar-burger { display: inline-flex; } .a-navbar-mobile { display: block; position: fixed; inset: 0; z-index: 50; } .a-navbar-mobile-backdrop { position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--a-ink) 45%, transparent); cursor: pointer; } .a-navbar-mobile-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 20rem); background: var(--a-paper); border-left: 1px solid var(--a-line); box-shadow: -8px 0 28px color-mix(in oklab, var(--a-ink) 12%, transparent); display: flex; flex-direction: column; overflow: auto; } .a-navbar-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--a-line); } .a-navbar-mobile-title { font-family: var(--a-font); font-weight: 700; } .a-navbar-mobile-close { appearance: none; border: 1px solid var(--a-line); background: transparent; border-radius: var(--a-radius); font-family: var(--a-font); font-size: 0.875rem; font-weight: 600; padding: 0.35rem 0.65rem; cursor: pointer; color: var(--a-ink); } .a-nav-list-mobile { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; } .a-nav-list-mobile .a-nav-sub, .a-nav-list-mobile .a-nav-sub-nested { position: static; box-shadow: none; border: 0; border-left: 2px solid var(--a-line); border-radius: 0; margin: 0.15rem 0 0.15rem 0.65rem; padding: 0.15rem 0 0.15rem 0.35rem; min-width: 0; background: transparent; } .a-nav-list-mobile .a-nav-link { width: 100%; justify-content: space-between; } } /* ── accordion ── */ .a-accordion { --a-accordion-radius: calc(var(--a-radius) * 1.25); display: flex; flex-direction: column; border: 1px solid var(--a-line); border-radius: var(--a-accordion-radius); background: var(--a-paper); overflow: clip; } .a-accordion-item + .a-accordion-item { border-top: 1px solid var(--a-line); } .a-accordion-heading { margin: 0; font: inherit; } .a-accordion-trigger { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.9rem 1rem; border: 0; background: transparent; color: var(--a-ink); font-family: var(--a-font); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color var(--a-duration-fast) var(--a-ease); } .a-accordion-trigger:hover:not(:disabled) { background: color-mix(in oklab, var(--a-canvas) 40%, transparent); } .a-accordion-trigger:focus-visible { outline: 2px solid var(--a-ring); outline-offset: -2px; } .a-accordion-trigger:disabled { opacity: 0.45; cursor: not-allowed; } .a-accordion-icon { display: inline-flex; flex: none; color: var(--a-muted); } .a-accordion-heading-text { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; } .a-accordion-subtitle { color: var(--a-muted); font-size: 0.8125rem; font-weight: 400; } .a-accordion-chevron { display: inline-flex; flex: none; color: var(--a-muted); transition: rotate var(--a-duration-slow) var(--a-ease-out); } .a-accordion-trigger[data-state="open"] .a-accordion-chevron { rotate: 180deg; } /* Height animates via the grid track; content keeps its natural height. */ .a-accordion-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--a-duration-slow) var(--a-ease-out); } .a-accordion-panel[data-state="open"] { grid-template-rows: 1fr; } .a-accordion-content { min-height: 0; padding: 0 1rem 1rem; color: color-mix(in oklab, var(--a-ink) 82%, var(--a-muted)); font-size: 0.9375rem; line-height: 1.55; opacity: 0; transition: opacity var(--a-duration) var(--a-ease); } .a-accordion-separated { gap: 0.5rem; border: 0; background: transparent; overflow: visible; } .a-accordion-separated .a-accordion-item { border: 1px solid var(--a-line); border-radius: var(--a-accordion-radius); background: var(--a-paper); overflow: clip; transition: box-shadow var(--a-duration) var(--a-ease); } .a-accordion-separated .a-accordion-item[data-state="open"] { box-shadow: var(--a-shadow-lg); } .a-accordion-flush { border: 0; border-radius: 0; background: transparent; } .a-accordion-flush .a-accordion-trigger, .a-accordion-flush .a-accordion-content { padding-inline: 0; } .a-accordion-panel[data-state="open"] > .a-accordion-content { opacity: 1; } /* ── toast ── */ .a-toast-host { position: fixed; z-index: var(--a-z-toast); display: flex; flex-direction: column; gap: 0.5rem; width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 0; pointer-events: none; } .a-toast-host-bottom-right { right: calc(1rem + var(--a-scrollbar-gap, 0px)); bottom: 1rem; } .a-toast-host-bottom-left { left: 1rem; bottom: 1rem; } .a-toast-host-bottom-center { left: 50%; bottom: 1rem; translate: -50% 0; } .a-toast-host-top-right { --a-toast-y: -12px; top: 1rem; right: calc(1rem + var(--a-scrollbar-gap, 0px)); } .a-toast-host-top-left { --a-toast-y: -12px; top: 1rem; left: 1rem; } .a-toast-host-top-center { --a-toast-y: -12px; top: 1rem; left: 50%; translate: -50% 0; } .a-toast { --a-toast-tone: var(--a-info); position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.75rem 0.85rem 1rem; border-radius: calc(var(--a-radius) * 1.25); background: var(--a-surface-raised); color: var(--a-ink); box-shadow: var(--a-shadow-lg), 0 0 0 1px var(--a-hairline); overflow: hidden; pointer-events: auto; animation: a-toast-in var(--a-duration-slow) var(--a-ease-spring) both; } .a-toast::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--a-toast-tone); } .a-toast[data-state="closed"] { animation: a-toast-out var(--a-duration) var(--a-ease) forwards; } .a-toast-success { --a-toast-tone: var(--a-success); } .a-toast-warning { --a-toast-tone: var(--a-warning); } .a-toast-danger { --a-toast-tone: var(--a-danger); } .a-toast-icon { flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.45rem; border-radius: 50%; background: var(--a-toast-tone); box-shadow: 0 0 0 4px color-mix(in oklab, var(--a-toast-tone) 18%, transparent); } .a-toast-copy { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; } .a-toast-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; } .a-toast-message { color: color-mix(in oklab, var(--a-ink) 78%, var(--a-muted)); font-size: 0.875rem; line-height: 1.45; } .a-toast-action { flex: none; align-self: center; padding: 0.3rem 0.5rem; border: 0; border-radius: var(--a-radius); background: color-mix(in oklab, var(--a-accent) 10%, transparent); color: color-mix(in oklab, var(--a-accent) 85%, var(--a-ink)); font-family: var(--a-font); font-size: 0.8125rem; font-weight: 600; cursor: pointer; } .a-toast-action:hover { background: color-mix(in oklab, var(--a-accent) 16%, transparent); } .a-toast-dismiss { flex: none; width: 1.6rem; height: 1.6rem; margin: -0.2rem -0.1rem 0 0; border: 0; border-radius: var(--a-radius); background: transparent; color: var(--a-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .a-toast-dismiss:hover { color: var(--a-ink); background: color-mix(in oklab, var(--a-canvas) 60%, transparent); } .a-toast-dismiss:focus-visible, .a-toast-action:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 1px; } .a-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: var(--a-radius); font-family: var(--a-font); font-size: 0.75rem; font-weight: 500; line-height: 1.4; border: 1px solid transparent; background: #4a4a4a; color: #fff; transition: background-color var(--a-duration) var(--a-ease), opacity var(--a-duration) var(--a-ease); } .a-tag-label { display: inline-flex; align-items: center; } .a-tag-neutral, .a-tag-dark { background: #4a4a4a; color: #fff; } .a-tag-black { background: #0a0a0a; color: #fff; } .a-tag-light { background: color-mix(in oklab, var(--a-canvas) 70%, var(--a-paper)); color: var(--a-ink); border-color: var(--a-line); } .a-tag-white { background: var(--a-paper); color: var(--a-ink); border-color: var(--a-line); } .a-tag-primary, .a-tag-accent { background: var(--a-accent); color: var(--a-accent-ink); } .a-tag-link { background: #485fc7; color: #fff; } .a-tag-info { background: var(--a-info); color: var(--a-info-ink); } .a-tag-success { background: var(--a-success); color: var(--a-success-ink); } .a-tag-warning { background: var(--a-warning); color: var(--a-warning-ink); } .a-tag-danger { background: var(--a-danger); color: var(--a-danger-ink); } .a-tag-light.a-tag-primary, .a-tag-light.a-tag-accent { background: var(--a-accent-soft); color: var(--a-accent); } .a-tag-light.a-tag-info { background: color-mix(in oklab, var(--a-info) 13%, var(--a-paper)); color: color-mix(in oklab, var(--a-info) 72%, var(--a-ink)); } .a-tag-light.a-tag-success { background: color-mix(in oklab, var(--a-success) 13%, var(--a-paper)); color: color-mix(in oklab, var(--a-success) 72%, var(--a-ink)); } .a-tag-light.a-tag-warning { background: color-mix(in oklab, var(--a-warning) 16%, var(--a-paper)); color: color-mix(in oklab, var(--a-warning) 60%, var(--a-ink)); } .a-tag-light.a-tag-danger { background: color-mix(in oklab, var(--a-danger) 13%, var(--a-paper)); color: color-mix(in oklab, var(--a-danger) 72%, var(--a-ink)); } .a-tag-light.a-tag-link { background: color-mix(in oklab, #485fc7 13%, var(--a-paper)); color: color-mix(in oklab, #485fc7 72%, var(--a-ink)); } .a-tag-md { font-size: 0.875rem; padding: 0.3rem 0.7rem; } .a-tag-lg { font-size: 1rem; padding: 0.4rem 0.85rem; } .a-tag-rounded { border-radius: 999px; } .a-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .a-tags-md .a-tag { font-size: 0.875rem; padding: 0.3rem 0.7rem; } .a-tags-lg .a-tag { font-size: 1rem; padding: 0.4rem 0.85rem; } .a-tags-addons { gap: 0; } .a-tags-addons .a-tag:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .a-tags-addons .a-tag:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .a-tag-remove { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; line-height: 1; font-size: 1rem; opacity: 0.85; } .a-tag-remove:hover { opacity: 1; } .a-skeleton { display: inline-block; border-radius: var(--a-radius); background: linear-gradient( 90deg, color-mix(in oklab, var(--a-line) 80%, var(--a-paper)) 0%, color-mix(in oklab, var(--a-line) 40%, var(--a-paper)) 50%, color-mix(in oklab, var(--a-line) 80%, var(--a-paper)) 100% ); background-size: 200% 100%; animation: a-shimmer 1.2s ease-in-out infinite; } @keyframes a-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .a-file { width: 100%; font-family: var(--a-font); font-size: 0.9375rem; color: var(--a-ink); } .a-file::file-selector-button { appearance: none; border: 1px solid var(--a-line); background: var(--a-paper); color: var(--a-ink); font-family: var(--a-font); font-weight: 600; font-size: 0.875rem; padding: 0.45rem 0.75rem; border-radius: var(--a-radius); margin-right: 0.75rem; cursor: pointer; } .a-file-invalid { outline: 1px solid var(--a-danger); } .a-input-group { display: flex; align-items: stretch; width: 100%; } .a-input-group .a-input { border-radius: 0; flex: 1; min-width: 0; } .a-input-group .a-input:first-child { border-top-left-radius: var(--a-radius); border-bottom-left-radius: var(--a-radius); } .a-input-group .a-input:last-child { border-top-right-radius: var(--a-radius); border-bottom-right-radius: var(--a-radius); } .a-input-addon { display: inline-flex; align-items: center; padding: 0 0.75rem; border: 1px solid var(--a-line); background: color-mix(in oklab, var(--a-canvas) 75%, var(--a-paper)); color: var(--a-muted); font-family: var(--a-font); font-size: 0.9rem; white-space: nowrap; } .a-input-group > .a-input-addon:first-child { border-top-left-radius: var(--a-radius); border-bottom-left-radius: var(--a-radius); } .a-input-group > .a-input-addon:last-child { border-top-right-radius: var(--a-radius); border-bottom-right-radius: var(--a-radius); } /* Presence */ .a-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; background: var(--a-accent-soft); color: var(--a-accent); font-family: var(--a-font); font-weight: 700; line-height: 1; flex-shrink: 0; vertical-align: middle; } .a-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; } .a-avatar-md { width: 2.35rem; height: 2.35rem; font-size: 0.85rem; } .a-avatar-lg { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; } .a-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .a-avatar-fallback { user-select: none; } .a-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 2rem 1.25rem; border: 1px dashed var(--a-line); border-radius: var(--a-radius); background: color-mix(in oklab, var(--a-canvas) 55%, var(--a-paper)); } .a-empty-title { margin: 0; font-family: var(--a-font); font-weight: 700; font-size: 1.05rem; color: var(--a-ink); } .a-empty-desc { margin: 0; max-width: 28rem; font-family: var(--a-font); font-size: 0.9375rem; color: var(--a-muted); line-height: 1.5; } .a-empty-action { margin-top: 0.65rem; } .a-kbd { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; font-weight: 500; line-height: 1; padding: 0.2rem 0.4rem; border: 1px solid var(--a-line); border-bottom-width: 2px; border-radius: 3px; background: var(--a-paper); color: var(--a-ink); } .a-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.875em; padding: 0.1em 0.35em; border-radius: 3px; background: color-mix(in oklab, var(--a-canvas) 70%, var(--a-paper)); color: var(--a-ink); border: 1px solid var(--a-line); } /* ── tooltip ── */ .a-tooltip-host { position: relative; display: inline-flex; } .a-tooltip-target { display: inline-flex; } .a-tooltip { --a-tooltip-bg: color-mix(in oklab, var(--a-ink) 94%, black); --a-tooltip-ink: var(--a-paper); --a-tooltip-offset: 8px; --a-pop-y: 3px; position: absolute; z-index: var(--a-z-tooltip); width: max-content; max-width: 16rem; padding: 0.35rem 0.6rem; border-radius: calc(var(--a-radius) * 0.75); background: var(--a-tooltip-bg); color: var(--a-tooltip-ink); box-shadow: var(--a-shadow-md); font-family: var(--a-font); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; animation: a-pop-in var(--a-duration-fast) var(--a-ease-out) both; } /* Invisible bridge so the pointer can travel onto the tooltip. */ .a-tooltip::before { content: ""; position: absolute; inset: calc(var(--a-tooltip-offset) * -1); } .a-tooltip[data-state="closed"] { animation: a-pop-out var(--a-duration-fast) var(--a-ease) forwards; } /* Static fallbacks (no JS / SSR); autoPosition() takes over via [data-floating]. */ .a-tooltip[data-placement="top"] { bottom: calc(100% + var(--a-tooltip-offset)); left: 50%; translate: -50% 0; } .a-tooltip[data-placement="bottom"] { top: calc(100% + var(--a-tooltip-offset)); left: 50%; translate: -50% 0; } .a-tooltip[data-placement="left"] { right: calc(100% + var(--a-tooltip-offset)); top: 50%; translate: 0 -50%; } .a-tooltip[data-placement="right"] { left: calc(100% + var(--a-tooltip-offset)); top: 50%; translate: 0 -50%; } /* Pop direction follows the side actually used after flipping. */ .a-tooltip[data-placement^="bottom"] { --a-pop-y: -3px; } .a-tooltip[data-placement^="left"], .a-tooltip[data-placement^="right"] { --a-pop-y: 0; } .a-tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; rotate: 45deg; } /* --a-arrow (set by autoPosition) keeps the arrow on the anchor after shifting. */ .a-tooltip[data-placement^="top"] .a-tooltip-arrow, .a-tooltip[data-placement^="bottom"] .a-tooltip-arrow { left: calc(var(--a-arrow, 50%) - 4px); } .a-tooltip[data-placement^="left"] .a-tooltip-arrow, .a-tooltip[data-placement^="right"] .a-tooltip-arrow { top: calc(var(--a-arrow, 50%) - 4px); } .a-tooltip[data-placement^="top"] .a-tooltip-arrow { bottom: -4px; } .a-tooltip[data-placement^="bottom"] .a-tooltip-arrow { top: -4px; } .a-tooltip[data-placement^="left"] .a-tooltip-arrow { right: -4px; } .a-tooltip[data-placement^="right"] .a-tooltip-arrow { left: -4px; } /* Steps */ .a-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0; padding: 0; } .a-step { flex: 1 1 8rem; min-width: 0; } .a-step-btn { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: flex-start; gap: 0.65rem; text-align: left; padding: 0.35rem; border-radius: var(--a-radius); cursor: default; color: inherit; font: inherit; } .a-step-clickable .a-step-btn { cursor: pointer; } .a-step-clickable .a-step-btn:hover { background: var(--a-accent-soft); } .a-step-btn:disabled { cursor: default; } .a-step-index { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-paper); color: var(--a-muted); font-family: var(--a-font); font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .a-step-current .a-step-index { border-color: var(--a-accent); background: var(--a-accent); color: var(--a-accent-ink); } .a-step-complete .a-step-index { border-color: color-mix(in oklab, var(--a-accent) 55%, var(--a-line)); background: var(--a-accent-soft); color: var(--a-accent); } .a-step-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding-top: 0.15rem; } .a-step-label { font-family: var(--a-font); font-size: 0.9rem; font-weight: 700; color: var(--a-ink); } .a-step-upcoming .a-step-label { color: var(--a-muted); font-weight: 600; } .a-step-desc { font-family: var(--a-font); font-size: 0.8rem; color: var(--a-muted); line-height: 1.35; } /* App shell */ .a-shell { display: flex; align-items: stretch; min-height: 14rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); overflow: hidden; } .a-shell-sidebar { width: 11.5rem; flex-shrink: 0; border-right: 1px solid var(--a-line); background: color-mix(in oklab, var(--a-canvas) 65%, var(--a-paper)); padding: 0.65rem; } .a-shell-main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .a-shell-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--a-line); } .a-shell-content { padding: 0.85rem; flex: 1; } .a-sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; } .a-sidebar-link { appearance: none; border: 0; background: transparent; text-align: left; width: 100%; padding: 0.45rem 0.65rem; border-radius: var(--a-radius); font-family: var(--a-font); font-size: 0.9rem; font-weight: 600; color: var(--a-muted); cursor: pointer; } .a-sidebar-link:hover { color: var(--a-ink); background: var(--a-paper); } .a-sidebar-link-active { color: var(--a-accent); background: var(--a-paper); } .a-sidebar-link:disabled { opacity: 0.45; cursor: not-allowed; } .a-segmented { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-paper); min-inline-size: 0; } .a-segment { appearance: none; border: 0; background: transparent; padding: 0.4rem 0.85rem; font-family: var(--a-font); font-size: 0.875rem; font-weight: 600; color: var(--a-muted); cursor: pointer; } .a-segment + .a-segment { border-left: 1px solid var(--a-line); } .a-segment:hover { color: var(--a-ink); background: var(--a-accent-soft); } .a-segment-active { color: var(--a-accent); background: var(--a-accent-soft); } .a-segment:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 640px) { .a-shell { flex-direction: column; } .a-shell-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--a-line); } } /* ── popover ── */ .a-popover-host { position: relative; display: inline-flex; } .a-popover { --a-popover-width: 20rem; --a-pop-y: -4px; position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: var(--a-z-dropdown); width: max-content; max-width: min(var(--a-popover-width), calc(100vw - 2rem)); padding: 0.9rem 1rem; border-radius: calc(var(--a-radius) * 1.25); background: var(--a-surface-raised); color: var(--a-ink); box-shadow: var(--a-shadow-lg), 0 0 0 1px var(--a-hairline); transform-origin: top left; animation: a-pop-in var(--a-duration) var(--a-ease-out) both; } .a-popover[data-state="closed"] { animation: a-pop-out var(--a-duration-fast) var(--a-ease) forwards; } .a-popover[data-placement="bottom"] { left: 50%; translate: -50% 0; transform-origin: top center; } .a-popover[data-placement="bottom-end"] { left: auto; right: 0; transform-origin: top right; } .a-popover[data-placement^="top"] { --a-pop-y: 4px; top: auto; bottom: calc(100% + 0.5rem); transform-origin: bottom left; } .a-popover[data-placement="top"] { left: 50%; translate: -50% 0; transform-origin: bottom center; } .a-popover[data-placement="top-end"] { left: auto; right: 0; transform-origin: bottom right; } .a-popover-arrow { position: absolute; top: -5px; left: calc(var(--a-arrow, 1.3rem) - 5px); width: 10px; height: 10px; background: inherit; box-shadow: -1px -1px 0 var(--a-hairline); rotate: 45deg; } .a-popover[data-placement^="top"] .a-popover-arrow { top: auto; bottom: -5px; box-shadow: 1px 1px 0 var(--a-hairline); } .a-popover:not([data-floating])[data-placement="bottom"] .a-popover-arrow, .a-popover:not([data-floating])[data-placement="top"] .a-popover-arrow { left: calc(50% - 5px); } .a-popover:not([data-floating])[data-placement$="end"] .a-popover-arrow { left: auto; right: 1rem; } /* Slider / number / search */ .a-slider { appearance: none; width: 100%; height: 0.35rem; border-radius: 999px; background: var(--a-line); outline: none; cursor: pointer; } .a-slider::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 999px; background: var(--a-accent); border: 2px solid var(--a-paper); box-shadow: 0 1px 3px color-mix(in oklab, var(--a-ink) 25%, transparent); cursor: pointer; } .a-slider::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 999px; background: var(--a-accent); border: 2px solid var(--a-paper); box-shadow: 0 1px 3px color-mix(in oklab, var(--a-ink) 25%, transparent); cursor: pointer; } .a-slider:disabled { opacity: 0.5; cursor: not-allowed; } .a-number { display: inline-flex; align-items: stretch; gap: 0.25rem; } .a-number-input { width: 4.5rem; text-align: center; -moz-appearance: textfield; } .a-number-input::-webkit-outer-spin-button, .a-number-input::-webkit-inner-spin-button { appearance: none; margin: 0; } .a-search { display: flex; align-items: center; gap: 0.35rem; width: 100%; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); padding: 0 0.45rem 0 0.65rem; box-shadow: var(--a-shadow); } .a-search:focus-within { border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); } /* The kit renders its own clear button; hide WebKit's native one. */ .a-search input[type="search"]::-webkit-search-cancel-button, .a-search input[type="search"]::-webkit-search-decoration { appearance: none; -webkit-appearance: none; } .a-search-icon { color: var(--a-muted); font-size: 0.95rem; line-height: 1; flex-shrink: 0; } .a-search .a-input, .a-search .a-input:focus, .a-input.a-search-input, .a-input.a-search-input:focus { border: 0; box-shadow: none; background: transparent; padding-left: 0.25rem; padding-right: 0.25rem; } .a-search-clear { appearance: none; border: 0; background: transparent; color: var(--a-muted); font-size: 1.1rem; line-height: 1; padding: 0.35rem; cursor: pointer; border-radius: var(--a-radius); } .a-search-clear:hover { color: var(--a-ink); background: var(--a-accent-soft); } /* Meta */ .a-dl { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; } .a-dl-row { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr; gap: 0.75rem; align-items: baseline; } .a-dl-label { margin: 0; font-family: var(--a-font); font-size: 0.8125rem; font-weight: 700; color: var(--a-muted); } .a-dl-value { margin: 0; font-family: var(--a-font); font-size: 0.9375rem; color: var(--a-ink); } .a-stat { display: flex; flex-direction: column; gap: 0.2rem; min-width: 7rem; } .a-stat-label { margin: 0; font-family: var(--a-font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--a-muted); } .a-stat-value { margin: 0; font-family: var(--a-font); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--a-ink); } .a-stat-hint { margin: 0; font-family: var(--a-font); font-size: 0.8125rem; color: var(--a-muted); } /* Advanced form controls */ .a-password, .a-color { display: flex; align-items: stretch; gap: 0.35rem; width: 100%; } .a-password-input, .a-color-text { flex: 1; min-width: 0; } .a-color-swatch { width: 2.5rem; height: 2.5rem; padding: 0.15rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); cursor: pointer; } .a-pin { display: inline-flex; gap: 0.4rem; } .a-pin-cell { width: 2.4rem; text-align: center; padding-left: 0; padding-right: 0; font-weight: 700; } .a-fieldset { margin: 0; padding: 0.85rem 1rem 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); min-inline-size: 0; } .a-fieldset-legend { padding: 0 0.35rem; font-family: var(--a-font); font-size: 0.8125rem; font-weight: 700; color: var(--a-muted); } .a-check-group, .a-chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; } .a-chip { appearance: none; border: 1px solid var(--a-line); background: var(--a-paper); color: var(--a-ink); font-family: var(--a-font); font-size: 0.8125rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; } .a-chip:hover:not(:disabled) { border-color: color-mix(in oklab, var(--a-ink) 22%, var(--a-line)); } .a-chip-checked { background: var(--a-accent-soft); border-color: color-mix(in oklab, var(--a-accent) 45%, var(--a-line)); color: var(--a-accent); } .a-chip:disabled { opacity: 0.5; cursor: not-allowed; } .a-rating { display: inline-flex; gap: 0.15rem; } .a-rating-star { appearance: none; border: 0; background: transparent; color: var(--a-line); font-size: 1.35rem; line-height: 1; padding: 0.1rem; cursor: pointer; } .a-rating-star:focus-visible, .a-pin-cell:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 2px; } .a-rating-star-on { color: #f5a623; } .a-rating-star:disabled { cursor: not-allowed; opacity: 0.5; } .a-range { display: grid; gap: 0.55rem; } .a-multiselect, .a-autocomplete { position: relative; width: 100%; } .a-multiselect-control { width: 100%; text-align: left; cursor: pointer; } .a-multiselect-menu, .a-autocomplete-menu { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; gap: 0.15rem; max-height: 14rem; overflow: auto; padding: 0.35rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); box-shadow: 6px 10px 24px color-mix(in oklab, var(--a-ink) 12%, transparent); } .a-multiselect-option, .a-autocomplete-option { appearance: none; border: 0; background: transparent; text-align: left; padding: 0.45rem 0.6rem; border-radius: var(--a-radius); font-family: var(--a-font); font-size: 0.9rem; color: var(--a-ink); cursor: pointer; } .a-autocomplete-menu[hidden] { display: none; } .a-multiselect-option:hover, .a-autocomplete-option:hover, .a-autocomplete-option-active, .a-multiselect-option-on { background: var(--a-accent-soft); color: var(--a-accent); } .a-tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; width: 100%; min-height: 2.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); box-shadow: var(--a-shadow); } .a-tags-input:focus-within { border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); } .a-tags-input-disabled { opacity: 0.5; } .a-tags-field { flex: 1; min-width: 6rem; border: 0; outline: none; background: transparent; font-family: var(--a-font); font-size: 0.9375rem; color: var(--a-ink); padding: 0.25rem; } .a-json { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; } /* —— Layout: columns (Bulma-inspired) —— */ .a-columns { --a-columns-gap: 0.75rem; display: flex; flex-wrap: wrap; gap: var(--a-columns-gap); margin: 0; } .a-columns-multiline { flex-wrap: wrap; } .a-columns-centered { justify-content: center; } .a-columns-vcentered { align-items: center; } .a-column { display: block; flex: 1 1 0; min-width: 0; padding: 0; box-sizing: border-box; } .a-column-narrow { flex: 0 0 auto; width: unset; } .a-column-auto { flex: 1 1 auto; } /* width accounts for flex gap so sized columns stay on one row */ .a-column-full { flex: none; width: 100%; } .a-column-four-fifths { flex: none; width: calc(80% - var(--a-columns-gap) * 0.2); } .a-column-three-quarters { flex: none; width: calc(75% - var(--a-columns-gap) * 0.25); } .a-column-two-thirds { flex: none; width: calc(66.6666% - var(--a-columns-gap) * 0.3333); } .a-column-three-fifths { flex: none; width: calc(60% - var(--a-columns-gap) * 0.4); } .a-column-half { flex: none; width: calc(50% - var(--a-columns-gap) * 0.5); } .a-column-two-fifths { flex: none; width: calc(40% - var(--a-columns-gap) * 0.6); } .a-column-one-third { flex: none; width: calc(33.3333% - var(--a-columns-gap) * 0.6667); } .a-column-one-quarter { flex: none; width: calc(25% - var(--a-columns-gap) * 0.75); } .a-column-one-fifth { flex: none; width: calc(20% - var(--a-columns-gap) * 0.8); } .a-column-1 { flex: none; width: calc(8.3333% - var(--a-columns-gap) * 0.9167); } .a-column-2 { flex: none; width: calc(16.6666% - var(--a-columns-gap) * 0.8333); } .a-column-3 { flex: none; width: calc(25% - var(--a-columns-gap) * 0.75); } .a-column-4 { flex: none; width: calc(33.3333% - var(--a-columns-gap) * 0.6667); } .a-column-5 { flex: none; width: calc(41.6666% - var(--a-columns-gap) * 0.5833); } .a-column-6 { flex: none; width: calc(50% - var(--a-columns-gap) * 0.5); } .a-column-7 { flex: none; width: calc(58.3333% - var(--a-columns-gap) * 0.4167); } .a-column-8 { flex: none; width: calc(66.6666% - var(--a-columns-gap) * 0.3333); } .a-column-9 { flex: none; width: calc(75% - var(--a-columns-gap) * 0.25); } .a-column-10 { flex: none; width: calc(83.3333% - var(--a-columns-gap) * 0.1667); } .a-column-11 { flex: none; width: calc(91.6666% - var(--a-columns-gap) * 0.0833); } .a-column-12 { flex: none; width: 100%; } .a-column-offset-1 { margin-inline-start: 8.3333%; } .a-column-offset-2 { margin-inline-start: 16.6666%; } .a-column-offset-3 { margin-inline-start: 25%; } .a-column-offset-4 { margin-inline-start: 33.3333%; } .a-column-offset-5 { margin-inline-start: 41.6666%; } .a-column-offset-6 { margin-inline-start: 50%; } .a-column-offset-7 { margin-inline-start: 58.3333%; } .a-column-offset-8 { margin-inline-start: 66.6666%; } .a-column-offset-9 { margin-inline-start: 75%; } .a-column-offset-10 { margin-inline-start: 83.3333%; } .a-column-offset-11 { margin-inline-start: 91.6666%; } .a-column-offset-one-fifth { margin-inline-start: 20%; } .a-column-offset-one-quarter { margin-inline-start: 25%; } .a-column-offset-one-third { margin-inline-start: 33.3333%; } .a-column-offset-half { margin-inline-start: 50%; } .a-column-offset-two-fifths { margin-inline-start: 40%; } .a-column-offset-three-fifths { margin-inline-start: 60%; } @media (max-width: 768px) { .a-columns:not(.a-columns-mobile) { flex-direction: column; } .a-columns:not(.a-columns-mobile) > .a-column, .a-columns:not(.a-columns-mobile) > [class*="a-column-"] { width: 100%; margin-inline-start: 0; } } /* —— Layout: CSS grid —— */ .a-grid { display: grid; grid-template-columns: repeat(var(--a-grid-cols, 12), minmax(0, 1fr)); gap: var(--a-grid-gap, 0.75rem); } .a-grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--a-grid-min, 12rem), 1fr)); } .a-grid-item-span { grid-column: span var(--a-grid-span, 1); } .a-grid-item-start { grid-column-start: var(--a-grid-start); } @media (max-width: 768px) { .a-grid:not(.a-grid-auto) { grid-template-columns: 1fr; } .a-grid:not(.a-grid-auto) > .a-grid-item-span, .a-grid:not(.a-grid-auto) > .a-grid-item-start { grid-column: 1 / -1; } } /* —— Layout: container / section / level —— */ .a-container { width: 100%; margin-inline: auto; padding-inline: 1rem; max-width: 72rem; } .a-container-sm { max-width: 40rem; } .a-container-md { max-width: 56rem; } .a-container-lg { max-width: 80rem; } .a-container-full { max-width: none; } .a-section { padding: 2.5rem 0; } .a-section-sm { padding: 1.25rem 0; } .a-section-lg { padding: 4rem 0; } .a-level { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .a-level-left, .a-level-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .a-level-right { margin-inline-start: auto; } .a-level-item { display: flex; align-items: center; gap: 0.35rem; } @media (max-width: 768px) { .a-level:not(.a-level-mobile) { flex-direction: column; align-items: stretch; } .a-level:not(.a-level-mobile) .a-level-right { margin-inline-start: 0; } } /* —— Form layout (Bulma field / control / help) —— */ .a-control { display: block; position: relative; width: fit-content; max-width: 100%; } .a-control-expanded { width: 100%; flex: 1 1 auto; } .a-control > .a-input, .a-control > .a-textarea, .a-control > .a-select, .a-control > .a-btn { width: 100%; } .a-input-group .a-input-addon + .a-input, .a-input-group .a-input + .a-input-addon, .a-input-group .a-input + .a-input { margin-left: -1px; } .a-help { margin: 0.25rem 0 0; font-family: var(--a-font); font-size: 0.8125rem; line-height: 1.4; } .a-help-muted { color: var(--a-muted); } .a-help-success { color: var(--a-success); } .a-help-danger { color: var(--a-danger); } .a-form-section { display: flex; flex-direction: column; gap: 1rem; } .a-form-section-header { display: flex; flex-direction: column; gap: 0.25rem; } .a-form-section-title { margin: 0; font-family: var(--a-font-display); font-size: 1.05rem; font-weight: 700; color: var(--a-ink); } .a-form-section-desc { margin: 0; font-size: 0.875rem; color: var(--a-muted); } .a-form-section-body { display: flex; flex-direction: column; gap: 0.85rem; } .a-form-area { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; } .a-form-area-bordered { padding: 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); box-shadow: var(--a-shadow); } .a-form-area-header { display: flex; flex-direction: column; gap: 0.2rem; } .a-form-area-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--a-ink); } .a-form-area-desc { margin: 0; font-size: 0.8125rem; color: var(--a-muted); } .a-form-area-body { display: flex; flex-direction: column; gap: 0.75rem; } .a-form-field { display: flex; flex-direction: column; gap: 0.35rem; } .a-form-field-horizontal { flex-direction: row; align-items: flex-start; gap: 1rem; } .a-form-field-label { flex: 0 0 8rem; padding-top: 0.55rem; } .a-form-field-label .a-label { margin: 0; } .a-form-field-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .a-form-field-inner { display: flex; flex-direction: column; gap: 0.35rem; } .a-form-field-addons, .a-form-field-addons .a-form-field-inner { flex-direction: row; align-items: stretch; gap: 0; } .a-btn-group-attached > .a-btn { border-radius: 0; } .a-form-field-addons > .a-control:not(:last-child) > .a-input, .a-form-field-addons > .a-control:not(:last-child) > .a-btn, .a-form-field-addons > .a-control:not(:last-child) > .a-select, .a-form-field-addons > .a-btn:not(:last-child), .a-form-field-addons > .a-input:not(:last-child), .a-form-field-addons > .a-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .a-form-field-addons > .a-control:not(:first-child) > .a-input, .a-form-field-addons > .a-control:not(:first-child) > .a-btn, .a-form-field-addons > .a-control:not(:first-child) > .a-select, .a-form-field-addons > .a-btn:not(:first-child), .a-form-field-addons > .a-input:not(:first-child), .a-form-field-addons > .a-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-inline-start: -1px; } /* Controls wrapped in .a-form-field-inner (higher specificity, same corners). */ .a-form-field-addons .a-form-field-inner > .a-control:not(:last-child) > .a-input, .a-form-field-addons .a-form-field-inner > .a-control:not(:last-child) > .a-btn, .a-form-field-addons .a-form-field-inner > .a-control:not(:last-child) > .a-select { border-top-right-radius: 0; border-bottom-right-radius: 0; } .a-form-field-addons .a-form-field-inner > .a-control:not(:first-child) > .a-input, .a-form-field-addons .a-form-field-inner > .a-control:not(:first-child) > .a-btn, .a-form-field-addons .a-form-field-inner > .a-control:not(:first-child) > .a-select { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-inline-start: -1px; } .a-form-field-grouped, .a-form-field-grouped .a-form-field-inner { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 0.5rem; } .a-form-field-grouped-multiline, .a-form-field-grouped-multiline .a-form-field-inner { flex-wrap: wrap; } .a-form-field-narrow { max-width: 16rem; } .a-form-field-expanded { width: 100%; } @media (max-width: 768px) { .a-form-field-horizontal { flex-direction: column; gap: 0.35rem; } .a-form-field-label { flex-basis: auto; padding-top: 0; } } /* —— Surfaces: card / panel / tile / message / paper —— */ .a-card { background: var(--a-paper); border: 1px solid var(--a-line); border-radius: var(--a-radius); box-shadow: var(--a-shadow); overflow: hidden; display: flex; flex-direction: column; } .a-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--a-line); } .a-card-header-title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--a-ink); } .a-card-image { overflow: hidden; line-height: 0; } .a-image { max-width: 100%; height: auto; display: block; } .a-card-image img, .a-card-image .a-image { width: 100%; display: block; } .a-card-content { padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; } .a-card-footer { display: flex; border-top: 1px solid var(--a-line); } .a-card-footer-item { flex: 1; appearance: none; background: transparent; border: 0; border-right: 1px solid var(--a-line); padding: 0.75rem; font: inherit; font-weight: 600; color: var(--a-accent); cursor: pointer; text-align: center; } .a-card-footer-item:last-child { border-right: 0; } .a-card-footer-item:hover { background: var(--a-accent-soft); } .a-panel { background: var(--a-paper); border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; } .a-panel-heading { margin: 0; padding: 0.75rem 1rem; font-weight: 700; background: var(--a-canvas); border-bottom: 1px solid var(--a-line); } .a-panel-tabs { display: flex; gap: 0.5rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--a-line); overflow-x: auto; } .a-panel-tab { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.875rem; color: var(--a-muted); cursor: pointer; padding: 0.15rem 0.25rem; border-bottom: 2px solid transparent; } .a-panel-tab-active { color: var(--a-accent); border-bottom-color: var(--a-accent); font-weight: 600; } .a-panel-block { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.65rem 1rem; border: 0; border-bottom: 1px solid var(--a-line); background: transparent; font: inherit; color: var(--a-ink); text-align: left; box-sizing: border-box; } button.a-panel-block { cursor: pointer; } .a-panel-block:last-child { border-bottom: 0; } .a-panel-block:hover { background: var(--a-canvas); } .a-panel-block-active { border-left: 3px solid var(--a-accent); padding-left: calc(1rem - 3px); font-weight: 600; } .a-tile { display: flex; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 0; } .a-tile-ancestor { margin-left: -0.5rem; margin-right: -0.5rem; margin-top: -0.5rem; } .a-tile-ancestor > .a-tile { margin: 0.5rem; } .a-tile-vertical { flex-direction: column; } .a-tile-child { display: flex; flex-direction: column; } .a-tile-1 { flex: none; width: 8.3333%; } .a-tile-2 { flex: none; width: 16.6666%; } .a-tile-3 { flex: none; width: 25%; } .a-tile-4 { flex: none; width: 33.3333%; } .a-tile-5 { flex: none; width: 41.6666%; } .a-tile-6 { flex: none; width: 50%; } .a-tile-7 { flex: none; width: 58.3333%; } .a-tile-8 { flex: none; width: 66.6666%; } .a-tile-9 { flex: none; width: 75%; } .a-tile-10 { flex: none; width: 83.3333%; } .a-tile-11 { flex: none; width: 91.6666%; } .a-tile-12 { flex: none; width: 100%; } @media (max-width: 768px) { .a-tile-ancestor { flex-direction: column; } .a-tile-ancestor > .a-tile { width: 100%; } } .a-message { --a-message-tone: var(--a-muted); border-radius: var(--a-radius); border: 0; overflow: hidden; background: color-mix(in oklab, var(--a-message-tone) 8%, var(--a-paper)); box-shadow: inset 3px 0 0 var(--a-message-tone); animation: a-rise-in var(--a-duration-slow) var(--a-ease-out); } .a-message-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem 0.2rem; font-weight: 500; /* Amber is too light for text at 82%: tones can override the heading colour. */ color: var(--a-message-heading, color-mix(in oklab, var(--a-message-tone) 82%, var(--a-ink))); background: transparent; } .a-message-header-text { flex: 1; } .a-message-body { padding: 0.55rem 1rem 0.9rem; color: var(--a-ink); font-size: 0.9375rem; line-height: 1.5; } .a-message > .a-message-body:first-child { padding: 0.85rem 1rem; } .a-message-info { --a-message-tone: var(--a-accent); } .a-message-success { --a-message-tone: var(--a-success); } .a-message-warning { --a-message-tone: var(--a-warning); --a-message-heading: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-message-danger { --a-message-tone: var(--a-danger); } .a-message-muted { --a-message-tone: var(--a-muted); } .a-block { margin-bottom: 1.25rem; } .a-paper { background: var(--a-paper); border-radius: var(--a-radius); padding: 1rem; } .a-paper-bordered { border: 1px solid var(--a-line); } .a-paper-shadow { box-shadow: var(--a-shadow); } .a-paper-sm { padding: 0.65rem; } .a-paper-lg { padding: 1.5rem; } /* —— Chrome: hero / footer / media / article / figure —— */ .a-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--a-canvas); color: var(--a-ink); } .a-hero-body { padding: 3rem 1.5rem; } .a-hero-sm .a-hero-body { padding: 1.5rem; } .a-hero-lg .a-hero-body { padding: 6rem 1.5rem; } .a-hero-half { min-height: 50vh; } .a-hero-full { min-height: 100vh; } .a-hero-accent { background: var(--a-accent); color: var(--a-accent-ink); } .a-hero-dark { background: #1a1f2b; color: #f5f7fb; } /* Toned heroes set their own ink: headings and default text follow it. */ :is(.a-hero-accent, .a-hero-dark) :is(.a-title, .a-subtitle, .a-text[data-tone="default"]) { color: inherit; } .a-hero-light { background: var(--a-paper); border-bottom: 1px solid var(--a-line); } .a-hero-head, .a-hero-foot { padding: 0.75rem 1.5rem; } .a-footer { padding: 2.5rem 1.5rem; background: var(--a-canvas); border-top: 1px solid var(--a-line); color: var(--a-muted); } .a-media { display: flex; gap: 0.85rem; align-items: flex-start; } .a-media-left { flex: 0 0 auto; } .a-media-content { flex: 1 1 auto; min-width: 0; } .a-media-right { flex: 0 0 auto; margin-inline-start: auto; } .a-article { display: flex; flex-direction: column; gap: 0.75rem; } .a-article-title { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; } .a-article-meta { margin: 0; color: var(--a-muted); font-size: 0.875rem; } .a-figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* Media keeps its aspect ratio and never overflows a narrow figure. */ .a-figure > :is(img, video, picture, svg) { max-width: 100%; height: auto; } .a-figure-caption { font-size: 0.8125rem; color: var(--a-muted); } .a-image-fullwidth { width: 100%; } .a-image-rounded { border-radius: var(--a-radius); } .a-image-cover { object-fit: cover; width: 100%; height: 100%; } .a-image-contain { object-fit: contain; width: 100%; height: 100%; } /* —— Icons —— */ .a-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .a-icon-spin { animation: a-spin 0.8s linear infinite; transform-origin: center; } .a-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--a-radius); } .a-icon-badge-sm { width: 1.5rem; height: 1.5rem; } .a-icon-badge-lg { width: 2.5rem; height: 2.5rem; } .a-icon-badge-accent { background: var(--a-accent-soft); color: var(--a-accent); } .a-icon-badge-success { background: color-mix(in oklab, var(--a-success) 14%, var(--a-paper)); color: var(--a-success); } .a-icon-badge-warning { background: color-mix(in oklab, var(--a-warning) 14%, var(--a-paper)); color: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-icon-badge-danger { background: color-mix(in oklab, var(--a-danger) 14%, var(--a-paper)); color: var(--a-danger); } .a-icon-badge-muted { background: var(--a-canvas); color: var(--a-muted); } .a-delete { appearance: none; position: relative; width: 1.35rem; height: 1.35rem; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--a-ink) 12%, transparent); cursor: pointer; flex-shrink: 0; } .a-delete::before, .a-delete::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 2px; background: var(--a-ink); transform-origin: center; } .a-delete::before { transform: translate(-50%, -50%) rotate(45deg); } .a-delete::after { transform: translate(-50%, -50%) rotate(-45deg); } .a-delete:hover { background: color-mix(in oklab, var(--a-ink) 22%, transparent); } .a-delete-sm { width: 1.1rem; height: 1.1rem; } .a-delete-light { background: color-mix(in oklab, currentColor 18%, transparent); } .a-delete-light::before, .a-delete-light::after { background: currentColor; } .a-delete-light:hover { background: color-mix(in oklab, currentColor 28%, transparent); } .a-message-header .a-delete { background: color-mix(in oklab, currentColor 16%, transparent); flex-shrink: 0; } .a-message-header .a-delete::before, .a-message-header .a-delete::after { background: currentColor; } .a-message-header .a-delete:hover { background: color-mix(in oklab, currentColor 28%, transparent); } /* —— Widgets —— */ .a-group { display: flex; align-items: center; gap: 0.75rem; } .a-group-wrap { flex-wrap: wrap; } .a-group-grow > * { flex: 1 1 0; } .a-group-align-start { align-items: flex-start; } .a-group-align-end { align-items: flex-end; } .a-group-align-stretch { align-items: stretch; } .a-group-justify-center { justify-content: center; } .a-group-justify-end { justify-content: flex-end; } .a-group-justify-between { justify-content: space-between; } .a-group-justify-around { justify-content: space-around; } .a-center { display: flex; align-items: center; justify-content: center; width: 100%; } .a-center-inline { display: inline-flex; width: auto; } .a-space { flex-shrink: 0; } .a-flex { display: flex; gap: 0.75rem; } .a-flex-col { flex-direction: column; } .a-flex-wrap { flex-wrap: wrap; } .a-aspect { position: relative; width: 100%; } .a-aspect::before { content: ""; display: block; padding-bottom: calc(100% / var(--a-aspect, 1.777)); } .a-aspect-inner { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } /* Media fills the ratio box instead of overflowing it at its natural size. */ .a-aspect-inner > :is(img, video, iframe, picture) { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; } .a-affix { position: fixed; z-index: 40; inset: auto var(--a-affix-offset, 1rem) var(--a-affix-offset, 1rem) auto; } .a-affix-bottom-right { inset: auto var(--a-affix-offset, 1rem) var(--a-affix-offset, 1rem) auto; } .a-affix-bottom-left { inset: auto auto var(--a-affix-offset, 1rem) var(--a-affix-offset, 1rem); } .a-affix-top-right { inset: var(--a-affix-offset, 1rem) var(--a-affix-offset, 1rem) auto auto; } .a-affix-top-left { inset: var(--a-affix-offset, 1rem) auto auto var(--a-affix-offset, 1rem); } .a-dim { position: absolute; inset: 0; background: color-mix(in oklab, var(--a-ink) 45%, transparent); display: flex; align-items: center; justify-content: center; } .a-dim-blur { backdrop-filter: blur(2px); } .a-loading-overlay { position: absolute; inset: 0; /* Follow the covered box's rounded corners. */ border-radius: inherit; background: color-mix(in oklab, var(--a-paper) 72%, transparent); display: flex; align-items: center; justify-content: center; z-index: 5; } .a-indicator { position: relative; display: inline-flex; } .a-indicator-badge { position: absolute; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 999px; background: var(--a-danger); color: var(--a-danger-ink); font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--a-paper); } .a-indicator-dot { min-width: 0.55rem; width: 0.55rem; height: 0.55rem; padding: 0; } .a-indicator-processing { animation: a-pulse 1.2s ease infinite; } @keyframes a-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } } .a-indicator-top-end .a-indicator-badge { top: -0.25rem; right: -0.25rem; } .a-indicator-top-start .a-indicator-badge { top: -0.25rem; left: -0.25rem; } .a-indicator-bottom-end .a-indicator-badge { bottom: -0.25rem; right: -0.25rem; } .a-indicator-bottom-start .a-indicator-badge { bottom: -0.25rem; left: -0.25rem; } .a-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; } .a-list-ordered { list-style: decimal; padding-left: 1.25rem; } .a-list-item { display: flex; align-items: flex-start; gap: 0.5rem; } .a-list-icon { margin-top: 0.15rem; color: var(--a-accent); } .a-list-group { margin: 0; padding: 0; list-style: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-paper); } .a-list-group-flush { border-radius: 0; border-left: 0; border-right: 0; } .a-list-group-item { display: block; width: 100%; padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--a-line); background: transparent; font: inherit; color: var(--a-ink); text-align: left; box-sizing: border-box; } .a-list-group > li:last-child > .a-list-group-item, .a-list-group > .a-list-group-item:last-child { border-bottom: 0; } button.a-list-group-item { cursor: pointer; } button.a-list-group-item:hover:not(:disabled) { background: var(--a-canvas); } .a-list-group-item-active { background: var(--a-accent-soft); color: var(--a-accent); font-weight: 600; } .a-list-group-item-disabled { opacity: 0.5; cursor: not-allowed; } .a-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .a-timeline-item { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; position: relative; padding-bottom: 1.25rem; } .a-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 0.55rem; top: 1.25rem; bottom: 0; width: 2px; background: var(--a-line); } .a-timeline-bullet { width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 2px solid var(--a-accent); background: var(--a-paper); display: inline-flex; align-items: center; justify-content: center; color: var(--a-accent); z-index: 1; } .a-timeline-item-active .a-timeline-bullet { background: var(--a-accent); color: var(--a-accent-ink); } .a-timeline-title { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.9375rem; } .a-timeline-content { color: var(--a-muted); font-size: 0.875rem; } .a-navlink { appearance: none; width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.75rem; border: 0; border-radius: var(--a-radius); background: transparent; font: inherit; color: var(--a-ink); cursor: pointer; text-align: left; } .a-navlink:hover:not(:disabled) { background: var(--a-canvas); } .a-navlink-active { background: var(--a-accent-soft); color: var(--a-accent); } .a-navlink-disabled { opacity: 0.5; cursor: not-allowed; } .a-navlink-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; } .a-navlink-label { font-weight: 600; font-size: 0.9375rem; } .a-navlink-desc { font-size: 0.75rem; color: var(--a-muted); } .a-action-icon { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--a-radius); border: 1px solid transparent; background: transparent; color: var(--a-ink); cursor: pointer; padding: 0; } .a-action-icon-sm { width: 1.6rem; height: 1.6rem; } .a-action-icon-lg { width: 2.5rem; height: 2.5rem; } .a-action-icon-subtle:hover:not(:disabled) { background: var(--a-canvas); } .a-action-icon-filled { background: var(--a-accent); color: var(--a-accent-ink); } .a-action-icon-outline { border-color: var(--a-line); } .a-action-icon:disabled { opacity: 0.5; cursor: not-allowed; } .a-action-icon.a-password-toggle { align-self: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; color: var(--a-muted); } .a-action-icon.a-password-toggle:hover:not(:disabled) { color: var(--a-ink); background: color-mix(in oklab, var(--a-canvas) 70%, transparent); } .a-collapse { overflow: hidden; } .a-collapse[hidden] { display: none; } .a-spoiler-content { overflow: hidden; } .a-spoiler:not(.a-spoiler-open) .a-spoiler-content { mask-image: linear-gradient(180deg, #000 40%, transparent); } .a-spoiler-toggle { appearance: none; border: 0; background: transparent; color: var(--a-accent); font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; padding: 0.35rem 0 0; } .a-mark { padding: 0.05em 0.25em; border-radius: 2px; } .a-mark-accent { background: var(--a-accent-soft); color: var(--a-ink); } /* Highlighter yellow; ink stays readable in both themes. */ .a-mark-warning { background: var(--a-highlight); color: var(--a-highlight-ink); } .a-mark-success { background: color-mix(in oklab, var(--a-success) 18%, var(--a-paper)); } .a-quote { margin: 0; padding: 0.85rem 1rem; border-left: 3px solid var(--a-accent); background: var(--a-canvas); border-radius: 0 var(--a-radius) var(--a-radius) 0; } .a-quote-plain { background: none; border-radius: 0; } .a-quote-body { font-size: 1rem; line-height: 1.55; } .a-quote-cite { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--a-muted); font-style: normal; } .a-scroll-area { overflow: auto; min-height: 0; } .a-anchor { color: var(--a-accent); text-decoration: none; } .a-anchor:hover { text-decoration: underline; } .a-title { margin: 0; font-family: var(--a-font-display); font-weight: 700; color: var(--a-ink); line-height: 1.25; } .a-title-1 { font-size: 2rem; } .a-title-2 { font-size: 1.5rem; } .a-title-3 { font-size: 1.25rem; } .a-title-4 { font-size: 1.1rem; } .a-title-5 { font-size: 1rem; } .a-title-6 { font-size: 0.9rem; } .a-title-spaced { margin-bottom: 1rem; } .a-subtitle { margin: 0; font-family: var(--a-font); font-weight: 400; color: var(--a-muted); line-height: 1.4; } .a-subtitle-1 { font-size: 1.5rem; } .a-subtitle-2 { font-size: 1.25rem; } .a-subtitle-3 { font-size: 1.125rem; } .a-subtitle-4 { font-size: 1rem; } .a-subtitle-5 { font-size: 0.9375rem; } .a-subtitle-6 { font-size: 0.875rem; } .a-title + .a-subtitle { margin-top: -0.35rem; } .a-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; } .a-ring-track { stroke: var(--a-line); } .a-ring-bar { stroke: var(--a-accent); stroke-linecap: round; transition: stroke-dashoffset 0.2s ease; } .a-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; } /* —— Utility helpers (Bulma/Bootstrap-inspired) —— */ .a-m-0 { margin: 0; } .a-m-1 { margin: 0.25rem; } .a-m-2 { margin: 0.5rem; } .a-m-3 { margin: 0.75rem; } .a-m-4 { margin: 1rem; } .a-m-5 { margin: 1.5rem; } .a-m-6 { margin: 2rem; } .a-m-7 { margin: 3rem; } .a-m-8 { margin: 4rem; } .a-mt-0 { margin-top: 0; } .a-mt-1 { margin-top: 0.25rem; } .a-mt-2 { margin-top: 0.5rem; } .a-mt-3 { margin-top: 0.75rem; } .a-mt-4 { margin-top: 1rem; } .a-mt-5 { margin-top: 1.5rem; } .a-mt-6 { margin-top: 2rem; } .a-mt-7 { margin-top: 3rem; } .a-mt-8 { margin-top: 4rem; } .a-mb-0 { margin-bottom: 0; } .a-mb-1 { margin-bottom: 0.25rem; } .a-mb-2 { margin-bottom: 0.5rem; } .a-mb-3 { margin-bottom: 0.75rem; } .a-mb-4 { margin-bottom: 1rem; } .a-mb-5 { margin-bottom: 1.5rem; } .a-mb-6 { margin-bottom: 2rem; } .a-mb-7 { margin-bottom: 3rem; } .a-mb-8 { margin-bottom: 4rem; } .a-ml-0 { margin-left: 0; } .a-ml-1 { margin-left: 0.25rem; } .a-ml-2 { margin-left: 0.5rem; } .a-ml-3 { margin-left: 0.75rem; } .a-ml-4 { margin-left: 1rem; } .a-ml-5 { margin-left: 1.5rem; } .a-ml-6 { margin-left: 2rem; } .a-ml-7 { margin-left: 3rem; } .a-ml-8 { margin-left: 4rem; } .a-mr-0 { margin-right: 0; } .a-mr-1 { margin-right: 0.25rem; } .a-mr-2 { margin-right: 0.5rem; } .a-mr-3 { margin-right: 0.75rem; } .a-mr-4 { margin-right: 1rem; } .a-mr-5 { margin-right: 1.5rem; } .a-mr-6 { margin-right: 2rem; } .a-mr-7 { margin-right: 3rem; } .a-mr-8 { margin-right: 4rem; } .a-mx-0 { margin-inline: 0; } .a-mx-1 { margin-inline: 0.25rem; } .a-mx-2 { margin-inline: 0.5rem; } .a-mx-3 { margin-inline: 0.75rem; } .a-mx-4 { margin-inline: 1rem; } .a-mx-5 { margin-inline: 1.5rem; } .a-mx-6 { margin-inline: 2rem; } .a-mx-7 { margin-inline: 3rem; } .a-mx-8 { margin-inline: 4rem; } .a-my-0 { margin-block: 0; } .a-my-1 { margin-block: 0.25rem; } .a-my-2 { margin-block: 0.5rem; } .a-my-3 { margin-block: 0.75rem; } .a-my-4 { margin-block: 1rem; } .a-my-5 { margin-block: 1.5rem; } .a-my-6 { margin-block: 2rem; } .a-my-7 { margin-block: 3rem; } .a-my-8 { margin-block: 4rem; } .a-p-0 { padding: 0; } .a-p-1 { padding: 0.25rem; } .a-p-2 { padding: 0.5rem; } .a-p-3 { padding: 0.75rem; } .a-p-4 { padding: 1rem; } .a-p-5 { padding: 1.5rem; } .a-p-6 { padding: 2rem; } .a-p-7 { padding: 3rem; } .a-p-8 { padding: 4rem; } .a-pt-0 { padding-top: 0; } .a-pt-1 { padding-top: 0.25rem; } .a-pt-2 { padding-top: 0.5rem; } .a-pt-3 { padding-top: 0.75rem; } .a-pt-4 { padding-top: 1rem; } .a-pt-5 { padding-top: 1.5rem; } .a-pt-6 { padding-top: 2rem; } .a-pt-7 { padding-top: 3rem; } .a-pt-8 { padding-top: 4rem; } .a-pb-0 { padding-bottom: 0; } .a-pb-1 { padding-bottom: 0.25rem; } .a-pb-2 { padding-bottom: 0.5rem; } .a-pb-3 { padding-bottom: 0.75rem; } .a-pb-4 { padding-bottom: 1rem; } .a-pb-5 { padding-bottom: 1.5rem; } .a-pb-6 { padding-bottom: 2rem; } .a-pb-7 { padding-bottom: 3rem; } .a-pb-8 { padding-bottom: 4rem; } .a-pl-0 { padding-left: 0; } .a-pl-1 { padding-left: 0.25rem; } .a-pl-2 { padding-left: 0.5rem; } .a-pl-3 { padding-left: 0.75rem; } .a-pl-4 { padding-left: 1rem; } .a-pl-5 { padding-left: 1.5rem; } .a-pl-6 { padding-left: 2rem; } .a-pl-7 { padding-left: 3rem; } .a-pl-8 { padding-left: 4rem; } .a-pr-0 { padding-right: 0; } .a-pr-1 { padding-right: 0.25rem; } .a-pr-2 { padding-right: 0.5rem; } .a-pr-3 { padding-right: 0.75rem; } .a-pr-4 { padding-right: 1rem; } .a-pr-5 { padding-right: 1.5rem; } .a-pr-6 { padding-right: 2rem; } .a-pr-7 { padding-right: 3rem; } .a-pr-8 { padding-right: 4rem; } .a-px-0 { padding-inline: 0; } .a-px-1 { padding-inline: 0.25rem; } .a-px-2 { padding-inline: 0.5rem; } .a-px-3 { padding-inline: 0.75rem; } .a-px-4 { padding-inline: 1rem; } .a-px-5 { padding-inline: 1.5rem; } .a-px-6 { padding-inline: 2rem; } .a-px-7 { padding-inline: 3rem; } .a-px-8 { padding-inline: 4rem; } .a-py-0 { padding-block: 0; } .a-py-1 { padding-block: 0.25rem; } .a-py-2 { padding-block: 0.5rem; } .a-py-3 { padding-block: 0.75rem; } .a-py-4 { padding-block: 1rem; } .a-py-5 { padding-block: 1.5rem; } .a-py-6 { padding-block: 2rem; } .a-py-7 { padding-block: 3rem; } .a-py-8 { padding-block: 4rem; } .a-gap-0 { gap: 0; } .a-gap-1 { gap: 0.25rem; } .a-gap-2 { gap: 0.5rem; } .a-gap-3 { gap: 0.75rem; } .a-gap-4 { gap: 1rem; } .a-gap-5 { gap: 1.5rem; } .a-gap-6 { gap: 2rem; } .a-gap-7 { gap: 3rem; } .a-gap-8 { gap: 4rem; } .a-c-ink { color: var(--a-ink); } .a-c-muted { color: var(--a-muted); } .a-c-accent { color: var(--a-accent); } .a-c-danger { color: var(--a-danger); } .a-c-success { color: var(--a-success); } .a-c-warning { color: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-c-paper { color: var(--a-paper); } .a-c-canvas { color: var(--a-canvas); } .a-c-surface { color: var(--a-surface); } .a-bg-ink { background-color: var(--a-ink); } .a-bg-muted { background-color: var(--a-muted); } .a-bg-accent { background-color: var(--a-accent); } .a-bg-danger { background-color: var(--a-danger); } .a-bg-success { background-color: var(--a-success); } .a-bg-warning { background-color: var(--a-warning); } .a-bg-paper { background-color: var(--a-paper); } .a-bg-canvas { background-color: var(--a-canvas); } .a-bg-surface { background-color: var(--a-surface); } .a-hidden { /* biome-ignore lint/complexity/noImportantStyles: visibility utilities must win over component display rules */ display: none !important; } .a-invisible { visibility: hidden; } .a-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .a-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-w-full { width: 100%; } .a-h-full { height: 100%; } .a-flex-util { display: flex; } .a-inline-flex { display: inline-flex; } .a-items-center { align-items: center; } .a-items-start { align-items: flex-start; } .a-items-end { align-items: flex-end; } .a-justify-center { justify-content: center; } .a-justify-between { justify-content: space-between; } .a-justify-end { justify-content: flex-end; } .a-text-left { text-align: left; } .a-text-center { text-align: center; } .a-text-right { text-align: right; } .a-font-bold { font-weight: 700; } .a-font-semibold { font-weight: 600; } .a-text-sm { font-size: 0.875rem; } .a-text-lg { font-size: 1.125rem; } @media (max-width: 768px) { .a-hidden-mobile { /* biome-ignore lint/complexity/noImportantStyles: visibility utilities must win over component display rules */ display: none !important; } } @media (min-width: 769px) { .a-hidden-desktop { /* biome-ignore lint/complexity/noImportantStyles: visibility utilities must win over component display rules */ display: none !important; } } /* —— HoverCard / Burger / Swatch / Background —— */ .a-hovercard { position: relative; display: inline-flex; } .a-hovercard-dropdown { position: absolute; z-index: 30; top: calc(100% + 0.4rem); left: 0; min-width: 12rem; padding: 0.75rem; background: var(--a-paper); border: 1px solid var(--a-line); border-radius: var(--a-radius); box-shadow: 0 8px 24px color-mix(in oklab, var(--a-ink) 12%, transparent); } .a-burger { --a-burger-gap: 0.28rem; --a-burger-line: 2px; appearance: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-burger-gap); cursor: pointer; padding: 0; } .a-burger span { display: block; width: 1.1rem; height: var(--a-burger-line); border-radius: 1px; background: var(--a-ink); transition: transform 0.15s ease, opacity 0.15s ease; } /* Outer lines move exactly one line + gap so both strokes cross at the centre. */ .a-burger-opened span:nth-child(1) { transform: translateY(calc(var(--a-burger-gap) + var(--a-burger-line))) rotate(45deg); } .a-burger-opened span:nth-child(2) { opacity: 0; } .a-burger-opened span:nth-child(3) { transform: translateY(calc(-1 * (var(--a-burger-gap) + var(--a-burger-line)))) rotate(-45deg); } .a-burger-sm { width: 1.85rem; height: 1.85rem; } .a-swatch { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--a-ink) 12%, transparent); padding: 0; cursor: default; flex-shrink: 0; } button.a-swatch { cursor: pointer; } .a-swatch-shadow { box-shadow: var(--a-shadow); } .a-highlight { line-height: 1.5; } .a-bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 8rem; } .a-bg-image-radius { border-radius: var(--a-radius); overflow: hidden; } .a-sticky { background: color-mix(in oklab, var(--a-paper) 92%, transparent); backdrop-filter: blur(6px); } /* —— Dropzone / FileButton / Subnav / Iconnav / NavProgress —— */ .a-file-button { display: inline-flex; } .a-file-button-label { cursor: pointer; margin: 0; } .a-file-button-disabled { opacity: 0.5; pointer-events: none; } .a-dropzone { border: 1.5px dashed var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); transition: border-color 0.12s ease, background 0.12s ease; } .a-dropzone-active { border-color: var(--a-accent); background: var(--a-accent-soft); } .a-dropzone-disabled { opacity: 0.5; pointer-events: none; } .a-dropzone-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem 1rem; cursor: pointer; color: var(--a-muted); font-size: 0.9rem; text-align: center; } .a-subnav { display: flex; flex-wrap: wrap; gap: 0.35rem; } .a-subnav-item { appearance: none; border: 0; background: transparent; color: var(--a-muted); font: inherit; font-size: 0.875rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; } .a-subnav-item:hover:not(:disabled) { background: var(--a-canvas); color: var(--a-ink); } .a-subnav-item-active { background: var(--a-accent-soft); color: var(--a-accent); } .a-subnav-item-disabled { opacity: 0.45; cursor: not-allowed; } .a-iconnav { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); } .a-iconnav-item { appearance: none; border: 0; background: transparent; color: var(--a-muted); width: 2rem; height: 2rem; border-radius: calc(var(--a-radius) - 1px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .a-iconnav-item:hover { background: var(--a-canvas); color: var(--a-ink); } .a-iconnav-item-active { background: var(--a-accent-soft); color: var(--a-accent); } .a-nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--a-z-tooltip); pointer-events: none; background: transparent; } /* Determinate progress scales a full-width bar (transform-only motion). */ .a-nav-progress-bar { width: 100%; height: 100%; background: var(--a-accent); transform-origin: left; transform: scaleX(var(--a-progress, 0)); transition: transform var(--a-duration-slow) var(--a-ease-out); } .a-nav-progress-indeterminate .a-nav-progress-bar { width: 30%; animation: a-nav-progress-slide 1.1s ease-in-out infinite; } @keyframes a-nav-progress-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(400%); } } .a-number-formatter { font-variant-numeric: tabular-nums; } /* —— Tree / Carousel / Calendar / Table parts —— */ .a-tree { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); padding: 0.35rem 0; } .a-tree-list { list-style: none; margin: 0; padding: 0; } .a-tree-row { display: flex; align-items: center; gap: 0.15rem; min-height: 1.85rem; } .a-tree-label { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.9rem; color: var(--a-ink); cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 3px; text-align: left; } .a-tree-row-active .a-tree-label { color: var(--a-accent); font-weight: 700; } .a-tree-spacer { width: 1.6rem; flex-shrink: 0; } .a-tree-node { outline: none; } .a-tree-node:focus-visible > .a-tree-row { outline: 2px solid var(--a-ring); outline-offset: -2px; border-radius: var(--a-radius); } .a-tree-label:hover { background: var(--a-canvas); } /* Whole-row feedback: hover tint and a soft selected band. */ .a-tree-row { margin-inline: 0.35rem; border-radius: calc(var(--a-radius) - 2px); cursor: pointer; transition: background-color var(--a-duration-fast) var(--a-ease); } .a-tree-row:hover { background: var(--a-canvas); } .a-tree-row:hover .a-tree-label { background: transparent; } .a-tree-row-active { background: var(--a-accent-soft); } .a-tree-icon { display: inline-flex; flex-shrink: 0; color: var(--a-muted); } .a-tree-row-active .a-tree-icon { color: var(--a-accent); } .a-tree-label { flex: 1; min-width: 0; } .a-tree-badge { margin-inline-end: 0.5rem; font-size: 0.75rem; color: var(--a-muted); font-variant-numeric: tabular-nums; } .a-tree-node[aria-disabled="true"] > .a-tree-row { opacity: 0.5; cursor: not-allowed; } .a-tree-empty { padding: 0.5rem 0.85rem; font-size: 0.875rem; color: var(--a-muted); } .a-carousel { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); overflow: hidden; } .a-carousel-viewport { min-height: 7rem; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--a-canvas); } .a-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.55rem; border-top: 1px solid var(--a-line); } .a-carousel-status { font-size: 0.8125rem; color: var(--a-muted); min-width: 3.5rem; text-align: center; } .a-calendar { width: 17rem; padding: 0.65rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); } .a-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .a-calendar-label { font-weight: 700; font-size: 0.9rem; } .a-calendar-weekdays, .a-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; } .a-calendar-weekday { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--a-muted); padding: 0.25rem 0; } .a-calendar-cell { appearance: none; border: 0; background: transparent; aspect-ratio: 1; border-radius: var(--a-radius); font: inherit; font-size: 0.8125rem; cursor: pointer; color: var(--a-ink); } .a-calendar-cell:hover:not(.a-calendar-empty, .a-calendar-cell-active) { background: var(--a-canvas); } .a-calendar-cell.a-calendar-cell-active { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 700; } .a-calendar-cell:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 1px; } .a-calendar-cell-today:not(.a-calendar-cell-active) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a-accent) 55%, transparent); font-weight: 600; } .a-calendar-cell-disabled, .a-calendar-cell[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--a-muted) 60%, transparent); } .a-calendar-cell-disabled:hover { background: transparent; } .a-calendar-empty { cursor: default; pointer-events: none; } .a-datepicker { display: flex; flex-direction: column; gap: 0.35rem; position: relative; width: fit-content; } .a-datepicker-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 12rem; cursor: pointer; text-align: left; } .a-datepicker-dropdown { position: absolute; z-index: 30; top: calc(100% + 0.35rem); left: 0; } /* —— Context menu —— */ .a-context-menu { position: fixed; z-index: 80; min-width: 10rem; padding: 0.35rem; border-radius: var(--a-radius); border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-shadow-lg, 0 12px 32px rgb(15 23 42 / 0.18)); } /* —— Color picker —— */ .a-color-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .a-color-picker-native { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: transparent; cursor: pointer; } .a-color-picker-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; } .a-swatch-active { outline: 2px solid var(--a-accent); outline-offset: 2px; } /* Check mark legible on light and dark swatches alike. */ .a-swatch-check { color: #fff; filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.8)); } .a-color-picker-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; color: var(--a-muted); } /* —— Lightbox —— */ .a-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; } .a-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / 0.82); cursor: pointer; } .a-lightbox-stage { position: relative; z-index: 1; max-width: min(92vw, 56rem); text-align: center; } .a-lightbox-img { max-width: 100%; max-height: 78vh; border-radius: var(--a-radius); box-shadow: 0 20px 48px rgb(0 0 0 / 0.35); } .a-lightbox-caption { margin: 0.75rem 0 0; color: #fff; font-size: 0.9rem; } .a-lightbox-controls { position: absolute; z-index: 1; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .a-lightbox-controls .a-action-icon { background: var(--a-surface); } /* —— Transfer list —— */ .a-transfer { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; } .a-transfer-pane { flex: 1 1 10rem; min-width: 9rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); overflow: hidden; } .a-transfer-title { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); border-bottom: 1px solid var(--a-line); background: var(--a-canvas); } .a-transfer-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 12rem; overflow: auto; } .a-transfer-item { display: block; width: 100%; appearance: none; border: 0; background: transparent; text-align: left; padding: 0.4rem 0.55rem; border-radius: calc(var(--a-radius) - 2px); font: inherit; font-size: 0.875rem; cursor: pointer; color: var(--a-ink); } .a-transfer-item:hover { background: var(--a-canvas); } .a-transfer-item-active { background: color-mix(in srgb, var(--a-accent) 18%, transparent); color: var(--a-ink); font-weight: 600; } .a-transfer-actions { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; } /* —— Spotlight —— */ .a-spotlight { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding-top: min(18vh, 6rem); } .a-spotlight-backdrop { position: absolute; inset: 0; border: 0; background: rgb(15 23 42 / 0.45); cursor: pointer; } .a-spotlight-panel { position: relative; z-index: 1; width: min(32rem, 92vw); border-radius: calc(var(--a-radius) + 2px); border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: 0 24px 64px rgb(15 23 42 / 0.28); overflow: hidden; } .a-input.a-spotlight-input, .a-input.a-spotlight-input:focus { border: 0; border-radius: 0; border-bottom: 1px solid var(--a-line); font-size: 1rem; } .a-spotlight-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 16rem; overflow: auto; } .a-spotlight-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; appearance: none; border: 0; background: transparent; padding: 0.55rem 0.65rem; border-radius: var(--a-radius); font: inherit; cursor: pointer; text-align: left; color: var(--a-ink); } .a-spotlight-item-active, .a-spotlight-item[data-state="active"], .a-spotlight-item:hover { background: var(--a-canvas); } .a-spotlight-label { font-weight: 600; font-size: 0.9rem; } .a-spotlight-desc { font-size: 0.75rem; color: var(--a-muted); } /* —— Confirm —— */ /* ConfirmDialog renders on DialogFrame (.a-modal); only its message and tone differ. */ .a-confirm-danger { box-shadow: var(--a-shadow-xl), 0 0 0 1px color-mix(in oklab, var(--a-danger) 30%, transparent); } .a-spotlight-empty { padding: 1.25rem 0.75rem; color: var(--a-muted); font-size: 0.9rem; text-align: center; } .a-steps div.a-step-btn { cursor: default; } .a-dropzone:focus-within, .a-file-button:focus-within { outline: 2px solid var(--a-ring); outline-offset: 2px; } .a-carousel button:disabled, .a-lightbox button:disabled { opacity: 0.35; cursor: not-allowed; } /* —— Month / range / time pickers —— */ .a-picker-panel { --a-picker-w: 17rem; box-sizing: border-box; width: var(--a-picker-w); border: 1px solid var(--a-line); border-radius: calc(var(--a-radius) + 2px); background: var(--a-surface); overflow: hidden; } .a-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--a-line); background: var(--a-canvas); } .a-picker-title { font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .a-month-picker, .a-daterange, .a-time-picker { position: relative; } .a-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; padding: 0.55rem; } .a-month-cell { appearance: none; border: 0; background: transparent; padding: 0.5rem 0.25rem; border-radius: var(--a-radius); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; color: var(--a-ink); } .a-month-cell:hover:not(.a-month-cell-active) { background: var(--a-canvas); } .a-month-cell.a-month-cell-active { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 700; } .a-calendar-cell-range { background: color-mix(in srgb, var(--a-accent) 22%, transparent); } .a-time-header { justify-content: center; } .a-time-value { font-size: 1.05rem; letter-spacing: 0.04em; } .a-time-columns { display: grid; grid-template-columns: 1fr 1fr; height: 9.5rem; } .a-time-col { overflow: auto; padding: 0.35rem; scroll-snap-type: y proximity; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--a-muted) 45%, transparent) transparent; } .a-time-col + .a-time-col { border-left: 1px solid var(--a-line); } .a-time-col::-webkit-scrollbar { width: 6px; } .a-time-col::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--a-muted) 35%, transparent); border-radius: 999px; } .a-time-cell { display: block; width: 100%; appearance: none; border: 0; background: transparent; padding: 0.28rem 0.35rem; border-radius: calc(var(--a-radius) - 2px); font: inherit; font-variant-numeric: tabular-nums; font-size: 0.8125rem; line-height: 1.2; cursor: pointer; color: var(--a-ink); text-align: center; scroll-snap-align: center; } .a-time-cell:hover:not(.a-time-cell-active) { background: var(--a-canvas); } .a-time-cell.a-time-cell-active { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 700; } .a-daterange { padding: 0; } .a-daterange-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; appearance: none; border: 0; background: transparent; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--a-ink); cursor: pointer; text-align: left; } .a-daterange-trigger:hover { background: var(--a-canvas); } .a-daterange-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-daterange .a-datepicker-dropdown { width: var(--a-picker-w); } /* —— Progress / spark / code / misc —— */ .a-semi { position: relative; display: inline-block; } .a-semi-track { stroke: var(--a-line); } .a-semi-bar { stroke: var(--a-accent); stroke-linecap: round; transition: stroke-dashoffset 0.25s ease; } .a-semi-label { position: absolute; left: 50%; bottom: 0.15rem; transform: translateX(-50%); font-size: 0.85rem; font-weight: 700; } .a-sparkline { color: var(--a-accent); display: block; } .a-codeblock { border: 1px solid var(--a-line); border-radius: var(--a-codeblock-radius, var(--a-radius)); background: var(--a-canvas); overflow: hidden; } .a-codeblock-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.65rem; border-bottom: 1px solid var(--a-line); background: var(--a-surface); } .a-codeblock-lang { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-codeblock-copy { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--a-accent); cursor: pointer; } .a-codeblock-pre { margin: 0; padding: 0.85rem 1rem; overflow: auto; font-size: 0.8125rem; line-height: 1.5; } .a-codeblock-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .a-totop { position: fixed; z-index: 40; right: 1.25rem; bottom: 1.25rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--a-line); border-radius: 999px; background: var(--a-surface); box-shadow: var(--a-shadow-lg, 0 8px 24px rgb(15 23 42 / 0.16)); cursor: pointer; color: var(--a-ink); } .a-totop:hover { border-color: var(--a-accent); color: var(--a-accent); } .a-countdown { display: inline-flex; gap: 0.75rem; font-size: 0.9rem; color: var(--a-muted); font-variant-numeric: tabular-nums; } .a-countdown strong { color: var(--a-ink); font-size: 1.15rem; margin-right: 0.15rem; } /* —— Composite batch —— */ .a-unstyled-btn { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; } .a-btn-group { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .a-btn-group-attached { gap: 0; } .a-btn-group-attached > .a-btn:first-child { border-radius: var(--a-radius) 0 0 var(--a-radius); } .a-btn-group-attached > .a-btn:last-child { border-radius: 0 var(--a-radius) var(--a-radius) 0; } /* Collapse shared borders (1px, not 2px) and lift the hovered/focused one. */ .a-btn-group-attached > .a-btn + .a-btn { margin-inline-start: -1px; } .a-btn-group-attached > .a-btn:is(:hover, :focus-visible, [aria-pressed="true"]) { position: relative; z-index: 1; } .a-split-btn { display: inline-flex; position: relative; align-items: stretch; } .a-split-btn .a-split-btn-main { border-top-right-radius: 0; border-bottom-right-radius: 0; } .a-split-btn .a-split-btn-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid color-mix(in srgb, var(--a-accent-ink, #fff) 25%, transparent); padding-inline: 0.45rem; } .a-split-btn .a-menu { position: absolute; top: calc(100% + 0.25rem); right: 0; z-index: 40; } .a-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); } .a-toggle-btn { appearance: none; border: 0; background: transparent; padding: 0.35rem 0.7rem; border-radius: calc(var(--a-radius) - 2px); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--a-muted); } .a-toggle-btn:hover { color: var(--a-ink); } .a-toggle-btn-on { background: var(--a-surface); color: var(--a-ink); box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); } .a-avatar-group { display: inline-flex; align-items: center; } .a-avatar-group > * { margin-left: -0.45rem; box-shadow: 0 0 0 2px var(--a-surface); } .a-avatar-group > *:first-child { margin-left: 0; } .a-avatar-more { display: inline-grid; place-items: center; background: var(--a-canvas); font-size: 0.7rem; font-weight: 700; color: var(--a-muted); } .a-notification { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--a-radius); border: 1px solid var(--a-line); background: var(--a-surface); } .a-notification-title { margin: 0 0 0.2rem; font-weight: 700; font-size: 0.9rem; } .a-notification-content { font-size: 0.875rem; color: var(--a-muted); } .a-notification-body { flex: 1; min-width: 0; } .a-notification-info { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface)); } .a-notification-success { border-color: color-mix(in srgb, var(--a-success) 40%, var(--a-line)); background: color-mix(in srgb, var(--a-success) 8%, var(--a-surface)); } .a-notification-warning { border-color: color-mix(in srgb, var(--a-warning) 40%, var(--a-line)); background: color-mix(in srgb, var(--a-warning) 8%, var(--a-surface)); } .a-notification-danger { border-color: color-mix(in srgb, #e74c3c 40%, var(--a-line)); background: color-mix(in srgb, #e74c3c 8%, var(--a-surface)); } .a-fab { position: fixed; z-index: 45; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 999px; background: var(--a-accent); color: var(--a-accent-ink); box-shadow: 0 10px 28px color-mix(in srgb, var(--a-accent) 45%, transparent); cursor: pointer; display: grid; place-items: center; } .a-fab-bottom-right { right: 1.25rem; bottom: 4.5rem; } .a-fab-bottom-left { left: 1.25rem; bottom: 1.25rem; } .a-bottom-nav { display: flex; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); overflow: hidden; } .a-bottom-nav-item { flex: 1; appearance: none; border: 0; background: transparent; padding: 0.55rem 0.35rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font: inherit; font-size: 0.7rem; font-weight: 600; color: var(--a-muted); cursor: pointer; } .a-bottom-nav-item-active { color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 10%, transparent); } .a-sortable { list-style: none; margin: 0; padding: 0; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-sortable-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--a-line); } .a-sortable-item:last-child { border-bottom: 0; } .a-sortable-label { font-size: 0.875rem; } .a-sortable-actions { display: inline-flex; gap: 0.15rem; } .a-pw-strength { display: grid; gap: 0.35rem; } .a-pw-strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; } .a-pw-strength-bar { height: 0.35rem; border-radius: 999px; background: var(--a-line); } .a-pw-strength-bar-1 { background: #e74c3c; } .a-pw-strength-bar-2 { background: var(--a-warning); } .a-pw-strength-bar-3 { background: #ca8a04; } .a-pw-strength-bar-4 { background: var(--a-success); } .a-pw-strength-label { font-size: 0.75rem; color: var(--a-muted); } .a-meter { display: grid; gap: 0.35rem; } .a-meter-label { font-size: 0.8rem; font-weight: 600; } .a-meter-track { height: 0.55rem; border-radius: 999px; background: var(--a-canvas); overflow: hidden; border: 1px solid var(--a-line); } .a-meter-bar { height: 100%; background: var(--a-accent); border-radius: inherit; } .a-comment { display: flex; gap: 0.75rem; align-items: flex-start; } .a-comment-body { flex: 1; min-width: 0; } .a-comment-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .a-comment-meta { font-size: 0.75rem; color: var(--a-muted); } .a-comment-content { font-size: 0.9rem; line-height: 1.45; } .a-comment-actions { margin-top: 0.35rem; } .a-skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 100; padding: 0.5rem 0.85rem; background: var(--a-accent); color: var(--a-accent-ink); border-radius: var(--a-radius); font-weight: 700; text-decoration: none; } .a-skip-link:focus { left: 0.5rem; } .a-thumbnav { display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 4px; } .a-thumbnav-item { appearance: none; border: 0; padding: 0; border-radius: var(--a-radius); overflow: hidden; cursor: pointer; background: transparent; width: 4.5rem; height: 3rem; opacity: 0.7; transition: opacity var(--a-duration) var(--a-ease), box-shadow var(--a-duration) var(--a-ease); } .a-thumbnav-item:hover { opacity: 1; } .a-thumbnav-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ring outside the image (no layout shift, not clipped by the rounded corners). */ .a-thumbnav-item-active { opacity: 1; box-shadow: 0 0 0 2px var(--a-paper), 0 0 0 4px var(--a-accent); } .a-leader { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; } .a-leader-label { flex: 0 0 auto; } .a-leader-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--a-line); min-width: 1.5rem; transform: translateY(-0.2em); } .a-leader-value { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; } .a-marquee { overflow: hidden; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .a-marquee-plain { border: 0; border-radius: 0; background: none; } /* Two identical groups scroll by -50% for a seamless loop. */ .a-marquee-track { display: flex; width: max-content; white-space: nowrap; padding: 0.55rem 0; animation: a-marquee-scroll 18s linear infinite; } .a-marquee-group { flex: none; padding-inline-end: 2rem; } .a-marquee-slow .a-marquee-track { animation-duration: 28s; } .a-marquee-fast .a-marquee-track { animation-duration: 10s; } .a-marquee[data-pause-on-hover]:hover .a-marquee-track, .a-marquee[data-pause-on-hover]:focus-within .a-marquee-track { animation-play-state: paused; } @keyframes a-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .a-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .a-barlist-row { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 0.2rem; } .a-barlist-track { height: 0.45rem; border-radius: 999px; background: var(--a-canvas); overflow: hidden; } .a-barlist-bar { height: 100%; background: var(--a-accent); border-radius: inherit; } .a-splitter { display: flex; align-items: stretch; min-height: 8rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); user-select: none; } .a-splitter-pane { min-width: 0; overflow: auto; padding: 0.75rem; } .a-splitter-pane-grow { flex: 1 1 auto; } .a-splitter-handle { flex: 0 0 6px; cursor: col-resize; background: var(--a-line); position: relative; } .a-splitter-handle:hover, .a-splitter-dragging .a-splitter-handle { background: var(--a-accent); } .a-datatable { border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-datatable-head, .a-datatable-row { display: grid; gap: 0; border-bottom: 1px solid var(--a-line); } .a-datatable-row:last-child { border-bottom: 0; } .a-datatable-empty { padding: 1.5rem 0.75rem; color: var(--a-muted); font-size: 0.875rem; text-align: center; } .a-datatable-th, .a-datatable-td { padding: 0.55rem 0.75rem; font-size: 0.875rem; min-width: 0; } .a-datatable-th { font-weight: 700; background: var(--a-canvas); text-align: left; } .a-datatable-sort { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; color: inherit; cursor: pointer; padding: 0; } .a-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; padding: 0.55rem; } .a-year-cell { appearance: none; border: 0; background: transparent; padding: 0.55rem 0.75rem; border-radius: var(--a-radius); font: inherit; font-size: 0.8125rem; cursor: pointer; color: var(--a-ink); } .a-year-cell:hover:not(.a-year-cell-active) { background: var(--a-canvas); } .a-year-cell.a-year-cell-active { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 700; } /* —— Patterns batch —— */ /* BottomSheet = bottom Drawer (DialogFrame) + grab handle. */ .a-bottom-sheet { --a-drawer-size: min(78dvh, 40rem); justify-self: center; width: min(32rem, 100%); } .a-sheet-handle { width: 2.5rem; height: 0.28rem; margin: -0.35rem auto 0.75rem; border-radius: 999px; background: color-mix(in oklab, var(--a-ink) 18%, transparent); } .a-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: var(--a-radius); border: 1px solid var(--a-line); background: var(--a-canvas); } .a-banner-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; font-size: 0.875rem; } .a-banner-title { font-weight: 700; } .a-banner-content { color: var(--a-muted); } .a-banner-info { border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-line)); background: color-mix(in srgb, var(--a-accent) 10%, var(--a-surface)); } .a-banner-success { border-color: color-mix(in srgb, var(--a-success) 35%, var(--a-line)); background: color-mix(in srgb, var(--a-success) 10%, var(--a-surface)); } .a-banner-warning { border-color: color-mix(in srgb, var(--a-warning) 35%, var(--a-line)); background: color-mix(in srgb, var(--a-warning) 10%, var(--a-surface)); } .a-banner-danger { border-color: color-mix(in srgb, #e74c3c 35%, var(--a-line)); background: color-mix(in srgb, #e74c3c 10%, var(--a-surface)); } .a-status-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--a-muted); vertical-align: middle; } .a-status-dot-accent { background: var(--a-accent); } .a-status-dot-success { background: var(--a-success); } .a-status-dot-warning { background: var(--a-warning); } .a-status-dot-danger { background: #e74c3c; } .a-status-dot-pulse { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); animation: a-dot-pulse 1.6s ease infinite; } @keyframes a-dot-pulse { 70% { box-shadow: 0 0 0 0.45rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .a-page-header { display: grid; gap: 0.65rem; } .a-page-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; } .a-page-header-title { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; } .a-page-header-desc { margin: 0.25rem 0 0; color: var(--a-muted); font-size: 0.9rem; } .a-page-header-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .a-user-btn { display: inline-flex; align-items: center; gap: 0.55rem; appearance: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); padding: 0.3rem 0.55rem 0.3rem 0.3rem; font: inherit; cursor: pointer; color: var(--a-ink); text-align: left; } .a-user-btn:hover { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); } .a-user-btn-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .a-user-btn-name { font-size: 0.8125rem; font-weight: 700; } .a-user-btn-chevron { display: inline-flex; margin-left: auto; color: var(--a-muted); } .a-user-btn-email { font-size: 0.7rem; color: var(--a-muted); } .a-theme-toggle { appearance: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--a-line); border-radius: 999px; background: var(--a-surface); cursor: pointer; color: var(--a-ink); } .a-theme-toggle:hover { border-color: var(--a-accent); color: var(--a-accent); } .a-choice-card { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 0.85rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); cursor: pointer; } .a-choice-card:hover { border-color: color-mix(in srgb, var(--a-accent) 45%, var(--a-line)); } .a-choice-card-checked { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface)); box-shadow: inset 0 0 0 1px var(--a-accent); } .a-choice-card-disabled { opacity: 0.55; cursor: not-allowed; } .a-choice-card-input { margin-top: 0.2rem; } .a-choice-card-body { display: grid; gap: 0.15rem; min-width: 0; } .a-choice-card-label { font-weight: 700; font-size: 0.875rem; } .a-choice-card-desc { font-size: 0.8rem; color: var(--a-muted); } .a-chat-bubble { max-width: min(22rem, 85%); padding: 0.55rem 0.75rem; border-radius: 0.85rem; font-size: 0.875rem; line-height: 1.4; } .a-chat-bubble-me { margin-left: auto; background: var(--a-accent); color: var(--a-accent-ink); border-bottom-right-radius: 0.25rem; } .a-chat-bubble-them { margin-right: auto; background: var(--a-canvas); border: 1px solid var(--a-line); border-bottom-left-radius: 0.25rem; } .a-chat-bubble-meta { display: flex; gap: 0.5rem; font-size: 0.7rem; opacity: 0.85; margin-bottom: 0.2rem; } .a-typing { display: inline-flex; gap: 0.28rem; padding: 0.55rem 0.7rem; border-radius: 999px; background: var(--a-canvas); border: 1px solid var(--a-line); } .a-typing span { width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--a-muted); animation: a-typing 1.1s ease infinite; } .a-typing span:nth-child(2) { animation-delay: 0.15s; } .a-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes a-typing { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } .a-json-viewer { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); overflow: auto; font-size: 0.8125rem; line-height: 1.45; } .a-json-viewer code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .a-relative-time { font-variant-numeric: tabular-nums; color: var(--a-muted); font-size: 0.8125rem; } .a-countup { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; } .a-scrollspy { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-scrollspy-item { appearance: none; border: 0; background: transparent; text-align: left; padding: 0.4rem 0.55rem; border-radius: calc(var(--a-radius) - 2px); font: inherit; font-size: 0.8125rem; color: var(--a-muted); cursor: pointer; } .a-scrollspy-item:hover { color: var(--a-ink); background: var(--a-canvas); } .a-scrollspy-item-active { color: var(--a-accent); font-weight: 700; background: color-mix(in srgb, var(--a-accent) 10%, transparent); } .a-compare { position: relative; overflow: hidden; border-radius: var(--a-radius); border: 1px solid var(--a-line); aspect-ratio: 16 / 10; background: var(--a-canvas); user-select: none; } .a-compare-img { display: block; width: 100%; height: 100%; object-fit: cover; } .a-compare-overlay { position: absolute; inset: 0; pointer-events: none; } .a-compare-range { position: absolute; inset: 0; z-index: 2; margin: 0; opacity: 0; cursor: ew-resize; width: 100%; height: 100%; } .a-compare-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-50%); z-index: 1; pointer-events: none; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.25); } .a-compare-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #fff; border: 1px solid var(--a-line); transform: translate(-50%, -50%); box-shadow: 0 4px 12px rgb(15 23 42 / 0.2); } .a-loadmore, .a-loadmore-end { margin: 0; display: flex; justify-content: center; padding: 0.5rem; color: var(--a-muted); font-size: 0.85rem; } .a-activity { display: flex; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--a-line); } .a-activity:last-child { border-bottom: 0; } .a-activity-icon { width: 1.85rem; height: 1.85rem; border-radius: 999px; display: grid; place-items: center; background: var(--a-canvas); color: var(--a-accent); flex: 0 0 auto; } .a-activity-title { font-weight: 700; font-size: 0.875rem; } .a-activity-meta { font-size: 0.75rem; color: var(--a-muted); margin-top: 0.1rem; } .a-activity-content { margin-top: 0.35rem; font-size: 0.85rem; } .a-filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .a-masonry { column-gap: 0.75rem; } .a-masonry-2 { column-count: 2; } .a-masonry-3 { column-count: 3; } .a-masonry-4 { column-count: 4; } .a-masonry > * { break-inside: avoid; margin-bottom: 0.75rem; } .a-masonry > :is(img, video, picture) { display: block; width: 100%; height: auto; border-radius: var(--a-radius); } @media (max-width: 640px) { .a-masonry-3, .a-masonry-4 { column-count: 2; } } /* —— Kit more —— */ .a-cookie { position: fixed; z-index: 70; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem; padding: 0.9rem 1rem; border: 1px solid var(--a-line); border-radius: calc(var(--a-radius) + 2px); background: var(--a-surface); box-shadow: 0 16px 40px rgb(15 23 42 / 0.16); max-width: 40rem; margin-inline: auto; } .a-cookie-body { flex: 1 1 14rem; min-width: 0; } .a-cookie-title { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; } .a-cookie-msg { margin: 0; font-size: 0.8125rem; color: var(--a-muted); line-height: 1.4; } .a-cookie-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; } .a-offline { padding: 0.55rem 0.85rem; border-radius: var(--a-radius); background: color-mix(in srgb, var(--a-warning) 14%, var(--a-surface)); border: 1px solid color-mix(in srgb, var(--a-warning) 35%, var(--a-line)); font-size: 0.85rem; text-align: center; } .a-hotkey { display: inline-flex; align-items: center; gap: 0.15rem; } .a-hotkey-part { display: inline-flex; align-items: center; gap: 0.15rem; } .a-hotkey-plus { color: var(--a-muted); font-size: 0.75rem; padding: 0 0.1rem; } .a-inline-edit-display { display: inline-flex; align-items: center; gap: 0.4rem; appearance: none; border: 1px dashed transparent; background: transparent; padding: 0.2rem 0.35rem; border-radius: var(--a-radius); font: inherit; font-size: 0.9rem; cursor: pointer; color: var(--a-ink); } .a-inline-edit-display:hover { border-color: var(--a-line); background: var(--a-canvas); } .a-inline-edit-open .a-inline-edit-input { min-width: 10rem; } .a-copy-field { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); } .a-copy-field-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-copy-field-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; } .a-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .a-checklist-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: var(--a-radius); cursor: pointer; font-size: 0.875rem; } .a-checklist-item:hover { background: var(--a-canvas); } .a-checklist-item-done span { text-decoration: line-through; color: var(--a-muted); } .a-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .a-feature-list li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; } .a-feature-list .a-icon { color: var(--a-accent); margin-top: 0.15rem; flex: 0 0 auto; } .a-pricing { display: grid; gap: 0.75rem; padding: 1.1rem; border: 1px solid var(--a-line); border-radius: calc(var(--a-radius) + 2px); background: var(--a-surface); } .a-pricing-hl { border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent); } .a-pricing-name { margin: 0; font-weight: 700; font-size: 0.9rem; } .a-pricing-price { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .a-pricing-price small { font-size: 0.85rem; font-weight: 500; color: var(--a-muted); margin-left: 0.15rem; } .a-pricing-desc { margin: 0; font-size: 0.85rem; color: var(--a-muted); } .a-pricing-action { margin-top: 0.25rem; } .a-stat-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; } .a-dots { display: inline-flex; gap: 0.4rem; align-items: center; } .a-dots-item { appearance: none; border: 0; width: 0.5rem; height: 0.5rem; border-radius: 999px; padding: 0; background: var(--a-line); cursor: pointer; } .a-dots-item-active { background: var(--a-accent); width: 1.1rem; border-radius: 999px; } .a-back-link { display: inline-flex; align-items: center; gap: 0.35rem; appearance: none; border: 0; background: transparent; padding: 0.2rem 0; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--a-muted); cursor: pointer; } .a-back-link:hover { color: var(--a-accent); } .a-nextprev { display: flex; justify-content: space-between; gap: 0.75rem; } .a-file-card { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-file-card-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--a-radius); background: var(--a-canvas); color: var(--a-accent); } .a-file-card-text { flex: 1; min-width: 0; display: grid; } .a-file-card-name { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-file-card-meta { font-size: 0.75rem; color: var(--a-muted); } .a-video { position: relative; overflow: hidden; border-radius: var(--a-radius); border: 1px solid var(--a-line); background: #0f172a; } .a-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .a-stepped { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.35rem; } .a-stepped-seg { height: 0.35rem; border-radius: 999px; background: var(--a-line); } .a-stepped-seg-done, .a-stepped-seg-current { background: var(--a-accent); } .a-heatmap { display: grid; gap: 0.2rem; width: fit-content; } .a-heatmap-cell { width: 0.85rem; height: 0.85rem; border-radius: 2px; background: var(--a-accent); } .a-angle { position: relative; display: inline-grid; place-items: center; touch-action: none; cursor: grab; user-select: none; } .a-angle:active { cursor: grabbing; } .a-angle-track { stroke: var(--a-line); stroke-width: 6; } .a-angle-hub { fill: var(--a-accent-soft); } .a-angle-arm { stroke: var(--a-accent); stroke-width: 3; stroke-linecap: round; } .a-angle-knob { fill: var(--a-surface); stroke: var(--a-accent); stroke-width: 3; } .a-angle-label { position: absolute; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .a-prose { max-width: 40rem; color: var(--a-ink); font-family: var(--a-font); font-size: 0.95rem; line-height: 1.65; } .a-prose-full { max-width: none; } .a-prose :where(p, ul, ol) { margin: 0 0 0.85em; } .a-prose :where(h1, h2, h3, h4) { margin: 1.25em 0 0.5em; line-height: 1.25; letter-spacing: -0.02em; } .a-prose :where(a) { color: color-mix(in oklab, var(--a-accent) 85%, var(--a-ink)); } .a-bleed { width: auto; } .a-inset { padding: 1rem; border-radius: var(--a-radius); background: var(--a-canvas); border: 1px solid var(--a-line); } .a-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; align-items: start; } .a-kanban-col { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); overflow: hidden; } .a-kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--a-line); background: var(--a-surface); font-size: 0.8rem; } .a-kanban-count { font-size: 0.7rem; font-weight: 700; color: var(--a-muted); background: var(--a-canvas); border-radius: 999px; padding: 0.1rem 0.45rem; } .a-kanban-col-body { display: grid; gap: 0.45rem; padding: 0.55rem; min-height: 4rem; } .a-kanban-card { appearance: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); padding: 0.55rem 0.65rem; text-align: left; font: inherit; cursor: pointer; display: grid; gap: 0.2rem; color: var(--a-ink); } .a-kanban-card:hover { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); } .a-kanban-card-title { font-size: 0.85rem; font-weight: 600; } .a-kanban-card-meta { font-size: 0.75rem; color: var(--a-muted); } /* —— Kit extra —— */ .a-presence-avatar { position: relative; display: inline-flex; } .a-presence-avatar-dot { position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--a-surface); } .a-truncate { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .a-truncate-multi { display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; } .a-terminal { border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: #0f172a; color: #e2e8f0; } .a-terminal-bar { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.7rem; background: #1e293b; border-bottom: 1px solid #334155; } .a-terminal-dots { display: inline-flex; gap: 0.3rem; } .a-terminal-dots span { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #64748b; } .a-terminal-dots span:nth-child(1) { background: #f87171; } .a-terminal-dots span:nth-child(2) { background: #fbbf24; } .a-terminal-dots span:nth-child(3) { background: #34d399; } .a-terminal-title { font-size: 0.75rem; color: #94a3b8; } .a-terminal-body { margin: 0; padding: 0.85rem 1rem; overflow: auto; font-size: 0.8125rem; line-height: 1.5; } .a-terminal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .a-diff { margin: 0; padding: 0.5rem 0; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); overflow: auto; font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.45; } .a-diff-line { display: block; padding: 0.05rem 0.75rem; white-space: pre-wrap; } .a-diff-prefix { display: inline-block; width: 1rem; margin-right: 0.5rem; opacity: 0.7; } .a-diff-add { background: color-mix(in srgb, var(--a-success) 14%, transparent); } .a-diff-del { background: color-mix(in srgb, #e74c3c 14%, transparent); } .a-trend { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .a-trend-up { color: var(--a-success); } .a-trend-down { color: var(--a-danger); } .a-donut { position: relative; display: inline-grid; place-items: center; } .a-donut-track { stroke: var(--a-line); } .a-donut-bar { stroke: var(--a-accent); stroke-linecap: round; transition: stroke-dashoffset 0.25s ease; } .a-donut-label { position: absolute; font-size: 0.85rem; font-weight: 700; } .a-sparkbar { display: inline-flex; align-items: flex-end; gap: 0.15rem; height: 2rem; } .a-sparkbar-col { width: 0.35rem; min-height: 15%; border-radius: 2px 2px 0 0; background: var(--a-accent); } .a-skel-text { display: grid; gap: 0.45rem; } .a-skel-line, .a-skel-block { display: block; border-radius: var(--a-radius); background: linear-gradient(90deg, var(--a-line), var(--a-canvas), var(--a-line)); background-size: 200% 100%; animation: a-skel 1.2s ease infinite; height: 0.7rem; } .a-skel-block-lg { height: 6rem; margin-bottom: 0.75rem; } .a-skel-card { padding: 0.85rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } @keyframes a-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .a-loading-btn-busy .a-icon { animation: a-spin 0.8s linear infinite; } .a-action-icon.a-password-toggle .a-icon { opacity: 1; } .a-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--a-line); } .a-settings-row:last-child { border-bottom: 0; } .a-settings-row-label { font-weight: 600; font-size: 0.9rem; } .a-settings-row-desc { font-size: 0.8rem; color: var(--a-muted); margin-top: 0.15rem; } .a-danger-zone { border: 1px solid color-mix(in srgb, #e74c3c 45%, var(--a-line)); border-radius: var(--a-radius); overflow: hidden; background: color-mix(in srgb, #e74c3c 5%, var(--a-surface)); } .a-danger-zone-head { padding: 0.75rem 0.9rem; border-bottom: 1px solid color-mix(in srgb, #e74c3c 25%, var(--a-line)); } .a-danger-zone-head p { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--a-muted); } .a-danger-zone-body { padding: 0.75rem 0.9rem; } .a-sticky-bar { position: sticky; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid var(--a-line); background: color-mix(in srgb, var(--a-surface) 92%, transparent); backdrop-filter: blur(8px); } .a-sticky-bar-top { top: 0.5rem; border-radius: var(--a-radius); } .a-sticky-bar-bottom { bottom: 0.5rem; border-radius: var(--a-radius); } .a-site-footer { padding: 1.5rem 0 0.5rem; border-top: 1px solid var(--a-line); } .a-site-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem; } .a-site-footer-col-title { margin: 0 0 0.45rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-site-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .a-site-footer-link { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 0.85rem; color: var(--a-ink); cursor: pointer; text-align: left; } .a-site-footer-link:hover { color: var(--a-accent); } .a-site-footer-meta { margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid var(--a-line); font-size: 0.8rem; color: var(--a-muted); } .a-social { display: inline-flex; gap: 0.35rem; } .a-social-btn { appearance: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--a-line); border-radius: 999px; background: var(--a-surface); cursor: pointer; color: var(--a-ink); } .a-social-btn:hover { border-color: var(--a-accent); color: var(--a-accent); } .a-reel { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.35rem; scroll-snap-type: x mandatory; } .a-reel > * { flex: 0 0 auto; scroll-snap-align: start; } .a-gallery { display: grid; gap: 0.5rem; } .a-gallery-2 { grid-template-columns: repeat(2, 1fr); } .a-gallery-3 { grid-template-columns: repeat(3, 1fr); } .a-gallery-4 { grid-template-columns: repeat(4, 1fr); } .a-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--a-radius); display: block; } .a-testimonial { margin: 0; padding: 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-testimonial-quote { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.5; } .a-testimonial-author { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; } .a-testimonial-role { display: block; color: var(--a-muted); font-size: 0.75rem; } .a-review { padding: 0.85rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-review-stars { letter-spacing: 0.05em; margin-bottom: 0.35rem; } .a-review-star { color: var(--a-line); } .a-review-star-on { color: var(--a-warning); } .a-review-title { margin: 0 0 0.35rem; font-size: 0.95rem; } .a-review-body { font-size: 0.875rem; line-height: 1.45; color: var(--a-ink); } .a-review-author { margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--a-muted); } .a-logo-cloud { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; align-items: center; justify-content: center; } .a-logo-cloud-item { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--a-muted); } .a-upload-item { display: grid; gap: 0.35rem; padding: 0.55rem 0.65rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-upload-item-error { border-color: color-mix(in srgb, #e74c3c 40%, var(--a-line)); } .a-upload-item-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; } .a-upload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .a-upload-item-pct { color: var(--a-muted); font-variant-numeric: tabular-nums; } .a-upload-item-cancel { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--a-accent); cursor: pointer; } .a-upload-item-track { height: 0.3rem; border-radius: 999px; background: var(--a-canvas); overflow: hidden; } .a-upload-item-bar { height: 100%; background: var(--a-accent); border-radius: inherit; } .a-wizard-nav, .a-form-footer { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--a-line); } .a-details { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); overflow: hidden; } .a-details-summary { cursor: pointer; padding: 0.7rem 0.85rem; font-weight: 600; font-size: 0.9rem; list-style: none; } .a-details-summary::-webkit-details-marker { display: none; } .a-details-body { padding: 0 0.85rem 0.85rem; font-size: 0.875rem; color: var(--a-muted); } .a-metric { display: grid; gap: 0.25rem; } .a-metric-label { margin: 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-metric-row { display: flex; align-items: baseline; gap: 0.55rem; } .a-metric-value { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; } /* —— Kit app —— */ .a-announce { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.85rem; border-radius: var(--a-radius); font-size: 0.875rem; } .a-announce-info { background: color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)); color: var(--a-ink); } .a-announce-accent { background: color-mix(in srgb, var(--a-accent) 22%, var(--a-surface)); } .a-announce-warning { background: color-mix(in srgb, #f59e0b 18%, var(--a-surface)); } .a-announce-danger { background: color-mix(in srgb, #ef4444 16%, var(--a-surface)); } .a-announce-body { flex: 1; min-width: 0; } .a-announce-close { appearance: none; border: 0; background: transparent; padding: 0.2rem; cursor: pointer; color: inherit; opacity: 0.7; } .a-announce-close:hover { opacity: 1; } .a-command-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-toc { display: grid; gap: 0.35rem; } .a-toc-title { margin: 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } .a-toc-link { appearance: none; border: 0; background: transparent; text-align: left; font: inherit; font-size: 0.85rem; color: var(--a-muted); padding: 0.3rem 0.45rem; /* Square on the left so the active bar stays a straight line. */ border-radius: 0 calc(var(--a-radius) - 2px) calc(var(--a-radius) - 2px) 0; cursor: pointer; border-left: 2px solid transparent; } .a-toc-link:hover { color: var(--a-ink); background: var(--a-canvas); } .a-toc-link-active { color: var(--a-ink); border-left-color: var(--a-accent); font-weight: 600; } .a-props { margin: 0; display: grid; gap: 0.45rem; } .a-props-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--a-line); } .a-props-label { margin: 0; font-size: 0.8rem; color: var(--a-muted); font-weight: 600; } .a-props-value { margin: 0; font-size: 0.875rem; color: var(--a-ink); } .a-stat-card { display: grid; gap: 0.2rem; padding: 0.85rem 1rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-stat-card-label { margin: 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-muted); } .a-stat-card-value { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; } .a-stat-card-hint, .a-stat-card-trend { margin: 0; font-size: 0.8rem; color: var(--a-muted); } .a-stat-card-up { color: var(--a-success); } .a-stat-card-down { color: var(--a-danger); } .a-qty { display: inline-flex; align-items: center; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-qty-btn { appearance: none; border: 0; background: transparent; width: 2rem; height: 2rem; font: inherit; cursor: pointer; color: var(--a-ink); } .a-qty-btn:hover:not(:disabled) { background: var(--a-canvas); } .a-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; } .a-qty-value { min-width: 1.75rem; text-align: center; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .a-price { display: inline-flex; align-items: baseline; gap: 0.35rem; } .a-price-strike { text-decoration: line-through; color: var(--a-muted); font-size: 0.85rem; } .a-price-amount { font-weight: 700; letter-spacing: -0.02em; } .a-price-period { color: var(--a-muted); font-size: 0.8rem; } .a-product { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); overflow: hidden; display: grid; } .a-product-media { position: relative; aspect-ratio: 1; background: var(--a-canvas); } .a-product-img { width: 100%; height: 100%; object-fit: cover; display: block; } .a-product-badge { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--a-accent); color: var(--a-accent-ink); } .a-product-body { display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem 0.85rem; } .a-product-title { margin: 0; font-size: 0.9rem; font-weight: 600; } .a-product-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .a-cart-line { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--a-line); } .a-cart-line-img { width: 3rem; height: 3rem; object-fit: cover; border-radius: calc(var(--a-radius) - 2px); border: 1px solid var(--a-line); } .a-cart-line-body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; } .a-cart-line-title { margin: 0; font-size: 0.875rem; font-weight: 600; } .a-cart-line-qty { font-size: 0.85rem; color: var(--a-muted); } .a-cart-line-remove { appearance: none; border: 0; background: transparent; padding: 0.25rem; cursor: pointer; color: var(--a-muted); } .a-cart-line-remove:hover { color: var(--a-danger); } .a-order { display: grid; gap: 0.45rem; padding: 0.85rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-order-row, .a-order-total { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; } .a-order-muted { color: var(--a-muted); } .a-order-total { padding-top: 0.45rem; border-top: 1px solid var(--a-line); font-size: 1rem; } .a-share-btn .a-btn-label { display: inline-flex; align-items: center; gap: 0.35rem; } .a-copy-id { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; } .a-copy-id-label { color: var(--a-muted); font-weight: 600; } .a-copy-id-value { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; background: var(--a-canvas); padding: 0.15rem 0.4rem; border-radius: 4px; border: 1px solid var(--a-line); } .a-copy-id-btn { appearance: none; border: 0; background: transparent; padding: 0.15rem; cursor: pointer; color: var(--a-muted); } .a-copy-id-btn:hover { color: var(--a-ink); } .a-env-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--a-line); } .a-env-badge-danger { background: color-mix(in srgb, #ef4444 16%, var(--a-surface)); color: color-mix(in oklab, var(--a-danger) 80%, var(--a-ink)); } .a-env-badge-warning { background: color-mix(in srgb, #f59e0b 18%, var(--a-surface)); color: color-mix(in oklab, var(--a-warning) 48%, var(--a-ink)); } .a-env-badge-accent { background: color-mix(in srgb, var(--a-accent) 16%, var(--a-surface)); color: var(--a-accent); } .a-locale { display: inline-flex; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-locale-btn { appearance: none; border: 0; background: transparent; padding: 0.35rem 0.65rem; font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--a-muted); } .a-locale-btn-active { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 600; } .a-org { appearance: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.55rem 0.35rem 0.4rem; font: inherit; cursor: pointer; color: var(--a-ink); max-width: 16rem; } .a-org:hover { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); } .a-org-avatar { width: 1.75rem; height: 1.75rem; border-radius: calc(var(--a-radius) - 2px); background: color-mix(in srgb, var(--a-accent) 20%, var(--a-canvas)); color: var(--a-accent); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .a-org-meta { display: grid; text-align: left; min-width: 0; flex: 1; } .a-org-name { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-org-plan { font-size: 0.7rem; color: var(--a-muted); } .a-inbox-item { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.65rem 0.7rem; text-align: left; font: inherit; cursor: pointer; border-radius: var(--a-radius); color: var(--a-ink); } .a-inbox-item:hover { background: var(--a-canvas); } .a-inbox-item-unread { background: color-mix(in srgb, var(--a-accent) 8%, transparent); } .a-inbox-icon { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--a-canvas); display: grid; place-items: center; color: var(--a-muted); flex-shrink: 0; } .a-inbox-body { flex: 1; min-width: 0; display: grid; gap: 0.1rem; } .a-inbox-title { font-size: 0.875rem; font-weight: 600; } .a-inbox-text { font-size: 0.8rem; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-inbox-time { font-size: 0.7rem; color: var(--a-muted); flex-shrink: 0; } .a-reactions { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; } .a-reaction { appearance: none; border: 1px solid var(--a-line); border-radius: 999px; background: var(--a-surface); padding: 0.15rem 0.5rem; font: inherit; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--a-ink); } .a-reaction-active { border-color: color-mix(in srgb, var(--a-accent) 50%, var(--a-line)); background: color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)); } .a-mention { appearance: none; border: 0; background: color-mix(in srgb, var(--a-accent) 14%, transparent); color: var(--a-accent); font: inherit; font-size: inherit; font-weight: 600; padding: 0 0.2rem; border-radius: 4px; cursor: pointer; } .a-mention:hover { background: color-mix(in srgb, var(--a-accent) 22%, transparent); } .a-browser { border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-browser-bar { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--a-line); background: var(--a-canvas); } .a-browser-dots { display: inline-flex; gap: 0.3rem; } .a-browser-dots span { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--a-line); } .a-browser-dots span:nth-child(1) { background: #f87171; } .a-browser-dots span:nth-child(2) { background: #fbbf24; } .a-browser-dots span:nth-child(3) { background: #34d399; } .a-browser-url { flex: 1; font-size: 0.75rem; color: var(--a-muted); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 0.2rem 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-browser-body { padding: 0.85rem; } /* A screenshot fills the viewport edge to edge. */ .a-browser-body:has(> :is(img, video):only-child) { padding: 0; } .a-browser-body > :is(img, video) { display: block; width: 100%; height: auto; } .a-phone { width: 14rem; margin-inline: auto; border: 2px solid var(--a-ink); border-radius: 1.4rem; padding: 0.65rem 0.45rem 0.85rem; background: var(--a-surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--a-ink) 12%, transparent); } .a-phone-notch { width: 4.5rem; height: 0.35rem; border-radius: 999px; background: var(--a-ink); margin: 0 auto 0.55rem; opacity: 0.35; } .a-phone-body { min-height: 16rem; border-radius: 0.75rem; overflow: hidden; background: var(--a-canvas); padding: 0.65rem; } /* A screenshot fills the screen edge to edge. */ .a-phone-body:has(> :is(img, video):only-child) { padding: 0; } .a-phone-body > :is(img, video) { display: block; width: 100%; height: auto; } .a-feature-compare { border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-compare-head, .a-compare-row { display: grid; grid-template-columns: minmax(8rem, 1.2fr) repeat(auto-fit, minmax(4rem, 1fr)); } .a-compare-head { background: var(--a-canvas); font-weight: 700; font-size: 0.8rem; } .a-compare-row + .a-compare-row { border-top: 1px solid var(--a-line); } .a-compare-cell { padding: 0.55rem 0.7rem; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; text-align: center; } .a-compare-feature { justify-content: flex-start; text-align: left; font-weight: 500; } .a-compare-plan { color: var(--a-ink); } .a-compare-yes { color: var(--a-success); } .a-compare-no { color: var(--a-muted); } .a-view-toggle { display: inline-flex; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-view-btn { appearance: none; border: 0; background: transparent; width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer; color: var(--a-muted); } .a-view-btn-active { background: color-mix(in srgb, var(--a-accent) 14%, var(--a-surface)); color: var(--a-accent); } .a-result-count { margin: 0; font-size: 0.85rem; color: var(--a-muted); } .a-filter-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.35rem 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-canvas); font-size: 0.8rem; } .a-filter-chip-x { appearance: none; border: 0; background: transparent; padding: 0.1rem; cursor: pointer; color: var(--a-muted); display: grid; place-items: center; } .a-bulk-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: color-mix(in srgb, var(--a-accent) 10%, var(--a-surface)); } .a-bulk-count { font-size: 0.85rem; font-weight: 600; } .a-bulk-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; } .a-bulk-clear { appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.8rem; color: var(--a-muted); cursor: pointer; text-decoration: underline; } .a-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-danger); } .a-live-dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #dc2626; animation: a-live-pulse 1.4s ease-in-out infinite; } @keyframes a-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .a-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 700; font-variant-numeric: tabular-nums; } .a-secret { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-secret-label { font-size: 0.75rem; font-weight: 700; color: var(--a-muted); flex-shrink: 0; } .a-secret-value { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-secret-actions { display: inline-flex; gap: 0.15rem; } .a-infinite { display: grid; gap: 0.75rem; } .a-infinite-sentinel { display: flex; justify-content: center; padding: 0.5rem 0; } /* —— Kit ops —— */ .a-callout { display: flex; gap: 0.65rem; padding: 0.75rem 0.85rem; border-radius: var(--a-radius); border: 1px solid var(--a-line); background: var(--a-surface); font-size: 0.875rem; } .a-callout-icon { flex-shrink: 0; margin-top: 0.1rem; } .a-callout-body { display: grid; gap: 0.2rem; min-width: 0; } .a-callout-title { font-size: 0.85rem; } .a-callout-content { color: var(--a-muted); } .a-callout-info { border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-line)); background: color-mix(in srgb, var(--a-accent) 8%, var(--a-surface)); } .a-callout-tip { border-color: color-mix(in srgb, #16a34a 35%, var(--a-line)); background: color-mix(in srgb, #16a34a 8%, var(--a-surface)); } .a-callout-warning { border-color: color-mix(in srgb, #f59e0b 40%, var(--a-line)); background: color-mix(in srgb, #f59e0b 10%, var(--a-surface)); } .a-callout-danger { border-color: color-mix(in srgb, #ef4444 40%, var(--a-line)); background: color-mix(in srgb, #ef4444 8%, var(--a-surface)); } .a-callout-note { background: var(--a-canvas); } .a-changelog { display: grid; gap: 0.35rem; padding: 0.75rem 0; border-bottom: 1px solid var(--a-line); } .a-changelog-head { display: flex; align-items: center; gap: 0.65rem; } .a-changelog-date { font-size: 0.75rem; color: var(--a-muted); } .a-changelog-title { margin: 0; font-size: 0.95rem; } .a-changelog-body { font-size: 0.875rem; color: var(--a-muted); } .a-version-tag { display: inline-flex; font-size: 0.7rem; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding: 0.15rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--a-accent) 14%, var(--a-surface)); color: var(--a-accent); border: 1px solid color-mix(in srgb, var(--a-accent) 30%, var(--a-line)); } .a-http { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .a-http-get { background: color-mix(in oklab, #16a34a 13%, var(--a-paper)); color: color-mix(in oklab, #16a34a 72%, var(--a-ink)); } .a-http-post { background: color-mix(in oklab, #2563eb 13%, var(--a-paper)); color: color-mix(in oklab, #2563eb 68%, var(--a-ink)); } .a-http-put { background: color-mix(in oklab, #ea580c 13%, var(--a-paper)); color: color-mix(in oklab, #ea580c 72%, var(--a-ink)); } .a-http-patch { background: color-mix(in oklab, #9333ea 13%, var(--a-paper)); color: color-mix(in oklab, #9333ea 68%, var(--a-ink)); } .a-http-delete { background: color-mix(in oklab, #dc2626 13%, var(--a-paper)); color: color-mix(in oklab, #dc2626 78%, var(--a-ink)); } .a-http-head, .a-http-options { background: var(--a-canvas); color: var(--a-muted); } .a-endpoint { appearance: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; font: inherit; cursor: pointer; text-align: left; color: var(--a-ink); } .a-endpoint:hover { border-color: color-mix(in srgb, var(--a-accent) 40%, var(--a-line)); } .a-endpoint-path { font-size: 0.85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .a-endpoint-summary { font-size: 0.8rem; color: var(--a-muted); flex-shrink: 0; } .a-json-tree { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-canvas); padding: 0.5rem 0.35rem; overflow: auto; } .a-json-toggle { appearance: none; border: 0; background: transparent; display: flex; align-items: center; gap: 0.2rem; font: inherit; cursor: pointer; color: var(--a-ink); width: 100%; text-align: left; padding: 0.1rem 0.35rem; border-radius: 4px; } .a-json-toggle:hover { background: var(--a-surface); } .a-json-row { padding: 0.1rem 0.35rem; } .a-json-key { color: var(--a-accent); } .a-json-meta { color: var(--a-muted); } .a-json-str { /* Mixed toward ink: plain success green is under 4.5:1 on the canvas background. */ color: color-mix(in oklab, var(--a-success) 80%, var(--a-ink)); } .a-json-num { color: color-mix(in oklab, #ea580c 72%, var(--a-ink)); } .a-json-bool { color: color-mix(in oklab, #9333ea 68%, var(--a-ink)); } .a-json-null { color: var(--a-muted); font-style: italic; } .a-log { margin: 0; padding: 0.65rem 0.75rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; display: grid; gap: 0.2rem; overflow: auto; max-height: 14rem; } .a-log-line { display: flex; gap: 0.65rem; } .a-log-time { /* Always on the dark log surface: slate-400 keeps 4.5:1 there. */ color: #94a3b8; flex-shrink: 0; } .a-log-level { flex-shrink: 0; font-weight: 700; min-width: 3.2rem; } .a-log-debug .a-log-level { color: #94a3b8; } .a-log-info .a-log-level { color: #38bdf8; } .a-log-warn .a-log-level { color: #fbbf24; } .a-log-error .a-log-level { color: #f87171; } .a-log-msg { color: #e2e8f0; } .a-service { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-service-name { font-size: 0.875rem; font-weight: 600; } .a-service-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; text-transform: capitalize; color: var(--a-muted); } .a-uptime { display: flex; gap: 2px; height: 1.75rem; align-items: stretch; } .a-uptime-day { flex: 1; min-width: 4px; border-radius: 2px; } .a-uptime-ok { background: #22c55e; } .a-uptime-warn { background: #f59e0b; } .a-uptime-bad { background: #ef4444; } .a-usage { display: grid; gap: 0.35rem; } .a-usage-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; } .a-usage-label { font-weight: 600; } .a-usage-meta { color: var(--a-muted); font-variant-numeric: tabular-nums; } .a-usage-track { height: 0.45rem; border-radius: 999px; background: var(--a-canvas); border: 1px solid var(--a-line); overflow: hidden; } .a-usage-fill { height: 100%; background: var(--a-accent); border-radius: inherit; } .a-usage-over { background: #dc2626; } .a-upgrade { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border-radius: var(--a-radius); border: 1px solid color-mix(in srgb, var(--a-accent) 35%, var(--a-line)); background: linear-gradient( 135deg, color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)), var(--a-surface) ); } .a-upgrade-body { flex: 1; min-width: 0; display: grid; gap: 0.2rem; font-size: 0.875rem; color: var(--a-muted); } .a-upgrade-title { color: var(--a-ink); font-size: 0.95rem; } .a-profile { border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-profile-cover { height: 5.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--a-accent) 40%, #1e293b), #0f172a); background-size: cover; background-position: center; } .a-profile-main { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding: 0 1.25rem 1.1rem; align-items: flex-start; } /* Overlaps the cover; the name sits beside it, below the cover. */ .a-profile-avatar { margin-top: -2.25rem; box-shadow: 0 0 0 4px var(--a-surface); flex-shrink: 0; } .a-profile-meta { flex: 1; min-width: 8rem; padding-top: 0.7rem; } .a-profile-name { margin: 0; font-size: 1.1rem; } .a-profile-handle { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--a-muted); } .a-profile-bio { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--a-muted); } .a-profile-actions { display: flex; gap: 0.35rem; padding-top: 0.85rem; } .a-member { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid var(--a-line); } .a-member-meta { flex: 1; min-width: 0; display: grid; } .a-member-name { font-size: 0.875rem; font-weight: 600; } .a-member-email { font-size: 0.75rem; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-member-remove { appearance: none; border: 0; background: transparent; padding: 0.25rem; cursor: pointer; color: var(--a-muted); } .a-member-remove:hover { color: var(--a-danger); } .a-role-badge { display: inline-flex; font-size: 0.7rem; font-weight: 700; text-transform: capitalize; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-canvas); color: var(--a-muted); } .a-priority, .a-severity { display: inline-flex; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.45rem; border-radius: 999px; } .a-priority-low, .a-severity-info, .a-severity-low { background: var(--a-canvas); color: var(--a-muted); } .a-priority-medium, .a-severity-medium { background: color-mix(in oklab, #ea580c 13%, var(--a-paper)); color: color-mix(in oklab, #ea580c 72%, var(--a-ink)); } .a-priority-high, .a-severity-high { background: color-mix(in oklab, #dc2626 13%, var(--a-paper)); color: color-mix(in oklab, #dc2626 78%, var(--a-ink)); } .a-priority-urgent, .a-severity-critical { background: #7f1d1d; color: #fecaca; } .a-commit { appearance: none; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.55rem; font: inherit; cursor: pointer; max-width: 100%; color: var(--a-ink); } .a-commit-sha { font-size: 0.75rem; color: var(--a-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .a-commit-msg { font-size: 0.8rem; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-branch { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--a-line); background: var(--a-canvas); } .a-build { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; } .a-build-success { color: var(--a-success); } .a-build-failed { color: var(--a-danger); } .a-build-running { color: var(--a-accent); } .a-build-queued { color: var(--a-muted); } .a-build-cancelled { color: var(--a-muted); } .a-build-spin { animation: a-build-spin 0.9s linear infinite; } @keyframes a-build-spin { to { transform: rotate(360deg); } } .a-pipeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .a-pipeline-step { display: inline-flex; align-items: center; gap: 0.35rem; } .a-pipeline-line { width: 1.25rem; height: 2px; background: var(--a-line); display: inline-block; } .a-sync { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; } .a-sync-synced { color: var(--a-success); } .a-sync-syncing { color: var(--a-accent); } .a-sync-error { color: var(--a-danger); } .a-sync-offline { color: var(--a-muted); } .a-autosave { font-size: 0.8rem; color: var(--a-muted); } .a-autosave-saving { color: var(--a-accent); } .a-autosave-saved { color: var(--a-success); } .a-autosave-error { color: var(--a-danger); } .a-last-saved { font-size: 0.8rem; color: var(--a-muted); } .a-float-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.35rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--a-ink) 10%, transparent); } .a-density { display: inline-flex; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface); } .a-density-btn { appearance: none; border: 0; background: transparent; padding: 0.35rem 0.65rem; font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--a-muted); } .a-density-btn-active { background: color-mix(in srgb, var(--a-accent) 14%, var(--a-surface)); color: var(--a-accent); font-weight: 600; } .a-no-results, .a-error-state { display: grid; justify-items: center; gap: 0.45rem; padding: 2rem 1rem; text-align: center; color: var(--a-muted); } .a-no-results-title, .a-error-state-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--a-ink); } .a-error-state-desc { margin: 0; font-size: 0.875rem; } .a-error-state-action { margin-top: 0.35rem; } .a-cc { display: grid; gap: 0.85rem; padding: 1rem 1.1rem; border-radius: var(--a-radius); background: linear-gradient(145deg, #1e293b, #0f172a); color: #e2e8f0; /* ISO/IEC 7810 ID-1: 85.60 × 53.98 mm. */ aspect-ratio: 85.6 / 53.98; width: min(100%, 20rem); box-sizing: border-box; grid-template-rows: auto 1fr auto; align-items: center; } .a-cc-top, .a-cc-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .a-cc-brand { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .a-cc-number { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.08em; } .a-invoice { appearance: none; border: 0; border-bottom: 1px solid var(--a-line); background: transparent; width: 100%; display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0; font: inherit; cursor: pointer; text-align: left; color: var(--a-ink); } .a-invoice-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; } .a-invoice-date { font-size: 0.8rem; color: var(--a-muted); } .a-invoice-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; } .a-invoice-paid { color: var(--a-success); } .a-invoice-open { color: var(--a-accent); } .a-invoice-void { color: var(--a-muted); } .a-invoice-past_due { color: var(--a-danger); } .a-invoice-amount { font-size: 0.875rem; } .a-ftree { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); padding: 0.35rem; font-size: 0.85rem; } .a-ftree-row { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; font: inherit; cursor: pointer; border-radius: calc(var(--a-radius) - 2px); color: var(--a-ink); text-align: left; } .a-ftree-row:hover { background: var(--a-canvas); } .a-ftree-row-active { background: color-mix(in srgb, var(--a-accent) 12%, var(--a-surface)); } .a-ftree-spacer { width: 1rem; display: inline-block; } .a-ftree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-gauge { position: relative; display: grid; place-items: center; } .a-gauge-svg { width: 100%; height: 100%; } .a-gauge-track { stroke: var(--a-line); } .a-gauge-bar { stroke: var(--a-accent); transition: stroke-dashoffset 0.25s ease; } .a-gauge-label { position: absolute; bottom: 0.35rem; display: grid; justify-items: center; gap: 0.1rem; font-size: 0.7rem; color: var(--a-muted); } .a-gauge-label strong { font-size: 1.1rem; color: var(--a-ink); letter-spacing: -0.02em; } .a-invite { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); } .a-invite-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .a-invite-email { font-size: 0.875rem; font-weight: 600; } .a-invite-actions { display: flex; gap: 0.25rem; } /* —— Doc menu (Bulma-style docs nav) —— */ .a-doc-menu { display: grid; gap: 0.75rem; font-size: 0.9375rem; } .a-doc-menu-brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.35rem 0.65rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--a-line); font-weight: 700; font-size: 1rem; color: var(--a-accent); letter-spacing: -0.02em; } .a-doc-menu-list, .a-doc-menu-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; } .a-doc-menu-section { display: grid; gap: 0.1rem; } .a-doc-menu-label, .a-doc-menu-link { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: var(--a-radius); font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--a-ink); cursor: pointer; text-align: left; } .a-doc-menu-label:hover:not(.a-doc-menu-active), .a-doc-menu-link:hover:not(.a-doc-menu-active) { background: color-mix(in oklab, var(--a-canvas) 80%, var(--a-paper)); } .a-doc-menu-chevron { color: var(--a-accent); flex-shrink: 0; } .a-doc-menu-items { padding: 0.1rem 0 0.35rem 0.35rem; gap: 0.05rem; } .a-doc-menu-link { font-weight: 500; font-size: 0.875rem; color: var(--a-muted); justify-content: flex-start; padding-left: 0.85rem; } .a-doc-menu-link:hover:not(.a-doc-menu-active) { color: var(--a-ink); } .a-doc-menu-link.a-doc-menu-active, .a-doc-menu-label.a-doc-menu-active { background: color-mix(in oklab, var(--a-canvas) 90%, var(--a-paper)); color: var(--a-ink); font-weight: 600; } /* —— Doc page / example (Bulma-style component docs) —— */ /* minmax(0, 1fr): wide code or tables scroll inside their block instead of widening the page. */ .a-doc-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } .a-doc-page-head { display: grid; gap: 0.65rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--a-line); } .a-doc-page-title { margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .a-doc-page-desc { margin: 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.55; color: var(--a-muted); } .a-doc-page-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .a-doc-example { --a-doc-example-gap: 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-doc-example-gap); } .a-doc-example-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; } .a-doc-example-desc { margin: 0; font-size: 0.975rem; line-height: 1.5; color: var(--a-muted); max-width: 40rem; } .a-doc-example-preview { padding: 1.25rem 1.35rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper); min-width: 0; max-width: 100%; overflow-x: clip; } .a-doc-example-preview:has(+ .a-codeblock) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* —— Code token colors —— */ .a-codeblock { background: #0f172a; border-color: #1e293b; } .a-doc-example .a-codeblock { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } /* Preview + code read as one card: cancel the grid gap at the seam. */ .a-doc-example-preview + .a-codeblock { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: calc(var(--a-doc-example-gap) * -1); } .a-codeblock-bar { background: #1e293b; border-bottom-color: #334155; } .a-codeblock-lang { color: #94a3b8; } .a-codeblock-copy { color: #7dd3fc; } .a-codeblock-copy:hover { color: #e0f2fe; } .a-codeblock-pre { color: #e2e8f0; background: #0f172a; } .a-codeblock-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: inherit; white-space: pre; tab-size: 2; } .a-tok-keyword { color: #c084fc; } .a-tok-string { color: #86efac; } .a-tok-comment { /* 6.9:1 on the code block background (#64748b was 3.75:1). */ color: #94a3b8; font-style: italic; } .a-tok-number { color: #fdba74; } .a-tok-tag { color: #7dd3fc; } .a-tok-punct { color: #94a3b8; } /* Anchored by autoPosition(): fixed coordinates escape overflow clipping. * Same specificity as the static placement rules above, and later, so it wins. */ :is(.a-menu-host .a-menu, .a-popover, .a-tooltip, .a-datepicker-dropdown)[data-floating] { position: fixed; inset: auto; translate: none; margin: 0; } }