/**
 * WikimediaUI Base v0.22.0
 * Wikimedia Foundation user interface base variables
 * https://gerrit.wikimedia.org/g/wikimedia-ui-base/
 *
 * See also https://design.wikimedia.org/style-guide/
 */

:root {
	/* == Breakpoints == */
	/* The following numbers are prone to change with new information. */

	/**
	 * Minimum available screen width at which a device can be considered a mobile device
	 * Many older feature phones have screens smaller than this value.
	 */
	--width-breakpoint-mobile: 320px;

	/**
	 * Minimum available screen width at which a device can be considered a tablet
	 * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
	 * enough to cover iPad (768px).
	 */
	--width-breakpoint-tablet: 720px;

	/* Minimum available screen width at which a device can be considered a desktop. */
	--width-breakpoint-desktop: 1000px;

	/* Wider desktop breakpoint, currently used in Flow. */
	--width-breakpoint-desktop-wide: 1200px;

	/* Extra wide desktop breakpoint */
	--width-breakpoint-desktop-extrawide: 2000px;


	/* == Colors == */
	/**
	 * WikimediaUI (`wmui`) color palette
	 * See https://design.wikimedia.org/style-guide/visual-style_colors.html
	 * Don't use those variables directly, instead define your vars
	 * referring to them as applied further below.
	 */
	--wmui-color-base0:    #000;    /* = HSB 0°, 0%, 0% */
	--wmui-color-base10:   #202122; /* = HSB 210°, 6%, 13% */
	--wmui-color-base20:   #54595d; /* = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` */
	--wmui-color-base30:   #72777d; /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */
	--wmui-color-base50:   #a2a9b1; /* = HSB 212°, 8%, 69% */
	--wmui-color-base70:   #c8ccd1; /* = HSB 213°, 4%, 82% */
	--wmui-color-base80:   #eaecf0; /* = HSB 220°, 3%, 94% */
	--wmui-color-base90:   #f8f9fa; /* = HSB 210°, 1%, 98% */
	--wmui-color-base100:  #fff;    /* = HSB 0°, 0%, 100% */

	--wmui-color-accent30: #2a4b8d; /* = HSB 220°, 70%, 55% */
	--wmui-color-accent50: #36c;    /* = HSB 220°, 75%, 80% */
	--wmui-color-accent90: #eaf3ff; /* = HSB 214°, 8%, 100% */

	--wmui-color-red30:    #b32424; /* = HSB 360°, 80%, 70% */
	--wmui-color-red50:    #d33;    /* = HSB 360°, 77%, 87% */
	--wmui-color-red90:    #fee7e6; /* = HSB 3°, 9%, 100% */

	--wmui-color-yellow30: #ac6600; /* = HSB 36°, 100%, 67% */
	--wmui-color-yellow50: #edab00; /* = HSB 43°, 100%, 93% */
	--wmui-color-yellow90: #fef6e7; /* = HSB 39°, 9%, 100% */

	--wmui-color-green30:  #14866d; /* = HSB 167°, 85%, 53% */
	--wmui-color-green50:  #00af89; /* = HSB 167°, 100%, 69% */
	--wmui-color-green90:  #d5fdf4; /* = HSB 166°, 16%, 99% */

	/* Note, this color is part of the Codex Design System, under different naming scheme. */
	--wmui-color-green700: #096450;

	/* Modifier colors, not part of official palette, limited to interaction state usage. */
	--wmui-color-base10--lighten: #404244;
	--wmui-color-accent50--lighten: #447ff5; /* = `filter: brightness( 109% )` */
	--wmui-color-red50--lighten: #ff4242; /* ~= `filter: brightness( 120% )` */
	--wmui-color-green50--lighten: #1c6665;
	--wmui-color-purple50: #6b4ba1;

	/* From here on no static color values, only variable references. */
	/* Background Colors */
	--background-color-base:           var( --wmui-color-base100 );
	--background-color-base--hover:    var( --wmui-color-base80 );
	--background-color-base--disabled: var( --wmui-color-base80 );
	--background-color-base--read-only: var( --wmui-color-base90 );
	--background-color-code:           var( --wmui-color-base90 );
	/* 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…) */
	--background-color-framed:         var( --wmui-color-base90 );
	--background-color-framed--hover:  var( --wmui-color-base100 );
	--background-color-framed--active: var( --wmui-color-base80 );
	/* 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) */
	--background-color-filled--disabled: var( --wmui-color-base70 );
	/* Binary Input elements (Checkboxes, Radios, Toggle Switches) */
	--background-color-input-binary--active: var( --color-primary--active );
	--background-color-input-binary--checked: var( --color-primary );
	/* Quiet Buttons */
	--background-color-quiet:          var( --background-color-base );
	/* Use `rgba()` values here as the quiet buttons need to blend in with background. */
	--background-color-quiet--hover:   rgba( 0, 24, 73, calc( 7 / 255 ) ); /* = `--wmui-color-base90` on white. */
	--background-color-quiet--active:  rgba( 0, 24, 73, calc( 21 / 255 ) ); /* = `--wmui-color-base80` on white. */
	/* Toolbar and Tools */
	--background-color-toolbar:        var( --background-color-base );
	--background-color-tool--hover:    var( --background-color-base--hover );
	--background-color-tool--active:   var( --background-color-primary );
	--background-color-tool--active-hover: var( --background-color-primary--hover );
	/* Tabs Navigation Background Color */
	--background-color-tabs:           var( --wmui-color-base80 );
	/* User system messages (errors, warnings, successes, notices) */
	--background-color-error--framed:  var( --wmui-color-red90 );
	--background-color-warning--framed: var( --wmui-color-yellow90 );
	--background-color-success--framed: var( --wmui-color-green90 );
	--background-color-notice--framed: var( --wmui-color-base80 );
	/* Highlight Colors for text highlighting, think metaphorically text marker */
	--background-color-highlight:      rgba( 255, 182, 13, 0.4 ); /* Equals to `#ffe29e` on `#fff` background. */

	/* Foreground Colors */
	--color-base:                      var( --wmui-color-base10 );
	--color-base--hover:               var( --wmui-color-base10--lighten );
	--color-base--active:              var( --wmui-color-base0 );
	--color-base--inverted:            var( --wmui-color-base100 );
	--color-base--emphasized:          var( --color-base--active );
	--color-base--subtle:              var( --wmui-color-base30 );
	--color-base--disabled:            var( --wmui-color-base30 );
	--color-filled--disabled:          var( --color-base--inverted );
	--color-accessory:                 var( --wmui-color-base20 );
	--color-placeholder:               var( --wmui-color-base30 );
	/* Primary 'Progressive' Color, Background Color and states */
	--background-color-primary:        var( --wmui-color-accent90 );
	--background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
	--color-primary:                   var( --wmui-color-accent50 );
	--color-primary--hover:            var( --wmui-color-accent50--lighten );
	--color-primary--active:           var( --wmui-color-accent30 );
	--color-primary--focus:            var( --color-primary );
	/* 'Destructive' Color, Background Color and states */
	--background-color-destructive:    var( --wmui-color-red90 );
	--color-destructive:               var( --wmui-color-red50 );
	--color-destructive--hover:        var( --wmui-color-red50--lighten );
	--color-destructive--active:       var( --wmui-color-red30 );
	--color-destructive--focus:        var( --color-destructive );
	/* Secondary Color and states (links only) */
	--color-secondary:                 var( --wmui-color-green50 );
	--color-secondary--hover:          var( --wmui-color-green50--lighten );
	--color-secondary--active:         var( --wmui-color-green30 );
	--color-secondary--focus:          var( --color-secondary );
	/* User system messages (errors, warnings, successes, notices) */
	--color-error:                     var( --wmui-color-red50 );
	--color-warning:                   var( --wmui-color-base0 );
	--color-success:                   var( --wmui-color-green30 );
	--color-success--framed:           var( --wmui-color-base0 );
	--color-notice:                    var( --wmui-color-base0 );
	/* Toolbar and Tools */
	--color-tool--hover:               var( --color-base--emphasized ); /* Used here in combination with `:hover` background-color turning light grey */
	--color-tool--active:              var( --color-primary );


	/* Opacity */
	--opacity-base:                    1;
	--opacity-icon-base:               0.87; /* = `#222` on `background-color: #fff`, closest to `#202122` */
	--opacity-icon-base--hover:        0.74; /* = `#424242` on `background-color: #fff`, closest to `#404244` */
	--opacity-icon-base--selected:     1;
	--opacity-icon-base--disabled:     0.51; /* = `#7d7d7d` on `background-color: #fff`, closest to `#72777d`.  HSB 0°, 0%, 49%. */
	--opacity-icon-accessory:          0.67; /* = `#555`, closest to `#54595d` on background-color `#fff`. */


	/* == Positioning == */
	/* Positioning Model */
	/* Use `px` unit to prevent pixel rounding error when using `@size-input-binary / 4`. */
	/* Works with different sizes on mobile and desktop as it negatively offsets from outside. */
	--position-offset-input-radio-focus: -4px;

	/* Z-Index */
	--z-index-base:                    0;
	--z-index-overlay:                 101;


	/* == Box Model properties == */
	/* Box Sizing */
	--box-sizing-base:                 border-box;

	/* `--*size` variables are used for `*width` & `*height` properties. */
	--min-size-base:                   32px; /* Values used for `min-*` are defined in `px`, see T130691. */
	--size-base:                       32px;
	--size-full:                       100%;

	--min-size-icon:                   20px;
	--size-icon:                       20px;
	--min-size-indicator:              12px;
	--size-indicator:                  12px;
	--size-input-binary:               20px;
	--size-tool:                       42px;

	/* Max Widths */
	--max-width-base:                  50em;
	--max-width-button:                28.75em; /* = `460px` at `16px` base, see T95367 */
	--max-width-input:                 var( --max-width-base );
	--max-width-input-inline:          100%;

	/* Border */
	--border-base:                     var( --border-width-base ) var( --border-style-base ) var( --border-color-base );
	--border-dialog:                   var( --border-base );
	--border-menu:                     var( --border-base );
	--border-input-binary:             var( --border-width-base ) var( --border-style-base ) var( --border-color-input-binary );
	/* User system messages (errors, warnings, successes, notices) */
	--border-error:                    var( --border-width-base ) var( --border-style-base ) var( --border-color-error );
	--border-warning:                  var( --border-width-base ) var( --border-style-base ) var( --border-color-warning );
	--border-success:                  var( --border-width-base ) var( --border-style-base ) var( --border-color-success );
	--border-notice:                   var( --border-base );
	/* Border Colors */
	--border-color-base:               var( --wmui-color-base50 );
	--border-color-base--hover:        var( --wmui-color-base50 );
	--border-color-base--active:       var( --wmui-color-base30 );
	--border-color-base--focus:        var( --color-primary--focus );
	--border-color-base--disabled:     var( --wmui-color-base70 );
	--border-color-filled-disabled:    var( --color-filled--disabled );
	/* Border Colors primary buttons */
	--border-color-primary:            var( --color-primary );
	--border-color-primary--hover:     var( --color-primary--hover );
	--border-color-primary--active:    var( --color-primary--active );
	--border-color-primary--focus:     var( --border-color-primary );
	--border-color-destructive:        var( --color-destructive );
	--border-color-destructive--hover: var( --color-destructive--hover );
	--border-color-destructive--active: var( --color-destructive--active );
	--border-color-destructive--focus: var( --border-color-destructive );
	--border-color-inset--focus:       var( --color-base--inverted );
	--border-color-input--hover:       var( --border-color-base--active );
	--border-color-input-binary:       var( --border-color-base--active );
	--border-color-input-binary--active: var( --color-primary--active );
	--border-color-input-binary--checked: var( --color-primary );
	--border-color-heading:            var( --wmui-color-base70 );
	--border-color-divider:            var( --wmui-color-base50 );
	--border-color-wikitable:          rgba( 84, 89, 93, 0.3 ); /* See T168029 */
	/* Border Colors user system messages */
	--border-color-error:              var( --wmui-color-red30 );
	--border-color-warning:            var( --wmui-color-yellow30 );
	--border-color-success:            var( --wmui-color-green700 );
	--border-color-notice:             var( --wmui-color-base20 );
	/* Border Styles */
	--border-style-base:               solid;
	/* Border Widths */
	--border-width-base:               1px;
	/* Border Radius */
	--border-radius-base:              2px;
	/* Use for circle or ellipsis. */
	/* See https://stackoverflow.com/a/29966500 */
	--border-radius-circle:            50%;
	/* Use for rounded rectangle. */
	/* Corner overlap reduce radii to half of size of smallest side. */
	/* See https://www.w3.org/TR/css-backgrounds-3/#corner-overlap */
	--border-radius-round:             9999px;
	--border-radius-input-radio:       var( --border-radius-circle );

	/* Paddings */
	--padding-base:                    var( --padding-vertical-base ) var( --padding-horizontal-base );
	--padding-input-text:              var( --padding-vertical-base ) var( --padding-horizontal-input-text );
	--padding-horizontal-base:         12px;
	/* Must be < `8` as it cuts off scripts like Burmese. Directly connected to `line-height` further down. */
	--padding-vertical-base:           5px;
	--padding-horizontal-input-text:   8px;
	/* Menu items don't have a border. So add it to padding. */
	--padding-vertical-menu:           calc( var( --padding-vertical-base ) + var( --border-width-base ) );

	/* Box Shadows */
	/* Base widget `box-shadow` set to `transparent` for transition purpose. */
	--box-shadow-base:                 inset 0 0 0 1px transparent;
	--box-shadow-base--focus:          inset 0 0 0 1px var( --wmui-color-accent50 );
	--box-shadow-primary-focus:        inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px var( --color-base--inverted );
	--box-shadow-destructive--focus:   inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px var( --color-base--inverted );
	--box-shadow-filled--disabled:     inset 0 0 0 1px var( --color-filled--disabled );
	--box-shadow-card:                 0 1px 1px rgba( 0, 0, 0, 0.15 );
	--box-shadow-dialog:               0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
	--box-shadow-menu:                 var( --box-shadow-dialog );

	/* Outlines */
	/* Enable Windows high contrast mode on certain widgets, that have default outlines overridden. */
	--outline-base--focus:             var( --border-width-base ) var( --border-style-base ) transparent;


	/* == Typography incl. print properties == */
	/* See https://design.wikimedia.org/style-guide/visual-style_typography.html */
	/* Font Families */
	--font-family-base:                var( --font-family-sans );
	--font-family-heading-main:        var( --font-family-serif );
	/* To be deprecated, see T247166. */
	--font-family-sans:                'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
	/* Provide better operating system-specific readability, see T175877. */
	/* `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576. */
	--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 Pro', serif;
	--font-family-serif--fallback:     serif;
	/* Provide better operating system-specific monospace stack, see T209915. */
	--font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
	--font-family-monospace--fallback: monospace, monospace; /* See T176636. */
	/* Font Weights */
	--font-weight-base:                var( --font-weight-normal );
	/* See https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping */
	--font-weight-hairline:            100;
	--font-weight-light:               300;
	--font-weight-normal:              400;
	--font-weight-semi-bold:           600;
	--font-weight-bold:                700;
	/* Line Heights */
	--line-height-base:                1.6;
	--line-height-heading:             1.375;
	--text-decoration-link--hover:     none;
	/* Text Shadows */
	--text-shadow-base:                0 1px 1px var( --color-base--inverted ); /* 'coined' effect */
	--text-shadow-base--disabled:      var( --text-shadow-base );


	/* == Other Properties == */
	/* Cursors */
	--cursor-base--disabled:           default;


	/* == Animation & Transition == */
	/* Transitions */
	--transition-base:                 var( --transition-duration-base ); /* `ease` is the initial value */
	--transition-ease-medium:          var( --transition-duration-medium );
	/* `ease-out` is preferably used on human initiated transitions, for example dialogs */
	--transition-ease-out-medium:      ease-out var( --transition-duration-medium );
	/* Transitions > Durations */
	--transition-duration-base:        100ms;
	--transition-duration-medium:      250ms;

	/* == Deprecated variables == */
	/* Since v0.22.0 */
	--opacity-base--disabled:          var( --opacity-icon-base--disabled );
}


/* Spec Wiki layout — Vector-inspired chrome (S16.1 baseline + S16.2 navigation) */

:root {
  color-scheme: light;
  --background-color-base: #ffffff;
  --background-color-base--hover: #eaecf0;
  --background-color-code: #f6f8fa;
  --background-color-interactive-subtle: #f8f9fa;
  --color-base: #202122;
  --color-base--hover: #404244;
  --color-base--active: #000000;
  --color-base--subtle: #54595d;
  --color-primary: #3366cc;
  --color-primary--hover: #2a4b8d;
  --color-primary--active: #233566;
  --border-color-base: #72777d;
  --border-color-divider: #72777d;
  --specwiki-shadow-color: rgba(0, 0, 0, 0.16);
  --specwiki-search-match-background: #fff3b0;
  --specwiki-search-badge-background: #eaecf0;
  --specwiki-syntax-text: #24292e;
  --specwiki-syntax-background: #f6f8fa;
  --specwiki-syntax-keyword: #cf222e;
  --specwiki-syntax-title: #8250df;
  --specwiki-syntax-literal: #0550ae;
  --specwiki-syntax-string: #0a3069;
  --specwiki-syntax-built-in: #953800;
  --specwiki-syntax-comment: #57606a;
  --specwiki-syntax-tag: #116329;
  --specwiki-syntax-section: #0969da;
  --specwiki-syntax-bullet: #7d4e00;
  --specwiki-syntax-addition: #1a7f37;
  --specwiki-syntax-addition-background: #dafbe1;
  --specwiki-syntax-deletion: #cf222e;
  --specwiki-syntax-deletion-background: #ffebe9;
  --specwiki-header-block-size: calc(var(--size-tool) + 1px);
  --font-size-h1: 2rem;
  --font-size-h2: 1.625rem;
  --font-size-h3: 1.375rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;
  --font-size-caption: 0.6875rem;
  --font-size-ui-sm: 0.75rem;
  --font-size-ui: 0.8125rem;
  --font-size-body: 0.875rem;
  --font-family-monospace-brand:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background-color-base: #16181c;
    --background-color-base--hover: #2b2f36;
    --background-color-code: #202328;
    --background-color-interactive-subtle: #202328;
    --color-base: #eaecf0;
    --color-base--hover: #ffffff;
    --color-base--active: #ffffff;
    --color-base--subtle: #b6bdc6;
    --color-primary: #6b8fe8;
    --color-primary--hover: #9bb4f0;
    --color-primary--active: #bdccf5;
    --border-color-base: #72777d;
    --border-color-divider: #72777d;
    --specwiki-shadow-color: rgba(0, 0, 0, 0.48);
    --specwiki-search-match-background: #665500;
    --specwiki-search-badge-background: #343941;
    --specwiki-syntax-text: #e6edf3;
    --specwiki-syntax-background: #202328;
    --specwiki-syntax-keyword: #ff7b72;
    --specwiki-syntax-title: #d2a8ff;
    --specwiki-syntax-literal: #79c0ff;
    --specwiki-syntax-string: #a5d6ff;
    --specwiki-syntax-built-in: #ffa657;
    --specwiki-syntax-comment: #9ca6b1;
    --specwiki-syntax-tag: #7ee787;
    --specwiki-syntax-section: #58a6ff;
    --specwiki-syntax-bullet: #f2cc60;
    --specwiki-syntax-addition: #aff5b4;
    --specwiki-syntax-addition-background: #033a16;
    --specwiki-syntax-deletion: #ffdcd7;
    --specwiki-syntax-deletion-background: #67060c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background-color-base: #16181c;
  --background-color-base--hover: #2b2f36;
  --background-color-code: #202328;
  --background-color-interactive-subtle: #202328;
  --color-base: #eaecf0;
  --color-base--hover: #ffffff;
  --color-base--active: #ffffff;
  --color-base--subtle: #b6bdc6;
  --color-primary: #6b8fe8;
  --color-primary--hover: #9bb4f0;
  --color-primary--active: #bdccf5;
  --border-color-base: #72777d;
  --border-color-divider: #72777d;
  --specwiki-shadow-color: rgba(0, 0, 0, 0.48);
  --specwiki-search-match-background: #665500;
  --specwiki-search-badge-background: #343941;
  --specwiki-syntax-text: #e6edf3;
  --specwiki-syntax-background: #202328;
  --specwiki-syntax-keyword: #ff7b72;
  --specwiki-syntax-title: #d2a8ff;
  --specwiki-syntax-literal: #79c0ff;
  --specwiki-syntax-string: #a5d6ff;
  --specwiki-syntax-built-in: #ffa657;
  --specwiki-syntax-comment: #9ca6b1;
  --specwiki-syntax-tag: #7ee787;
  --specwiki-syntax-section: #58a6ff;
  --specwiki-syntax-bullet: #f2cc60;
  --specwiki-syntax-addition: #aff5b4;
  --specwiki-syntax-addition-background: #033a16;
  --specwiki-syntax-deletion: #ffdcd7;
  --specwiki-syntax-deletion-background: #67060c;
}

* {
  box-sizing: var(--box-sizing-base, border-box);
}

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

.specwiki-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: var(--background-color-base);
  border-bottom: 1px solid var(--border-color-divider);
  padding: 0 var(--padding-horizontal-base);
}

.specwiki-header-inner {
  max-width: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--padding-horizontal-base);
  min-height: var(--size-tool);
}

.specwiki-search {
  position: relative;
  margin-left: auto;
  flex: 1 1 16rem;
  max-width: 24rem;
}

.specwiki-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.specwiki-search-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border-color-divider);
  border-radius: var(--border-radius-base, 2px);
  font: inherit;
  background-color: var(--background-color-base);
  color: var(--color-base);
}

.specwiki-search-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.specwiki-search-results {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 40;
  background-color: var(--background-color-base);
  border: 1px solid var(--border-color-divider);
  border-radius: var(--border-radius-base, 2px);
  box-shadow: 0 2px 8px var(--specwiki-shadow-color);
  max-height: min(24rem, calc(100vh - 4rem));
  overflow-y: auto;
}

.specwiki-search-group + .specwiki-search-group {
  border-top: 1px solid var(--border-color-divider);
}

.specwiki-search-group-heading {
  margin: 0;
  padding: 0.4rem 0.625rem;
  color: var(--color-base--subtle);
  background-color: var(--background-color-interactive-subtle);
  font-size: var(--font-size-ui-sm);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.specwiki-search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.specwiki-search-results-list li {
  border-bottom: 1px solid var(--border-color-divider);
}

.specwiki-search-results-list li:last-child {
  border-bottom: none;
}

.specwiki-search-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--color-primary);
  text-decoration: none;
}

.specwiki-search-option:hover,
.specwiki-search-option[aria-selected="true"] {
  background-color: var(--background-color-interactive-subtle);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.specwiki-search-title {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specwiki-search-category {
  align-self: start;
  max-width: 9rem;
  padding: 0.1rem 0.35rem;
  overflow: hidden;
  border-radius: var(--border-radius-base, 2px);
  color: var(--color-base);
  background-color: var(--specwiki-search-badge-background);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specwiki-search-snippet {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-base--subtle);
  font-size: var(--font-size-ui);
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specwiki-search-match {
  color: inherit;
  background-color: var(--specwiki-search-match-background);
}

.specwiki-search-empty {
  margin: 0;
  padding: 0.75rem;
  color: var(--color-base--subtle);
}

.specwiki-search-empty[hidden] {
  display: none;
}

.specwiki-all-pages {
  margin-top: calc(var(--padding-horizontal-base) * 2);
  padding-top: var(--padding-horizontal-base);
  border-top: 1px solid var(--border-color-divider);
}

.specwiki-logo {
  color: var(--color-base);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  font-family: var(--font-family-monospace-brand);
  letter-spacing: -0.02em;
}

.specwiki-logo:hover {
  color: var(--color-base--hover);
}

.specwiki-logo-bracket {
  color: var(--color-primary);
}

.specwiki-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-base, 2px);
  color: var(--color-base);
  background-color: var(--background-color-base);
  font: inherit;
  cursor: pointer;
}

.specwiki-theme-toggle:hover {
  color: var(--color-base--hover);
  background-color: var(--background-color-base--hover);
}

.specwiki-theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.specwiki-theme-toggle[hidden] {
  display: none;
}

.specwiki-nav-toggle,
.specwiki-nav-close,
.specwiki-nav-backdrop {
  display: none;
}

.specwiki-nav-toggle,
.specwiki-nav-close {
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-base, 2px);
  color: var(--color-base);
  background-color: var(--background-color-base);
  font: inherit;
  cursor: pointer;
}

.specwiki-nav-toggle:hover,
.specwiki-nav-close:hover {
  color: var(--color-base--hover);
  background-color: var(--background-color-base--hover);
}

.specwiki-nav-toggle:focus-visible,
.specwiki-nav-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.specwiki-nav-toggle[hidden],
.specwiki-nav-close[hidden],
.specwiki-nav-backdrop[hidden] {
  display: none;
}

.specwiki-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.specwiki-layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - var(--size-tool));
}

.specwiki-layout-article {
  grid-template-columns: 12rem minmax(0, 1fr) 11rem;
}

.specwiki-nav-drawer {
  min-width: 0;
}

.category-nav {
  height: 100%;
  border-right: 1px solid var(--border-color-divider);
  padding: var(--padding-horizontal-base);
  background-color: var(--background-color-interactive-subtle);
  overflow-y: auto;
}

.category-nav-group {
  margin-bottom: var(--padding-horizontal-base);
}

.category-nav-group.category-nav-active .category-nav-heading {
  font-weight: var(--font-weight-bold);
  color: var(--color-base);
}

.category-nav-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.category-nav-group > summary::-webkit-details-marker {
  display: none;
}

.category-nav-group > summary::marker {
  content: "";
}

.category-nav-group > summary::before {
  content: "›";
  color: var(--color-base--subtle);
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 160ms ease-out;
}

.category-nav-group[open] > summary::before {
  transform: rotate(90deg);
}

.category-nav-heading {
  display: block;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semi-bold);
  margin-bottom: 0.25rem;
}

.category-nav-summary .category-nav-heading {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.category-nav-heading:hover {
  text-decoration: underline;
}

.category-nav-count {
  flex: 0 0 auto;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--border-radius-base, 2px);
  color: var(--color-base--subtle);
  background-color: var(--background-color-interactive-subtle);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-normal);
}

.category-nav-pages {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.5rem;
}

.category-nav-pages li {
  margin: 0.125rem 0;
}

.category-nav-pages a {
  color: var(--color-base);
  text-decoration: none;
  font-size: var(--font-size-ui-sm);
}

.category-nav-pages a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Subgroup labels are structural (not links): muted section chrome.
   Leaf page links keep --color-base so parents and children read apart. */
.category-nav-subgroup {
  margin-top: 0.5rem;
}

.category-nav-subgroup:first-child {
  margin-top: 0.25rem;
}

.category-nav-subgroup-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  list-style: none;
}

.category-nav-subgroup-group > summary::-webkit-details-marker {
  display: none;
}

.category-nav-subgroup-group > summary::marker {
  content: "";
}

.category-nav-subgroup-group > summary::before {
  content: "›";
  color: var(--color-base--subtle);
  font-size: 0.875rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 160ms ease-out;
}

.category-nav-subgroup-group[open] > summary::before {
  transform: rotate(90deg);
}

.category-nav-subgroup-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-base--subtle);
  margin: 0 0 0.1875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.category-nav-subgroup-summary .category-nav-subgroup-label {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.category-nav-subgroup-pages {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.625rem;
  border-left: 1px solid var(--border-color-divider);
}

.category-nav-subgroup-pages > li > a {
  color: var(--color-base);
  font-size: var(--font-size-ui-sm);
}

.category-nav-subgroup-nested {
  margin-top: 0.375rem;
}

.category-nav-subgroup-nested .category-nav-subgroup-label {
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-caption);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-base--subtle);
}

.category-nav-subgroup-nested .category-nav-subgroup-pages {
  border-left-color: var(--border-color-divider);
  padding-left: 0.5rem;
}

.specwiki-center {
  padding: var(--padding-horizontal-base);
  min-width: 0;
}

.breadcrumb {
  font-size: var(--font-size-ui);
  color: var(--color-base--subtle);
  margin-bottom: var(--padding-horizontal-base);
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.infobox {
  float: right;
  width: 16rem;
  margin: 0 0 var(--padding-horizontal-base) var(--padding-horizontal-base);
  border: 1px solid var(--border-color-base);
  background-color: var(--background-color-interactive-subtle);
  padding: var(--padding-vertical-base) var(--padding-horizontal-base);
  font-size: var(--font-size-ui);
}

.infobox-title {
  margin: 0 0 var(--padding-vertical-base);
  font-size: 1rem;
  line-height: var(--line-height-heading);
  text-align: center;
}

.infobox-table {
  width: 100%;
  border-collapse: collapse;
}

.infobox-table th {
  text-align: left;
  vertical-align: top;
  padding: 0.25rem 0.5rem 0.25rem 0;
  font-weight: var(--font-weight-normal);
  color: var(--color-base--subtle);
  white-space: nowrap;
}

.infobox-table td {
  vertical-align: top;
  padding: 0.25rem 0;
}

.infobox-table code {
  font-size: var(--font-size-ui-sm);
  word-break: break-all;
}

.toc {
  border-left: 1px solid var(--border-color-divider);
  padding: var(--padding-horizontal-base);
  background-color: var(--background-color-interactive-subtle);
  overflow-y: auto;
  position: sticky;
  top: var(--specwiki-header-block-size);
  align-self: start;
  max-height: calc(100vh - var(--specwiki-header-block-size));
}

.toc-heading {
  margin: 0 0 var(--padding-vertical-base);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li {
  margin: 0.25rem 0;
}

.toc-list a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-ui-sm);
}

.toc-list a:hover {
  text-decoration: underline;
}

.toc-level-3 {
  padding-left: 0.75rem;
}

.toc-level-4 {
  padding-left: 1.5rem;
}

.toc-level-5 {
  padding-left: 2.25rem;
}

.toc-level-6 {
  padding-left: 3rem;
}

.specwiki-article-body .mw-parser-output h1,
.specwiki-article-body .mw-parser-output h2 {
  font-family: var(--font-family-heading-main);
  font-weight: 400;
  line-height: var(--line-height-heading);
}

.specwiki-article-body .mw-parser-output h3,
.specwiki-article-body .mw-parser-output h4,
.specwiki-article-body .mw-parser-output h5,
.specwiki-article-body .mw-parser-output h6 {
  font-family: var(--font-family-system-sans);
  font-weight: 600;
  line-height: var(--line-height-heading);
}

.specwiki-article-body .mw-parser-output h1 {
  font-size: var(--font-size-h1);
  margin: 0 0 0.75rem;
}

.specwiki-article-body .mw-parser-output h2 {
  font-size: var(--font-size-h2);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--border-color-divider);
}

.specwiki-article-body .mw-parser-output h3 {
  font-size: var(--font-size-h3);
  margin: 1.25rem 0 0.35rem;
}

.specwiki-article-body .mw-parser-output h4 {
  font-size: var(--font-size-h4);
  margin: 1rem 0 0.35rem;
}

.specwiki-article-body .mw-parser-output h5 {
  font-size: var(--font-size-h5);
  margin: 0.85rem 0 0.25rem;
}

.specwiki-article-body .mw-parser-output h6 {
  font-size: var(--font-size-h6);
  margin: 0.75rem 0 0.25rem;
}

.specwiki-portal h1 {
  font-family: var(--font-family-heading-main);
  font-size: var(--font-size-h1);
  font-weight: 400;
  line-height: var(--line-height-heading);
}

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  position: relative;
}

.specwiki-article-body .mw-parser-output h1,
.specwiki-article-body .mw-parser-output h2,
.specwiki-article-body .mw-parser-output h3,
.specwiki-article-body .mw-parser-output h4,
.specwiki-article-body .mw-parser-output h5,
.specwiki-article-body .mw-parser-output h6,
.specwiki-category-section,
.specwiki-all-pages {
  scroll-margin-top: calc(
    var(--specwiki-header-block-size) + var(--padding-horizontal-base)
  );
}

.mw-parser-output .heading-permalink {
  opacity: 0;
  margin-left: 0.35em;
  color: var(--color-base--subtle);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
}

.mw-parser-output h2:hover .heading-permalink,
.mw-parser-output h3:hover .heading-permalink,
.mw-parser-output h4:hover .heading-permalink,
.mw-parser-output h5:hover .heading-permalink,
.mw-parser-output h6:hover .heading-permalink {
  opacity: 1;
}

.specwiki-portal-intro {
  color: var(--color-base--subtle);
}

.specwiki-category-section {
  margin-top: calc(var(--padding-horizontal-base) * 2);
  padding-top: var(--padding-horizontal-base);
  border-top: 1px solid var(--border-color-divider);
}

.specwiki-portal-pages {
  list-style: disc;
  padding-left: 1.5rem;
}

.specwiki-portal-pages a,
.mw-parser-output a {
  color: var(--color-primary);
}

.mw-parser-output table {
  border-collapse: collapse;
  margin: var(--padding-vertical-base) 0;
  width: 100%;
}

.mw-parser-output th,
.mw-parser-output td {
  border: 1px solid var(--border-color-base);
  padding: 0.35rem 0.5rem;
  text-align: left;
}

.mw-parser-output th {
  background-color: var(--background-color-interactive-subtle);
}

.mw-parser-output del {
  color: var(--color-base--subtle);
}

.mw-parser-output ul.contains-task-list {
  list-style: none;
  padding-left: 0;
}

.mw-parser-output li.task-list-item {
  list-style: none;
}

.mw-parser-output li.task-list-item input[type="checkbox"] {
  margin-right: 0.35em;
}

.mw-parser-output blockquote {
  border-left: 3px solid var(--border-color-base);
  margin: 0;
  padding: var(--padding-vertical-base) var(--padding-horizontal-base);
  color: var(--color-base--subtle);
}

.mw-parser-output code {
  background-color: var(--background-color-code);
  padding: 0.15em 0.4em;
  border-radius: var(--border-radius-base);
  font-size: 0.9em;
  font-family: var(--font-family-monospace-brand);
}

.mw-parser-output pre {
  background-color: var(--background-color-code);
  padding: var(--padding-horizontal-base);
  border-radius: var(--border-radius-base);
  overflow-x: auto;
  font-family: var(--font-family-monospace-brand);
}

.mw-parser-output pre code {
  background: none;
  padding: 0;
}

.mw-parser-output pre code.hljs {
  background: transparent;
  padding: 0;
}

.mw-parser-output hr {
  border: none;
  border-top: 1px solid var(--border-color-divider);
  margin: calc(var(--padding-horizontal-base) * 2) 0;
}

@media (max-width: 1199px) {
  .infobox {
    float: none;
    width: auto;
    margin: 0 0 var(--padding-horizontal-base);
  }
}

@media (min-width: 1200px) {
  .specwiki-article-body .mw-parser-output {
    grid-template-columns: minmax(0, 1fr) minmax(0, 70ch) minmax(0, 1fr);
  }

  .specwiki-article-body .mw-parser-output > * {
    grid-column: 2;
  }

  .specwiki-article-body .mw-parser-output > table,
  .specwiki-article-body .mw-parser-output > pre {
    grid-column: 1 / -1;
  }
}

@media (max-width: 719px) {
  .specwiki-header {
    padding: 0 0.5rem;
  }

  .specwiki-header-inner {
    gap: 0.375rem;
  }

  .specwiki-logo {
    flex: 0 0 auto;
  }

  .specwiki-search {
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 0;
  }

  .specwiki-search-results {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 1rem);
  }

  .specwiki-theme-toggle {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
  }

  .specwiki-theme-toggle span:last-child,
  .specwiki-nav-toggle-label {
    display: none;
  }

  .specwiki-layout,
  .specwiki-layout-article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "center"
      "toc"
      "nav";
    min-height: 0;
  }

  .specwiki-center {
    grid-area: center;
    min-width: 0;
    padding: 0.75rem;
  }

  .specwiki-nav-drawer {
    grid-area: nav;
    min-width: 0;
  }

  .category-nav {
    height: auto;
    border-top: 1px solid var(--border-color-divider);
    border-right: 0;
  }

  .toc {
    grid-area: toc;
    position: static;
    max-height: none;
    border-top: 1px solid var(--border-color-divider);
    border-left: 0;
  }

  .mw-parser-output {
    min-width: 0;
    max-width: 100%;
  }

  .mw-parser-output table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .mw-parser-output pre {
    max-width: 100%;
    overflow-x: auto;
  }

  .specwiki-nav-enhanced .specwiki-nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .specwiki-nav-enhanced .specwiki-nav-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(18rem, calc(100vw - 3rem));
    overflow-y: auto;
    background-color: var(--background-color-interactive-subtle);
    box-shadow: 2px 0 8px var(--specwiki-shadow-color);
    transform: translateX(-100%);
    transition: transform 160ms ease-out;
  }

  .specwiki-nav-enhanced .specwiki-nav-close {
    display: inline-flex;
    margin: 0.5rem 0.5rem 0 auto;
  }

  .specwiki-nav-enhanced .category-nav {
    border-top: 0;
  }

  .specwiki-nav-open .specwiki-nav-drawer {
    transform: translateX(0);
  }

  html.specwiki-nav-open,
  .specwiki-nav-open body.specwiki {
    overflow: hidden;
  }

  .specwiki-nav-open .specwiki-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    background-color: var(--specwiki-shadow-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  .specwiki-nav-drawer,
  .category-nav-group > summary::before,
  .category-nav-subgroup-group > summary::before {
    transition: none;
  }
}