/* Cascade order: browser cleanup, design tokens, semantic defaults, layout shells, components, utilities. */ @layer reset, theme, base, layout, components, utilities; @layer reset { /* Box model and media defaults */ *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; text-size-adjust: 100%; } body { min-height: 100vh; margin: 0; } img, picture, svg, video, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } button, summary, select, input[type="checkbox"], input[type="radio"], input[type="range"] { cursor: pointer; } /* Jump targets leave room around classic page chrome. */ :target { scroll-margin-block: 6rem; } [data-jumpable] { scroll-margin-block: 6rem; } } @layer theme { :root { color-scheme: light; /* Typography */ --font-sans: Helvetica, Arial, sans-serif; --font-heading: Chicago, "ChicagoFLF", Charcoal, Helvetica, Arial, sans-serif; --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Core surfaces and text */ --background: #fbfbfb; --background-accent: #f0f1f2; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef1f4; --text: #101010; --muted: #585858; --muted-strong: #303030; --border: #8f8f8f; --border-strong: #4c4c4c; /* Semantic accents */ --primary: #1c4f9a; --primary-hover: #143f80; --primary-active: #0d2d61; --primary-text: #ffffff; --accent: #8a3a24; --accent-soft: #ece0d8; --success: #2f6a3c; --warning: #835f12; --danger: #8b2828; --info: #245c8f; /* Classic bevel chrome */ --highlight: #ffffff; --lowlight: #777777; --button-face: #f7f7f8; --button-face-light: #ffffff; --button-face-hover: #e9e5ff; --button-face-mid: #e8ebef; --button-face-dark: #c9c2eb; --button-edge: #242424; --button-groove: #9d9da3; --button-secondary-face: #edf0f4; --button-secondary-face-hover: #f8f9fb; --button-secondary-face-pressed: #c4cad3; --button-secondary-edge: #6f7784; --button-secondary-highlight: #ffffff; --button-blue-face: #e9e5ff; --button-blue-mid: #c8c0ee; --button-blue-dark: #877dca; --terminal-bg: #050505; --terminal-border: #2c2c2c; --terminal-text: #f7f3e8; /* Interaction and elevation */ --focus: #1c4f9a; --visited: #551a8b; --invalid: #c62828; --valid: #2e7d32; --selection: rgba(28, 79, 154, 0.18); --shadow-color: rgba(0, 0, 0, 0.28); --shadow-tight: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--lowlight) inset, 1px 1px 0 rgba(0, 0, 0, 0.16); --bevel-inset: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--lowlight) inset; --shadow-raised-outer: 0 0 0 1px var(--border-strong), 2px 2px 0 rgba(0, 0, 0, 0.24); --shadow-raised: var(--bevel-inset), var(--shadow-raised-outer); --shadow-pressed: 1px 1px 2px rgba(0, 0, 0, 0.44) inset, -1px -1px 0 var(--highlight) inset; /* Radii */ --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --radius-4: 10px; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Layout and control dimensions */ --container: 72rem; --container-narrow: 46rem; --container-wide: 88rem; --measure: 74ch; --control-height: 2.55rem; --line-height: 1.55; /* Elevation aliases for window chrome */ --surface-elev-3: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, var(--highlight)), var(--surface-2)); --elev-border-3: color-mix(in srgb, var(--border-strong) 84%, #000000); --elev-shadow-3: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--lowlight) inset, 0 0 0 1px var(--elev-border-3), 3px 3px 0 rgba(0, 0, 0, 0.26), 8px 8px 20px rgba(0, 0, 0, 0.18); } } @layer base { /* Page canvas */ body { background: var(--background); color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: var(--line-height); text-rendering: optimizeLegibility; } ::selection { background: var(--selection); } body>header, body>main, body>footer { width: min(100% - 2rem, var(--container)); margin-inline: auto; } body>header { padding-block: var(--space-5) var(--space-4); } body>main { line-height: 1.5; padding-block: var(--space-5) var(--space-7); } body>footer { border-top: 1px solid var(--border); color: var(--muted); padding-block: var(--space-5); } main>*+* { margin-top: var(--space-7); } main :where(p, ul, ol, dl) { margin-block: var(--space-3); } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--text); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; line-height: 1.08; margin: 0 0 var(--space-3); text-wrap: pretty; } /* Headings breathe above; collapsing keeps prose rhythm, guards keep container tops tight */ :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } h1 { font-size: 2.9rem; } h2 { font-size: 2.1rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.25rem; } h5, h6 { font-family: var(--font-heading); font-size: 1rem; text-transform: uppercase; } p, ol, ul, dl, blockquote, pre, table, figure { margin-block: 0 var(--space-4); } p, li, dd { max-width: var(--measure); } /* Inline text */ a { color: var(--primary); text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } a:visited { color: var(--visited); text-decoration-color: color-mix(in srgb, var(--visited) 40%, transparent); } a:hover { color: var(--primary-hover); text-decoration-color: currentColor; } :where(a, [role="link"])[aria-current]:not([aria-current="false"]) { color: var(--primary-active); font-weight: 700; text-decoration-color: currentColor; text-decoration-thickness: 0.12em; } strong { color: var(--text); font-weight: 700; } small, figcaption { color: var(--muted); font-size: 0.9rem; } mark { background: var(--accent-soft); border-radius: var(--radius-1); color: var(--text); padding: 0.08em 0.22em; } hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-6); } /* Blocks and code */ blockquote { background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft)); border: 1px solid var(--border); border-left: 0.35rem solid var(--accent); border-radius: var(--radius-2); box-shadow: var(--shadow-tight); color: var(--muted-strong); padding: var(--space-4) var(--space-5); } blockquote :last-child { margin-bottom: 0; } code, kbd, samp { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-1); color: var(--text); font-family: var(--font-mono); font-size: 0.92em; padding: 0.12em 0.32em; } kbd { border-color: var(--border-strong); box-shadow: 0 2px 0 var(--border-strong); } /* Top margin so samples clear margin-less demo blocks; sibling margin collapsing keeps prose rhythm unchanged */ pre { margin-top: var(--space-4); } pre:first-child { margin-top: 0; } pre { background: var(--terminal-bg); border: 1px solid var(--terminal-border); border-radius: var(--radius-2); box-shadow: var(--shadow-raised); color: var(--terminal-text); line-height: 1.55; overflow: auto; padding: var(--space-4); } pre code { background: transparent; border: 0; color: inherit; font-size: 0.95em; padding: 0; } /* Light sunken listing as the opt-in; terminal stays the default */ pre.light { background: #fdfdfd; border: 1px solid var(--border); border-radius: 0; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.18) inset; color: var(--text); } pre code .token-comment { color: #9a9a9a; font-style: italic; } pre code .token-tag, pre code .token-selector { color: #8fc7ff; } pre code .token-attr, pre code .token-property { color: #ffd37a; } pre code .token-string { color: #b7e68d; } pre code .token-keyword { color: #f2a86f; font-weight: 700; } pre code .token-number { color: #c7b8ff; } ul, ol { padding-left: 1.4rem; } /* Lists and data */ li+li { margin-top: var(--space-1); } dl { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: max-content 1fr; } dt { color: var(--muted-strong); font-weight: 700; } dd { margin: 0; } table { border-collapse: collapse; display: block; overflow-x: auto; width: 100%; } th, td { border-bottom: 1px solid var(--border); padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; } th { background: var(--surface-2); color: var(--muted-strong); font-size: 0.92rem; line-height: 1.3; padding-block: 0.9rem; text-transform: uppercase; } th[aria-sort]:not([aria-sort="none"]) { background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); color: var(--primary-active); white-space: nowrap; } th[aria-sort]:not([aria-sort="none"])::after { content: ""; display: inline-block; margin-left: 0.42rem; vertical-align: 0.12em; } th[aria-sort="ascending"]::after { border-color: transparent transparent currentColor; border-style: solid; border-width: 0 0.28rem 0.4rem; } th[aria-sort="descending"]::after { border-color: currentColor transparent transparent; border-style: solid; border-width: 0.4rem 0.28rem 0; } th[aria-sort="other"]::after { border: 2px solid currentColor; border-radius: 50%; height: 0.52rem; opacity: 0.78; width: 0.52rem; } tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); } figure { margin-inline: 0; } figcaption { margin-top: var(--space-2); } } @layer layout { /* Page shells */ body.layout-topbar, body.layout-sidebar, body.layout-scroll { min-height: 100vh; overflow-x: hidden; } body.layout-topbar { display: grid; grid-template-rows: auto 1fr auto; } /* Topbar shell */ body.layout-topbar>header, body.layout-topbar>main, body.layout-topbar>footer, body.layout-sidebar>header, body.layout-sidebar>main, body.layout-sidebar>footer, body.layout-scroll>header, body.layout-scroll>main, body.layout-scroll>footer { margin-inline: 0; width: 100%; } body.layout-topbar>header, body.layout-sidebar>header, body.layout-scroll>header { background: linear-gradient(180deg, var(--highlight), transparent 58%), linear-gradient(180deg, #dddddd, #c6c6c6); border-bottom: 1px solid var(--border-strong); box-shadow: 1px 1px 0 var(--highlight) inset, 0 2px 0 rgba(0, 0, 0, 0.18); padding: var(--space-2) max(1rem, calc((100vw - var(--container-wide)) / 2)); position: static; top: auto; z-index: auto; } body.layout-topbar>header>nav, body.layout-sidebar>header>nav, body.layout-scroll>header>nav { margin-inline: auto; width: min(100%, var(--container-wide)); } body.layout-topbar>main { margin-inline: auto; padding: var(--space-6) 1rem var(--space-7); width: min(100%, var(--container)); } body.layout-topbar>footer, body.layout-sidebar>footer, body.layout-scroll>footer { margin-inline: auto; padding-inline: 1rem; width: min(100%, var(--container)); } /* Sidebar shell */ body.layout-sidebar { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows: auto 1fr auto; } body.layout-sidebar>header { grid-area: header; } body.layout-sidebar>.sidebar { align-self: stretch; background: var(--background-accent); border-right: 1px solid var(--border); box-shadow: none; grid-area: sidebar; height: 100vh; max-height: 100vh; overflow: auto; padding: var(--space-3) 0; position: sticky; top: 0; } body.layout-sidebar>.sidebar nav, body.layout-sidebar>.sidebar nav ul, body.layout-sidebar>.sidebar nav ol { align-items: stretch; display: flex; flex-direction: column; } body.layout-sidebar>.sidebar nav ul, body.layout-sidebar>.sidebar nav ol { gap: var(--space-1); } body.layout-sidebar>.sidebar nav a { display: block; padding: 0.52rem var(--space-4); } body.layout-sidebar>main { grid-area: main; margin-inline: var(--space-5) auto; padding: var(--space-6) var(--space-5) var(--space-7) var(--space-6); width: min(calc(100% - var(--space-5)), var(--container)); } body.layout-sidebar>footer { grid-area: footer; } /* Mobile-first scroll shell */ body.layout-scroll { display: block; } body.layout-scroll>main, body.layout-scroll>footer { padding-inline: 0.75rem; } body.layout-scroll>main { margin-inline: auto; padding-block: var(--space-4) var(--space-6); width: min(100%, var(--container-narrow)); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .cluster { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); } .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } /* Responsive shell collapse */ @media (max-width: 48rem) { body.layout-topbar, body.layout-sidebar { display: block; } body.layout-topbar>header, body.layout-sidebar>header, body.layout-scroll>header { padding: var(--space-3) 0.75rem; position: static; width: auto; } body.layout-topbar>main, body.layout-sidebar>main { margin-inline: 0; padding: var(--space-4) 0.75rem var(--space-6); width: auto; } body.layout-topbar>footer, body.layout-sidebar>footer, body.layout-scroll>main, body.layout-scroll>footer { width: auto; } body.layout-sidebar>.sidebar { border-bottom: 1px solid var(--border-strong); border-right: 0; height: auto; max-height: none; overflow: visible; padding: var(--space-2) 0.75rem; position: sticky; top: 0; z-index: 2; } } } @layer components { /* Navigation */ nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; } nav a { border-radius: var(--radius-2); color: var(--text); text-decoration: none; } nav a:visited { color: var(--text); } nav a:hover { color: var(--primary); } nav ul, nav ol { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } nav li { margin: 0; max-width: none; } body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand) { align-items: center; background: transparent; border: 0; border-left: 0.25rem solid transparent; border-radius: 0; box-shadow: none; display: flex; font-weight: 700; min-height: 2.15rem; min-width: 0; padding: 0.46rem var(--space-4) 0.46rem calc(var(--space-4) - 0.25rem); user-select: none; } body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand) { justify-content: flex-start; text-align: left; } body.layout-sidebar>.sidebar nav a[aria-current]:not([aria-current="false"]):not([role="button"]):not(.brand) { background: color-mix(in srgb, var(--primary) 8%, transparent); border-left-color: var(--primary); color: var(--primary-active); } body.layout-sidebar>.sidebar nav a[aria-current]:not([aria-current="false"]):not([role="button"]):not(.brand) { box-shadow: none; } body.layout-sidebar>.sidebar nav a:not([role="button"]):not(.brand):hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); color: var(--primary); } body.layout-topbar>header nav a:not([role="button"]), body.layout-sidebar>header nav a:not([role="button"]), body.layout-scroll>header nav a:not([role="button"]) { align-items: center; background: transparent; border: 0; border-radius: var(--radius-1); box-shadow: none; display: inline-flex; font-weight: 700; min-height: 2rem; min-width: 0; padding: 0.35rem 0.55rem; text-align: left; } body.layout-topbar>header nav a:not([role="button"]):hover, body.layout-sidebar>header nav a:not([role="button"]):hover, body.layout-scroll>header nav a:not([role="button"]):hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } body.layout-topbar>header nav a[aria-current]:not([aria-current="false"]), body.layout-sidebar>header nav a[aria-current]:not([aria-current="false"]), body.layout-scroll>header nav a[aria-current]:not([aria-current="false"]) { background: transparent; color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.38rem; } body.layout-topbar>header nav .brand, body.layout-sidebar>header nav .brand, body.layout-scroll>header nav .brand { flex: 0 0 auto; letter-spacing: 0; padding-left: 0; } body.layout-topbar>header nav .brand-logo, body.layout-sidebar>header nav .brand-logo, body.layout-scroll>header nav .brand-logo { display: block; height: 2.45rem; max-width: min(13rem, 56vw); object-fit: contain; width: auto; } body.layout-topbar>header nav .brand:hover, body.layout-sidebar>header nav .brand:hover, body.layout-scroll>header nav .brand:hover { background: transparent; } body.layout-topbar>header nav .brand strong, body.layout-sidebar>header nav .brand strong, body.layout-scroll>header nav .brand strong { color: inherit; } body.layout-sidebar>.sidebar nav, body.layout-sidebar>.sidebar nav ul, body.layout-sidebar>.sidebar nav ol { align-items: stretch; flex-direction: column; justify-content: flex-start; width: 100%; } body.layout-sidebar>.sidebar nav a { width: 100%; } button.classic-nav-toggle { display: none; } button.classic-nav-toggle::before { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; content: ""; display: block; height: 0.8rem; width: 1.1rem; } button.classic-nav-toggle[aria-expanded="true"] { background: linear-gradient(180deg, var(--button-face-dark), #d8d2f7 58%, #eeeaff); border-color: #8076c0; box-shadow: 1px 2px 2px rgba(44, 35, 92, 0.38) inset, -1px -1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 1px rgba(0, 0, 0, 0.2); } @media (min-width: 48.001rem) { body.layout-topbar>header nav.classic-nav-enhanced button.classic-nav-toggle, body.layout-sidebar>header nav.classic-nav-enhanced button.classic-nav-toggle, body.layout-scroll>header nav.classic-nav-enhanced button.classic-nav-toggle { display: none; } } [aria-label="breadcrumb"] ol { color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding-left: 0; } [aria-label="breadcrumb"] li { margin: 0; } [aria-label="breadcrumb"] li+li::before { color: var(--border-strong); content: "/"; margin-right: var(--space-2); } /* Article panels */ article { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-raised-outer); display: flex; flex-direction: column; overflow: clip; position: relative; } article::after { border-radius: calc(var(--radius-3) - 1px); box-shadow: var(--bevel-inset); content: ""; inset: 0; pointer-events: none; position: absolute; } article>header, article>footer { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--highlight)), color-mix(in srgb, var(--surface-2) 70%, var(--surface))); border-color: color-mix(in srgb, var(--border) 72%, var(--surface)); padding-inline: var(--space-5); } article>header { border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, var(--surface)); margin-bottom: var(--space-4); padding-block: var(--space-4); } article>footer { border-top: 1px solid color-mix(in srgb, var(--border) 72%, var(--surface)); margin-top: auto; padding-block: var(--space-4); } article> :has(+ footer) { margin-block-end: var(--space-5); } article> :last-child, section> :last-child, aside> :last-child { margin-bottom: 0; } article> :not(header, footer) { margin-inline: var(--space-5); } article> :first-child:not(header) { margin-block-start: var(--space-5); } article> :last-child:not(footer) { margin-block-end: var(--space-5); } article.docs-sectioned>h3:not(:first-of-type) { margin-block-start: var(--space-7); } article.docs-sectioned> :is(.cluster, .grid, .menu, .tab-set, .toolbar, .window, details, nav, .stack)+pre { margin-block-start: var(--space-2); } article.docs-sectioned>.docs-menu-example { margin-inline: var(--space-5); width: min(calc(100% - var(--space-5) - var(--space-5)), 16rem); } /* Buttons */ /* CleanShot-style glossy button: soft face, lavender hover, tight shadow. */ :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button) { align-items: center; appearance: none; background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 58%, var(--button-face-mid)); border: 1px solid var(--button-groove); border-radius: calc(var(--radius-3) + 1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -2px 0 rgba(0, 0, 0, 0.11) inset, 0 1px 0 rgba(255, 255, 255, 0.64), 0 2px 1px rgba(0, 0, 0, 0.28); color: var(--text); display: inline-flex; font-weight: 700; gap: var(--space-2); justify-content: center; line-height: 1.2; min-height: 1.9rem; min-width: 2.75rem; padding: 0.18rem 0.8rem 0.22rem; text-align: center; text-decoration: none; user-select: none; --press-offset: 2px; } body.layout-sidebar>.sidebar button.classic-sidebar-toggle { display: none; } :is(a[role="button"], a.button):visited { color: var(--text); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button):hover { background: linear-gradient(180deg, #f8f6ff, var(--button-face-hover) 58%, #d8d1fb); border-color: #958bd6; box-shadow: 0 0 0 2px rgba(139, 125, 202, 0.16), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -3px 0 rgba(76, 61, 160, 0.18) inset, 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 2px rgba(0, 0, 0, 0.23); color: var(--text); text-decoration: none; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button):active { background: linear-gradient(180deg, var(--button-face-dark), #d8d2f7 58%, #eeeaff); border-color: #8076c0; box-shadow: 2px 2px 2px rgba(44, 35, 92, 0.46) inset, -1px -1px 0 rgba(255, 255, 255, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.32); transform: translate(var(--press-offset), var(--press-offset)); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button)[aria-pressed="true"] { background: linear-gradient(180deg, var(--button-face-dark), #d8d2f7 58%, #eeeaff); border-color: #8076c0; box-shadow: 2px 2px 2px rgba(44, 35, 92, 0.46) inset, -1px -1px 0 rgba(255, 255, 255, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.32); transform: translate(var(--press-offset), var(--press-offset)); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button)[aria-pressed="mixed"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--button-secondary-face-hover) 84%, var(--surface)) 0 0.38rem, var(--button-secondary-face-hover) 0.38rem 0.76rem); border-color: #8076c0; box-shadow: 2px 2px 2px rgba(44, 35, 92, 0.42) inset, -1px -1px 0 var(--button-face-light) inset; transform: translate(var(--press-offset), var(--press-offset)); } :is(button, [role="button"], .button)[aria-expanded]:not(.classic-nav-toggle):not(.classic-sidebar-toggle)::after, :is(button, [role="button"], .button)[aria-haspopup]:not([aria-haspopup="false"]):not(.classic-nav-toggle):not(.classic-sidebar-toggle)::after { border-color: currentColor transparent transparent; border-style: solid; border-width: 0.38rem 0.3rem 0; content: ""; flex: 0 0 auto; margin-left: auto; transition: transform 120ms ease; } :is(button, [role="button"], .button)[aria-expanded="true"]:not(.classic-nav-toggle):not(.classic-sidebar-toggle)::after { transform: rotate(180deg); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary { background: linear-gradient(180deg, var(--button-secondary-highlight), var(--button-secondary-face) 58%, #dbe0e7); border-color: var(--button-secondary-edge); color: #202833; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary:hover { background: linear-gradient(180deg, #ffffff, var(--button-secondary-face-hover) 58%, #d2d8e1); border-color: #606977; box-shadow: 0 0 0 2px rgba(96, 105, 119, 0.14), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -3px 0 rgba(72, 82, 96, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 2px rgba(0, 0, 0, 0.21); color: #1a222d; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).contrast { background: linear-gradient(180deg, #4a4a4a, #333333 46%, #232323); border-color: #1a1a1a; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.18) inset, -1px -1px 0 rgba(0, 0, 0, 0.4) inset, 1px 1px 0 rgba(0, 0, 0, 0.16); color: #ffffff; text-shadow: 0 -1px 0 #000000; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).outline { background: linear-gradient(180deg, #ffffff, #f8f9ff 58%, #eef1ff); border-color: #9da7c8; color: #0d2d61; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary:active { background: linear-gradient(180deg, #a6adb8, var(--button-secondary-face-pressed) 58%, #eef1f5); border-color: #545e6b; box-shadow: 2px 2px 2px rgba(32, 40, 51, 0.42) inset, -1px -1px 0 rgba(255, 255, 255, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.32); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).secondary[aria-pressed="true"] { background: linear-gradient(180deg, #a6adb8, var(--button-secondary-face-pressed) 58%, #eef1f5); border-color: #545e6b; box-shadow: 2px 2px 2px rgba(32, 40, 51, 0.42) inset, -1px -1px 0 rgba(255, 255, 255, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.32); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).outline:active { background: linear-gradient(180deg, #c6c0e6, var(--button-blue-mid) 58%, #eeeaff); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).contrast:active { background: linear-gradient(180deg, #181818, #262626 55%, #333333); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset, -1px -1px 0 rgba(255, 255, 255, 0.12) inset; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--primary); } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button).ghost:active { background: transparent; border-color: transparent; box-shadow: none; } /* OS9 ring on the form's true default button, the one Enter triggers (HIG: 3px ring, 1px gap) */ :is(button, input[type="submit"]):default { outline: 2px solid var(--button-edge); outline-offset: 1px; } /* Focused default button: ring recolors to the focus blue instead of stacking */ :is(button, input[type="submit"]):default:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 78%, transparent); outline-offset: 1px; } :is(button, [role="button"], .button)[aria-busy="true"] { pointer-events: none; position: relative; } :is(button, [role="button"], .button)[aria-busy="true"]::before { animation: classic-spin 0.8s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; height: 1em; width: 1em; } @keyframes classic-spin { to { transform: rotate(1turn); } } /* Forms */ form { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: var(--space-3); text-align: right; } form> :is(h1, h2, h3, h4, h5, h6, p, fieldset, article, section, hr, .toolbar, .notice, [role="alert"]) { grid-column: 1 / -1; } fieldset> :is(h1, h2, h3, h4, h5, h6, p, hr, .field, .field-row, .toolbar, .notice, [role="alert"]) { grid-column: 1 / -1; } form>small, fieldset>small { grid-column: 2; } /* Action rows: right-aligned in the control column with the default action rightmost (classic HIG dialog layout). Write secondary buttons first in markup so visual order matches tab order. */ form>.cluster, fieldset>.cluster { grid-column: 2; justify-content: flex-end; justify-self: stretch; text-align: left; } form> :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button) { grid-column: 2; justify-self: start; } form>br, fieldset>br, datalist { display: none; } label { color: var(--muted-strong); display: block; font-weight: 700; margin-bottom: var(--space-2); } form label { margin-bottom: 0; } form>label:not(.check, .switch), fieldset>label:not(.check, .switch), .field>label { align-self: start; justify-self: end; padding-top: 0.58rem; text-align: right; } fieldset { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--lowlight) inset; display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-5); text-align: right; } legend { color: var(--text); font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); margin-right: auto; padding-inline: var(--space-2); text-align: left; } /* Sunken well: depth comes from the inset shadow, not the border */ input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, :where([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"]):not(input, select, textarea) { appearance: none; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.34) inset, -1px -1px 0 rgba(255, 255, 255, 0.88) inset; color: var(--text); font-weight: 400; min-height: 1.9rem; padding: 0.3rem 0.5rem; text-align: left; width: 100%; } form> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter), fieldset> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter), .field> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter) { grid-column: 2; } form> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]), fieldset> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]), .field> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]) { grid-column: 2; } textarea { min-height: 8rem; resize: vertical; } /* OS9 popup button: single flat face, crisp edge, inset divider before the arrows */ select { background: url('data:image/svg+xml,') calc(100% - 0.55rem) 50% / 0.5rem 0.9rem no-repeat, linear-gradient(180deg, var(--button-groove), var(--button-groove)) calc(100% - 1.6rem) 50% / 1px calc(100% - 0.55rem) no-repeat, #f4f4f4; border: 1px solid var(--button-edge); border-radius: var(--radius-2); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); padding-right: 2rem; } /* Empty well when off; button-crisp edge and hard shadow (empty is not disabled) */ /* Type-identifying icons at the right edge, like native date/time pickers. Every glyph's ink ends at the same viewBox edge so they align vertically. */ input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"] { padding-right: 1.7rem; } input[type="search"] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } /* With content, the x takes the magnifier's place (requires a placeholder attribute); the native cancel button lands exactly on top of it when focused. Gated to engines that actually have a cancel button so the x is never a dead control (Firefox keeps the magnifier). */ @supports selector(::-webkit-search-cancel-button) { input[type="search"][placeholder]:not(:placeholder-shown) { background-image: url('data:image/svg+xml,'); } } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; background: url('data:image/svg+xml,') center / 1rem no-repeat #ffffff; height: 1rem; margin-right: -1.2rem; width: 1rem; } input[type="number"] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } input[type="email"] { background: url('data:image/svg+xml,@') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } input[type="tel"] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } input[type="url"] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } input[type="password"] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 1rem no-repeat #ffffff; } /* Datalist comboboxes get the popup triangle, not a calendar. The native indicator draws its own arrow as content, so it is hidden and the triangle lives on the input like the other type icons. */ input[list] { background: url('data:image/svg+xml,') calc(100% - 0.5rem) 50% / 0.75rem no-repeat #ffffff; padding-right: 1.7rem; } /* The native arrow only appears on hover/focus and is named differently across engines; hide both spellings. */ input[list]::-webkit-calendar-picker-indicator, input[list]::-webkit-list-button { display: none !important; } /* Date-like types get a classic calendar glyph; time gets a clock */ input:is([type="date"], [type="month"], [type="week"], [type="datetime-local"])::-webkit-calendar-picker-indicator { background: url('data:image/svg+xml,') right 50% / 1rem no-repeat; height: 1rem; margin: 0; opacity: 1; width: 1rem; } input[type="time"]::-webkit-calendar-picker-indicator { background: url('data:image/svg+xml,') right 50% / 1rem no-repeat; height: 1rem; margin: 0; opacity: 1; width: 1rem; } /* Number spinner as platinum little arrows */ input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; background: url('data:image/svg+xml,') center / 0.4rem 0.8rem no-repeat, linear-gradient(90deg, var(--border), var(--border)) 0 0 / 1px 100% no-repeat, linear-gradient(180deg, #f2f2f2, #d8d8d8); height: 100%; width: 1.2rem; } /* Square color swatch inside the well */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-strong); border-radius: 0; } input[type="checkbox"], input[type="radio"] { appearance: none; background: linear-gradient(135deg, #ffffff, #e8e8e8); border: 1px solid var(--button-edge); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); flex: 0 0 auto; height: 1rem; margin: 0; position: relative; width: 1rem; } input[type="checkbox"] { border-radius: var(--radius-1); } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: radial-gradient(circle at 65% 68%, var(--highlight), transparent 22%), radial-gradient(circle at 36% 30%, #c8d7f2, var(--button-blue-mid) 58%, var(--primary-active) 100%); } /* Bold black check that overshoots the box, like the OS9 original */ input[type="checkbox"]:checked::after { border: solid #050505; border-width: 0 0.16rem 0.16rem 0; content: ""; height: 0.72rem; left: 0.27rem; position: absolute; top: -0.1rem; transform: rotate(40deg); width: 0.32rem; } input[type="radio"]:checked::after { background: #050505; border-radius: 50%; content: ""; inset: 0.22rem; position: absolute; } input[type="range"] { appearance: none; background: transparent; min-height: 1.6rem; width: 100%; } input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(180deg, #a8a8a8, #d6d6d6); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset; height: 0.3rem; } /* Platinum "home plate" thumb drawn as SVG so every edge keeps its outline */ input[type="range"]::-webkit-slider-thumb { appearance: none; background: url('data:image/svg+xml,') center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35)); height: 1.4rem; margin-top: calc(-0.45rem - 1px); width: 1.2rem; } input[type="range"]::-moz-range-track { background: linear-gradient(180deg, #a8a8a8, #d6d6d6); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset; height: 0.3rem; } input[type="range"]::-moz-range-thumb { background: url('data:image/svg+xml,') center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35)); height: 1.4rem; width: 1.2rem; } /* File chooser button gets the classic button chrome */ input[type="file"]::file-selector-button { background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 46%, var(--button-face-mid)); border: 1px solid var(--button-groove); border-radius: var(--radius-3); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.85) inset, -1px -1px 0 rgba(0, 0, 0, 0.12) inset, 1px 1px 0 rgba(0, 0, 0, 0.16); color: var(--text); font: inherit; font-weight: 700; margin-right: 0.6rem; padding: 0.05rem 0.6rem; } input[type="color"] { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); padding: 0.15rem; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); } :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"]):is(:required, [aria-required="true"]) { border-left-color: var(--primary); } label:has(+ :is(input, select, textarea, [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"]):is(:required, [aria-required="true"]))::after, label:has(:is(input, select, textarea, [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"]):is(:required, [aria-required="true"]))::after { color: var(--danger); content: " *"; } input[readonly]:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), textarea[readonly], :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"])[aria-readonly="true"] { background: var(--surface-2); color: var(--muted-strong); cursor: default; } input:disabled, select:disabled, textarea:disabled, button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; } input:user-invalid, select:user-invalid, textarea:user-invalid, input[aria-invalid]:not([aria-invalid="false"]), select[aria-invalid]:not([aria-invalid="false"]), textarea[aria-invalid]:not([aria-invalid="false"]), :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"])[aria-invalid]:not([aria-invalid="false"]) { border-color: var(--invalid); } input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"], :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"])[aria-invalid="false"] { border-color: var(--valid); } /* Field messages: pair the border tint with visible text */ small[data-variant] { color: var(--variant); font-weight: 700; } /* OS9 focus band: hugs the control frame instead of floating off it */ :focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 78%, transparent); outline-offset: 0; } /* Form helpers */ .field { align-items: center; display: grid; grid-column: 1 / -1; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); margin-bottom: 0; } .field-row { display: contents; } .field>small, .field>p { grid-column: 2; margin-bottom: 0; text-align: left; } .check { align-items: center; color: var(--text); display: flex; font-weight: 500; gap: var(--space-2); grid-column: 2; justify-self: start; margin: 0; text-align: left; } .switch { align-items: center; display: inline-flex; gap: var(--space-2); grid-column: 2; justify-self: start; text-align: left; } form> :is([role="checkbox"], [role="radio"], [role="switch"]), fieldset> :is([role="checkbox"], [role="radio"], [role="switch"]), .field> :is([role="checkbox"], [role="radio"], [role="switch"]) { grid-column: 2; justify-self: start; } /* Integer-pixel geometry keeps the 1px thumb gap even on every side */ .switch input { appearance: none; background: #ffffff; border: 1px solid var(--button-edge); border-radius: 5px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset; height: 18px; position: relative; width: 40px; } .switch input:checked::after { content: none; } .switch input::before { background: linear-gradient(135deg, #f8f8f8, #d6d6d6); border: 1px solid var(--button-edge); border-radius: 5px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); content: ""; height: 14px; left: 1px; position: absolute; top: 1px; transition: transform 70ms ease; width: 14px; } .switch input:checked { background: var(--primary); } .switch input:checked::before { transform: translateX(22px); /* 40px track - borders - gaps - 14px thumb */ } :where([role="checkbox"], [role="radio"], [role="switch"]) { align-items: center; color: var(--text); cursor: pointer; display: inline-flex; font-weight: 500; gap: var(--space-2); min-height: 1.6rem; text-align: left; user-select: none; } :where([role="checkbox"], [role="radio"])::before { align-items: center; background: radial-gradient(circle at 32% 28%, var(--highlight), #ededed 34%, #b7b7b7 70%, #838383 100%); border: 1px solid var(--button-edge); box-shadow: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--button-groove) inset, 1px 1px 0 rgba(0, 0, 0, 0.22); color: #0a1d42; content: ""; display: inline-flex; flex: 0 0 auto; font-size: 0.88rem; font-weight: 900; height: 1.15rem; justify-content: center; line-height: 1; width: 1.15rem; } [role="checkbox"]::before { border-radius: var(--radius-1); } [role="radio"]::before { border-radius: 50%; } [role="checkbox"][aria-checked="true"]::before { background: radial-gradient(circle at 65% 68%, var(--highlight), transparent 22%), radial-gradient(circle at 36% 30%, #c8d7f2, var(--button-blue-mid) 58%, var(--primary-active) 100%); content: "\2713"; } [role="checkbox"][aria-checked="mixed"]::before { background: radial-gradient(circle at 65% 68%, var(--highlight), transparent 22%), radial-gradient(circle at 36% 30%, #dbe6fb, var(--button-blue-mid) 58%, var(--primary-active) 100%); content: "\2013"; } [role="radio"][aria-checked="true"]::before { background: radial-gradient(circle at 50% 50%, #0a1d42 0 0.28rem, transparent 0.3rem), radial-gradient(circle at 65% 68%, var(--highlight), transparent 22%), radial-gradient(circle at 36% 30%, #c8d7f2, var(--button-blue-mid) 58%, var(--primary-active) 100%); } [role="switch"]::before { background: radial-gradient(circle at 0.68rem 50%, var(--highlight) 0 0.12rem, var(--button-face) 0.13rem 0.45rem, var(--button-edge) 0.46rem 0.54rem, transparent 0.55rem), linear-gradient(180deg, #858585, #b4b4b4 42%, #e8e8e8 100%); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48) inset, -1px -1px 0 var(--highlight) inset; content: ""; flex: 0 0 auto; height: 1.35rem; width: 2.45rem; } [role="switch"][aria-checked="true"]::before { background: radial-gradient(circle at calc(100% - 0.68rem) 50%, var(--highlight) 0 0.12rem, var(--button-face) 0.13rem 0.45rem, var(--button-edge) 0.46rem 0.54rem, transparent 0.55rem), linear-gradient(180deg, #254e91, #5f82bd 42%, #dbe6fb 100%); } /* Feedback and status */ [role="alert"], .notice { background: color-mix(in srgb, var(--info) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border)); border-left: 0.35rem solid var(--info); border-radius: var(--radius-2); box-shadow: var(--shadow-tight); padding: var(--space-4); } [data-variant="success"] { --variant: var(--success); } [data-variant="warning"] { --variant: var(--warning); } [data-variant="danger"] { --variant: var(--danger); } [data-variant="info"] { --variant: var(--info); } .notice[data-variant], [role="alert"][data-variant] { background: color-mix(in srgb, var(--variant) 10%, var(--surface)); border-color: color-mix(in srgb, var(--variant) 45%, var(--border)); border-left-color: var(--variant); } :where([role="status"], [role="log"], [aria-live]:not([aria-live="off"])):not(.status):not(.visually-hidden) { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 36%, var(--border)); border-left: 0.35rem solid var(--success); border-radius: var(--radius-2); box-shadow: var(--shadow-tight); color: var(--muted-strong); padding: var(--space-4); } :where([role="status"], [role="log"], [aria-live]:not([aria-live="off"])):not(.status):not(.visually-hidden)[aria-busy="true"] { align-items: center; display: flex; gap: var(--space-2); } :where([role="status"], [role="log"], [aria-live]:not([aria-live="off"])):not(.status):not(.visually-hidden)[aria-busy="true"]::before { animation: classic-spin 0.8s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; flex: 0 0 auto; height: 1em; width: 1em; } .badge { align-items: center; background: color-mix(in srgb, var(--surface-2) 72%, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-1); color: var(--muted-strong); display: inline-flex; font-size: 0.82rem; font-weight: 700; line-height: 1; min-height: 1.35rem; padding: 0.18rem 0.48rem; white-space: nowrap; } .badge[data-variant] { background: color-mix(in srgb, var(--variant) 7%, var(--surface)); border-color: color-mix(in srgb, var(--variant) 34%, var(--border)); color: var(--variant); } .status { align-items: center; display: inline-flex; gap: var(--space-2); } .status::before { background: var(--success); border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 14%, transparent); content: ""; height: 0.55rem; width: 0.55rem; } .status[data-variant]::before { background: var(--variant); box-shadow: 0 0 0 2px color-mix(in srgb, var(--variant) 14%, transparent); } /* Disclosure and meters */ details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-tight); padding: var(--space-3) var(--space-4); } details+details { margin-top: var(--space-2); } summary { color: var(--muted-strong); font-weight: 700; } details[open] summary { margin-bottom: var(--space-3); } progress, meter { accent-color: var(--primary); display: block; height: 0.7rem; width: 100%; } progress { appearance: none; background: #ffffff; border: 1px solid var(--border); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset; } progress::-webkit-progress-bar { background: transparent; } progress::-webkit-progress-value { background: linear-gradient(180deg, #8caade, var(--primary) 55%, #16345e); border-right: 1px solid #0d2d61; transition: width 150ms ease; } progress::-moz-progress-bar { background: linear-gradient(180deg, #8caade, var(--primary) 55%, #16345e); border-right: 1px solid #0d2d61; } /* Indeterminate: platinum barber pole */ progress:indeterminate::-webkit-progress-bar { animation: classic-barber 1.2s linear infinite; background: repeating-linear-gradient( 135deg, var(--primary) 0 0.6rem, #8caade 0.6rem 1.2rem ); background-size: 1.7rem 100%; } progress:indeterminate::-moz-progress-bar { animation: classic-barber 1.2s linear infinite; background: repeating-linear-gradient( 135deg, var(--primary) 0 0.6rem, #8caade 0.6rem 1.2rem ); background-size: 1.7rem 100%; } @keyframes classic-barber { to { background-position: 1.7rem 0; } } /* WebKit meters keep native appearance (appearance:none breaks the value pseudo-elements); the sunken well is drawn on the bar pseudo instead. */ meter::-webkit-meter-bar { background: #ffffff; border: 1px solid var(--border); border-radius: 0; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset; height: 0.7rem; } meter::-webkit-meter-optimum-value { background: linear-gradient(180deg, #7fb389, var(--success) 55%, #1c4426); } meter::-webkit-meter-suboptimum-value { background: linear-gradient(180deg, #f6e08a, #e3b71f 55%, #7a5c05); } meter::-webkit-meter-even-less-good-value { background: linear-gradient(180deg, #cf7f7f, var(--danger) 55%, #4d1414); } /* Firefox draws the well on the element and cannot color by zone */ @supports selector(::-moz-meter-bar) { meter { appearance: none; background: #ffffff; border: 1px solid var(--border); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22) inset; } } meter::-moz-meter-bar { background: linear-gradient(180deg, #7fb389, var(--success) 55%, #1c4426); } :where([role="progressbar"], [role="meter"]) { background: linear-gradient(180deg, #898989, #bcbcbc 42%, #f3f3f3 100%); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.42) inset, -1px -1px 0 var(--highlight) inset; display: block; height: 0.8rem; overflow: hidden; position: relative; width: 100%; } :where([role="progressbar"], [role="meter"])::before { background: linear-gradient(180deg, #254e91, #5f82bd 42%, #dbe6fb 100%); content: ""; display: block; height: 100%; width: var(--value, 0%); } [role="progressbar"]:not([aria-valuenow])::before { animation: classic-progress 1.3s ease-in-out infinite alternate; width: 38%; } [role="slider"] { display: block; min-height: 1.6rem; position: relative; width: 100%; } [role="slider"]::before { background: linear-gradient(180deg, #898989, #bcbcbc 42%, #f3f3f3 100%); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.42) inset, -1px -1px 0 var(--highlight) inset; content: ""; height: 0.55rem; left: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } [role="slider"]::after { background: linear-gradient(180deg, var(--highlight), var(--button-face) 48%, var(--button-face-mid) 49%, var(--button-face-dark)); border: 1px solid var(--button-edge); border-radius: 999px; box-shadow: 1px 1px 0 var(--highlight) inset, -1px -1px 0 var(--button-groove) inset, 0 2px 0 #5f5f5f, 1px 3px 2px rgba(0, 0, 0, 0.22); content: ""; height: 1.45rem; left: var(--value, 50%); position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.15rem; } @keyframes classic-progress { to { transform: translateX(165%); } } /* Tabs and toolbars */ .tab-set { min-width: 0; } nav.tabs, .tabs, [role="tablist"] { align-items: flex-end; background: linear-gradient(180deg, #f8f9fb, #eceff4); border: 1px solid var(--button-groove); border-radius: var(--radius-3) var(--radius-3) 0 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(0, 0, 0, 0.08) inset; display: flex; flex-wrap: nowrap; gap: 1px; justify-content: flex-start; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: var(--space-2) var(--space-2) 0; scrollbar-width: thin; } nav.tabs a.tab, .tab, [role="tab"] { align-items: center; background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 58%, var(--button-face-mid)); border-color: var(--button-groove) var(--button-groove) color-mix(in srgb, var(--button-groove) 82%, var(--surface)) var(--button-groove); border-style: solid; border-width: 1px; border-radius: var(--radius-3) var(--radius-3) 0 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -2px 0 rgba(0, 0, 0, 0.07) inset, 0 2px 1px rgba(0, 0, 0, 0.12); color: var(--muted-strong); display: inline-flex; flex: 0 0 auto; font-weight: 700; line-height: 1.2; max-width: min(18rem, calc(100vw - 4rem)); min-height: 2.16rem; min-width: 0; overflow: hidden; padding: 0.4rem 0.88rem 0.46rem; position: relative; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; --press-offset: 1px; } nav.tabs a.tab:visited, a.tab:visited { color: var(--muted-strong); } nav.tabs a.tab[aria-current]:not([aria-current="false"]), .tab[aria-current]:not([aria-current="false"]), [role="tab"][aria-selected="true"] { background: linear-gradient(180deg, #ffffff, #f8f9ff 58%, var(--surface)); border-color: #9da7c8 #9da7c8 var(--surface) #9da7c8; box-shadow: 0 1px 0 var(--highlight) inset, 0 2px 0 color-mix(in srgb, var(--primary) 42%, transparent) inset; color: var(--primary-active); margin-bottom: -1px; min-height: 2.28rem; padding-bottom: 0.5rem; z-index: 1; } nav.tabs a.tab:hover, .tab:hover, [role="tab"]:hover { background: linear-gradient(180deg, #ffffff, #f4f3ff 58%, #e8e5ff); border-color: #a69cdd; color: var(--primary-hover); } nav.tabs a.tab[aria-current]:not([aria-current="false"]):hover, .tab[aria-current]:not([aria-current="false"]):hover, [role="tab"][aria-selected="true"]:hover { background: linear-gradient(180deg, #ffffff, #f8f9ff 58%, var(--surface)); color: var(--primary-active); } nav.tabs a.tab:active, .tab:active, [role="tab"]:active { background: linear-gradient(180deg, #d8d2f7, #e8e5ff 58%, #f8f6ff); border-color: #8f85ca; box-shadow: 1px 2px 2px rgba(44, 35, 92, 0.32) inset, -1px -1px 0 rgba(255, 255, 255, 0.42) inset; color: var(--primary-active); } nav.tabs a.tab[aria-current]:not([aria-current="false"]):active, .tab[aria-current]:not([aria-current="false"]):active, [role="tab"][aria-selected="true"]:active { background: linear-gradient(180deg, #e4e0fa, #f0edff 58%, var(--surface)); border-color: #8f85ca #8f85ca var(--surface) #8f85ca; box-shadow: 1px 2px 2px rgba(44, 35, 92, 0.24) inset, 0 2px 0 color-mix(in srgb, var(--primary) 34%, transparent) inset; color: var(--primary-active); } nav.tabs + :where(.tab-panel, [role="tabpanel"]), .tabs + :where(.tab-panel, [role="tabpanel"]), [role="tablist"] + :where(.tab-panel, [role="tabpanel"]) { background: var(--surface); border: 1px solid var(--button-groove); border-top: 0; box-shadow: 0 1px 0 var(--highlight) inset, 0 2px 1px rgba(0, 0, 0, 0.14); margin-top: 0; padding: var(--space-4); } :where(nav.tabs, .tabs, [role="tablist"])[aria-orientation="vertical"] { align-items: stretch; border-radius: var(--radius-2); flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: var(--space-2); } :where(nav.tabs, .tabs, [role="tablist"])[aria-orientation="vertical"] :where(.tab, [role="tab"]) { border-radius: var(--radius-3); border-width: 1px; justify-content: flex-start; margin-right: 0; max-width: none; width: 100%; } :where(nav.tabs, .tabs, [role="tablist"])[aria-orientation="vertical"] :where(.tab, [role="tab"])[aria-current]:not([aria-current="false"]), :where(nav.tabs, .tabs, [role="tablist"])[aria-orientation="vertical"] [role="tab"][aria-selected="true"] { border-color: #9da7c8 #9da7c8 #9da7c8 var(--primary); margin-bottom: 0; min-height: 2.16rem; padding-bottom: 0.46rem; } .toolbar { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-3); box-shadow: var(--shadow-tight); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); } :where(.toolbar, [role="toolbar"])[aria-orientation="vertical"] { align-items: stretch; flex-direction: column; } .toolbar button, .toolbar [role="button"], .toolbar .button { border-radius: var(--radius-3); border-width: 1px; min-height: 2.05rem; padding: 0.34rem 0.62rem; } /* Responsive component behavior */ @media (max-width: 48rem) { body.layout-topbar>header nav, body.layout-topbar>header nav ul, body.layout-topbar>header nav ol, body.layout-sidebar>header nav, body.layout-sidebar>header nav ul, body.layout-sidebar>header nav ol, body.layout-scroll>header nav, body.layout-scroll>header nav ul, body.layout-scroll>header nav ol { align-items: stretch; flex-direction: column; justify-content: flex-start; width: 100%; } body.layout-topbar>header nav a, body.layout-sidebar>header nav a, body.layout-scroll>header nav a { display: block; } body.layout-topbar>header nav.classic-nav-enhanced, body.layout-sidebar>header nav.classic-nav-enhanced, body.layout-scroll>header nav.classic-nav-enhanced { align-items: center; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; } body.layout-topbar>header nav.classic-nav-enhanced .brand, body.layout-sidebar>header nav.classic-nav-enhanced .brand, body.layout-scroll>header nav.classic-nav-enhanced .brand { display: inline-flex; min-width: 0; } body.layout-topbar>header nav.classic-nav-enhanced>ul, body.layout-topbar>header nav.classic-nav-enhanced>ol, body.layout-sidebar>header nav.classic-nav-enhanced>ul, body.layout-sidebar>header nav.classic-nav-enhanced>ol, body.layout-scroll>header nav.classic-nav-enhanced>ul, body.layout-scroll>header nav.classic-nav-enhanced>ol { grid-column: 1 / -1; } body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle, body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle, body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle { display: inline-flex; justify-self: end; min-height: 2.2rem; padding: 0.38rem 0.55rem; } body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul, body.layout-topbar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol, body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul, body.layout-sidebar>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol, body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ul, body.layout-scroll>header nav.classic-nav-enhanced .classic-nav-toggle[aria-expanded="false"]~ol { display: none; } body.layout-topbar>header nav.classic-nav-enhanced li a, body.layout-sidebar>header nav.classic-nav-enhanced li a, body.layout-scroll>header nav.classic-nav-enhanced li a { width: 100%; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced { display: grid; gap: var(--space-2); } body.layout-sidebar>.sidebar.classic-sidebar-enhanced button.classic-sidebar-toggle { align-items: center; display: flex; gap: var(--space-2); justify-content: space-between; min-height: 2.35rem; padding: 0.42rem 0.7rem; width: 100%; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced button.classic-sidebar-toggle::after { border-color: currentColor transparent transparent; border-style: solid; border-width: 0.38rem 0.3rem 0; content: ""; flex: 0 0 auto; margin-left: var(--space-2); transition: transform 120ms ease; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced button.classic-sidebar-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } body.layout-sidebar>.sidebar.classic-sidebar-enhanced button.classic-sidebar-toggle>span:first-child { flex: 0 0 auto; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced .classic-sidebar-toggle-current { color: var(--muted-strong); flex: 1 1 auto; font-size: 0.92rem; font-weight: 700; margin-left: auto; max-width: 55%; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced button.classic-sidebar-toggle[aria-expanded="false"]+nav { display: none; } body.layout-sidebar>.sidebar.classic-sidebar-enhanced nav { background: var(--background-accent); border: 1px solid var(--border); max-height: min(42vh, 20rem); overflow-y: auto; } .toolbar { align-items: stretch; flex-direction: column; } .toolbar button, .toolbar [role="button"], .toolbar .button { width: 100%; } form, fieldset, .field { grid-template-columns: 1fr; text-align: left; } form>small, fieldset>small, .field>small, .field>p, .check, .switch, form> :is([role="checkbox"], [role="radio"], [role="switch"]), fieldset> :is([role="checkbox"], [role="radio"], [role="switch"]), .field> :is([role="checkbox"], [role="radio"], [role="switch"]), form>.cluster, fieldset>.cluster, form> :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button), form> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter), fieldset> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter), .field> :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), select, textarea, progress, meter), form> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]), fieldset> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]), .field> :is([role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="progressbar"], [role="meter"]) { grid-column: 1; } form>label:not(.check, .switch), fieldset>label:not(.check, .switch), .field>label { justify-self: start; padding-top: 0; text-align: left; } } /* Menus and pagination */ .menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-raised); list-style: none; margin: 0; padding: var(--space-2); } :where([role="menu"], [role="listbox"], [role="tree"]) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-raised); list-style: none; margin: 0; padding: var(--space-2); } [role="menubar"] { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-tight); display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: var(--space-2); } .menu li { margin: 0; max-width: none; } .menu a, .menu button { align-items: center; background: transparent; border: 0; border-radius: var(--radius-1); box-shadow: none; color: var(--text); display: flex; justify-content: space-between; min-height: 2.15rem; padding: 0.38rem 0.55rem; text-decoration: none; width: 100%; } :where( [role="menu"] [role="menuitem"], [role="menu"] [role="menuitemcheckbox"], [role="menu"] [role="menuitemradio"], [role="menubar"] [role="menuitem"], [role="menubar"] [role="menuitemcheckbox"], [role="menubar"] [role="menuitemradio"], [role="listbox"]:not(.classic-command-palette .menu)>[role="option"], [role="tree"] [role="treeitem"] ) { align-items: center; background: transparent; border: 0; border-radius: var(--radius-1); box-shadow: none; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; min-height: 2.15rem; padding: 0.38rem 0.55rem; text-decoration: none; width: 100%; } .menu a:visited { color: var(--text); } .menu a:hover, .menu button:hover { background: var(--surface-2); color: var(--primary); } :where( [role="menu"] [role="menuitem"], [role="menu"] [role="menuitemcheckbox"], [role="menu"] [role="menuitemradio"], [role="menubar"] [role="menuitem"], [role="menubar"] [role="menuitemcheckbox"], [role="menubar"] [role="menuitemradio"], [role="listbox"]:not(.classic-command-palette .menu)>[role="option"], [role="tree"] [role="treeitem"] ):hover { background: var(--surface-2); color: var(--primary); } :where( [role="menuitemcheckbox"], [role="menuitemradio"] )[aria-checked="true"]::after { color: var(--primary-active); content: "\2713"; font-weight: 900; margin-left: var(--space-4); } :where( [role="menuitemcheckbox"], [role="menuitemradio"] )[aria-checked="mixed"]::after { color: var(--primary-active); content: "\2013"; font-weight: 900; margin-left: var(--space-4); } :where( [role="option"], [role="treeitem"], [role="row"], [role="gridcell"] )[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary-active); outline: 2px solid color-mix(in srgb, var(--primary) 46%, transparent); outline-offset: -2px; } :where([role="listbox"], [role="tree"], [role="grid"])[aria-multiselectable="true"] { box-shadow: var(--shadow-raised), 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); } .pagination { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding-left: 0; } .pagination li { margin: 0; } .pagination a { align-items: center; background: linear-gradient(180deg, var(--button-face-light), var(--button-face) 58%, var(--button-face-mid)); border: 1px solid var(--button-groove); border-radius: calc(var(--radius-3) + 1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -2px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.64), 0 2px 1px rgba(0, 0, 0, 0.23); color: var(--text); display: inline-flex; font-weight: 700; justify-content: center; line-height: 1.2; min-height: 2rem; min-width: 2.45rem; padding: 0.32rem 0.78rem 0.38rem; text-decoration: none; user-select: none; --press-offset: 2px; } .pagination a:visited { color: var(--text); } .pagination a:hover { background: linear-gradient(180deg, #f8f6ff, var(--button-face-hover) 58%, #d8d1fb); border-color: #958bd6; box-shadow: 0 0 0 2px rgba(139, 125, 202, 0.14), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -3px 0 rgba(76, 61, 160, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 2px rgba(0, 0, 0, 0.2); color: var(--text); text-decoration: none; } .pagination a[aria-current]:not([aria-current="false"]) { background: linear-gradient(180deg, #ffffff, #f8f9ff 58%, #eef1ff); border-color: #647aa8; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent), 0 1px 0 var(--highlight) inset, 0 -2px 0 rgba(13, 45, 97, 0.1) inset, 0 2px 1px rgba(0, 0, 0, 0.23); color: var(--primary-active); } .pagination a[aria-current]:not([aria-current="false"]):hover { background: linear-gradient(180deg, #ffffff, #f4f6ff 58%, #e3e9fb); color: var(--primary-active); } .pagination a:active, .pagination a[aria-current]:not([aria-current="false"]):active { background: linear-gradient(180deg, var(--button-face-dark), #d8d2f7 58%, #eeeaff); border-color: #8076c0; box-shadow: 2px 2px 2px rgba(44, 35, 92, 0.46) inset, -1px -1px 0 rgba(255, 255, 255, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.32); color: var(--primary-active); text-decoration: none; } /* Window chrome and command palette */ .window { background: var(--surface-elev-3); border: 1px solid var(--elev-border-3); border-radius: var(--radius-3); box-shadow: var(--elev-shadow-3); overflow: hidden; } .window-titlebar { align-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 24%, var(--highlight)), color-mix(in srgb, var(--primary) 10%, var(--surface-2))); border-bottom: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border)); color: color-mix(in srgb, var(--primary) 78%, #000000); display: flex; font-size: 0.92rem; font-weight: 700; justify-content: space-between; letter-spacing: 0; padding: 0.45rem 0.7rem; text-transform: uppercase; } .window-pane { background: var(--surface); padding: var(--space-4); } .window-statusbar { background: var(--surface-2); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; padding: 0.35rem 0.65rem; } dialog.classic-command-palette { max-width: min(42rem, calc(100vw - 1.5rem)); padding: 0; width: min(42rem, calc(100vw - 1.5rem)); } .classic-command-palette .window-titlebar { align-items: flex-start; flex-wrap: wrap; gap: 0.25rem 0.7rem; } .classic-command-palette .window-titlebar small { margin-left: auto; white-space: nowrap; } .classic-command-palette .menu { min-height: 10.5rem; overflow: auto; } .classic-command-palette [role="option"] { cursor: pointer; } .classic-command-palette [role="option"]:hover .classic-command-item { background: var(--button-secondary-face-hover); } .classic-command-palette [role="option"][aria-selected="true"] { background: transparent; outline: 0; } .classic-command-item { align-items: flex-start; background: var(--button-secondary-face); border: 2px solid; border-color: var(--button-secondary-highlight) var(--button-secondary-edge) var(--button-secondary-edge) var(--button-secondary-highlight); border-radius: var(--radius-2); box-shadow: 1px 1px 0 var(--button-face-light) inset, -1px -1px 0 var(--button-groove) inset; color: var(--text); display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; justify-content: space-between; min-height: 2.15rem; padding: 0.5rem 0.65rem; text-align: left; width: 100%; } .classic-command-palette [role="option"][aria-selected="true"] .classic-command-item { outline: 3px solid var(--focus); outline-offset: 2px; } .classic-command-empty { align-items: center; border: 1px dashed var(--border); border-radius: var(--radius-2); color: var(--muted-strong); display: grid; gap: 0.35rem; min-height: 9rem; padding: var(--space-4); place-items: center; text-align: center; } /* Dialogs and app primitives */ dialog, [role="dialog"], [role="alertdialog"] { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: 0 24px 70px var(--shadow-color); color: var(--text); max-width: min(34rem, calc(100vw - 2rem)); padding: var(--space-5); } dialog::backdrop { background: rgba(20, 18, 16, 0.5); } :where([role="dialog"], [role="alertdialog"])[aria-modal="true"] { box-shadow: 0 0 0 100vmax rgba(20, 18, 16, 0.5), 0 24px 70px var(--shadow-color); left: 50%; max-height: calc(100vh - 2rem); overflow: auto; position: fixed; top: 50%; transform: translate(-50%, -50%); width: min(34rem, calc(100vw - 2rem)); z-index: 100; } dialog.dialog-preview { display: block; margin: 0; max-width: 100%; position: static; width: 100%; } [role="tooltip"] { background: #2f2f2f; border: 1px solid #050505; border-radius: var(--radius-2); box-shadow: var(--shadow-raised); color: #ffffff; font-size: 0.88rem; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.35rem 0.55rem; z-index: 120; } .avatar { align-items: center; aspect-ratio: 1; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 50%; color: var(--primary); display: inline-flex; font-weight: 800; justify-content: center; width: 2.4rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-3); box-shadow: var(--shadow-tight); padding: var(--space-4); } .stat strong { display: block; font-family: var(--font-serif); font-size: 2rem; line-height: 1; } } @layer utilities { /* Text helpers */ .lead { color: var(--muted-strong); font-size: 1.16rem; max-width: var(--measure); } .muted { color: var(--muted); } .compact { margin-bottom: var(--space-2); } .text-center { text-align: center; } .nowrap { white-space: nowrap; } /* Interaction polish */ :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a) { transition: transform 50ms ease, box-shadow 50ms ease, filter 140ms ease, background 80ms ease, color 130ms ease; } :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a):hover { filter: saturate(1.04); } /* Press is much faster than the release so controls feel light. */ :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .menu a, .menu button, .pagination a, [role="tab"], nav a):active { transform: translate(var(--press-offset, 1px), var(--press-offset, 1px)); transition-duration: 15ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media print { *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } html, body { background: #ffffff !important; color: #000000 !important; min-height: 0 !important; } body.layout-topbar, body.layout-sidebar, body.layout-scroll { display: block !important; overflow: visible !important; } body>header, body.layout-sidebar>.sidebar, body>footer, button.classic-nav-toggle, button.classic-sidebar-toggle { display: none !important; } body>main, body.layout-topbar>main, body.layout-sidebar>main, body.layout-scroll>main { margin: 0 !important; padding: 0 !important; width: 100% !important; } article, .window, .notice, .stat { background: #ffffff !important; border: 1px solid #999999 !important; break-inside: avoid; color: #000000 !important; overflow: visible !important; } article::after { content: none !important; } article>header, article>footer { background: transparent !important; } pre { break-inside: avoid; overflow: visible; white-space: pre-wrap; } code { overflow-wrap: anywhere; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.9em; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } } /* Accessibility and layout escape hatches */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } }