/* ========================================================================== Larsa — base layer Reset, element defaults, typography, and the direction-agnostic rules. Every rule in this file and in components.css uses logical properties (inline-start / block-end / padding-inline) rather than left and right. This panel ships in fifty-odd languages, ten of which are written right to left; the previous one hard-coded RTL and would have needed a second stylesheet to serve Spanish. Logical properties mean `dir="rtl"` on is the entire implementation. ========================================================================== */ /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 2; scrollbar-gutter: stable; } /* Smooth scrolling only for people who did not ask for stillness, and only when a real anchor jump happens -- not while a script is restoring scroll. */ @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); font-weight: var(--fw-reg); letter-spacing: var(--tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; font-variant-numeric: proportional-nums; overflow-wrap: break-word; } /* Arabic-script pages: raise the leading, drop the Latin tracking (which closes up joined letterforms and hurts them), and let the browser pick the Arabic face first so a stray Latin glyph does not drag the whole line into Inter's metrics. */ :root[lang="fa"] body, :root[lang="ar"] body, :root[lang="ur"] body, :root[lang="ps"] body, :root[lang="ckb"] body, :root[lang="sd"] body { font-family: var(--font-arabic); line-height: var(--lh-body); letter-spacing: 0; } :root[lang="fa"], :root[lang="ar"], :root[lang="ur"], :root[lang="ps"], :root[lang="ckb"], :root[lang="sd"] { --lh-tight: 1.4; --lh-snug: 1.55; --lh-normal: 1.7; --lh-body: 1.9; --tracking-tight: 0; --tracking-snug: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } /* Deliberately NOT `svg { fill: currentColor }`. Every icon in this codebase is stroke-drawn and carries `fill="none"` as a presentation attribute, and a CSS declaration beats an attribute -- a global fill turns the whole icon set into solid blobs. Icons take their colour from `stroke="currentColor"`, which the sprite sets itself. A genuinely filled glyph asks for `.icon-solid`. */ .icon-solid { fill: currentColor; stroke: none; } /* An icon with no intrinsic size falls back to 300x150. That is not a subtle defect -- one un-sized nav icon rendered as a rectangle wider than the sidebar. Every inline icon gets a size from its context; this is the floor so a new one can never be enormous. */ svg:not([width]):not([height]) { inline-size: 1.125rem; block-size: 1.125rem; } svg.brand__svg { inline-size: 100%; block-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Numbers inside Arabic-script UI stay Latin digits: the whole panel is money and token counts, and mixing ۱۲۳ into a column of 123 breaks the alignment a table depends on. Prose is free to use whatever the locale file wrote. */ :root[dir="rtl"] .tabular, :root[dir="rtl"] table td, :root[dir="rtl"] .num { font-variant-numeric: tabular-nums; } ::selection { background: var(--selection); } /* ── Focus ──────────────────────────────────────────────────────────────── */ /* One focus treatment, applied only to keyboard focus. A ring drawn on every mouse click reads as an error state to people who never left the mouse. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ── Scrollbars ─────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar); border: 3px solid transparent; border-radius: var(--r-full); background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } /* ── Typography ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--tracking-snug); color: var(--text-strong); text-wrap: balance; } h1 { font-size: var(--fs-3xl); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-base); } h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); } p { text-wrap: pretty; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--link-hover); } strong, b { font-weight: var(--fw-semi); color: var(--text-strong); } small { font-size: var(--fs-xs); } hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--s-7); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; font-variant-ligatures: none; } :not(pre) > code { background: var(--code-bg-inline); color: var(--text-strong); padding: 0.15em 0.38em; border-radius: var(--r-xs); font-size: 0.875em; /* Never let an identifier be reversed by the bidi algorithm inside an RTL paragraph. `max_tokens` rendered as `tokens_max` is a wrong answer that looks like a typo. */ direction: ltr; unicode-bidi: isolate; white-space: nowrap; } kbd { background: var(--surface); border: 1px solid var(--border-strong); border-block-end-width: 2px; border-radius: var(--r-sm); padding: 0.1em 0.4em; font-size: 0.8em; font-family: var(--font-sans); color: var(--text-muted); white-space: nowrap; } ul, ol { padding-inline-start: 1.35em; } li::marker { color: var(--text-faint); } blockquote { border-inline-start: 3px solid var(--accent-line); padding-inline-start: var(--s-5); color: var(--text-muted); font-style: normal; } table { border-collapse: collapse; width: 100%; } th { text-align: start; font-weight: var(--fw-semi); } abbr[title] { text-decoration: underline dotted; cursor: help; } fieldset { border: 0; padding: 0; min-inline-size: 0; } legend { padding: 0; } dialog { border: 0; padding: 0; background: transparent; color: inherit; max-width: none; max-height: none; } /* The UA sets `display: none` on a closed dialog, and any component class that sets `display` overrides it -- which is how the docs search box rendered over every page whether or not it was open. Won back explicitly, and with !important, because the component classes are loaded after this file. */ dialog:not([open]) { display: none !important; } dialog::backdrop { background: var(--overlay); backdrop-filter: blur(2px); } /* ── Direction-sensitive fixes ──────────────────────────────────────────── */ /* Anything that is code, an identifier, a URL, a key, a number with a unit, or a file path is LTR content regardless of the surrounding page. Marking it isolate rather than embed means it also cannot leak its direction into the text around it. */ .ltr, code, pre, samp, .mono, [data-ltr] { direction: ltr; unicode-bidi: isolate; } .rtl { direction: rtl; unicode-bidi: isolate; } /* An icon that means "forward" has to point the other way in RTL. Glyphs that mean up, down, close, or check must not flip -- hence a class rather than a blanket rule on svg. */ :root[dir="rtl"] .icon-flip { transform: scaleX(-1); } /* ── Print ──────────────────────────────────────────────────────────────── */ @media print { :root { color-scheme: light; } body { background: #fff; color: #000; } .no-print, .sidebar, .topbar, .site-header, .site-footer, .toast-host, .cmdk { display: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } .card, .panel { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; } } /* ── Accessibility helpers ──────────────────────────────────────────────── */ .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: var(--z-tooltip); transform: translateY(-200%); background: var(--accent); color: var(--text-on-accent); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font-weight: var(--fw-med); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* Content that only exists once the client script has run. Hidden by an attribute the script removes, so a failed script leaves a blank region rather than a flash of unstyled placeholders. */ [hidden] { display: none !important; } /* ── The seal rule ────────────────────────────────────────────────────────── The one ornament the brand keeps: a short accent bar on the inline-start edge, echoing the horizon under the mark. Used on the active nav item, the accented card, and the section eyebrow -- nowhere else. Spending it on every heading would make it decoration; spending it in three places makes it a signal. ──────────────────────────────────────────────────────────────────────── */ .seal { position: relative; padding-inline-start: var(--s-4); } .seal::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.15em 0.15em; inline-size: 3px; border-radius: var(--r-full); background: var(--accent-line); } /* ── Utilities ────────────────────────────────────────────────────────────── A deliberately small set. Anything used more than a handful of times gets a component class instead; a utility layer that grows without limit is how a design system stops being one. ──────────────────────────────────────────────────────────────────────── */ .stack { display: flex; flex-direction: column; gap: var(--s-4); } .stack-1 { display: flex; flex-direction: column; gap: var(--s-1); } .stack-2 { display: flex; flex-direction: column; gap: var(--s-2); } .stack-3 { display: flex; flex-direction: column; gap: var(--s-3); } .stack-5 { display: flex; flex-direction: column; gap: var(--s-5); } .stack-6 { display: flex; flex-direction: column; gap: var(--s-6); } .stack-8 { display: flex; flex-direction: column; gap: var(--s-8); } .row { display: flex; align-items: center; gap: var(--s-3); } .row-2 { display: flex; align-items: center; gap: var(--s-2); } .row-4 { display: flex; align-items: center; gap: var(--s-4); } .row-6 { display: flex; align-items: center; gap: var(--s-6); } .row-wrap { flex-wrap: wrap; } .row-top { align-items: flex-start; } .row-base { align-items: baseline; } .row-between { justify-content: space-between; } .row-end { justify-content: flex-end; } .row-center { justify-content: center; } .grow { flex: 1 1 auto; min-inline-size: 0; } .shrink-0 { flex-shrink: 0; } .grid { display: grid; gap: var(--s-4); } .grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .grid-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); } .text-xs { font-size: var(--fs-xs); } .text-2xs { font-size: var(--fs-2xs); } .text-sm { font-size: var(--fs-sm); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .faint { color: var(--text-faint); } .strong { color: var(--text-strong); font-weight: var(--fw-semi); } .medium { font-weight: var(--fw-med); } .semi { font-weight: var(--fw-semi); } .bold { font-weight: var(--fw-bold); } .mono { font-family: var(--font-mono); } .tabular { font-variant-numeric: tabular-nums; } .caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-3xs); font-weight: var(--fw-semi); color: var(--text-subtle); } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .text-start { text-align: start; } .text-end { text-align: end; } .text-center { text-align: center; } .balance { text-wrap: balance; } .hidden { display: none !important; } .invisible { visibility: hidden; } .relative { position: relative; } .block { display: block; } .inline-flex { display: inline-flex; align-items: center; gap: var(--s-2); } .scroll-x { overflow-x: auto; overscroll-behavior-x: contain; } .scroll-y { overflow-y: auto; overscroll-behavior-y: contain; } .divide > * + * { border-block-start: 1px solid var(--border); padding-block-start: var(--s-4); margin-block-start: var(--s-4); } /* Spacing escape hatches, kept to the few that earn their place. */ .mt-0 { margin-block-start: 0; } .mt-2 { margin-block-start: var(--s-2); } .mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); } .mt-8 { margin-block-start: var(--s-8); } .mb-2 { margin-block-end: var(--s-2); } .mb-4 { margin-block-end: var(--s-4); } .mb-6 { margin-block-end: var(--s-6); } .w-full { inline-size: 100%; } /* Animation primitives used by dialogs, toasts and menus. */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes slide-in-end { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }