/**
 * Codex Design Tokens v2.6.0
 * Design System for Wikimedia
 * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
 */

:root {
  --color-base: #202122;
  --color-base-fixed: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-neutral: #404244;
  --color-subtle: #54595d;
  --color-placeholder: #72777d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-inverted-fixed: #fff; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
  --color-progressive: #36c; /* 'Progressive' Color and states */
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c; /* 'Destructive' Color and states */
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0; /* 'Visited' color. In combination with progressive. Used for default links. */
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555; /* Red link 'Visited' color. Used for visited red links. */
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-icon-error: #f54739;
  --color-icon-warning: #ab7f2a;
  --color-icon-success: #099979;
  --color-icon-notice: #72777d;
  --color-icon-progressive: #36c;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --color-option-red: #bf3c2c;
  --color-option-orange: #a95226;
  --color-option-yellow: #886425;
  --color-option-lime: #1f7a39;
  --color-option-green: #177860;
  --color-option-blue: #36c;
  --color-option-purple: #6a60b0;
  --color-option-pink: #9b527f;
  --color-option-maroon: #9f5555;
  --opacity-base: 1;
  --opacity-medium: 0.65;
  --opacity-low: 0.3;
  --opacity-transparent: 0;
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;
  --background-position-base: center;
  --background-size-search-figure: cover; /* Use in TypeaheadSearch and Thumbnail components for the thumb container. */
  --z-index-bottom: -100; /* Use descriptive `z-index` tokens for layout purposes. */
  --z-index-base: 0;
  --z-index-above-content: 1;
  --z-index-toolbar: 2;
  --z-index-dropdown: 50;
  --z-index-sticky: 100;
  --z-index-fixed: 200;
  --z-index-off-canvas-backdrop: 300;
  --z-index-off-canvas: 350;
  --z-index-overlay-backdrop: 400;
  --z-index-overlay: 450;
  --z-index-popover: 700;
  --z-index-tooltip: 800;
  --z-index-toast-notification: 900;
  --z-index-top: 9999;
  --z-index-stacking-0: 0; /* Use stacking-specific z-index tokens inside components to layer individual elements. */
  --z-index-stacking-1: 1;
  --z-index-stacking-2: 2;
  --z-index-stacking-3: 3;
  --box-sizing-base: border-box;
  --size-0: 0;
  --size-6: 0.0625rem;
  --size-12: 0.125rem;
  --size-25: 0.25rem;
  --size-50: 0.5rem;
  --size-75: 0.75rem;
  --size-100: 1rem;
  --size-125: 1.25rem;
  --size-150: 1.5rem;
  --size-200: 2rem;
  --size-250: 2.5rem;
  --size-275: 2.75rem;
  --size-300: 3rem;
  --size-400: 4rem;
  --size-800: 8rem;
  --size-1200: 12rem;
  --size-1600: 16rem;
  --size-2400: 24rem;
  --size-2800: 28rem;
  --size-3200: 32rem;
  --size-4000: 40rem;
  --size-5600: 56rem;
  --size-viewport-width-full: 100vw;
  --size-viewport-height-full: 100vh;
  --size-absolute-1: 1px;
  --size-absolute-9999: 9999px;
  --size-content-min: min-content;
  --size-content-fit: fit-content;
  --size-content-max: max-content;
  --size-third: 33.33%;
  --size-half: 50%;
  --size-full: 100%;
  --size-double: 200%;
  --size-search-figure: 2.5rem; /* Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability. */
  --max-width-base: none;
  --max-width-breakpoint-mobile: calc( 640px - var( --size-absolute-1 ) ); /* A mobile device's maximum available screen width. Many older feature phones have screens smaller than this value. */
  --max-width-breakpoint-tablet: calc( 1120px - var( --size-absolute-1 ) ); /* A tablet device's maximum available screen width. Note, the size chosen is eager to be re-evaluated with Web team and Product Analytics. */
  --max-width-breakpoint-desktop: calc( 1680px - var( --size-absolute-1 ) ); /* A desktop device's maximum available screen width. */
  --max-width-button: 28rem; /* Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800` */
  --border-style-base: solid;
  --border-style-dashed: dashed;
  --box-shadow-inset-small: inset 0 0 0 1px;
  --box-shadow-inset-medium: inset 0 0 0 2px;
  --box-shadow-inset-medium-vertical: inset 0 -2px 0 0;
  --box-shadow-outset-small: 0 0 0 1px;
  --box-shadow-outset-small-top: 0 -1px 0 0;
  --box-shadow-outset-small-bottom: 0 1px 0 0;
  --box-shadow-outset-small-start: -1px 0 0 0;
  --box-shadow-outset-medium-below: 0 4px 4px 0;
  --box-shadow-outset-medium-around: 0 0 8px 0;
  --box-shadow-outset-large-below: 0 4px 8px 0;
  --box-shadow-outset-large-around: 0 0 16px 0;
  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--active: #233566;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.06 );
  --box-shadow-color-transparent: transparent;
  --font-family-base: sans-serif; /* Reference Vector's default fallback sans instead of the deprecated value `font-family-sans` in WikimediaUI Base. */
  --font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif;
  --font-family-sans--fallback: sans-serif;
  --font-family-serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  --font-family-serif--fallback: serif;
  --font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
  --font-family-monospace--fallback: monospace, monospace;
  --font-family-heading-main: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif; /* Legacy value from WikimediaUI Base. Use for first heading special treatment. */
  --font-size-x-small: 0.75rem; /* `x` stands for extra. In this case extra small. */
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  --font-size-xxx-large: 1.75rem;
  --font-weight-hairline: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-x-small: 1.25rem; /* `x` stands for extra. In this case extra small. */
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  --line-height-content: 1.625; /* Intended for user-generated content that comes from outside of the design system. Components and features should use the standard font-size and line-height tokens instead. */
  --text-decoration-none: none;
  --text-decoration-line-through: line-through;
  --text-decoration-underline: underline;
  --text-overflow-clip: clip;
  --text-overflow-ellipsis: ellipsis;
  --tab-size-base: 4;
  --transform-checkbox-tick--checked: rotate( 45deg );
  --transform-progress-indicator-spinner-start: rotate( -45deg );
  --transform-progress-indicator-spinner-end: rotate( 315deg );
  --transition-duration-base: 100ms;
  --transition-duration-medium: 250ms;
  --transition-property-base: background-color, color, border-color, box-shadow;
  --transition-property-fade: opacity;
  --transition-property-icon: color;
  --transition-property-icon-css-only: background-color;
  --transition-property-toast: opacity, transform;
  --transition-property-toggle-switch-grip: background-color, border-color, transform;
  --transition-timing-function-system: ease;
  --transition-timing-function-user: ease-out;
  --animation-delay-none: 0ms;
  --animation-delay-medium: -160ms;
  --animation-delay-slow: -320ms;
  --animation-duration-fast: 1000ms;
  --animation-duration-medium: 1600ms;
  --animation-duration-slow: 2000ms;
  --animation-timing-function-base: linear;
  --animation-timing-function-bouncing: ease-in-out;
  --animation-iteration-count-base: infinite;
  --cursor-base: default;
  --cursor-base--disabled: default;
  --cursor-base--hover: pointer;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-help: help;
  --cursor-move: move;
  --cursor-not-allowed: not-allowed;
  --cursor-resize-nesw: nesw-resize;
  --cursor-resize-nwse: nwse-resize;
  --cursor-text: text;
  --cursor-zoom-in: zoom-in;
  --cursor-zoom-out: zoom-out;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: multiply;
  --background-color-base: #fff; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
  --background-color-base-fixed: #fff; /* The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
  --background-color-disabled-subtle: #eaecf0; /* Components like TextInputs, Selects…. */
  --background-color-inverted: #101418;
  --background-color-progressive: #36c;
  --background-color-progressive--hover: #3056a9;
  --background-color-progressive--active: #233566;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #e8eeff;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive: #bf3c2c;
  --background-color-destructive--hover: #9f3526;
  --background-color-destructive--active: #612419;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error: #f54739;
  --background-color-error--hover: #d74032;
  --background-color-error--active: #bf3c2c;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-target-text: #ffead4;
  --background-color-option-red: #ffe9e5;
  --background-color-option-orange: #ffead4;
  --background-color-option-yellow: #fdf2d5;
  --background-color-option-lime: #e3f2e4;
  --background-color-option-green: #dff2eb;
  --background-color-option-blue: #e8eeff;
  --background-color-option-purple: #f0ecf6;
  --background-color-option-pink: #f5ebf2;
  --background-color-option-maroon: #f6ebeb;
  --background-color-transparent: transparent;
  --background-color-backdrop-light: rgba( 255, 255, 255, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
  --background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
  --background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
  --background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
  --background-color-input-binary--checked: #36c;
  --background-color-tab-list-item-framed--hover: rgba( 255, 255, 255, 0.3 );
  --background-color-tab-list-item-framed--active: rgba( 255, 255, 255, 0.65 );
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --min-size-interactive-pointer: 32px;
  --min-size-interactive-touch: 44px;
  --min-size-search-figure: 40px; /* Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability. */
  --min-size-icon-x-small: 10px;
  --min-size-icon-small: 14px;
  --min-size-icon-medium: 18px;
  --min-size-input-binary: 20px;
  --min-size-input-chip-clear-button: 20px;
  --min-size-toggle-switch-grip: 18px;
  --min-width-medium: 256px;
  --min-width-breakpoint-mobile: 320px; /* A mobile device's minimum available screen width. Many older feature phones have screens smaller than this value. */
  --min-width-breakpoint-tablet: 640px; /* A tablet device's minimum available screen width. Note: the size chosen is eager to be re-evaluated with Web team and Product Analytics. */
  --min-width-breakpoint-desktop: 1120px; /* A desktop device's minimum available screen width. */
  --min-width-breakpoint-desktop-wide: 1680px; /* A wider desktop's minimum available screen width. */
  --min-width-toggle-switch: 42px;
  --spacing-0: 0;
  --spacing-6: 1px;
  --spacing-12: 2px;
  --spacing-25: 4px;
  --spacing-30: 5px; /* This token is an exception to the scale.  Used as vertical `padding` in inputs and controls to achieve the default 32px component height. */
  --spacing-35: 6px; /* This token is an exception to the scale.  Used as `padding` of the ToggleSwitch component. */
  --spacing-50: 8px;
  --spacing-65: 10px;
  --spacing-75: 12px;
  --spacing-100: 16px;
  --spacing-125: 20px;
  --spacing-150: 24px;
  --spacing-200: 32px;
  --spacing-250: 40px;
  --spacing-300: 48px;
  --spacing-400: 64px;
  --spacing-half: 50%; /* From here on, spacing tokens which are used for positioning values. */
  --spacing-full: 100%;
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-width-input-radio--checked: 6px;
  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-inverted-fixed: #fff; /* The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes. */
  --border-color-progressive: #36c;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive: #f54739;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error: #f54739;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning: #ab7f2a;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-success: #099979;
  --border-color-notice: #72777d;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
  --border-color-option-red: #f54739;
  --border-color-option-orange: #d46926;
  --border-color-option-yellow: #ab7f2a;
  --border-color-option-lime: #259948;
  --border-color-option-green: #099979;
  --border-color-option-blue: #6485d1;
  --border-color-option-purple: #8d7ebd;
  --border-color-option-pink: #b5739e;
  --border-color-option-maroon: #b57775;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --border-radius-base: 2px;
  --border-radius-sharp: 0;
  --border-radius-pill: 9999px;
  --border-radius-circle: 50%; /* Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500 */
  --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
  --min-height-text-area: 64px;
  --min-height-table-header: 40px;
  --min-height-table-footer: 40px;
  --min-height-toggle-switch: 28px;
  --max-height-chip: 1.375rem;
  --color-link: var( --color-progressive ); /* Default Link color and states */
  --color-link--hover: var( --color-progressive--hover );
  --color-link--active: var( --color-progressive--active );
  --color-link--focus: var( --color-progressive--focus );
  --color-link--visited: var( --color-visited );
  --color-link--visited--hover: var( --color-visited--hover );
  --color-link--visited--active: var( --color-visited--active );
  --color-link-red: var( --color-destructive ); /* Red ('new') Link color and states */
  --color-link-red--hover: var( --color-destructive--hover );
  --color-link-red--active: var( --color-destructive--active );
  --color-link-red--focus: var( --color-destructive--focus );
  --color-link-red--visited: var( --color-destructive--visited );
  --color-link-red--visited--hover: var( --color-destructive--visited--hover );
  --color-link-red--visited--active: var( --color-destructive--visited--active );
  --size-icon-x-small: calc( var( --font-size-medium ) - 4px );
  --size-icon-small: var( --font-size-medium );
  --size-icon-medium: calc( var( --font-size-medium ) + 4px );
  --size-toggle-switch-grip: calc( var( --font-size-medium ) * 1.25 );
  --box-shadow-small: var( --box-shadow-outset-small ) var( --box-shadow-color-base );
  --box-shadow-small-top: var( --box-shadow-outset-small-top ) var( --box-shadow-color-base );
  --box-shadow-small-bottom: var( --box-shadow-outset-small-bottom ) var( --box-shadow-color-base );
  --box-shadow-medium: var( --box-shadow-outset-medium-below ) var( --box-shadow-color-alpha-base ), var( --box-shadow-outset-medium-around ) var( --box-shadow-color-alpha-base );
  --box-shadow-large: var( --box-shadow-outset-large-below ) var( --box-shadow-color-alpha-base ), var( --box-shadow-outset-large-around ) var( --box-shadow-color-alpha-base );
  --accent-color-base: #36c;
  --position-offset-border-width-base: -var( --border-width-base );
  --spacing-horizontal-button: var( --spacing-75 ) - var( --border-width-base ); /* Padding should equal 12px of spacing minus the width of the border */
  --spacing-horizontal-button-icon-only: var( --spacing-35 ) - var( --border-width-base ); /* Padding should equal 6px of spacing minus the width of the border */
  --spacing-horizontal-button-small-icon-only: var( --spacing-12 ) - var( --border-width-base ); /* Padding should equal 2px of spacing minus the width of the border */
  --spacing-horizontal-button-small: var( --spacing-35 ) - var( --border-width-base ); /* Padding should equal 6px of spacing minus the width of the border */
  --spacing-horizontal-button-large: var( --spacing-100 ) - var( --border-width-base ); /* Padding should equal 16px of spacing minus the width of the border */
  --spacing-horizontal-input-text-two-end-icons: calc( var( --spacing-50 ) * 2 + var( --size-icon-small ) ); /* Rely on `calc()` to make token output usable in all formats. When there are two end icons, (i.e. a clear icon and an end icon), we need to double the horizontal padding and account for the size of the extra icon. This token can be used to calculate the horizontal position of the clear icon and the padding-end of the text input. */
  --spacing-start-typeahead-search-figure: var( --spacing-75 ); /* The amount of space between the TypeaheadSearch figure's parent component and the TypeaheadSearch figure (input icon container, search result thumbnail, and footer icon container). We want this space to be uniform so that the figures vertically line up nicely. We use the same horizontal padding as the MenuItem. */
  --spacing-toggle-switch-grip-start: calc( var( --font-size-medium ) * 0.375 );
  --spacing-toggle-switch-grip-end: calc( var( --font-size-medium ) * 1.25 );
  --border-color-input--hover: var( --border-color-interactive );
  --border-color-input-binary: var( --border-color-interactive );
  --border-color-input-binary--hover: var( --border-color-progressive--hover );
  --border-color-input-binary--active: var( --border-color-progressive--active );
  --border-color-input-binary--focus: var( --border-color-progressive--focus );
  --border-color-input-binary--checked: var( --border-color-progressive );
  --border-base: var( --border-width-base ) var( --border-style-base ) var( --border-color-base );
  --border-subtle: var( --border-width-base ) var( --border-style-base ) var( --border-color-subtle );
  --border-progressive: var( --border-width-base ) var( --border-style-base ) var( --border-color-progressive );
  --border-destructive: var( --border-width-base ) var( --border-style-base ) var( --border-color-destructive );
  --border-transparent: var( --border-width-base ) var( --border-style-base ) var( --border-color-transparent );
  --outline-base--focus: var( --border-width-base ) solid transparent; /* Enable Windows high contrast mode on certain widgets, that have default outlines overridden. */
  --width-toggle-switch: calc( var( --font-size-medium ) * 3 );
  --height-toggle-switch: calc( var( --font-size-medium ) * 2 );
  --spacing-start-typeahead-search-icon: calc( var( --spacing-start-typeahead-search-figure ) + ( var( --min-size-search-figure ) - var( --min-size-icon-medium ) ) / 2 ); /* The padding required for the icon to center align with the menu item thumbnail. We calculate the difference in size and add it to the expected spacing. */
  --spacing-typeahead-search-focus-addition: calc( ( var( --spacing-start-typeahead-search-figure ) + var( --min-size-search-figure ) ) - ( var( --min-size-icon-medium ) + var( --spacing-50 ) ) ); /* The amount the width of the input increases when it is focused to allow for the extra spacing around the search figures. The caret position should remain static. This calculates the padding-left of the input when expanded minus the padding-left of the input when not expanded. (Note that both padding values actually include `@spacing-50` as well, but it was left out of the calculation for simplicity's sake.) */

/* DEPRECATED TOKENS */
/* Warning: the following token name is deprecated (Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now.) */
  --color-base--subtle: #54595d;
/* Warning: the following token name is deprecated (For elements which previously used `xx-large`, consider using `large` instead, or referring to the guidance above to best choose the appropriate shadow.) */
  --box-shadow-drop-xx-large: 0 20px 48px 0 rgba( 0, 0, 0, 0.2 );
/* Warning: the following token name is deprecated (Use `font-family-sans--fallback` instead. See T247166.) */
  --font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
/* Warning: the following token name is deprecated (Use `line-height-x-small` instead. Deprecated, part of old font-size/line-height system) */
  --line-height-xxx-small: 1.4285714rem;
/* Warning: the following token name is deprecated (Use `line-height-small` instead. Deprecated, part of old font-size/line-height system) */
  --line-height-xx-small: 1.5714285rem;
/* Warning: the following token name is deprecated (Shadow shorthands should be used in place of `drop` shadows.) */
  --box-shadow-drop-small: var( --box-shadow-outset-small ) var( --box-shadow-color-base );
/* Warning: the following token name is deprecated (Shadow shorthands should be used in place of `drop` shadows.) */
  --box-shadow-drop-medium: var( --box-shadow-outset-medium-below ) var( --box-shadow-color-alpha-base ), var( --box-shadow-outset-medium-around ) var( --box-shadow-color-alpha-base );
}
:root { --icon-puzzle: url("data:image/svg+xml,%3Csvg%20aria%2Dhidden%3D%22true%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M8%203a1%201%200%200%200%202%200V1h7v6a3%203%200%201%201%200%206v6H1V1h7zM3%2017h12v%2D6h2a1%201%200%201%200%200%2D2h%2D2V3h%2D3a3%203%200%201%201%2D6%200H3z%22%2F%3E%3C%2Fsvg%3E"); }
/* Design system 0.2: the base of every page.

   Layer 3 of the three-layer composition. The composition names templates,
   slots and primitives; the design system says what they look like at every
   width. It is the only place with geometry.

   The stylesheet is this file, then templates/*.css, then primitives/*.css,
   in that order (qrender/src/render/design.rs).

   - One page grid of 12 columns. Every spread takes the page tracks with
     subgrid, so all spreads align to the same columns.
   - A template is a set of slot spans. A container query on the page moves
     every slot to the full width when the page is narrow.
   - Rows are always content-sized. Nothing has a fixed height except what
     has an aspect ratio of its own.
   - Colour means the spread (the dimension of the data), nothing else.
   Native nesting and logical properties only. */

:root {
	--page-max: 1280px;
	--gutter: 16px;
	--gap: 16px;
	--radius: 8px;
	--run-height: 200px;
	--set-height: 150px;
	--feature-max: 560px;
	--ink: var( --color-subtle );
	--soft: var( --background-color-neutral-subtle );

	/* The parts of one whole (the segments of a split, the lines of its
	   chart), in their order: the categorical family of Codex, the
	   saturated grade. No red or maroon: they are the destructive colours.
	   A label always names the part; colour alone does not separate the
	   parts in dark mode. */
	--part-1: var( --border-color-option-blue );
	--part-2: var( --border-color-option-orange );
	--part-3: var( --border-color-option-purple );
	--part-4: var( --border-color-option-yellow );
	--part-5: var( --border-color-option-pink );
	--part-6: var( --border-color-option-green );
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var( --background-color-base );
	color: var( --color-base );
	font-family: var( --font-family-system-sans );
	font-size: var( --font-size-medium );
	line-height: var( --line-height-medium );
}

a {
	color: var( --color-progressive );
	text-decoration: none;

	&:hover { text-decoration: underline; }
}

/* A string that did not come in the page language. */
.fb {
	text-decoration: underline dotted color-mix( in srgb, currentColor 45%, transparent );
	text-underline-offset: 0.2em;
}

.note {
	color: var( --color-subtle );
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-normal );
}

/* Spread colours: one for each dimension of the data, shared by the class
   layouts. Only the option-* colours are categorical in Codex; red and
   maroon are not used, because red means "destructive". */
[data-dimension='place'] { --ink: var( --color-option-green ); --soft: var( --background-color-option-green ); }
[data-dimension='measures'] { --ink: var( --color-option-blue ); --soft: var( --background-color-option-blue ); }
[data-dimension='people'] { --ink: var( --color-option-purple ); --soft: var( --background-color-option-purple ); }
[data-dimension='time'] { --ink: var( --color-option-orange ); --soft: var( --background-color-option-orange ); }
[data-dimension='names'] { --ink: var( --color-option-pink ); --soft: var( --background-color-option-pink ); }
[data-dimension='recognition'] { --ink: var( --color-option-yellow ); --soft: var( --background-color-option-yellow ); }
[data-dimension='media'] { --ink: var( --color-option-lime ); --soft: var( --background-color-option-lime ); }
[data-dimension='neutral'] { --ink: var( --color-subtle ); --soft: var( --background-color-neutral-subtle ); }

/* A spread with a colour has a tinted band behind its title. */
.spread:not( [data-dimension='neutral'] ) > h2 {
	background: linear-gradient( to right, var( --soft ), transparent 60% );
	padding-inline: var( --spacing-75 );
	border-start-start-radius: var( --radius );
}

/* A label that is not in the page language has an action to add it. It
   shows when the pointer or the focus is on the label, and it is always
   there for a keyboard. It is a badge on the corner of the label, out of
   the flow, so that it takes no space when it is hidden. */
.fb-group { position: relative; }

.add-label {
	position: absolute;
	inset-block-start: -0.7em;
	inset-inline-end: -0.9em;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	inline-size: 1.4em;
	block-size: 1.4em;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: var( --font-weight-bold );
	line-height: 1;
	vertical-align: middle;
	color: var( --color-inverted );
	background-color: var( --color-progressive );
	opacity: 0;
	text-decoration: none;

	& > svg {
		inline-size: 0.8em;
		block-size: 0.8em;
	}

	/* label.js shows it also on a click of a label that is not a link. */
	.fb-group:is( :hover, :focus-within, .shown ) > &,
	&:focus-visible { opacity: 1; }
}

/* A label that the reader added in the page language (label.js): saved on
   this page only. A solid line, in the colour of success. */
.localized {
	text-decoration: underline solid var( --border-color-success );
	text-underline-offset: 0.2em;
}

/* The tools of a statement or a picture: credit, edit. They show on hover
   and on focus, and always on a touch screen. */
.tools {
	display: inline-flex;
	gap: 2px;
	opacity: 0;
	transition: opacity 0.15s;

	:is( .row, .m, .map, .card, .block > h3 ):is( :hover, :focus-within ) > & { opacity: 1; }

	@media ( hover: none ) { opacity: 1; }
}

.v > .edit,
.block > h3 > .edit,
.split li > .edit,
.series .line > .edit,
.pic-rows .text > .edit { opacity: 0; }
.v:is( :hover, :focus-within ) > .edit,
.block > h3:is( :hover, :focus-within ) > .edit,
.split li:is( :hover, :focus-within ) > .edit,
.series .line:is( :hover, :focus-within ) > .edit,
.pic-rows li:is( :hover, :focus-within ) .text > .edit { opacity: 1; }

.edit,
.info {
	display: inline-grid;
	place-items: center;
	inline-size: 22px;
	block-size: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font: inherit;
	font-size: 12px;
	font-weight: var( --font-weight-bold );
	line-height: 1;
	color: var( --color-subtle );
	background-color: var( --background-color-interactive-subtle );
	cursor: pointer;
	text-decoration: none;

	&:hover { color: var( --color-progressive ); text-decoration: none; }
}

/* The icon of the edit action: the size of the glyph of the (i) button. */
.edit > svg {
	inline-size: 12px;
	block-size: 12px;
}

.info { font-family: var( --font-family-serif ); font-style: italic; }

/* A picture or a map is a button: it opens its dialog. */
:is( .m, .map ) > .zoom {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* On a picture the tools sit in the top corner. */
:is( .m, .map ) > .tools {
	position: absolute;
	inset-block-start: var( --spacing-50 );
	inset-inline-end: var( --spacing-50 );

	& > :is( .edit, .info ) { background-color: rgba( 255, 255, 255, 0.85 ); color: #202122; }
}

/* The credit of a picture or the description of a property: a popover,
   opened by its (i) button. */
.pop {
	margin: 0;
	max-inline-size: 320px;
	padding: var( --spacing-50 ) var( --spacing-75 );
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-base );
	background-color: var( --background-color-base );
	color: var( --color-base );
	font-size: var( --font-size-x-small );
	/* Not the weight of a heading that it is in. */
	font-weight: var( --font-weight-normal );
	box-shadow: 0 2px 8px var( --box-shadow-color-alpha-base );
	inset: auto;
	position-area: block-end span-inline-start;
	position-try-fallbacks: flip-block, flip-inline;
}

/* The rest of a list: a button that opens a dialog. */
.more {
	margin-inline-start: 2px;
	padding: 0 var( --spacing-75 );
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-pill );
	background-color: var( --background-color-base );
	color: var( --color-progressive );
	font: inherit;
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-bold );
	cursor: pointer;

	&:hover { background-color: var( --background-color-interactive-subtle ); }

	/* In a block (a flex column) it keeps its own width. */
	.block > & { align-self: start; }
}

dialog {
	inline-size: min( 720px, 100vw - 2 * var( --gutter ) );
	max-block-size: 80vh;
	padding: 0;
	border: 1px solid var( --border-color-base );
	border-radius: var( --radius );
	background-color: var( --background-color-base );
	color: var( --color-base );

	&::backdrop { background-color: rgba( 0, 0, 0, 0.35 ); }

	& header {
		position: sticky;
		inset-block-start: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var( --spacing-75 ) var( --spacing-100 );
		background-color: var( --background-color-base );
		border-block-end: 1px solid var( --border-color-muted );

		& h2 { margin: 0; font-size: var( --font-size-large ); }
		& button { border: 0; background: none; font-size: var( --font-size-x-large ); cursor: pointer; }
	}

	& .dialog-body {
		padding: var( --spacing-100 );
		font-size: var( --font-size-small );
	}

	/* All the values of a long list, in balanced columns. */
	& .dialog-body {
		columns: 2 240px;
		column-gap: var( --spacing-200 );
	}
}

/* A file of the item in its dialog: the file over the whole width, as high
   as the window lets it be, and its words under it. */
dialog.lightbox {
	inline-size: min( 1200px, 100vw - 2 * var( --gutter ) );
	max-block-size: 95vh;

	& .stage {
		background-color: #1b1f23;

		& :is( img, video, canvas ) {
			display: block;
			inline-size: 100%;
			max-block-size: 70vh;
			aspect-ratio: var( --a );
			object-fit: contain;
		}

		/* A 3D model: its picture, then its canvas. A drag turns the
		   model; on a touch screen it does not scroll the dialog. */
		& qr-model {
			position: relative;
			display: block;
		}

		& canvas {
			touch-action: none;
			cursor: grab;

			&:active { cursor: grabbing; }
		}

		& .status {
			position: absolute;
			inset-block-end: var( --spacing-100 );
			inset-inline-start: 50%;
			translate: -50% 0;
			padding: var( --spacing-25 ) var( --spacing-75 );
			border-radius: var( --border-radius-pill );
			background-color: rgba( 0, 0, 0, 0.7 );
			color: #fff;
			font-size: var( --font-size-small );

			&:empty { display: none; }
			&:dir( rtl ) { translate: 50% 0; }
		}
	}

	&.k-drawing .stage { background-color: var( --background-color-base ); }

	& .about {
		padding: var( --spacing-75 ) var( --spacing-100 );
		font-size: var( --font-size-small );

		& p { margin: 0 0 var( --spacing-25 ); }
		& .credit { color: var( --color-subtle ); }
	}
}

/* ---------- chrome ---------- */

.chrome {
	border-block-end: 1px solid var( --border-color-muted );

	& > div {
		max-inline-size: var( --page-max );
		margin-inline: auto;
		padding: var( --spacing-75 ) var( --gutter );
		display: flex;
		align-items: center;
		gap: var( --spacing-100 );
	}

	& .wordmark {
		font-family: var( --font-family-serif );
		font-size: var( --font-size-x-large );
		color: var( --color-base );
	}

	& .search {
		position: relative;
		flex: 0 1 420px;
		min-inline-size: 0;

		/* The search icon, in the field at its start. A click on it is a
		   click on the field. */
		& > svg {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: var( --spacing-75 );
			translate: 0 -50%;
			inline-size: 20px;
			block-size: 20px;
			color: var( --color-subtle );
			pointer-events: none;
		}
	}

	& input {
		box-sizing: border-box;
		inline-size: 100%;
		font: inherit;
		padding: var( --spacing-35 ) var( --spacing-75 );
		padding-inline-start: calc( var( --spacing-75 ) + 20px + var( --spacing-50 ) );
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius-base );
	}

	/* The items that match the text (search.js), under the field. */
	& [role="listbox"] {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		z-index: var( --z-index-popover );
		margin: var( --spacing-25 ) 0 0;
		padding: var( --spacing-25 ) 0;
		list-style: none;
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius-base );
		background-color: var( --background-color-base );
		box-shadow: 0 2px 8px var( --box-shadow-color-alpha-base );

		& a {
			display: flex;
			flex-direction: column;
			padding: var( --spacing-35 ) var( --spacing-75 );
			color: var( --color-base );
			text-decoration: none;
		}

		& :is( [aria-selected="true"], :hover ) > a {
			background-color: var( --background-color-interactive-subtle );
		}

		& .description {
			color: var( --color-subtle );
			font-size: var( --font-size-small );
		}
	}

	& .language {
		margin-inline-start: auto;
		display: inline-flex;
		align-items: center;
		gap: var( --spacing-35 );
		padding: var( --spacing-35 ) var( --spacing-50 );
		border: 0;
		border-radius: var( --border-radius-base );
		background: none;
		color: var( --color-base );
		font: inherit;
		cursor: pointer;

		&:hover { background-color: var( --background-color-button-quiet--hover ); }

		& > svg {
			inline-size: 20px;
			block-size: 20px;
		}
	}
}

/* The languages of the page, from the language button. */
.pop.languages {
	max-block-size: 60vh;
	overflow-y: auto;
	padding: var( --spacing-50 );
	columns: 2;
	list-style: none;
	font-size: var( --font-size-small );

	/* Inline: a name from right to left is at the start of its line, as
	   the others, not at the end. */
	& a {
		display: inline-block;
		padding: var( --spacing-25 ) var( --spacing-50 );
		color: var( --color-progressive );
	}

	& [aria-current] {
		color: var( --color-base );
		font-weight: var( --font-weight-bold );
	}
}

/* ---------- the page grid ---------- */

.page {
	max-inline-size: var( --page-max );
	margin-inline: auto;
	padding: var( --spacing-150 ) var( --gutter ) var( --spacing-400 );
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	column-gap: var( --gap );
	row-gap: var( --spacing-300 );
	container: page / inline-size;
}

.spread {
	grid-column: 1 / -1;
	/* A link from the contents leaves some space above the title. */
	scroll-margin-block-start: var( --spacing-100 );
	display: grid;
	grid-template-columns: subgrid;
	row-gap: var( --gap );
	align-items: start;

	& > h2 {
		grid-column: 1 / -1;
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: var( --spacing-75 );
		padding-block-end: var( --spacing-50 );

		/* Wikidata labels are lower case by convention. The first letter is
		   raised for display; in a script without case this does nothing.
		   On the title, not on the heading: a flex container has no first
		   letter. */
		& > .title::first-letter { text-transform: uppercase; }
		border-block-end: 2px solid var( --ink );
		font-family: var( --font-family-serif );
		font-size: var( --font-size-xx-large );
		font-weight: var( --font-weight-normal );
		line-height: var( --line-height-xx-large );
	}

	& > [data-slot] {
		grid-column: 1 / -1;
		min-inline-size: 0;
	}

	& > [data-slot='stack'],
	& > [data-slot='strips'] {
		display: flex;
		flex-direction: column;
		gap: var( --gap );
	}
}

/* Narrow: every slot takes the full width, in reading order. */
@container page ( width < 760px ) {
	.spread {
		grid-template-rows: none !important;

		& > * { grid-row: auto !important; }
		& > [data-slot] { grid-column: 1 / -1 !important; }
	}
}

/* The topics of a spread that are Wikipedia articles: a card each, the
   wiki, the title and the description, the picture at the end. */
.topic-articles {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var( --spacing-100 );
}

.topic-article {
	display: grid;
	gap: var( --spacing-25 ) var( --spacing-100 );
	padding: var( --spacing-75 );
	border: 1px solid var( --border-color-muted );
	border-radius: var( --border-radius-base );
	background-color: var( --background-color-base );

	/* The picture at the end, its credit under it. */
	&:has( > .pic ) {
		grid-template:
			'body pic' auto
			'body tools' 1fr / minmax( 0, 1fr ) auto;
	}

	& > .pic { grid-area: pic; }

	& .body {
		grid-area: body;
		display: flex;
		flex-direction: column;
		gap: var( --spacing-25 );
		min-inline-size: 0;
	}

	& .source {
		display: flex;
		align-items: center;
		gap: var( --spacing-25 );
		margin: 0;
		font-size: var( --font-size-x-small );
		color: var( --color-subtle );
	}

	& .title {
		font-size: var( --font-size-large );
		font-weight: var( --font-weight-bold );
	}

	& .desc {
		margin: 0;
		font-size: var( --font-size-small );
		color: var( --color-subtle );
	}

	& > .tools {
		grid-area: tools;
		align-self: end;
		justify-self: end;
	}
}

.prose-links {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing-50 ) var( --spacing-100 );
	font-size: var( --font-size-small );
	color: var( --color-subtle );

	& a { font-weight: var( --font-weight-semi-bold ); }
}

/* ---------- blocks ---------- */

.block {
	display: flex;
	flex-direction: column;
	gap: var( --spacing-50 );

	/* The title of a block: under the title of its spread, above the
	   titles of its values. */
	& > h3 {
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: var( --spacing-50 );
		font-size: var( --font-size-large );
		font-weight: var( --font-weight-bold );
		color: var( --ink );

		& .note {
			font-size: var( --font-size-small );
			font-weight: var( --font-weight-normal );
		}
	}
}

/* Provenance by exception. A sourced statement has no mark. A statement
   whose only reference is a Wikipedia has a "W" tag, with the words in its
   title. A statement with no reference has a small open mark. */
.prov-imported {
	margin-inline-start: 4px;
	padding: 0 3px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 9px;
	font-weight: var( --font-weight-bold );
	color: var( --color-subtle );
	vertical-align: middle;
	cursor: help;
}

.prov-none {
	display: inline-block;
	margin-inline-start: 4px;
	inline-size: 6px;
	block-size: 6px;
	border: 1px solid var( --border-color-base );
	border-radius: 50%;
	vertical-align: middle;
	cursor: help;
}

/* The sources of a statement: the icon of a reference, and their number
   when there is more than one. It opens their cards. */
.src {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: 4px;
	padding: 1px 3px;
	border: 1px solid transparent;
	border-radius: var( --border-radius-base );
	background: none;
	color: var( --color-subtle );
	font: inherit;
	font-size: 10px;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;

	&:hover { border-color: var( --border-color-base ); }
	& svg { inline-size: 12px; block-size: 12px; }
}

/* The mark of a note in the text of the article: its number. */
.ref {
	line-height: 0;

	& button {
		padding: 0 1px;
		border: 0;
		background: none;
		color: var( --color-progressive );
		font: inherit;
		font-size: var( --font-size-x-small );
		cursor: pointer;

		&::before { content: "["; }
		&::after { content: "]"; }
		&:hover { text-decoration: underline; }
	}
}

/* Cards of sources, in a popover: wider than a credit, with room around
   them, and apart from the line of its mark. */
.pop.cites {
	margin-block-start: var( --spacing-25 );
	padding: var( --spacing-100 ) var( --spacing-125 );
	max-inline-size: min( 440px, 100vw - 2 * var( --spacing-100 ) );
	max-block-size: 60vh;
	overflow-y: auto;
	font-size: var( --font-size-small );
	line-height: var( --line-height-small );
	/* Not the colours and the pointer of a caption on a picture that it
	   is in (a popover inherits from its place in the page). */
	color: var( --color-base );
	pointer-events: auto;

	& a { color: var( --color-progressive ); }

	& > * + * {
		margin-block-start: var( --spacing-100 );
		padding-block-start: var( --spacing-100 );
		border-block-start: 1px solid var( --border-color-muted );
	}
}

/* A source: the icon of its site beside its title and, under the title,
   the site; then its fields, a name and a value on each line. Spans only
   (it is in a popover in a line), so the lines are a grid. */
.cite {
	display: grid;
	grid-template-columns: max-content minmax( 0, 1fr );
	gap: var( --spacing-25 ) var( --spacing-75 );
	overflow-wrap: anywhere;

	& .head {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 32px minmax( 0, 1fr );
		align-items: center;
		column-gap: var( --spacing-75 );
		margin-block-end: var( --spacing-50 );

		& :is( .favicon, svg ) {
			grid-row: 1 / span 2;
			inline-size: 32px;
			block-size: 32px;
			object-fit: contain;
		}

		/* No site icon: the reference icon, smaller, in the same place. */
		& svg {
			padding: 4px;
			box-sizing: border-box;
			color: var( --color-subtle );
		}
	}

	& .title { font-weight: var( --font-weight-bold ); }

	& .host {
		color: var( --color-subtle );
		font-size: var( --font-size-x-small );
	}

	& .field { display: contents; }
	& .field-name { color: var( --color-subtle ); }

	/* A copy in a web archive: the icon of the archive's site. */
	& .archive img {
		inline-size: 16px;
		block-size: 16px;
		vertical-align: -3px;
	}

	/* Free text: as the editor wrote it. */
	&[data-kind="text"] { display: block; }
}

.note-text { display: block; }

/* The notes of the article, at the end of the page: collapsed, across
   the grid of the spread. */
.sources {
	& > details { grid-column: 1 / -1; }
	& summary h2 { display: inline; }

	& ol {
		margin: var( --spacing-75 ) 0 0;
		padding-inline-start: var( --spacing-200 );
		font-size: var( --font-size-small );
	}

	& li + li { margin-block-start: var( --spacing-75 ); }
}

/* The prose of a spread: its article section, as a short column. */
.prose-slot {
	grid-column: 1 / span 8;
	font-family: var( --font-family-serif );
	font-size: var( --font-size-medium );

	& p {
		margin: 0;
		line-height: 1.7;
		max-inline-size: 720px;
		text-wrap: pretty;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		overflow: hidden;
	}

	& .read {
		font-family: var( --font-family-system-sans );
		font-size: var( --font-size-small );
		font-weight: var( --font-weight-semi-bold );
	}
}

/* The sections of the article: the full width of the spread, the text in
   a column of reading width. Subsections are collapsed to their titles. */
.article-slot {
	grid-column: 1 / -1;
	display: grid;
	gap: var( --spacing-150 );
}

qr-section { display: block; }

.article-section {
	font-family: var( --font-family-serif );
	font-size: var( --font-size-medium );

	& .head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var( --spacing-50 ) var( --spacing-150 );
		max-inline-size: 720px;

		& > :is( h3, h4, h5, h6 ) {
			margin: 0;
			font-family: var( --font-family-system-sans );
			font-size: var( --font-size-large );
		}
	}

	/* A section that is a spread of its own: its title is the title of a
	   spread, across the page. */
	.t-article & > .head {
		max-inline-size: none;
		padding-block-end: var( --spacing-50 );
		border-block-end: 2px solid var( --ink );

		& > h2 {
			margin: 0;
			font-family: var( --font-family-serif );
			font-size: var( --font-size-xx-large );
			font-weight: var( --font-weight-normal );
			line-height: var( --line-height-xx-large );
		}
	}

	& .body {
		max-inline-size: 720px;
		line-height: 1.7;

		& :is( p, ul, ol, dl, blockquote ) {
			margin-block: var( --spacing-50 ) var( --spacing-75 );
			text-wrap: pretty;
		}
	}

	/* A heading in a summary: inline, beside the marker of the summary. */
	& summary {
		cursor: pointer;

		& > :is( h3, h4, h5, h6 ) { display: inline; }
	}

	& .subsection {
		margin-block: var( --spacing-50 );

		& > summary > :is( h4, h5, h6 ) {
			font-family: var( --font-family-system-sans );
			font-size: var( --font-size-large );
		}

		& > :not( summary ) { margin-inline-start: var( --spacing-150 ); }
	}
}

/* Preformatted text and code of the article: monospace, on a light
   background, a scroll bar for a long line. Code is left to right, also
   on a right-to-left page. No highlighting. */
pre {
	overflow-x: auto;
	margin-block: var( --spacing-50 ) var( --spacing-75 );
	padding: var( --spacing-75 ) var( --spacing-100 );
	border: 1px solid var( --border-color-muted );
	border-radius: var( --border-radius-base );
	background-color: var( --background-color-neutral-subtle );
	font-family: var( --font-family-monospace );
	font-size: var( --font-size-small );
	line-height: var( --line-height-small );

	&:has( > code ) { direction: ltr; text-align: left; }
	& code { font-family: inherit; }
}

/* A formula of the article (MathML): some space above and below, so the
   limits of a sum do not touch the formula on the next line. */
math { padding-block: 0.2em; }

/* An image of the article, in a section or in the lead: a block at the
   full width of the text, with its aspect ratio. A tall image is at most
   80% of the window high, so it is narrower. Not a thumbnail: the reader
   sees it without a click. */
.article-figure {
	margin: var( --spacing-100 ) 0;

	& .image {
		display: block;
		inline-size: min( 100%, calc( 80vh * var( --a ) ) );
		margin-inline: auto;
	}

	& img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: var( --a );
		border-radius: var( --border-radius-base );
		background-color: var( --background-color-interactive-subtle );
	}

	& :is( .caption, figcaption ) {
		margin: var( --spacing-25 ) 0 var( --spacing-75 );
		font-family: var( --font-family-system-sans );
		font-size: var( --font-size-small );
		line-height: var( --line-height-small );
		color: var( --color-subtle );
	}
}

/* Words for screen readers only: the name of an icon button. */
.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* The action to translate a text of the article into the page language:
   an icon. In the head of a section it keeps its size. */
.translate {
	flex: none;
	display: inline-grid;
	place-items: center;
	padding: var( --spacing-25 );
	border: 1px solid var( --border-color-progressive );
	border-radius: var( --border-radius-base );
	background-color: var( --background-color-base );
	color: var( --color-progressive );
	font-family: var( --font-family-system-sans );
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-semi-bold );
	cursor: pointer;

	&:hover { background-color: var( --background-color-progressive-subtle ); }
	&:disabled { opacity: 0.5; cursor: default; }
}

/* A section whose translation the reader saved (on the page only): a mark
   at its side, and its note. */
qr-section.translated > .body {
	border-inline-start: 3px solid var( --border-color-success );
	padding-inline-start: var( --spacing-100 );
}

.saved-note {
	margin: var( --spacing-50 ) 0 0;
	font-family: var( --font-family-system-sans );
	font-size: var( --font-size-small );
	color: var( --color-success );
}

/* The editor of a translation, a dialog of the page: wide, the actions in
   view while the rows scroll. The source and the machine translation side
   by side, a row for each block; on a narrow screen, one under the other. */
dialog.translator {
	inline-size: min( 1400px, 100vw - 2 * var( --gutter ) );
	max-block-size: 90vh;
	font-family: var( --font-family-serif );
	line-height: 1.7;

	& h2 {
		font-family: var( --font-family-system-sans );

		& .section-title { color: var( --color-subtle ); font-weight: var( --font-weight-normal ); }
	}

	& .labels,
	& .rows {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var( --spacing-75 ) var( --spacing-200 );
		padding-inline: var( --spacing-100 );
	}

	& .labels {
		padding-block-start: var( --spacing-75 );
		font-family: var( --font-family-system-sans );
		font-size: var( --font-size-small );
		color: var( --color-subtle );
	}

	& .rows { padding-block: var( --spacing-50 ) var( --spacing-100 ); }

	& .original { color: var( --color-subtle ); }

	& .translated {
		padding-inline: var( --spacing-75 );
		border-inline-start: 3px solid var( --border-color-progressive );
		background-color: var( --background-color-progressive-subtle );

		&[ aria-busy ] { color: var( --color-subtle ); font-style: italic; }
		&.failed { border-inline-start-color: var( --border-color-warning ); }
		&:focus { outline: 2px solid var( --outline-color-progressive--focus ); }
	}

	& :is( .original, .translated ) > :is( p, ul, ol, dl, blockquote, h3, h4, h5, h6 ) {
		margin-block: var( --spacing-25 );
	}
}

/* The editor of a label, a dialog of the page: the label in its language,
   and the field in the page language. */
dialog.label-editor {
	inline-size: min( 560px, 100vw - 2 * var( --gutter ) );

	& .fields {
		display: grid;
		gap: var( --spacing-50 );
		padding: var( --spacing-100 );
	}

	& .source {
		display: flex;
		align-items: baseline;
		gap: var( --spacing-75 );
		margin: 0 0 var( --spacing-75 );

		& .text { font-size: var( --font-size-large ); }
	}

	& input {
		padding: var( --spacing-50 ) var( --spacing-75 );
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius-base );
		font: inherit;
		font-size: var( --font-size-large );

		&:focus { outline: 2px solid var( --outline-color-progressive--focus ); outline-offset: -1px; }
	}
}

/* The actions of an editor: in view at the end of the dialog. */
dialog:is( .translator, .label-editor ) .actions {
	position: sticky;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var( --spacing-75 );
	padding: var( --spacing-75 ) var( --spacing-100 );
	border-block-start: 1px solid var( --border-color-muted );
	background-color: var( --background-color-base );
	font-family: var( --font-family-system-sans );

	& .status { margin-inline-end: auto; color: var( --color-subtle ); font-size: var( --font-size-small ); }

	& button {
		padding: var( --spacing-35 ) var( --spacing-100 );
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius-base );
		background-color: var( --background-color-interactive-subtle );
		font: inherit;
		font-weight: var( --font-weight-bold );
		cursor: pointer;
	}

	& .save {
		border-color: var( --background-color-progressive );
		background-color: var( --background-color-progressive );
		color: var( --color-inverted );
	}
}

/* A dialog is in the top layer: it follows the window, not the page. */
@media ( width < 760px ) {
	dialog.translator :is( .labels, .rows ) { grid-template-columns: 1fr; }
}

/* A play link of an audio file (play.js): a small round button. */
.play {
	display: inline-grid;
	place-items: center;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background-color: var( --background-color-neutral-subtle );
	color: var( --color-progressive );
	font-size: 10px;
	text-decoration: none;

	&:hover { background-color: var( --background-color-interactive ); }
	&.playing { background-color: var( --color-progressive ); color: var( --color-inverted ); }
}

/* The colour key of a part (--c): a split, the lines of a chart. */
.key {
	display: inline-block;
	inline-size: 10px;
	block-size: 10px;
	margin-inline-end: var( --spacing-25 );
	border-radius: 2px;
	background-color: var( --c );
}

/* The description of a value: a quiet second line. */
.desc {
	display: block;
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-normal );
	color: var( --color-subtle );

	figcaption & { color: inherit; opacity: 0.85; flex-basis: 100%; }
}

/* A card (a factoid, a chart: `.box`), and a group of cards (the rows of
   a list, an office, a timeline): the colours of the dimension of the
   spread. The edge is the border of a card and the line between the cards
   of a group. Composed items have this box; the text of the article has
   none. */
:is( .row, .pic-rows, .group, .box ) {
	--pad-block: var( --spacing-50 );
	--pad-inline: var( --spacing-75 );
	--edge: color-mix( in srgb, var( --ink ) 25%, var( --soft ) );
}

/* A card: one composed item, its title in the box. */
.box {
	padding: var( --pad-block ) var( --pad-inline );
	border: 1px solid var( --edge );
	border-radius: var( --radius );
	background-color: var( --soft );
}

/* A group of different parts (an office: its holder now, the holders
   before): one border around the parts, a line between them. The parts
   have no border of their own. */
.group {
	border: 1px solid var( --edge );
	border-radius: var( --radius );
	overflow: hidden;
	background-color: var( --soft );

	& .row {
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	& > .pic-rows {
		border: 0;
		border-block-start: 1px solid var( --edge );
		border-radius: 0;
	}

	& > .row + .row { border-block-start: 1px solid var( --edge ); }
}

/* The icon of a composed item, at the start of its label: a mask in the
   colour of the dimension. An item can name its own icon (--icon). */
:is( .row > dt, .box > h3, .map-card .label, .set > h3, .succession > h3, .timeline > h3 )::before {
	content: '';
	display: inline-block;
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: var( --spacing-25 );
	vertical-align: -0.125em;
	background-color: var( --ink );
	mask: var( --icon, var( --icon-puzzle ) ) center / contain no-repeat;
}

/* A part of a group has the icon of the group. */
.group .row > dt::before { content: none; }

/* The picture of a card goes out of the padding, to the border: the full
   height of the card, at least three lines. */
:is( .row, .pic-rows > li ) > .pic {
	align-self: stretch;
	block-size: auto;
	min-block-size: var( --h );
	margin-block: calc( -1 * var( --pad-block ) );
	margin-inline-end: calc( -1 * var( --pad-inline ) );
	border-radius: 0;

	/* A drawing on white: one line between it and the text. */
	&.k-drawing {
		border: 0;
		border-inline-start: 1px solid var( --edge );
	}
}

/* In a group, every picture has the same width, cut to it: the cards
   line up. A single card keeps the shape of its picture. */
.pic-rows > li > .pic { inline-size: calc( 4 / 3 * var( --h ) ); }

/* The qualifiers of a value: a line under the value. */
.quals { display: block; }

/* The picture beside the text of a value (a row of the sheet, of a
   dialog, of a timeline; a topic card): at the end of the text. It has
   the height of three lines of the text and the width of its shape, in
   a limited range. A drawing (a flag, a logo) is shown whole. Without a
   picture, there is no empty box: the text does not change. */
.pic {
	--h: 3lh;

	display: block;
	inline-size: calc( clamp( 0.75, var( --a ), 1.78 ) * var( --h ) );
	block-size: var( --h );
	border-radius: var( --radius );
	object-fit: cover;
	/* A tall picture keeps its top, where a face usually is. */
	object-position: 50% 20%;
	background-color: var( --background-color-neutral-subtle );

	&.k-drawing {
		object-fit: contain;
		object-position: center;
		background-color: var( --background-color-base );
		border: 1px solid var( --border-color-muted );
	}
}

/* ---------- media: every picture keeps its own shape ---------- */

.m {
	position: relative;
	margin: 0;
	aspect-ratio: var( --a );
	max-inline-size: 100%;
	border-radius: var( --radius );
	overflow: hidden;
	background-color: #1b1f23;

	& > img,
	& > .zoom > img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	& figcaption {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: var( --spacing-50 );
		padding: var( --spacing-250 ) var( --spacing-75 ) var( --spacing-50 );
		background: linear-gradient( to top, rgba( 0, 0, 0, 0.78 ), transparent );
		color: #fff;
		font-size: var( --font-size-x-small );
		line-height: 1.35;
		pointer-events: none;

		& a,
		& button { color: #fff; pointer-events: auto; }
		& b { font-size: var( --font-size-small ); }
		& .prov-imported { color: #fff; }
		& .prov-none { border-color: rgba( 255, 255, 255, 0.75 ); }
	}

	/* A drawing is shown whole on white, with its caption under the drawing. */
	/* A drawing or a logo is shown whole on white. The caption is under it,
	   not over it: the figure is two rows, the drawing fits in the first,
	   and the figure keeps its aspect ratio for the justified run. */
	&.k-drawing {
		/* The drawing is fitted in its box, so the box need not have its
		   shape: a box at least 1.5 wide for 1 high leaves room for the
		   caption under a tall, narrow logo. */
		--box: max( var( --a ), 1.5 );
		aspect-ratio: var( --box );
		display: grid;
		grid-template-rows: minmax( 0, 1fr ) auto;
		background-color: var( --background-color-base );
		border: 1px solid var( --border-color-muted );

		& img { object-fit: contain; padding: var( --spacing-75 ) var( --spacing-75 ) var( --spacing-25 ); }

		& figcaption {
			position: static;
			padding: 0 var( --spacing-75 ) var( --spacing-50 );
			background: none;
			color: var( --color-base );

			& a { color: var( --color-progressive ); }
			& .prov-imported { color: var( --color-subtle ); }
			& .prov-none { border-color: var( --border-color-base ); }
		}
	}

	/* A video is its poster with a play mark; it plays in its dialog. The
	   mark does not flip in a right-to-left page: media controls do not.
	   A 3D model has a "3D" mark; it turns in its dialog. */
	&:is( .k-video, .k-model3d ) > .zoom {
		cursor: pointer;

		&::after {
			content: '▶';
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			inline-size: 56px;
			block-size: 56px;
			margin: auto;
			border-radius: 50%;
			background-color: rgba( 0, 0, 0, 0.6 );
			color: #fff;
			font-size: 24px;
		}

		&:hover::after { background-color: rgba( 0, 0, 0, 0.8 ); }
	}

	&.k-model3d > .zoom::after {
		content: '3D';
		font-size: var( --font-size-medium );
		font-weight: var( --font-weight-bold );
	}
}

.from {
	font-size: 9px;
	font-weight: var( --font-weight-bold );
	border: 1px solid currentColor;
	border-radius: 3px;
	padding: 0 3px;
	cursor: help;
}

.assessed { color: #f5c518; }

/* Justified runs, by CSS alone. Each picture grows in proportion to its
   aspect ratio from a basis of aspect × row height, the run wraps where the
   browser finds room, and the trailing item keeps the last row from
   stretching. No row breaks are computed anywhere. */
.run {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	& > .m {
		flex: calc( var( --a ) * 100 ) 1 calc( var( --a ) * var( --h, var( --run-height ) ) );
	}

	& > .m.k-drawing {
		flex: calc( var( --box ) * 100 ) 1 calc( var( --box ) * var( --h, var( --run-height ) ) );
	}

	&::after {
		content: '';
		flex-grow: 1e4;
	}
}

.set .run,
.run.small { --h: var( --set-height ); }

/* Narrow: sets of pictures get a lower row, so that two fit side by side.
   After the rule above: a container query adds no specificity, so the
   later rule wins. */
@container page ( width < 760px ) {
	.set .run,
	.run.small { --h: 100px; }
}

/* The values of one property have equal importance: they take one row, not
   many. Each picture has the row height and its own width (height ×
   aspect); the row is cut at its end, as many pictures as fit. "View all",
   the last card, opens the dialog of all the values. */
.run.scroll {
	position: relative;
	flex-wrap: nowrap;
	overflow: hidden;

	& > .m {
		flex: none;
		inline-size: calc( var( --a ) * var( --h ) );
	}

	& > .m.k-drawing { inline-size: calc( var( --box ) * var( --h ) ); }

	&::after { content: none; }

	/* A strip of cards: a card for each value, with a gap between them,
	   not one border around them. */
	& > .pic-rows {
		display: flex;
		gap: var( --spacing-75 );
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: none;

		& > li {
			flex: none;
			inline-size: 360px;
			border: 1px solid var( --edge );
			border-radius: var( --radius );
			overflow: hidden;
			background-color: var( --soft );
			box-shadow: none;
		}
	}
}

/* "View all": a small card at the end of the row, over the picture that the
   end cuts, with a fade before it. The card is a translucent, blurred
   layer over that picture: no sudden white, and square, so that no part of
   the picture shows at its corners. */
.view-all {
	--veil: color-mix( in srgb, var( --background-color-base ) 78%, transparent );

	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: 7rem;
	padding: 0 var( --spacing-75 );
	border: 0;
	background-color: var( --veil );
	backdrop-filter: blur( 8px );
	color: var( --color-progressive );
	font: inherit;
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-semi-bold );
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline-end: 100%;
		inline-size: var( --spacing-200 );
		background: linear-gradient( to left, var( --veil ), transparent );
	}

	&:dir( rtl )::before { background: linear-gradient( to right, var( --veil ), transparent ); }

	&:hover { --veil: color-mix( in srgb, var( --background-color-interactive ) 85%, transparent ); }
}

/* All the values of a list, on the page or in its dialog: a group of
   cards, a card for each value, with its title, its description, its
   qualifiers and its picture. One border around the group; a line between
   the cards. The line is the shadow of each card in the gap of 1px, so it
   is correct for any number of columns, and an empty cell at the end has
   no line. */
.pic-rows {
	column-span: all;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 360px, 1fr ) );
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var( --edge );
	border-radius: var( --radius );
	overflow: hidden;
	background-color: var( --soft );

	& li {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		gap: var( --spacing-75 );
		align-items: start;
		padding: var( --pad-block ) var( --pad-inline );
		box-shadow: 0 0 0 1px var( --edge );
	}

	/* The last cell opens the dialog of all the values. */
	& li.all {
		display: block;
		padding: 0;

		& > button {
			inline-size: 100%;
			block-size: 100%;
			min-block-size: 3lh;
			border: 0;
			background: none;
			color: var( --color-progressive );
			font: inherit;
			font-weight: var( --font-weight-semi-bold );
			cursor: pointer;

			&:hover { background-color: color-mix( in srgb, var( --ink ) 10%, var( --soft ) ); }
		}
	}

	/* Inline: a long title wraps with its marks. The edit action is in
	   the corner of the text, out of the flow, so it takes no line. */
	& .text {
		position: relative;

		& > .edit {
			position: absolute;
			inset-block-start: 0;
			inset-inline-end: 0;
		}
	}
}

/* The picture of the item itself needs no property name. */
[data-spread='identity'] .m figcaption > span:first-child { display: none; }

ruby rt {
	font-size: 0.6em;
	color: var( --color-option-green );
	/* Chromium spreads ruby text over the width of the base word, even with
	   ruby-align: center, and that splits the clusters of Indic scripts
	   ("કેન્યા" became "ક ેન્યા"). One inline block cannot be split. */
	ruby-align: center;

	& > span { display: inline-block; }
}

.bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var( --font-size-small );

	& .bar {
		display: grid;
		grid-template-columns: minmax( 0, 10em ) minmax( 0, 1fr ) auto;
		align-items: center;
		gap: var( --spacing-75 );
		color: var( --color-base );

		& .name { color: var( --color-subtle ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		& .val { font-weight: var( --font-weight-semi-bold ); font-variant-numeric: tabular-nums; white-space: nowrap; }

		& .track {
			block-size: 12px;
			border-radius: 6px;
			background-color: var( --background-color-neutral );

			& span {
				display: block;
				block-size: 100%;
				inline-size: calc( var( --f ) * 100% );
				min-inline-size: 2px;
				border-radius: 6px;
				background-color: color-mix( in srgb, var( --ink ) 45%, transparent );
			}
		}

		&.self .name { color: var( --ink ); font-weight: var( --font-weight-bold ); }
		&.self .track span { background-color: var( --ink ); }
	}
}

/* A value on its own line. It looks the same in a row of one value, in a
   row of many, in a list and in a dialog: the type of the value sets its
   look, not the number of values. */
.v {
	position: relative;
	display: block;
	break-inside: avoid;
	padding-block: 1px;
	font-weight: var( --font-weight-semi-bold );
	/* A value or its note can be a long URL: it breaks anywhere. */
	overflow-wrap: anywhere;

	& .note { font-weight: var( --font-weight-normal ); }

	/* The edit action is out of the flow, after the end of the line, so
	   that when it is hidden it does not make an empty line. */
	& > .edit {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 100%;
	}
}

.block > .list { font-size: var( --font-size-small ); }

/* A sheet inside a stack is one column: the stack is already narrow. */
[data-slot='stack'] .sheet { columns: auto; }

details > summary {
	cursor: pointer;
	color: var( --color-progressive );
	font-size: var( --font-size-small );
}

audio { inline-size: 100%; max-inline-size: 360px; block-size: 32px; }

.provenance-note {
	grid-column: 1 / -1;
	font-size: var( --font-size-x-small );
	color: var( --color-subtle );
	border-block-start: 1px solid var( --border-color-muted );
	padding-block-start: var( --spacing-100 );
}
/* identity: the page head, the same for every class. */

/* The page head, the same for every class: the title and description,
   the banner, then the lead beside the picture of the item. The kinds go
   under the picture.

   The picture is sized by its height, not by a column: its width is the
   head height × its aspect ratio, at most 40% of the page. A grid column
   would make a portrait very tall (width ÷ aspect). So the head has its own
   two columns, not the page subgrid: the lead takes what the picture
   leaves. The last row is flexible, so the extra height of the lead goes
   to it. */
.t-identity {
	--head-height: 440px;
	grid-template-columns: minmax( 0, 1fr ) auto;
	grid-template-rows: [head] auto [band] auto [toc] auto [top] auto [bottom] 1fr;
	column-gap: var( --spacing-200 );

	& > [data-slot='head'] { grid-row: head; }
	& > [data-slot='band'] { grid-row: band; }
	& > .toc { grid-row: toc; grid-column: 1 / -1; }
	& > [data-slot='lead'] { grid-column: 1; grid-row: top / span 2; }
	& > [data-slot='hero'] { grid-column: 2; grid-row: top; }

	/* The kinds do not make the picture column wider. */
	& > [data-slot='kind'] { grid-column: 2; grid-row: bottom; contain: inline-size; }

	/* Without a picture of the item, there is no second column: the kinds
	   go under the lead. */
	&:not( :has( > [data-slot='hero'] ) ) {
		grid-template-columns: minmax( 0, 1fr );

		& > [data-slot='lead'] { grid-row: top; }
		& > [data-slot='kind'] { grid-column: 1; contain: none; }
	}

	& > [data-slot='hero'] > :is( .m, .lead-picture ) {
		inline-size: calc( var( --head-height ) * var( --a ) );
		/* Not a percentage: in an auto column it is cyclic, and the browser
		   ignores it when it sizes the column. */
		max-inline-size: 40cqi;
	}
}

/* The picture of the lead of the article, in the place of the head
   picture: the caption of the article under it. */
.lead-picture {
	margin: 0;

	& > .m { display: block; }

	& figcaption {
		margin-block-start: var( --spacing-50 );
		font-size: var( --font-size-small );
		line-height: var( --line-height-small );
		color: var( --color-subtle );
	}
}

.band .m {
	inline-size: 100%;
}

/* The contents: a line of links to the spreads, under the banner. Each
   link is underlined in the colour of its spread. */
.toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing-25 ) var( --spacing-100 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --font-size-small );

	/* A flex item is a block, so it has a first letter. */
	& li::first-letter { text-transform: uppercase; }

	/* The apparatus: at the end of the line, as at the end of the page. */
	& .end { margin-inline-start: auto; }

	& a {
		color: var( --color-base );
		text-decoration: none;
		border-block-end: 2px solid var( --ink );

		&:hover { color: var( --color-progressive ); }
	}
}

@container page ( width < 760px ) {
	/* One line that scrolls, not many lines. */
	.toc ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		padding-block-end: var( --spacing-25 );
	}

	.t-identity {
		grid-template-columns: minmax( 0, 1fr );

		& > [data-slot='hero'] > :is( .m, .lead-picture ) { max-inline-size: 100%; }
		& > [data-slot='kind'] { contain: none; }
	}
}
/* lead-beside and hero-plus-stack: a hero beside a stack, the sheet under
   the shorter column. */

.t-lead-beside {
	& > [data-slot='stack'] { grid-column: 6 / -1; }

	/* The lead, and the blocks under it when a second office is beside it
	   (the `beside` rule): spaced as the stack. */
	& > [data-slot='hero'] {
		grid-column: 1 / span 5;
		display: flex;
		flex-direction: column;
		gap: var( --gap );
	}
}

.t-hero-plus-stack {
	& > [data-slot='hero'] { grid-column: 1 / span 7; }
	& > [data-slot='stack'] { grid-column: 8 / -1; }}

/* The sheet goes under the shorter column, not under both with an empty
   area next to it. In lead-beside the hero (a portrait) is the taller one,
   so the sheet goes under the stack; in hero-plus-stack the hero (a map or
   a wide picture) is the shorter one, so the sheet goes under the hero.
   The last row is flexible: the extra height of the tall column goes to
   it, not to the short one. The strips of pictures are under the
   columns, the full width. The text of the article comes after the
   facts, then the articles of the topics. */
.t-lead-beside,
.t-hero-plus-stack {
	grid-template-rows: [title] auto [top] auto [bottom] 1fr [gallery] auto [strips] auto [prose] auto [topics] auto;

	& > h2 { grid-row: title; }
	& > [data-slot='hero'] { grid-row: top / span 2; }
	& > [data-slot='stack'] { grid-row: top; }
	& > [data-slot='sheet'] { grid-row: bottom; }
	& > [data-slot='gallery'] { grid-row: gallery; }
	& > [data-slot='strips'] { grid-row: strips; }
	& > :is( .prose-slot, .article-slot ) { grid-row: prose; }
	& > .topic-articles { grid-row: topics; }
	& > .prose-links { grid-row: -1; }
}

.t-lead-beside > [data-slot='sheet'] { grid-column: 6 / -1; }

.t-hero-plus-stack {
	& > [data-slot='hero'] { grid-row: top; }
	& > [data-slot='stack'] { grid-row: top / span 2; }
	& > [data-slot='sheet'] { grid-column: 1 / span 7; }
}
/* columns: blocks without a shape of their own, side by side. */

/* A set of pictures in a stack of columns takes the whole width of the
   stack: pictures need width, and text blocks flow in the columns under it.
   A timeline too: a row for each event, across the page. */
.t-columns > [data-slot='stack'] > :is( .set, .scores, .timeline, .links ) { column-span: all; }

/* Blocks without a shape of their own stand side by side. Without a hero,
   the stack takes the whole width. */
.t-columns {
	& > [data-slot='hero'] { grid-column: 1 / span 4; }
	&:not( :has( > [data-slot='hero'] ) ) > [data-slot='stack'] { grid-column: 1 / -1; }

	/* Blocks of uneven height flow in balanced columns, down each column,
	   so a short block does not leave the height of a tall one empty. */
	& > [data-slot='stack'] {
		grid-column: 5 / -1;
		display: block;
		columns: 3 260px;
		column-gap: var( --gap );

		& > * {
			break-inside: avoid;
			margin-block-end: var( --gap );
		}
	}
}
/* feature-run: one feature picture, then a justified run. */

/* The feature: one picture, as large as the page allows, whole. */
.feature .m {
	inline-size: min( 100%, calc( var( --feature-max ) * var( --a ) ) );
	margin-inline: auto;
}
/* collapsed: "more", closed until the reader opens it. */

/* "More": the rest of the statements, closed until the reader opens it. */
.t-collapsed > details {
	grid-column: 1 / -1;

	& > summary {
		padding-block: var( --spacing-50 );
		border-block-start: 1px solid var( --border-color-muted );
	}
}
/* title */

.title {
	& h1 {
		margin: 0;
		font-family: var( --font-family-heading-main );
		font-weight: var( --font-weight-normal );
		font-size: clamp( 2.25rem, 6cqi, 3.5rem );
		line-height: 1.05;
	}

	& p { margin: var( --spacing-50 ) 0 0; font-size: var( --font-size-large ); color: var( --color-subtle ); }
}
/* kind */

.kind {
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing-50 ) var( --spacing-150 );
	font-size: var( --font-size-small );

	& .k { display: block; color: var( --color-subtle ); font-size: var( --font-size-x-small ); }
}
/* prose: the lead of the article, all its blocks. */

.lead {
	& :is( p, ul, ol, dl, blockquote ) {
		margin: 0 0 var( --spacing-75 );
		line-height: 1.7;
		max-inline-size: 70ch;
		text-wrap: pretty;
	}

	& .source { font-size: var( --font-size-small ); color: var( --color-subtle ); }
}
/* earlier: the earlier files of a property, all of them in a dialog. */

.earlier-files {
	/* A grid of its own, not in the columns of a list dialog. */
	column-span: all;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
	gap: var( --spacing-100 );

	& figure {
		display: grid;
		gap: var( --spacing-25 );
		margin: 0;
	}

	/* A flag or a logo is shown whole. */
	& img {
		display: block;
		inline-size: 100%;
		block-size: 80px;
		object-fit: contain;
	}
}
/* sounds: the recordings of one property, one player and a choice (the
   qr-sounds element). */

qr-sounds {
	& .sound {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var( --spacing-25 ) var( --spacing-75 );

		&[hidden] { display: none; }
	}

	& .sound-name { font-weight: var( --font-weight-semi-bold ); }

	/* With the choice shown, the choice names the recording. */
	& select:not( [hidden] ) ~ .sound .sound-name { display: none; }

	& select {
		align-self: start;
		max-inline-size: 100%;
		padding: var( --spacing-25 ) var( --spacing-50 );
		border: 1px solid var( --border-color-base );
		border-radius: var( --border-radius-base );
		background-color: var( --background-color-base );
		color: var( --color-base );
		font: inherit;
		font-size: var( --font-size-small );
	}
}
/* names: the names of the item in many languages (the qr-names element).
   The rows are the rows of the fact sheet. */

qr-names {
	& select { align-self: start; }

	& .groups {
		display: grid;
		gap: var( --spacing-100 );
	}

	& .name-group > h4 {
		margin: 0;
		font-size: var( --font-size-small );
		font-weight: var( --font-weight-semi-bold );
	}

	& dl {
		margin: 0;
		font-size: var( --font-size-small );
	}

	& .fallback dd { font-weight: var( --font-weight-normal ); }

	/* Without the script: every group, in a box that scrolls. The fallback
	   rows only in the first group, so the list has each value once. */
	&:not( :defined ) {
		& .groups {
			max-block-size: 360px;
			overflow: auto;
		}

		& .name-group + .name-group .fallback { display: none; }
	}

	/* With the script: one group; the choice names its language. */
	&:defined .name-group > h4 { display: none; }

	& .name-group[hidden] { display: none; }
}
/* map */

/* ---------- map ---------- */

.map {
	position: relative;
	margin: 0;
	aspect-ratio: 8 / 5;
	border-radius: var( --radius );
	overflow: hidden;
	background-color: var( --background-color-neutral );

	& img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

	/* The outlines, the pin and the markers, placed by the renderer on its
	   frame; their look is below. A line keeps its width when the frame
	   scales. */
	& .outlines {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;

		& path { vector-effect: non-scaling-stroke; }
	}
}

/* The map of a spread: a card. The map goes to the border at the top, with
   the corners of the card; the words are under it, the property first. */
.map-card {
	display: grid;
	gap: var( --spacing-50 );

	& > .map {
		margin: calc( -1 * var( --pad-block ) ) calc( -1 * var( --pad-inline ) ) 0;
		border-radius: calc( var( --radius ) - 1px ) calc( var( --radius ) - 1px ) 0 0;
	}

	& > .caption {
		margin: 0;
		font-size: var( --font-size-small );
		font-variant-numeric: tabular-nums;
	}

	& .label {
		display: block;
		color: var( --ink );
	}
}

/* A map with shapes, and a line for each shape under it: the sample of its
   outline, its qualifiers (whose view it is) and its credit. */
.map-shapes {
	display: grid;
	gap: var( --spacing-50 );

	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var( --font-size-x-small );
		color: var( --color-subtle );
	}

	& li > .edit { opacity: 0; }
	& li:is( :hover, :focus-within ) > .edit { opacity: 1; }

	& .line {
		display: inline-block;
		inline-size: 24px;
		margin-inline-end: var( --spacing-50 );
		vertical-align: middle;
		border-block-start: 2px dashed var( --ink );

		&.main { border-block-start-style: solid; }
	}
}

/* The pin of a coordinate in a text: a small button that opens a map of
   the point in a dialog. The map takes the whole width of the dialog. */
.pin-link {
	padding: 0;
	margin-inline-end: 2px;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

/* The marks of a map, the same on the static map and on the map that the
   reader moves (Leaflet draws them with these classes). The outlines of
   the shapes: the preferred one solid with a light fill, the others
   dashed; an open line has no fill. Physical left and top on the static
   map: a map does not flip with the text direction. */
:is( .map .outlines, qr-map ) path {
	fill: none;
	fill-opacity: 1;
	fill-rule: evenodd;
	stroke: var( --ink );
	stroke-opacity: 1;
	stroke-width: 2;

	&.main { fill: color-mix( in srgb, var( --ink ) 12%, transparent ); }
	&.other { stroke-dasharray: 6 4; }
	&.open { fill: none; }
}

:is( .map, qr-map ) .pin {
	position: absolute;
	inline-size: 16px;
	block-size: 16px;
	translate: -50% -50%;
	border-radius: 50%;
	background-color: var( --color-progressive );
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
}

/* The extreme points of the item: a diamond. The box is not rotated, its
   ::before is: Leaflet places a marker by its transform, and a rotation
   of the box would turn that place too. */
:is( .map, qr-map, .map-legend ) .marker {
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	translate: -50% -50%;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		rotate: 45deg;
		background-color: var( --ink );
		border: 2px solid #fff;
	}
}

/* The map in a dialog: the reader moves it and zooms it. Until Leaflet
   has drawn it, the static map of the page. */
qr-map {
	display: block;
	inline-size: 100%;
	aspect-ratio: 8 / 5;
	max-block-size: 70vh;

	& > .map { border-radius: 0; }

	&.leaflet-container {
		font: inherit;
		font-size: var( --font-size-x-small );
		background-color: var( --background-color-neutral );
	}
}

/* Under the map in its dialog: what each marker is. */
.map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing-25 ) var( --spacing-150 );
	margin: 0 0 var( --spacing-50 );
	padding: 0;
	list-style: none;

	& .marker {
		position: relative;
		display: inline-block;
		translate: none;
		margin-inline-end: var( --spacing-75 );
	}
}
/* fact: the rows of the fact sheet. */

/* ---------- the fact sheet ---------- */

.sheet {
	columns: 3 280px;
	column-gap: var( --spacing-200 );
	margin: 0;
	font-size: var( --font-size-small );
}

/* A card: the label above the value, so the value has the full width.
   The tools are at the end of the label line. A picture, if there is
   one, fills the end of the card and shares its border; the text does
   not change. The colours are the dimension of the spread. */
.row {
	break-inside: avoid;
	display: grid;
	grid-template:
		'label tools' auto
		'value value' auto / minmax( 0, 1fr ) auto;
	gap: 0 var( --spacing-75 );
	align-items: start;
	margin-block-end: var( --spacing-50 );
	padding: var( --pad-block ) var( --pad-inline );
	border: 1px solid var( --edge );
	border-radius: var( --radius );
	background-color: var( --soft );

	&:has( > .pic ) {
		grid-template:
			'label tools pic' auto
			'value value pic' 1fr / minmax( 0, 1fr ) auto auto;
	}

	& dt {
		grid-area: label;
		color: var( --ink );
	}

	& > .tools { grid-area: tools; }

	& dd {
		grid-area: value;
		margin: 0;
		font-weight: var( --font-weight-semi-bold );
		font-variant-numeric: tabular-nums;
		overflow-wrap: anywhere;

		& .note { font-weight: var( --font-weight-normal ); }
	}

	/* Its outer corners are the corners of the card. */
	& > .pic {
		grid-area: pic;
		border-start-end-radius: calc( var( --radius ) - 1px );
		border-end-end-radius: calc( var( --radius ) - 1px );
	}

	/* A value that has ended: shown, but quieter than the current ones. */
	&.former {
		/* The word "former" after the label. */
		& .mark { font-size: var( --font-size-x-small ); font-style: italic; }

		& dd { font-weight: var( --font-weight-normal ); color: var( --color-subtle ); }
	}

	&.absent {
		& dt { font-style: italic; }
		& dd { font-weight: var( --font-weight-normal ); color: var( --color-subtle ); }
	}
}

/* ---------- a value on a scale ---------- */

/* Under the value of a row. A proportion fills the track from the start;
   an index has a marker at its place, with the ends of the scale. The
   colour is the dimension of the spread. */
.gauge {
	display: flex;
	align-items: center;
	gap: var( --spacing-50 );
	max-inline-size: 240px;
	margin-block-start: var( --spacing-25 );
	font-size: var( --font-size-x-small );
	font-weight: var( --font-weight-normal );
	color: var( --color-subtle );

	& .track {
		position: relative;
		flex: 1;
		block-size: 6px;
		border-radius: 3px;
		/* Not --soft: the card has that colour. */
		background-color: var( --edge );

		& > span {
			position: absolute;
			background-color: var( --ink );
		}
	}

	&.g-proportion .track > span {
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: calc( var( --at ) * 100% );
		border-radius: 3px;
	}

	&.g-index .track > span {
		inset-block: -4px;
		inset-inline-start: calc( var( --at ) * 100% - 2px );
		inline-size: 4px;
		border-radius: 2px;
	}
}
/* series: measurements over time (the qr-chart element). A card, as a
   factoid: its title and its chart in one box. A box of one block size
   holds the table of the points; when the script draws the chart, the
   chart takes the same box, so the page does not move. */

qr-chart {
	& .desc { margin: 0; }

	& .chart {
		position: relative;
		block-size: 200px;
		overflow: auto;
	}

	& table {
		inline-size: 100%;
		border-collapse: collapse;
		font-size: var( --font-size-small );
		font-variant-numeric: tabular-nums;

		& th,
		& td {
			padding-block: var( --spacing-25 );
			padding-inline: 0 var( --spacing-50 );
			text-align: start;
			font-weight: var( --font-weight-normal );
		}

		& thead th {
			position: sticky;
			inset-block-start: 0;
			background-color: var( --soft );
			color: var( --color-subtle );
		}

		& tbody tr + tr { border-block-start: var( --border-width-base ) solid var( --border-color-subtle ); }
	}

	& .plot {
		position: absolute;
		inset: 0;
	}

	/* The chart is drawn: the table stays for screen readers only. Its
	   wrapper is hidden, not the table: a table box keeps the height of
	   its rows, and in the columns of a stack that height takes the place
	   of the other blocks. */
	&.drawn {
		& .chart { overflow: visible; }

		& .data {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset( 50% );
			white-space: nowrap;
		}
	}
}
/* split: the parts of one whole, a bar of 100 % for each year. A segment
   grows by its share, so the bar is full when the rounded shares do not
   add up to exactly 1. The bar follows the direction of the page. */

.split {
	& .year {
		display: grid;
		gap: var( --spacing-25 );
	}

	& .year > .note { margin: 0; }

	& .bar {
		display: flex;
		gap: 2px;
		block-size: 20px;
		border-radius: 4px;
		overflow: hidden;

		& > span {
			flex: var( --share ) 1 0;
			background-color: var( --c );
		}
	}

	& ul {
		display: flex;
		flex-wrap: wrap;
		gap: var( --spacing-25 ) var( --spacing-100 );
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var( --font-size-small );
		font-variant-numeric: tabular-nums;
	}

	/* The parts of a part (by sex): a second line. */
	& li > .note { display: block; }
}
/* scale: the bars are in base.css (shared with peers). */

.scale .bars .track span { background-color: var( --ink ); }
/* succession */

/* An office: one box (a group). The holder now is a card with the picture
   on top, at its own shape, in the top corner of the box; the words are
   under it. Under the card, the holders before. */
.succession {
	& .holder { margin: 0; }

	& .row:has( > .photo ) {
		grid-template:
			'photo photo' auto
			'label tools' auto
			'value value' auto / minmax( 0, 1fr ) auto;
	}

	& .photo {
		grid-area: photo;
		display: block;
		aspect-ratio: var( --a );
		inline-size: auto;
		max-inline-size: calc( 100% + var( --pad-inline ) );
		block-size: 24rem;
		margin-block: calc( -1 * var( --pad-block ) ) var( --pad-block );
		margin-inline-start: calc( -1 * var( --pad-inline ) );
		object-fit: cover;
		/* A tall picture keeps its top, where a face usually is. */
		object-position: 50% 20%;
	}
}
/* score */

/* Review scores: what a casual reader looks for first. The source is its
   logo, known at a glance in every language; the score is large. A row of
   cards, as a strip. */
.scores {
	display: flex;
	flex-direction: row;  /* a block is a column; the cards are a row */
	flex-wrap: wrap;
	gap: var( --gap );

	& .card {
		position: relative;
		flex: 1 1 150px;
		max-inline-size: 220px;
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var( --spacing-25 );
		padding: var( --spacing-75 ) var( --spacing-100 );
	}

	& .logo {
		block-size: 28px;
		max-inline-size: 150px;
		object-fit: contain;
		object-position: left;
	}

	& .source { font-weight: var( --font-weight-bold ); }

	& .value {
		font-size: 2.25rem;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}

	& :is( .method, .meta ) {
		font-size: var( --font-size-small );
		color: var( --color-subtle );
	}

	& .meta {
		display: flex;
		gap: var( --spacing-50 );
		font-variant-numeric: tabular-nums;
	}

	& > .card > .tools {
		position: absolute;
		inset-block-start: var( --spacing-50 );
		inset-inline-end: var( --spacing-50 );
	}
}
/* timeline: events that are items of their own, the oldest first. Each
   event is a row: its date and its text, on the two sides of a line in
   the colour of the dimension, with a dot at each event. The picture is
   under the date, against the line: a timeline row has no frame at its
   end, so the line holds the picture to its event. The text starts at
   the same place with or without a picture. */

.timeline {
	--when: 9rem;

	/* A group: one box around the events. */
	& ol {
		margin: 0;
		padding: var( --pad-block ) var( --pad-inline );
		list-style: none;
	}

	& li {
		position: relative;
		display: grid;
		grid-template:
			'when what' auto
			'pic what' 1fr / var( --when ) minmax( 0, 1fr );
		gap: var( --spacing-150 );
		align-items: start;
		padding-block: var( --spacing-75 );

		/* The line, between the date and the text: in the colour of the
		   lines of a group (the box has the colour of --soft). */
		&::before {
			content: '';
			position: absolute;
			inset-block: 0;
			inset-inline-start: calc( var( --when ) + var( --spacing-75 ) - 1px );
			border-inline-start: 2px solid var( --edge );
		}
	}

	& .when {
		grid-area: when;
		position: relative;
		text-align: end;
		font-weight: var( --font-weight-semi-bold );
		font-variant-numeric: tabular-nums;
		color: var( --ink );

		/* The dot of the event, on the line. */
		&::after {
			content: '';
			position: absolute;
			inset-block-start: 0.45em;
			inset-inline-end: calc( -1 * var( --spacing-75 ) - 5px );
			inline-size: 10px;
			block-size: 10px;
			border-radius: 50%;
			background-color: var( --ink );
		}
	}

	& .what {
		grid-area: what;
		font-weight: var( --font-weight-semi-bold );
	}

	/* On a narrow page, a wide picture is cut to the width of the date. */
	& li > .pic {
		grid-area: pic;
		justify-self: end;
		max-inline-size: 100%;
	}

	@media ( max-width: 600px ) { --when: 4.5rem; }
}
/* links */

/* The item's sites and accounts: rows of the fact sheet (`.row`), the
   addresses of a row in one line that wraps, each with the icon of its
   site. Inline, so that an icon stays with its address. */
.links {
	/* Two columns, also in a stack: the label is above the addresses, so
	   a row needs less width. */
	&.sheet { columns: 2 360px; }

	& .link { margin-inline-end: var( --spacing-75 ); }

	& .favicon {
		inline-size: 16px;
		block-size: 16px;
		margin-inline-end: var( --spacing-25 );
		object-fit: contain;
		vertical-align: -3px;
	}

	/* The count of followers: a pill, apart from the note. */
	& .followers {
		display: inline-block;
		padding: 0 var( --spacing-50 );
		border-radius: 999px;
		background-color: var( --background-color-neutral );
		font-size: var( --font-size-x-small );
		font-weight: var( --font-weight-normal );
		color: var( --color-subtle );
		font-variant-numeric: tabular-nums;
	}
}
/* provenance */

/* ---------- evidence ---------- */

.stack-bar {
	display: flex;
	gap: 2px;
	block-size: 14px;
	border-radius: 7px;
	overflow: hidden;
	max-inline-size: 640px;

	& span { flex: var( --n ); }
	& .p-sourced { background-color: var( --color-base ); }
	& .p-imported { background-color: var( --color-subtle ); }
	& .p-none { background-color: var( --border-color-base ); }
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing-50 ) var( --spacing-150 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --font-size-small );
}
/* sitelinks */

/* A count for a project family, in the evidence spread. Not a value. The
   logo of the project before its name, at the size of the text. On the
   card of the block, so not in the colour of the card. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var( --spacing-25 );
	background-color: var( --background-color-base );
	border-radius: var( --border-radius-pill );
	padding: 0 var( --spacing-75 );
	margin: 1px 2px 1px 0;

	& svg {
		flex: none;
		inline-size: 1.15em;
		block-size: 1.15em;
	}
}
/* identifiers */

.idlist {
	columns: 3 260px;
	column-gap: var( --spacing-150 );
	font-size: var( --font-size-x-small );

	& div {
		break-inside: avoid;
		display: flex;
		justify-content: space-between;
		gap: var( --spacing-50 );
		border-block-end: 1px solid var( --border-color-muted );
		padding-block: 2px;
	}

	& span:last-child { font-family: var( --font-family-monospace ); word-break: break-all; }
}