@charset "UTF-8"; /* StartCSS/scss/_start-config.scss */ /* @function get($group, $name) { @return map.get($startcss-config, $group, $name); } */ /*! Start-CSS. See SCSS file for documentation. */ /*-------------------------------------------------------------------------------------------------| START-CSS ============================================================================================ Start-CSS is designed for use with the PRM [CSS Mustard Cut](https://github.com/Fall-Back/CSS-Mustard-Cut) This determines a browser support base of: Edge 111+, Chrome 111+, Firefox 121+, Opera 97+, Safari 16.2+, iOS 16.2+, Android 145+ Notes: -moz-calc because this supports FF8+ and I like to be thorough. CSS hacks from http://browserstrangeness.com/css_hacks.html (hack and browser support in comments above each usage) !!! Maybe don't include custom properties in this, I think it over-complicates things and needs gradient background overlays to lighten/darken background colors dynamically. Possibly include a separate file to add custom property support that overrides what it needs, all wrapped in an `@supports`. Resources: * http://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/ * https://24ways.org/2006/compose-to-a-vertical-rhythm NOTE TO SELF. Where borders are concerned, probably best to leave margins alone and use padding to maintain baseline-grid. After all, if there's a border, there will have to be padding too. overflow-y makes element focussable in FireFox. |-------------------------------------------------------------------------------------------------*/ /* @use 'sass:math'; @use "start-config" as cfg; @use "start-base" as base; @use "elements/a" as a; @mixin emit() { @include base.emit(); @include a.emit(); } */ /*-------------------------------------------------------------------------------------------------| START-CSS TOKENS ============================================================================================ Assign custom properties to :root. |-------------------------------------------------------------------------------------------------*/ @property --background-color { syntax: ""; inherits: true; initial-value: transparent; } /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: base styles v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: a v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* a:link a:visited a:hover a:active a:focus 1. Remove the tapping delay from clickable elements. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: abbr v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS MIXINS ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* ChatGPT made this - not 100% sure if I need it or not. */ /* Apply a border and a padding that offsets the border-width from one spacing unit so as not to affect the vertical rhythm. Note the Opera Mini doesn't support `calc` so we need to include normal padding for that browser. Also, since we're supporting FF 8+, we're including -moz-calc for versions up to 16. I may consider removing this as those browsers are dead, but I'm just being thorough for now. Note on the 'last margin' issue/hack: The pseudo element is intended to provide a collapsible margin to cancel out any 'trailing' margins from content elements. However, since we're reducing the whole padding space by the border-width to maintain the vertical rhythm, that margin is also less, BUT the content margin is NOT being reduced, so that wins out - the reduction is ignored. If the pseudo element bottom margin is adjusted to cancel out the height (1px) AS WELL AS the amount of border-width, but the last element DOES NOT have a margin, then the space becomes too small. If pseudo-element height is 0, it doesn't work in IE, Chrome, Safari, without inline-block */ /* This button mixin isn't really meant for generating specific/themed _types_ of button - there would be too much code duplication for that. Instead, this is intended to create buttons for new/custom selectors. For example: ``` [role="button"] { @include s__button; } ``` rather than: ``` .btn--affirmative { @include s__button(, ); } ``` Note - because of this, think about removing parameters (it changed from my original intention - I may change it back or split this into 2 mixins, or even just move things that are meant for input[type="button"] to that ruleset - actually that's not a bad idea). */ /* 1. Remove the tapping delay from clickable elements. Sort out the height of buttons. At 12px spacing, should be 30px high with 3px top/bottom margin. Note Edge doesn't like: `line-height: calc(3rem - 2px)` if `display: inline-flex` FF8 - ? doesn't like `line-height: -moz-calc()` and ignores Need to make sure height is governed by line-height in case of breaks within buttons. */ /* Uni-directional margins (bottom) is fine for most cases, but things like figcaptions that may contain paragraphs can result in double bottom margins, so flipping that around inside those containers. * / @mixin s__fix_internal_margins($margin-size) { & * { margin-bottom: 0; } & * + * { margin-top: $margin-size; } } */ /* Note - most block elements have top/bottom margins. There are different trains of thought about how these should be provided and previous StartCSS versions catered for two of these. Currently there's only one (but controlled by custom properties), however to cater for any future changes / options I'm keeping this as a mixin . Also not --m is used so that places where a container needs to changes it's chold block margins this is easily achievable. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: article v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: aside v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: audio v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: b v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1: Add the correct font weight in Chrome, Edge, and Safari. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: blockquote v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: button v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: canvas v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: caption v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: code v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. Correct the inheritance and scaling of font size in all browsers. (N) 2. Address odd `em`-unit font size rendering in all browsers. (N) 3. Prevent the element increasing the line-height of the parent. 4. Make this more obvious when inside an an element that may have bold applied (e.g. link or label) */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: dd v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: details v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: dfn v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: dl v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: dt v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: em v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. De-italicize nested ems */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: fieldset v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: figcaption v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: figure v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: footer v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: form v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: header v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: hgroup v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: h v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: hr v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: iframe v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: img v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: input v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. Allow inputs to contract to avoid braking containers: 2. Opera Mini needs this. 3. Remove the tapping delay from clickable elements (S) 4. Keep adjacent elements in the middle. 5. This helps prevent default 'normal' from increasing element height in webkit. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: kbd v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: label v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: legend v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: li v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: main v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: mark v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: nav v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: object v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: ol v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: optgroup v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. The default cannot safely be changed in Chrome and Safari on OS X. ?? Not sure what this means now. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: option v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. This v-centers the text in FF and Chrome. Edge doesn't apply this but looks ok regardless. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: p v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: pre v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: progress v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: samp v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: section v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: select v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. Using height because min-height doesn't change the expand button height in FF. 2. Remove the tapping delay from clickable elements. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: small v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: strong v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. Add the correct font weight in Chrome, Edge, and Safari. 2. Prevent increase in line-height. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: sub v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: summary v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: sup v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: svg v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: table v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: td v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: textarea v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* 1. For IE, mainly. 2. Edge 12+, Internet Explorer 11-. Without this it acts like overflow: scroll. 3. Keep labels at the top of the container. 4. Remove the tapping delay from clickable elements. */ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: th v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: address v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: ul v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------| START-CSS ELEMENT: video v4.0.0 ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*! Start-CSS Accessibility. See SCSS file for documentation. */ /*-------------------------------------------------------------------------------------------------| ACCESSIBILITY / ARIA ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /*! Start-CSS Visibility. See SCSS file for documentation. */ /*-------------------------------------------------------------------------------------------------| VISIBILITY ============================================================================================ |-------------------------------------------------------------------------------------------------*/ /* MIXINS */ /* Base Layout Settings =========== */ /* Base Layout =========== This file establishes classes and variables for use in all other specific layouts, and helps to clarify how layout should be used. Rules ---- * Layout is independent of decoration. * Layouts consist of two wrappers and one or more layout boxes. * The specific layout determines how these boxes should behave and arrange themselves. */ /* Center Layout ============= */ /* I'm considering using grid for this. It is already necessary for IE11 */ /* Distribute Layout ================= Distribute items inside a container. */ /* Blocks Grid ================= Distribute items inside a container. */ /* Page Wrap ========= */ /* Page Header =========== */ /* Page Footer =========== */ /* .page-footer .page-footer__brand-footer.npeu { background-color: #463659; background-image: url("images/npeu-pattern-dark.svg") !important; background-size: 68px 132px !important; background-position: 0 2.6rem !important; background-attachment: fixed !important; background-repeat: repeat; box-shadow: 0 0.3rem 0.3rem 0 rgba(0,0,0,0.7) inset; position: relative; } //.page-footer .page-footer__brand-footer.npeu .page-footer__info-box { // background: rgba(0,0,0,0.6); // border-radius: 1.2rem; //} .page-footer .page-footer__brand-footer.npeu::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.6); clip-path: ellipse(calc(10em + 75%) 110% at 0% -20%); } .page-footer .page-footer__brand-footer.npeu > * { position: relative; z-index: 1; padding-bottom: 6rem; } .page-footer .page-footer__brand-footer.npeu .page-footer__info-box { background: transparent; border-radius: 0; } .page-footer .page-footer__brand-footer.npeu .page-footer__info-box + * { justify-content: start !important; } */ /* Text Align ========== @To Do: allow for responsive variations? */ /* Badge ===== */ /* Card ==== */ /* CTA === */ /* Card ==== */ /* Hero ==== */ /* System Messages =============== */ /* Utilitext ========= */ /* .ff-width-100--40--33-333 { width: 100%; } .ff-width-100--40--33-333 { width: 100%; } @container (width > 40em) { .ff-width-100--40--33-333 { width: calc(33.33% - (var(--g) * 2)); } } // I don't appear to be using a global word break thing but I see problems with DD's when error messages are produced (for example). // Trying this out as a fix: /* dd { overflow-wrap: anywhere; word-break: break-word; } */ /* .auto-margin {margin-left: auto !important; margin-right: auto !important;} */ /* .dropdown, .nav-bar__item, .nav-bar__link { position: relative; } .nav-bar__item a, .nav-bar__item span { position: relative; } .nav-bar__item--current > a::before, .sub-nav__item--current > a::before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4; } .nav-bar__item--current > a:hover::before, .nav-bar__item--current > a:active::before, .nav-bar__item--current > a:focus::before, .sub-nav__item--current > a:hover::before, .sub-nav__item--current > a:active::before, .sub-nav__item--current > a:focus::before { display: none; } .search-form .search-form__field.search-form__field { border-radius: 50px 0 0 50px; padding-left: 0.5em; } */ /*script:first-child + * { margin-top: 0; } */ /*[filterable_item][hidden] { display: none !important; } */ /* svg[width="20"][height="20"] { width: 1.25em; height: 1.25em; } */ /* #highlighter-end, #highlighter-start { display: none; } */ /*---------------------*/ /* .video-center.video-center.video-center { display: flex; flex-direction: column; justify-content: center; background: #333; } */ /*---------------------*/ /*---------------------*/ /* // Better visibility for dropdowns (esp. single-item ones). .nav-bar.js-cmr--wide .nav-bar__main .dropdown__area { border: $s__sz-xs solid rgba(255,255,255,.7); border-top-width: 0; margin-left: -$s__sz-xs; } */ /*---------------------*/ @supports (color: oklch(from white l c h/1)) and (font-size-adjust: from-font) { :root { --base-font-family: Inter, sans-serif; --monospace-font-family: monospace; --base-rem-space-unit: 2.4rem; --root-font-size: clamp(10px, 1vw, 12px); --root-line-height: 2.4rem; --body-min-width: 320px; --body-max-width: none; --body-padding: 0; --body-margin: 0 auto; --body-font-size: 1.6em; --small-font-size: 81.25%; --base-ui-color: #5D4777; --ui-tone-light: 0.28; --ui-tone-dark: 0.13; --ui-chroma-scale-light: 0.35; --ui-chroma-scale-dark: 1.1; /* Light side */ --base-ui-color-lightest: oklch( from var(--base-ui-color) calc(min(1, l + (1 - l) * (var(--ui-tone-light) * 3))) calc(c * (var(--ui-chroma-scale-light) * 0.8)) h ); --base-ui-color-lighter: oklch( from var(--base-ui-color) calc(min(1, l + (1 - l) * (var(--ui-tone-light) * 2))) calc(c * (var(--ui-chroma-scale-light) * 1.0)) h ); --base-ui-color-light: oklch( from var(--base-ui-color) calc(min(1, l + (1 - l) * (var(--ui-tone-light) * 1))) calc(c * (var(--ui-chroma-scale-light) * 1.2)) h ); /* Dark side */ --base-ui-color-dark: oklch( from var(--base-ui-color) calc(max(0, l - l * (var(--ui-tone-dark) * 1))) calc(c * (var(--ui-chroma-scale-dark) * 1.0)) h ); --base-ui-color-darker: oklch( from var(--base-ui-color) calc(max(0, l - l * (var(--ui-tone-dark) * 2))) calc(c * (var(--ui-chroma-scale-dark) * 0.9)) h ); --base-ui-color-darkest: oklch( from var(--base-ui-color) calc(max(0, l - l * (var(--ui-tone-dark) * 3))) calc(c * (var(--ui-chroma-scale-dark) * 0.8)) h ); /*--base-ui-color-lightest: oklch(from var(--base-ui-color) 0.995 calc(c * 0.28) h); --base-ui-color-lighter: oklch(from var(--base-ui-color) 0.92 calc(c * 0.48) h); --base-ui-color-light: oklch(from var(--base-ui-color) 0.84 calc(c * 0.68) h); --base-ui-color-dark: oklch(from var(--base-ui-color) 0.68 calc(c * 0.90) h); --base-ui-color-darker: oklch(from var(--base-ui-color) 0.54 calc(c * 0.82) h); --base-ui-color-darkest: oklch(from var(--base-ui-color) 0.38 calc(c * 0.70) h);*/ /*--base-ui-color-lightest: hsl(from var(--base-ui-color) h s calc(l - 90)); --base-ui-color-lighter: hsl(from var(--base-ui-color) h s calc(l - 60)); --base-ui-color-light: hsl(from var(--base-ui-color) h s calc(l - 30)); --base-ui-color-dark: hsl(from var(--base-ui-color) h s calc(l - 30)); --base-ui-color-darker: hsl(from var(--base-ui-color) h s calc(l - 60)); --base-ui-color-darkest: hsl(from var(--base-ui-color) h s calc(l - 90));*/ --base-background-color: #f8f8f8; --base-text-color: #1a1a1a; --base-text-color-inverse: #fff; --background-color: var(--base-background-color); --color: var(--base-text-color); --color--inverse: var(--base-text-color-inverse); --base-ui-color--text: var(--color--inverse); --base-border-width: 0.1rem; --base-border-style: solid; --base-border-color: var(--base-ui-color); --base-border-radius: 0.3rem; --l-threshold: 0.7; --l: clamp(0, (var(--l-threshold) - l) * infinity, 1); --sz-xxs: calc(var(--base-rem-space-unit) / 8); --sz-xs: calc(var(--base-rem-space-unit) / 4); --sz-s: calc(var(--base-rem-space-unit) / 2); --sz-m: var(--base-rem-space-unit); --sz-l: calc(var(--base-rem-space-unit) * 2); --sz-xl: calc(var(--base-rem-space-unit) * 4); --sz-xxl: calc(var(--base-rem-space-unit) * 8); --m: var(--base-rem-space-unit); --h1-font-size: 2.5em; --h1-height: 4.8rem; --h2-font-size: 2.0625em; --h2-height: 3.6rem; --h3-font-size:1.75em; --h3-height: 3.6rem; --h4-font-size: 1.4375em; --h4-height: 3.6rem; --h5-font-size: 1.25em; --h5-height: 2.4rem; --h6-font-size: 1em; --h6-height: 2.4rem; --table-border-width: var(--base-border-width); --table-border-style: var(--base-border-style); --table-color: var(--base-ui-color); --th-cell-padding: var(--base-rem-space-unit); --th-border-width: var(--base-border-width); --th-border-color: var(--base-ui-color); --th-color: var(--base-ui-color-lighter); --th-color--text: var(--base-ui-color--text); --list-indent: calc(var(--base-rem-space-unit) * 1.5); --video-background-color: #333; } /* 1. Use a more readable tab size (opinionated). */ :root { quotes: "“" "”" "‘" "’"; tab-size: 4; } /* 'Global' reset. */ * { margin: 0; padding: 0; --color: oklch(from var(--background-color, var(--base-background-color)) var(--l) 0 h / 0.9); color: var(--color); } /* 1. Add box sizing inheritance in all browsers. 2. Remove repeating backgrounds in all browsers. */ *, ::before, ::after { box-sizing: inherit; /* 1 */ background-repeat: no-repeat; /* 2 */ -webkit-font-smoothing: inherit; } /* 1. Change the default box-sizing. 2. `min-height` _should_ be what we want here (as declared in inuit css), except that `min-height` doesn't works as expected; child elements set to `(min-)height: 100%;` won't increase their height - they'll only do that if the parent has `height: 100%;`. This can lead to situations where sometimes elements (and thus their visible decoration) do not stretch to be tall enough for their content (because they're limited to 100% height). 3. Force scrollbars to always be visible to prevent awkward 'jumps' when navigating between pages that do/do not have enough content to produce scrollbars naturally. (I) 4. Convert the value to a percentage so as not to override user font settings. This needs to be on the root node. 5. Prevent font size adjustments after orientation changes in iOS. https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ html[lang] { box-sizing: border-box; /* 1 */ height: 100%; /* 2 */ overflow-y: scroll; /* 3 */ --background-color: var(--html-background-color, var(--base-ui-color-darker)); background-color: var(--background-color); font-size: var(--root-font-size); /* 4 */ -moz-text-size-adjust: 100%; /* 5 */ -webkit-text-size-adjust: 100%; /* 5 */ text-size-adjust: 100%; /* 5 */ padding: 0; margin: 0; } /* 1. Add text decoration inheritance in all browsers (opinionated). (s) 2. Add vertical alignment inheritance in all browsers (s). */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; /* 2 */ } ::marker { line-height: 1; display: inline-block; } /* 1. Ensure that absolutely positioned child elements expand to the full height of the body. 2. Allows for layouts such as sticky footers. 3. Reset any FOUC font match fallback. @TODO Make these vars. */ html[lang] body { position: relative; /* 1 */ display: flex; /* 2 */ flex-direction: column; width: 100%; min-width: var(--body-min-width); max-width: var(--body-max-width); min-height: 100%; margin: var(--body-margin); padding: var(--body-padding); font-family: var(--base-font-family); font-size: var(--body-font-size); line-height: var(--root-line-height); letter-spacing: initial; /* 3 */ word-spacing: initial; /* 3 */ --background-color: var(--body-background-color, var(--base-ui-color-dark)); background-color: var(--background-color); accent-color: var(--base-ui-color); } html[lang] a[href] { text-decoration-line: underline; text-decoration-style: dashed; text-decoration-thickness: 0.0625em; touch-action: manipulation; /* [1] */ } html[lang] a[href]:hover, html[lang] a[href]:active { text-decoration: underline solid currentColor 0.0625em; } html[lang] a[href] img:hover, html[lang] a[href] svg:hover { outline-color: transparent; } html[lang] a[href] { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] a[href]:focus-within { outline: 2px solid transparent; /* [1] */ } html[lang] a[href]:focus-within { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* Fix for linked images: */ html[lang] a[href]:has(> img) { display: inline-block; vertical-align: middle; } /* Sometimes anchors can be used without an href, and may contain icons etc, so make sure styles are applied to ALL anchors where appropriate. */ html[lang] a svg { vertical-align: text-top; margin-left: 0.25em; margin-right: 0.25em; } html[lang] a[href][rel~=external] { padding-right: 1em; background-image: linear-gradient(45deg, transparent 65%, currentColor 65%); background-repeat: no-repeat; background-position: right 0.4em bottom 0.4em; background-size: 0.6em 0.6em; } html[lang] a[href][rel~=external]:has(> img) { display: inline-block; position: relative; background-image: none; padding-right: 0; } html[lang] a[href][rel~=external]:has(> img)::after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 1.2rem; height: 1.2rem; background-image: linear-gradient(45deg, transparent 50%, #fff 50%, #fff 60%, currentColor 60%); background-repeat: no-repeat; background-position: right top; } html[lang] abbr { cursor: help; } html[lang] abbr[title] { border-bottom: none; /* [1 ]*/ text-decoration: underline dotted; /* [2] */ } html[lang] address { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] address:first-child { margin-block-start: 0; } html[lang] address:last-child { margin-block-end: 0; } html[lang] article { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] article:first-child { margin-block-start: 0; } html[lang] article:last-child { margin-block-end: 0; } html[lang] aside { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] aside:first-child { margin-block-start: 0; } html[lang] aside:last-child { margin-block-end: 0; } html[lang] audio { vertical-align: middle; height: calc(var(--sz-m) * 1.5); } html[lang] b { font-weight: bolder; /* [1] */ } html[lang] blockquote { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] blockquote:first-child { margin-block-start: 0; } html[lang] blockquote:last-child { margin-block-end: 0; } html[lang] blockquote { margin-inline-start: var(--blockquote-inline-padding, var(--sz-s)); margin-inline-end: var(--blockquote-inline-padding, var(--sz-s)); font-style: italic; } html[lang] button { min-height: 3rem; margin-block: var(--button-block-margin, var(--sz-xxs)); margin-inline: var(--button-inline-margin, 0); border-color: var(--button-border-color, var(--base-ui-color)); border-style: var(--button-border-style, var(--base-border-style)); --border-width: var(--button-border-width, var(--base-border-width)); border-width: var(--border-width); border-radius: var(--button-border-radius, var(--base-border-radius)); padding-block-start: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-block-end: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-inline-end: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); padding-inline-start: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); --background-color: var(--button-color, var(--base-ui-color)); background-color: var(--background-color); font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; line-height: var(--base-rem-space-unit); vertical-align: middle; text-transform: none; /* [N0], N: Remove the inheritance of text transform in Edge, Firefox, and IE. */ cursor: pointer; touch-action: manipulation; /* 1 */ -webkit-appearance: none; display: inline-flex; align-items: center; } html[lang] button:hover, html[lang] button:active { --background-color: var(--button-background-color-alt, var(--base-ui-color-light)); background-color: var(--background-color); } html[lang] button { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] button:focus, html[lang] button:focus-visible { outline: 2px solid transparent; /* [1] */ box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } html[lang] button svg { vertical-align: text-bottom; } html[lang] canvas { vertical-align: middle; } /* 1. This overrides TFS, but I need to look into that to see if it's really a good idea. Maybe left-align captions for TFS instead. */ html[lang] caption { --background-color: var(--caption-color, var(--table-color, var(--base-ui-color))); background-color: var(--background-color); display: table-caption; padding-top: var(--caption-padding, var(--sz-s)); padding-right: var(--caption-padding, var(--sz-s)); padding-bottom: var(--caption-padding, var(--sz-s)); padding-left: var(--caption-padding, var(--sz-s)); font-weight: bold; max-width: none; /* [1] */ } /* 1. Tables that are very wide risk their captions being hidden off-screen.This allows them to to stay visible at all times. Also see the figure element. */ html[lang] figure:has(> table) caption { max-width: 100cqw; /* [1] */ position: sticky; /* [1] */ left: 0; /* [1] */ top: 0; /* [1] */ } html[lang] code { font-family: monospace, monospace; /* [1] */ font-size: 1em; /* [2] */ line-height: 0; /* [3] */ font-weight: normal; /* [4] */ } html[lang] dd { margin-inline-start: var(--list-indent); } html[lang] details { border-width: var(--details-border-width, var(--base-border-width)); border-style: solid; border-color: var(--base-ui-color); padding: calc(var(--details-padding, var(--sz-m)) - var(--details-border-width, var(--base-border-width))); margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] details:first-child { margin-block-start: 0; } html[lang] details:last-child { margin-block-end: 0; } /* Animate to auto height if supported and user doesn't prefer reduced motion: */ @media screen and (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { /* If you want to style ::details-content with a background you'll likely need padding, but that isn't clipped by height: 0 so we need to transition that with the rest. To save having to redeclare this whole block padding transition is catered for - you just need to update the --content-padding var. */ html[lang] details::details-content { --content-padding: 0; --duration: 0.5s; --duration-2: 0.75s; transition: height var(--duration) ease, opacity var(--duration) ease, content-visibility var(--duration) ease allow-discrete, margin-top var(--duration-2) ease, padding var(--duration-2) ease; height: 0; margin-top: 0; padding: 0; opacity: 0; overflow: clip; } html[lang] details[open]::details-content { height: auto; margin-top: var(--sz-m); padding: var(--content-padding); opacity: 1; } :root { interpolate-size: allow-keywords; } } } /* Address styling not present in Safari and Chrome. (N) */ html[lang] dfn { font-style: italic; } /* 1. Make lists behave properly next to floated items. (https://paulbakaus.com/tutorials/css/block-formatting-contexts-and-lists) */ html[lang] dl { display: flow-root; /* 1b */ margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] dl:first-child { margin-block-start: 0; } html[lang] dl:last-child { margin-block-end: 0; } html[lang] dt { font-weight: bold; } html[lang] em em { font-style: normal; /* [1] */ } /* Fieldsets and legends can be difficult to style so I'm keeping their appearance basically the same as the default - just a bit of theming. More info here: https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ */ html[lang] fieldset { min-width: 0; border-width: var(--fieldset-border-width, var(--base-border-width)); border-style: solid; border-color: var(--base-ui-color); padding: calc(var(--fieldset-padding, var(--sz-m)) - var(--fieldset-border-width, var(--base-border-width))); margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] fieldset:first-child { margin-block-start: 0; } html[lang] fieldset:last-child { margin-block-end: 0; } html[lang] fieldset fieldset { margin: 0; padding: 0; border-width: 0; } html[lang] figcaption { --m: var(--sz-sm); font-size: 0.875em; margin-block-start: var(--sz-s); margin-block-end: 0; } html[lang] figure { margin-inline: var(--sz-m); margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] figure:first-child { margin-block-start: 0; } html[lang] figure:last-child { margin-block-end: 0; } html[lang] figure { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] figure:focus-within { outline: 2px solid transparent; /* [1] */ } html[lang] figure:focus-within { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); outline: 2px solid black; } @media (forced-colors: none) { /* 1. Tables that are very wide risk their captions being hidden off-screen. Setting the figure up as a container allows for the caption to remain in view at all times. See the caption element for how that works. */ @supports not (scroll-timeline: none) { html[lang] figure:has(> table) { background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%), linear-gradient(to right, rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, 0.5), rgba(255, 255, 255, 0)); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-color: white; background-size: 2em 100%, 2em 100%, 1em 100%, 1em 100%; background-attachment: local, local, scroll, scroll; } } @supports (scroll-timeline: none) { html[lang] figure:has(> table) { border-width: var(--table-border-width, var(--base-border-width)); border-style: var(--table-border-style, var(--base-border-style)); /* Fix: typo ---th-border-color */ border-color: var(--th-border-color, var(--table-base-color, var(--base-ui-color))); max-width: 100%; --shadow-color: rgb(0 0 0 / 0.4); --shadow-size: var(--sz-s); --shadow-spread: calc(var(--shadow-size) * -0.5); overflow-x: auto; animation: scroll-shadow-inset linear; scroll-timeline: --scroll-shadow-timeline inline; animation-timeline: --scroll-shadow-timeline; container-type: inline-size; /* [1] */ position: relative; /* [1] */ } html[lang] figure:has(> table) > table { border-width: 0; mix-blend-mode: multiply; } html[lang] figure:has(> table) > table td:first-child, html[lang] figure:has(> table) > table th:first-child { border-inline-start-width: 0; } html[lang] figure:has(> table) > table td:last-child, html[lang] figure:has(> table) > table th:last-child { border-inline-end-width: 0; } html[lang] figure:has(> table) > table tr:last-child td { border-block-end-width: 0; } @keyframes scroll-shadow-inset { from { box-shadow: inset calc(var(--shadow-size) * -1) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color), inset 0 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color); margin-block-end: calc(var(--base-rem-space-unit) + 0.7rem); } 6%, 94% { box-shadow: inset calc(var(--shadow-size) * -1) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color), inset var(--shadow-size) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color); } to { box-shadow: inset 0 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color), inset var(--shadow-size) 0 var(--shadow-size) var(--shadow-spread) var(--shadow-color); margin-block-end: calc(var(--base-rem-space-unit) + 0.7rem); } } } html[lang] figure:has(> table) > table { mix-blend-mode: multiply; } } html[lang] footer { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] footer:first-child { margin-block-start: 0; } html[lang] footer:last-child { margin-block-end: 0; } html[lang] form { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] form:first-child { margin-block-start: 0; } html[lang] form:last-child { margin-block-end: 0; } html[lang] header { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] header:first-child { margin-block-start: 0; } html[lang] header:last-child { margin-block-end: 0; } html[lang] hgroup { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] hgroup:first-child { margin-block-start: 0; } html[lang] hgroup:last-child { margin-block-end: 0; } html[lang] h1 { font-size: var(--h1-font-size); line-height: var(--h1-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h1:first-child { margin-block-start: 0; } html[lang] h1:last-child { margin-block-end: 0; } html[lang] h2 { font-size: var(--h2-font-size); line-height: var(--h2-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h2:first-child { margin-block-start: 0; } html[lang] h2:last-child { margin-block-end: 0; } html[lang] h3 { font-size: var(--h3-font-size); line-height: var(--h3-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h3:first-child { margin-block-start: 0; } html[lang] h3:last-child { margin-block-end: 0; } html[lang] h4 { font-size: var(--h4-font-size); line-height: var(--h4-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h4:first-child { margin-block-start: 0; } html[lang] h4:last-child { margin-block-end: 0; } html[lang] h5 { font-size: var(--h5-font-size); line-height: var(--h5-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h5:first-child { margin-block-start: 0; } html[lang] h5:last-child { margin-block-end: 0; } html[lang] h6 { font-size: var(--h6-font-size); line-height: var(--h6-height); text-wrap: balance; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] h6:first-child { margin-block-start: 0; } html[lang] h6:last-child { margin-block-end: 0; } /* 1. Show the overflow in Edge and IE. (N) */ html[lang] hr { position: relative; height: var(--sz-m); border: none; } html[lang] hr::before { content: ""; position: absolute; inset-block-start: var(--sz-s); display: block; inline-size: 100%; block-size: 0; border-block-end-width: var(--hr-border-width, var(--base-border-width)); border-block-end-style: var(--hr-border-style, var(--base-border-style)); border-block-end-color: var(--hr-border-color, var(--base-border-color)); } html[lang] hr { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] hr:first-child { margin-block-start: 0; } html[lang] hr:last-child { margin-block-end: 0; } html[lang] iframe { vertical-align: middle; } /* 1. Fluid images for responsive purposes. 2. Remove the border on images inside links in IE 10-. 3. Offset `alt` text from surrounding copy. 4. Setting `vertical-align` removes the whitespace that appears under `img` elements when they are dropped into a page as-is. Safer alternative to using `display: block;`. 5. Google Maps breaks if `max-width: 100%` acts upon it; use their selector to remove the effects. 6. If a `width` and/or `height` attribute have been explicitly defined, let's not make the image fluid. */ html[lang] img { max-inline-size: 100%; /* [1] */ block-size: auto; /* [1] */ border-style: none; /* 2 */ font-style: italic; /* [3] */ vertical-align: var(--media-element-vertical-align, middle); /* [4] */ } .gm-style html[lang] img { /* [5] */ max-inline-size: none; } /* Special treatment for images inside links. */ html[lang] a[href] img { border-inline-start: 0; border-inline-end: 0; border-block-start: 0; border-block-end: var(--anchor-image-line-width, 0.1875em) var(--anchor-image-line-style, dashed) currentColor; /* &:active, &:hover { border-block-end: var( --anchor-image-line-width--alt, 0.1875em ) solid transparent; padding-block-end: var( --anchor-image-padding-bottom--alt, 0 ); } */ } html[lang] a[href] img:active, html[lang] a[href] img:hover { border-block-end: var(--anchor-image-line-width--alt, 0.1875em) var(--anchor-image-line-style--alt, solid) currentColor; padding-block-end: var(--anchor-image-padding-bottom--alt, 0); } html[lang] a[href] img { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] a[href] img:focus-within { outline: 2px solid transparent; /* [1] */ } html[lang] a[href] img:focus-within { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* Here's a problem - if the image has a transparent background, the a's bounding box (which is inline and smaller than the image) is visible. Outlines actually work as expected in this case but I can't use them because of the lack of rounded corners, hence the a > img selector reapplying the focus shadow. I guess transparent images like this are an edge case, but it's something to keep an eye on. */ /* Broken images could look much better if CSS could detect if they're broken. Sadly this isn't natively possible, but using JS onerror on all images can add an attribute we can use for styling. */ html[lang] img[data-broken] { background-color: #ddd; outline: 2px solid transparent; } html[lang] input { max-inline-size: 100%; /* [1] */ padding-block-start: calc(var(--sz-xxs) - var(--input-border-width, var(--base-border-width))); /* [2] */ padding-inline: var(--input-h-padding, var(--sz-xs)); padding-block-end: calc(var(--sz-xxs) - var(--input-border-width, var(--base-border-width))); /* [2] */ border-width: var(--input-border-width, var(--base-border-width)); border-style: var(--input-border-style, var(--base-border-style)); border-color: var(--input-border-color, var(--base-border-color)); border-radius: var(--input-border-radius, var(--base-border-radius)); background-color: var(--input-background-color, #fff); font-size: inherit; font-weight: inherit; font-style: inherit; font-family: inherit; touch-action: manipulation; /* [3] */ vertical-align: middle; /* [4] */ line-height: inherit; /* [5] */ min-block-size: var(--input-min-height, 3rem); margin-block: var(--sz-xxs); margin-inline: 0; } /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ html[lang] input:not([type]):focus, html[lang] [type=color]:focus, html[lang] [type=date]:focus, html[lang] [type=datetime]:focus, html[lang] [type=datetime-local]:focus, html[lang] [type=email]:focus, html[lang] [type=file]:focus, html[lang] [type=month]:focus, html[lang] [type=number]:focus, html[lang] [type=password]:focus, html[lang] [type=search]:focus, html[lang] [type=range]:focus, html[lang] [type=tel]:focus, html[lang] [type=text]:focus, html[lang] [type=time]:focus, html[lang] [type=url]:focus, html[lang] [type=week]:focus, html[lang] input:not([type]):focus-visible, html[lang] [type=color]:focus-visible, html[lang] [type=date]:focus-visible, html[lang] [type=datetime]:focus-visible, html[lang] [type=datetime-local]:focus-visible, html[lang] [type=email]:focus-visible, html[lang] [type=file]:focus-visible, html[lang] [type=month]:focus-visible, html[lang] [type=number]:focus-visible, html[lang] [type=password]:focus-visible, html[lang] [type=search]:focus-visible, html[lang] [type=range]:focus-visible, html[lang] [type=tel]:focus-visible, html[lang] [type=text]:focus-visible, html[lang] [type=time]:focus-visible, html[lang] [type=url]:focus-visible, html[lang] [type=week]:focus-visible, html[lang] [type=checkbox]:focus, html[lang] [type=radio]:focus, html[lang] [type=checkbox]:focus-visible, html[lang] [type=radio]:focus-visible { outline: 2px solid transparent; /* [1] */ } html[lang] input:not([type]):focus, html[lang] [type=color]:focus, html[lang] [type=date]:focus, html[lang] [type=datetime]:focus, html[lang] [type=datetime-local]:focus, html[lang] [type=email]:focus, html[lang] [type=file]:focus, html[lang] [type=month]:focus, html[lang] [type=number]:focus, html[lang] [type=password]:focus, html[lang] [type=search]:focus, html[lang] [type=range]:focus, html[lang] [type=tel]:focus, html[lang] [type=text]:focus, html[lang] [type=time]:focus, html[lang] [type=url]:focus, html[lang] [type=week]:focus, html[lang] input:not([type]):focus-visible, html[lang] [type=color]:focus-visible, html[lang] [type=date]:focus-visible, html[lang] [type=datetime]:focus-visible, html[lang] [type=datetime-local]:focus-visible, html[lang] [type=email]:focus-visible, html[lang] [type=file]:focus-visible, html[lang] [type=month]:focus-visible, html[lang] [type=number]:focus-visible, html[lang] [type=password]:focus-visible, html[lang] [type=search]:focus-visible, html[lang] [type=range]:focus-visible, html[lang] [type=tel]:focus-visible, html[lang] [type=text]:focus-visible, html[lang] [type=time]:focus-visible, html[lang] [type=url]:focus-visible, html[lang] [type=week]:focus-visible { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* Without custom styling (appearance: none), Safari doesn't apply the shadow, so breaks accessibility ... */ html[lang] [type=checkbox]:focus, html[lang] [type=radio]:focus, html[lang] [type=checkbox]:focus-visible, html[lang] [type=radio]:focus-visible { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* ... so reinstating the outline: */ _::-webkit-full-page-media, _:future, :root html[lang] [type=checkbox]:focus, _::-webkit-full-page-media, _:future, :root html[lang] [type=radio]:focus { outline: auto 5px -webkit-focus-ring-color; } /* IE9 adds the border and background: */ html[lang] [type=checkbox], html[lang] [type=radio] { cursor: pointer; } html[lang] [type=button], html[lang] [type=reset], html[lang] [type=submit] { min-height: 3rem; margin-block: var(--button-block-margin, var(--sz-xxs)); margin-inline: var(--button-inline-margin, 0); border-color: var(--button-border-color, var(--base-ui-color)); border-style: var(--button-border-style, var(--base-border-style)); --border-width: var(--button-border-width, var(--base-border-width)); border-width: var(--border-width); border-radius: var(--button-border-radius, var(--base-border-radius)); padding-block-start: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-block-end: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-inline-end: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); padding-inline-start: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); --background-color: var(--button-color, var(--base-ui-color)); background-color: var(--background-color); font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; line-height: var(--base-rem-space-unit); vertical-align: middle; text-transform: none; /* [N0], N: Remove the inheritance of text transform in Edge, Firefox, and IE. */ cursor: pointer; touch-action: manipulation; /* 1 */ -webkit-appearance: none; display: inline-flex; align-items: center; } html[lang] [type=button]:hover, html[lang] [type=button]:active, html[lang] [type=reset]:hover, html[lang] [type=reset]:active, html[lang] [type=submit]:hover, html[lang] [type=submit]:active { --background-color: var(--button-background-color-alt, var(--base-ui-color-light)); background-color: var(--background-color); } html[lang] [type=button], html[lang] [type=reset], html[lang] [type=submit] { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] [type=button]:focus, html[lang] [type=button]:focus-visible, html[lang] [type=reset]:focus, html[lang] [type=reset]:focus-visible, html[lang] [type=submit]:focus, html[lang] [type=submit]:focus-visible { outline: 2px solid transparent; /* [1] */ box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* IE and Edge behave differently (both to other browsers and each other) and so min-height and line-height settings don't seem consistent. 1. On smaller devices the width of these inputs can force horizontal scrolling. Max-width doesn't work to solve this, but may be needed to restrict width on larger screens. 2. Make sure button corners aren't visible. */ html[lang] [type=file] { inline-size: 100%; /* [1] */ max-inline-size: var(--input-file-max-width, 18.5em); min-block-size: var(--input-min-height, 3rem); overflow: hidden; /* [2] */ margin: 0; padding: 0; cursor: pointer; } /* 1. Spacing height + 2 sets of input padding, minus border width. */ html[lang] [type=file]::file-selector-button { min-height: 3rem; margin-block: var(--button-block-margin, var(--sz-xxs)); margin-inline: var(--button-inline-margin, 0); border-color: var(--button-border-color, var(--base-ui-color)); border-style: var(--button-border-style, var(--base-border-style)); --border-width: var(--button-border-width, var(--base-border-width)); border-width: var(--border-width); border-radius: var(--button-border-radius, var(--base-border-radius)); padding-block-start: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-block-end: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-inline-end: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); padding-inline-start: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); --background-color: var(--button-color, var(--base-ui-color)); background-color: var(--background-color); font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; line-height: var(--base-rem-space-unit); vertical-align: middle; text-transform: none; /* [N0], N: Remove the inheritance of text transform in Edge, Firefox, and IE. */ cursor: pointer; touch-action: manipulation; /* 1 */ -webkit-appearance: none; display: inline-flex; align-items: center; } html[lang] [type=file]::file-selector-button:hover, html[lang] [type=file]::file-selector-button:active { --background-color: var(--button-background-color-alt, var(--base-ui-color-light)); background-color: var(--background-color); } html[lang] [type=file]::file-selector-button { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] [type=file]::file-selector-button:focus, html[lang] [type=file]::file-selector-button:focus-visible { outline: 2px solid transparent; /* [1] */ box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } html[lang] [type=file]::file-selector-button { margin-block: 0; margin-inline-start: 0; margin-inline-end: var(--sz-xs); border-start-end-radius: 0; border-end-end-radius: 0; } @supports (color: oklch(from red l c h)) { html[lang] [type=file]::file-selector-button { color: oklch(from var(--background-color) var(--l) 0 h/0.9); } } html[lang] [type=file]::-webkit-file-upload-button { min-height: 3rem; margin-block: var(--button-block-margin, var(--sz-xxs)); margin-inline: var(--button-inline-margin, 0); border-color: var(--button-border-color, var(--base-ui-color)); border-style: var(--button-border-style, var(--base-border-style)); --border-width: var(--button-border-width, var(--base-border-width)); border-width: var(--border-width); border-radius: var(--button-border-radius, var(--base-border-radius)); padding-block-start: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-block-end: calc(var(--button-inline-padding, var(--sz-xxs)) - var(--border-width)); padding-inline-end: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); padding-inline-start: calc(var(--button-inline-padding, var(--sz-xs)) - var(--border-width)); --background-color: var(--button-color, var(--base-ui-color)); background-color: var(--background-color); font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; line-height: var(--base-rem-space-unit); vertical-align: middle; text-transform: none; /* [N0], N: Remove the inheritance of text transform in Edge, Firefox, and IE. */ cursor: pointer; touch-action: manipulation; /* 1 */ -webkit-appearance: none; display: inline-flex; align-items: center; } html[lang] [type=file]::-webkit-file-upload-button:hover, html[lang] [type=file]::-webkit-file-upload-button:active { --background-color: var(--button-background-color-alt, var(--base-ui-color-light)); background-color: var(--background-color); } html[lang] [type=file]::-webkit-file-upload-button { /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] [type=file]::-webkit-file-upload-button:focus, html[lang] [type=file]::-webkit-file-upload-button:focus-visible { outline: 2px solid transparent; /* [1] */ box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } html[lang] [type=file]::-webkit-file-upload-button { margin-block: 0; margin-inline-start: 0; margin-inline-end: var(--sz-xs); border-start-end-radius: 0; border-end-end-radius: 0; } @supports (color: oklch(from red l c h)) { html[lang] [type=file]::-webkit-file-upload-button { color: oklch(from var(--background-color) var(--l) 0 h/0.9); } } html[lang] [type=color] { inline-size: calc(var(--sz-m, ) * 2); block-size: var(--input-min-height, 3rem); } html[lang] [type=color]::-webkit-color-swatch-wrapper { padding: 0; } html[lang] [type=color]::-moz-color-swatch { border: 0 !important; border-radius: var(--button-border-radius, 0.3rem); } html[lang] [type=color]::-webkit-color-swatch { border: 0 !important; border-radius: var(--button-border-radius, 0.3rem); } /* iOS turns these inputs into selects which are a touch too high. */ html[lang] [type=date], html[lang] [type=datetime-local], html[lang] [type=month], html[lang] [type=time], html[lang] [type=week] { block-size: calc(var(--base-rem-space-unit) + var(--base-rem-space-unit) / 6); } /* Remove extra padding in Chrome */ html[lang] [type=date]::-webkit-datetime-edit-fields-wrapper, html[lang] [type=datetime-local]::-webkit-datetime-edit-fields-wrapper, html[lang] [type=month]::-webkit-datetime-edit-fields-wrapper, html[lang] [type=time]::-webkit-datetime-edit-fields-wrapper, html[lang] [type=week]::-webkit-datetime-edit-fields-wrapper { padding: 0; } /* Tidy spin buttons and apply cursor: */ html[lang] [type=date]::-webkit-inner-spin-button, html[lang] [type=datetime-local]::-webkit-inner-spin-button, html[lang] [type=month]::-webkit-inner-spin-button, html[lang] [type=number]::-webkit-inner-spin-button, html[lang] [type=time]::-webkit-inner-spin-button, html[lang] [type=week]::-webkit-inner-spin-button { height: auto; cursor: pointer; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ html[lang] [type=search] { -webkit-appearance: textfield; /* [1] */ } /** * N: Remove the inner padding and cancel buttons in Chrome on OS X and * Safari on OS X. */ html[lang] [type=search]::-webkit-search-cancel-button, html[lang] [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /* Correct the text style on placeholders in Chrome, Edge, and Safari. */ html[lang] ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /* 1. Correct the inheritance and scaling of font size in all browsers. (N) 2. Address odd `em`-unit font size rendering in all browsers. (N) 3. Prevent the element increasing the line-height of the parent. */ html[lang] kbd { font-family: monospace, monospace; /* [1] */ font-size: 1em; /* [2] */ line-height: 0; /* [3] */ } /* 1. Remove the tapping delay from clickable elements. */ html[lang] label { display: inline-block; padding-block-start: var(--label-block-padding, var(--sz-xs)); padding-block-end: var(--label-block-padding, var(--sz-xs)); margin: 0; font-weight: bold; vertical-align: middle; cursor: pointer; touch-action: manipulation; /* [1] */ } /* Fieldsets and legends can be difficult to style so I'm keep their appearance basically the same as the default - just a bit of theming. More info here: https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ */ html[lang] legend { margin-block-end: calc(var(--base-rem-space-unit) * -1.5); padding-inline: var(--legend-inline-padding, var(--sz-xs)); max-inline-size: 100%; border-width: var(--legend-border-width, var(--base-border-width)); font-weight: bold; } html[lang] legend + * { margin-block-start: var(--base-rem-space-unit); } html[lang] li { margin-inline-start: var(--list-indent); } html[lang] li ul, html[lang] li ol { margin-block-end: 0; } html[lang] main { width: 100%; min-height: 100%; padding: var(--main-padding, var(--sz-m)); --background-color: var(--main-background-color, var(--base-background-color)); background-color: var(--background-color); position: relative; margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] main:first-child { margin-block-start: 0; } html[lang] main:last-child { margin-block-end: 0; } html[lang] mark { background: var(--mark-background-color, #ff0); color: var(--mark-text-color, #000); } html[lang] nav { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] nav:first-child { margin-block-start: 0; } html[lang] nav:last-child { margin-block-end: 0; } html[lang] object { vertical-align: middle; /* 1. Make sure focus is still visible in Forced Colour modes. (https://www.sarasoueidan.com/blog/focus-indicators/) */ } html[lang] object:focus-within { outline: 2px solid transparent; /* [1] */ } html[lang] object:focus-within { box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2); } /* 1. Make lists behave properly next to floated items. (https://paulbakaus.com/tutorials/css/block-formatting-contexts-and-lists) */ html[lang] ol { display: flow-root; /* 1b */ margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] ol:first-child { margin-block-start: 0; } html[lang] ol:last-child { margin-block-end: 0; } html[lang] optgroup { --background-color: var(--optgroup-color, var(--base-background-color)); background-color: var(--background-color); font-weight: bold; /* [1] */ font-style: inherit; font-size: inherit; font-family: inherit; } html[lang] optgroup::before { padding-inline: var(--option-h-padding, ); min-block-size: var(--base-rem-space-unit); line-height: var(--base-rem-space-unit); --background-color: var(--optgroup-label-color, var(--base-ui-color-lightest)); background-color: var(--background-color); } html[lang] optgroup > option { margin-inline-start: calc(var(--option-h-padding, ) * 2); } html[lang] option { display: flex; /* [1] */ align-items: center; /* [1] */ min-block-size: var(--sz-m); padding-inline: var(--option-inline-padding, var(--sz-xs)); cursor: pointer; --background-color: var(--option-color, var(--base-background-color)); background-color: var(--background-color); } html[lang] option:hover { --background-color: var(--option-color-state-1, var(--base-ui-color-lighter)); } html[lang] option:checked { --background-color: var(--option-color-state-2, var(--base-ui-color-darker)); } html[lang] p { margin-block-start: var(--m); margin-block-end: var(--m); } html[lang] p:first-child { margin-block-start: 0; } html[lang] p:last-child { margin-block-end: 0; } /* Note: code is the most probable use for a `
` tag. Other uses may occur (e.g. poem) but
      these could be adjusted with a class. Could maybe make this default configurable but leave as it
      is for now as it's likely that a poem would need a complete re-style (e.g. fonts etc.).

      1 Correct the odd `em` font sizing in all browsers.
      2. Correct the inheritance and scaling of font size in all browsers.
      3. Ensure box edges are visible in High Contrast Mode.

      Scrolling. Browsers handle scrollbars differently. To preserve vertical rhythm (VR), some
      browser-specific tweaks are needed.
      (Note on Mac Safari scrollbar visibility is a user setting but that doesn't affect the VR)

      s1. Set some baseline variables.
      s2. Colour scrollbars for modern browsers.
      s3. Chrome (last tested in 146) still gives space for the scrollbar and doesn't overlay them
          like FF does so we need to change the pasding to reserve the VR.
          This targets Chrome 111+.
          overflow-scroll forces the scrollbar because we can't detect if it is present or not.
      s4. Chronme 133- used 17px for the scrollbar. There's no CSS features I can use to target
          that split, but `overflow-inline: auto` was introduced in Chrome 135 so that will do.
          It means 134 doesn't keep the VR but no-one would notice.
  */
  html[lang] pre {
    overflow: auto;
    font-size: 1em; /* [1] */
    font-family: var(--monospace-font-family, monospace); /* [2] */
    --background-color: var(--pre-background-color, var(--base-ui-color-lightest));
    background-color: var(--background-color);
    margin-block-start: var(--m);
    margin-block-end: var(--m);
  }
  html[lang] pre:first-child {
    margin-block-start: 0;
  }
  html[lang] pre:last-child {
    margin-block-end: 0;
  }
  html[lang] pre {
    outline: 2px solid transparent; /* [3] */
  }
  html[lang] pre:focus-within {
    box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2);
  }
  html[lang] pre {
    /* [s1] */
    --pre-scrollbar-color-thumb: var(--scrollbar-color-thumb, var(--base-ui-color-dark));
    --pre-scrollbar-color-track: var(--scrollbar-color-track, var(--base-ui-color-lighter));
    --pre-scrollbar-size-legacy: var(--scrollbar-size-legacy, var(--sz-s));
    --pre-padding-block-end-legacy: calc(var(--sz-m) - 15px);
    /* [s2] */
  }
  @supports (scrollbar-width: auto) {
    html[lang] pre {
      scrollbar-color: var(--pre-scrollbar-color-thumb) var(--pre-scrollbar-color-track);
    }
  }
  html[lang] pre {
    /* [s3] */
  }
  @supports selector(::-webkit-scrollbar) {
    html[lang] pre {
      padding-block-end: var(--pre-padding-block-end-legacy);
      overflow-x: scroll;
    }
    html[lang] pre::-webkit-scrollbar-thumb {
      background: var(--pre-scrollbar-color-thumb);
    }
    html[lang] pre::-webkit-scrollbar-track {
      background: var(--pre-scrollbar-color-track);
    }
    html[lang] pre::-webkit-scrollbar {
      width: var(--pre-scrollbar-size-legacy);
      height: var(--pre-scrollbar-size-legacy);
    }
  }
  html[lang] pre {
    /* [s4] */
  }
  @supports selector(::-webkit-scrollbar) and (not (overflow-inline: auto)) {
    html[lang] pre {
      --pre-padding-block-end-legacy: calc(var(--sz-m) - 17px);
    }
  }
  /*
      1. Revert zeroed line-height (see) `code`.
  */
  html[lang] pre code {
    display: inline-block;
    padding: var(--pre-code-padding, 1.2rem);
    line-height: var(---pre-code-line-height, var(--base-line-height)); /* [1] */
  }
  html[lang] progress {
    vertical-align: middle;
  }
  /*
      1. Address odd `em`-unit font size rendering in all browsers.
      2. Correct the inheritance and scaling of font size in all browsers.
      3. Prevent the element increasing the line-height of the parent.
  */
  html[lang] samp {
    font-size: 1em; /* [1] */
    font-family: monospace, monospace; /* [2] */
    line-height: 0; /* [3] */
  }
  html[lang] section {
    margin-block-start: var(--m);
    margin-block-end: var(--m);
  }
  html[lang] section:first-child {
    margin-block-start: 0;
  }
  html[lang] section:last-child {
    margin-block-end: 0;
  }
  html[lang] select {
    height: calc(var(--sz-m) + var(--sz-xs)); /* [1] */
    min-height: auto;
    margin-block: var(--sz-xxs);
    border-width: var(--select-border-width, var(--base-border-width));
    border-style: var(--select-border-style, var(--base-border-style));
    border-color: var(--select-border-color, var(--base-border-color));
    border-radius: var(--select-border-radius, var(--base-border-radius));
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: var(--base-line-height);
    vertical-align: middle;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation; /* [2] */
    /*
        1. Make sure focus is still visible in Forced Colour modes.
            (https://www.sarasoueidan.com/blog/focus-indicators/)
    */
  }
  html[lang] select:focus-within {
    outline: 2px solid transparent; /* [1] */
  }
  html[lang] select:focus-within {
    box-shadow: 0 0 0 var(--sz-xxs) #fff, 0 0 0 var(--sz-xs) rgba(0, 0, 0, 0.2);
  }
  /*
      1. Make the arrow indicator the same across browsers.
  */
  html[lang] select:not([multiple]) {
    padding-inline-start: var(--select-inline-start-padding, var(--sz-xs));
    padding-inline-end: var(--select-inline-end-padding, var(--sz-m));
    background-image: url('data:image/svg+xml;utf8,'); /* [1] */
    background-repeat: no-repeat;
    background-position: calc(100% - var(--sz-xxs)) 0;
    appearance: none;
  }
  /*
      Note that Opera 25- and Safari(all - 11 latest at time of writing) treat select [size]s of
      less than 4 as 4.
      1. Multi-selects take the height of their options so need to use negative margin to offset
         border-width.
  */
  html[lang] select[multiple] {
    height: auto;
    vertical-align: top;
    margin-inline: 0;
    margin-block: calc(var(--select-border-width, var(--base-border-width)) * -1);
  }
  /*
      Apply padding to fudge height in Safari (we need to apply to iOS)...
  */
  /*_::-webkit-full-page-media, _:future, :root select[multiple] {
      margin-block-end: 0;

      padding: calc(var(--base-rem-space-unit) / 12);
  }*/
  /*
      ... but reset for Mac Safari .
  */
  /*_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root select[multiple] {
      margin-block-end: calc((var(--base-rem-space-unit) / 8) * 3 - (var(--select-border-width, ) * 2));

      padding: 0;
  }*/
  /*
      Various browsers do not allow