npm - @nationalarchives/frontend - Versions diffs - 0.1.23-prerelease → 0.1.25-prerelease - Mend

@nationalarchives/frontend 0.1.23-prerelease → 0.1.25-prerelease

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/nationalarchives/components/tabs/tabs.css CHANGED Viewed

	@@ -1 +1 @@
1	- @import"https://use.typekit.net/hkj3kuz.css";.tna-background--contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-chip,.tna-hgroup__supertitle,.tna-background--accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link-visited);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background--tint{background-color:#d8d8d8;background-color:var(--background-tint)}.tna-background--accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--link: rgb(0, 0, 0);--link-visited: #4c2c92;--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background)}.tna-tabs,.tna-chip-list,.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-blockquote,.tna-large-paragraph,.tna-scene-setter,.tna-aside{margin-top:2rem}.tna-tabs:first-child,.tna-chip-list:first-child,.tna-heading-xl:first-child,.tna-heading-l:first-child,.tna-heading-m:first-child,.tna-heading-s:first-child,.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-blockquote:first-child,.tna-large-paragraph:first-child,.tna-scene-setter:first-child,.tna-aside:first-child{margin-top:0}.tna-visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after{content:" "}:focus{z-index:9;outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}.tna-\!--no-focus-style:focus{outline:none}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:1rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}:root{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch;font-size:16px;background-color:#f4f4f4;background-color:var(--page-background);accent-color:var(--accent)}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(0, 176, 255);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #d8d8d8;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: rgb(0, 76, 126);--link-visited: rgb(0, 0, 0);--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme {background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(255, 255, 255);--link-visited: rgb(255, 255, 255);--focus-outline: rgb(0, 176, 255);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #d8d8d8;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: #1d70ab;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(0, 176, 255);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #d8d8d8;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: rgb(0, 76, 126);--link-visited: rgb(0, 0, 0);--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme {background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(255, 255, 255);--link-visited: rgb(255, 255, 255);--focus-outline: rgb(0, 176, 255);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--black-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important}.tna-template--yellow-accent{--accent: rgb(255, 204, 0) !important;--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(254, 29, 87) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(253, 63, 3) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(134, 188, 37) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(0, 176, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template {animation:none !important;transition:none !important}}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content[role=main]{flex:1}img,svg,picture,video,canvas{max-width:100%;display:block}video,canvas{width:100%}[hidden]{display:none}hr{margin:0;border-width:1px 0 0;border-color:rgb(38 38 42/0.25);border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-aside--tight{padding:1rem}.tna-ul,.tna-ol{margin:1rem 0 0;padding:0 0 0 2rem}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-dl{margin:1rem 0 0;display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:.5rem 1rem;position:relative;box-sizing:border-box;word-wrap:break-word}.tna-dl--plain dt{padding-left:0}.tna-dl--plain dd{padding-right:0}.tna-dl dt{width:30%;font-weight:bold}.tna-dl dd{width:70%}.tna-dl dd+dd{margin-left:30%}.tna-dl--icon-padding dt{padding-left:3rem !important;position:relative}.tna-dl--icon-padding dt .fa-solid{overflow:visible;position:absolute;top:50%;left:1rem;color:rgb(52 51 56/0.45);color:var(--icon-light);text-align:left;transform:translateY(-50%)}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:2rem !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:2rem}.tna-dl:not(.tna-dl--plain) dt:first-child,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n)+dt,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n + 1){background-color:#d8d8d8;background-color:var(--background-tint)}@media(min-width: 30.0625em)and (max-width: 48em){.tna-dl dt{width:35%}.tna-dl dd{width:65%}.tna-dl dd+dd{margin-left:35%}}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:1rem}.tna-dl--plain dt{padding-bottom:0}.tna-dl--plain dd{padding-top:0}.tna-dl:not(.tna-dl--plain) dt{background-color:#d8d8d8;background-color:var(--background-tint)}.tna-dl:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important}}.tna-template--high-contrast-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-dl dt,.tna-template--high-contrast-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-dl dt,.tna-template--system-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--margin-top-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-top:0.5rem !important}.tna-\!--margin-top-s-medium,.tna-\!--margin-vertical-s-medium{margin-top:1rem !important}.tna-\!--margin-top-m-medium,.tna-\!--margin-vertical-m-medium{margin-top:2rem !important}.tna-\!--margin-top-l-medium,.tna-\!--margin-vertical-l-medium{margin-top:3rem !important}.tna-\!--margin-top-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-top:5rem !important}.tna-\!--margin-top-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-top:8rem !important}.tna-\!--margin-bottom-xs-medium,.tna-\!--margin-vertical-xs-medium{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-medium,.tna-\!--margin-vertical-s-medium{margin-bottom:1rem !important}.tna-\!--margin-bottom-m-medium,.tna-\!--margin-vertical-m-medium{margin-bottom:2rem !important}.tna-\!--margin-bottom-l-medium,.tna-\!--margin-vertical-l-medium{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl-medium,.tna-\!--margin-vertical-xl-medium{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl-medium,.tna-\!--margin-vertical-xxl-medium{margin-bottom:8rem !important}.tna-\!--padding-top-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-top:0.5rem !important}.tna-\!--padding-top-s-medium,.tna-\!--padding-vertical-s-medium{padding-top:1rem !important}.tna-\!--padding-top-m-medium,.tna-\!--padding-vertical-m-medium{padding-top:2rem !important}.tna-\!--padding-top-l-medium,.tna-\!--padding-vertical-l-medium{padding-top:3rem !important}.tna-\!--padding-top-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-top:5rem !important}.tna-\!--padding-top-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-top:8rem !important}.tna-\!--padding-bottom-xs-medium,.tna-\!--padding-vertical-xs-medium{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-medium,.tna-\!--padding-vertical-s-medium{padding-bottom:1rem !important}.tna-\!--padding-bottom-m-medium,.tna-\!--padding-vertical-m-medium{padding-bottom:2rem !important}.tna-\!--padding-bottom-l-medium,.tna-\!--padding-vertical-l-medium{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl-medium,.tna-\!--padding-vertical-xl-medium{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl-medium,.tna-\!--padding-vertical-xxl-medium{padding-bottom:8rem !important}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--margin-top-xs-small,.tna-\!--margin-vertical-xs-small{margin-top:0.5rem !important}.tna-\!--margin-top-s-small,.tna-\!--margin-vertical-s-small{margin-top:0.75rem !important}.tna-\!--margin-top-m-small,.tna-\!--margin-vertical-m-small{margin-top:1.5rem !important}.tna-\!--margin-top-l-small,.tna-\!--margin-vertical-l-small{margin-top:2rem !important}.tna-\!--margin-top-xl-small,.tna-\!--margin-vertical-xl-small{margin-top:3rem !important}.tna-\!--margin-top-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-top:5rem !important}.tna-\!--margin-bottom-xs-small,.tna-\!--margin-vertical-xs-small{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-small,.tna-\!--margin-vertical-s-small{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-small,.tna-\!--margin-vertical-m-small{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-small,.tna-\!--margin-vertical-l-small{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-small,.tna-\!--margin-vertical-xl-small{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-small,.tna-\!--margin-vertical-xxl-small{margin-bottom:5rem !important}.tna-\!--padding-top-xs-small,.tna-\!--padding-vertical-xs-small{padding-top:0.5rem !important}.tna-\!--padding-top-s-small,.tna-\!--padding-vertical-s-small{padding-top:0.75rem !important}.tna-\!--padding-top-m-small,.tna-\!--padding-vertical-m-small{padding-top:1.5rem !important}.tna-\!--padding-top-l-small,.tna-\!--padding-vertical-l-small{padding-top:2rem !important}.tna-\!--padding-top-xl-small,.tna-\!--padding-vertical-xl-small{padding-top:3rem !important}.tna-\!--padding-top-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-top:5rem !important}.tna-\!--padding-bottom-xs-small,.tna-\!--padding-vertical-xs-small{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-small,.tna-\!--padding-vertical-s-small{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-small,.tna-\!--padding-vertical-m-small{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-small,.tna-\!--padding-vertical-l-small{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-small,.tna-\!--padding-vertical-xl-small{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-small,.tna-\!--padding-vertical-xxl-small{padding-bottom:5rem !important}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--margin-top-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-top:0.5rem !important}.tna-\!--margin-top-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-top:0.75rem !important}.tna-\!--margin-top-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-top:1.5rem !important}.tna-\!--margin-top-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-top:2rem !important}.tna-\!--margin-top-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-top:3rem !important}.tna-\!--margin-top-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-top:5rem !important}.tna-\!--margin-bottom-xs-tiny,.tna-\!--margin-vertical-xs-tiny{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s-tiny,.tna-\!--margin-vertical-s-tiny{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m-tiny,.tna-\!--margin-vertical-m-tiny{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l-tiny,.tna-\!--margin-vertical-l-tiny{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl-tiny,.tna-\!--margin-vertical-xl-tiny{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl-tiny,.tna-\!--margin-vertical-xxl-tiny{margin-bottom:5rem !important}.tna-\!--padding-top-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-top:0.5rem !important}.tna-\!--padding-top-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-top:0.75rem !important}.tna-\!--padding-top-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-top:1.5rem !important}.tna-\!--padding-top-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-top:2rem !important}.tna-\!--padding-top-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-top:3rem !important}.tna-\!--padding-top-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-top:5rem !important}.tna-\!--padding-bottom-xs-tiny,.tna-\!--padding-vertical-xs-tiny{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s-tiny,.tna-\!--padding-vertical-s-tiny{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m-tiny,.tna-\!--padding-vertical-m-tiny{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l-tiny,.tna-\!--padding-vertical-l-tiny{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl-tiny,.tna-\!--padding-vertical-xl-tiny{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl-tiny,.tna-\!--padding-vertical-xxl-tiny{padding-bottom:5rem !important}}@font-face{font-family:"Open Sans";src:url("./assets/fonts/OpenSans-Medium.ttf");font-weight:normal;font-style:normal}@font-face{font-family:"Open Sans";src:url("./assets/fonts/OpenSans-Bold.ttf");font-weight:bold;font-style:normal}@font-face{font-family:"Roboto Mono";src:url("./assets/fonts/RobotoMono-Regular.ttf");font-weight:normal;font-style:normal}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",sans-serif;font-weight:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}h1,h2,h3,h4,h5,h6,ul,ol{margin-top:0}h1,h2,h3,h4,h5,h6,strong{font-weight:bold}p{margin:2rem 0 0}p+p{margin-top:1rem}p:first-child{margin-top:0}a{color:#1d70ab;color:var(--link);text-decoration-thickness:1.5px}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}small{font-size:0.95625rem}.tna-chip-list{margin-bottom:0;padding-left:0;display:flex;flex-wrap:wrap;gap:1rem;list-style:none}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.125em .25rem;display:block;color:#000;color:var(--font-dark);font-family:"Roboto Mono",monospace;font-weight:normal;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1;border:.125rem #111 solid;border:.125rem var(--accent-background) solid}.tna-chip--plain{color:inherit;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}a.tna-chip{text-decoration:none}a.tna-chip,a.tna-chip:link,a.tna-chip:visited{color:#000;color:var(--font-dark)}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip--plain,a.tna-chip--plain:link,a.tna-chip--plain:visited{color:inherit}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{color:#000;color:var(--font-dark);text-wrap:balance}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-s:not(.tna-heading--no-link-arrow) a,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-m:not(.tna-heading--no-link-arrow) a,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-l:not(.tna-heading--no-link-arrow) a,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-xl:not(.tna-heading--no-link-arrow) a{display:inline-block}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a::after{padding-left:.25rem;display:inline-block;font-weight:700;content:"›"}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a:hover::after{padding-left:.5rem}.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.625rem}}@media(max-width: 48em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.25rem}}.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.625rem}}@media(max-width: 48em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.5rem}}.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:bold;font-size:1.375rem;line-height:1.6}@media(max-width: 48em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.25rem}}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:bold;font-size:1.125rem;line-height:1.6}.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin-bottom:0;padding-top:1rem}.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{padding-top:0}.tna-hgroup-xl:last-child,.tna-hgroup-l:last-child,.tna-hgroup-m:last-child,.tna-hgroup-s:last-child,.tna-heading-s:last-child,.tna-heading-m:last-child,.tna-heading-l:last-child,.tna-heading-xl:last-child{margin-bottom:0;padding-bottom:0}.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:1rem}.tna-hgroup__supertitle{margin:0 0 .25rem}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.35rem #111 solid;border-left:.35rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-style:italic}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}.tna-large-paragraph{font-size:1.25rem}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:normal;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-tabs__list{margin:0 0 1rem;padding:0;display:flex;align-items:stretch;gap:1rem;flex-wrap:nowrap;list-style:none}.tna-tabs__list-item-link{padding:.5rem 0;display:flex;align-items:center;position:relative;font-size:1.25rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;text-decoration:none;text-align:center;background:rgba(0,0,0,0);border:none;cursor:pointer}.tna-tabs__list-item-link,.tna-tabs__list-item-link:link,.tna-tabs__list-item-link:visited{color:#000;color:var(--font-dark)}.tna-tabs__list-item-link::after{height:0;position:absolute;right:0;bottom:0;left:0;background-color:#26262a;background-color:var(--keyline-dark);content:""}.tna-tabs__list-item-link:hover,.tna-tabs__list-item-link--selected,.tna-tabs__list-item-link--selected:hover{text-decoration:none}.tna-tabs__list-item-link:hover::after,.tna-tabs__list-item-link--selected::after,.tna-tabs__list-item-link--selected:hover::after{height:.25rem}.tna-template--js-enabled .tna-tabs__list-item-link{color:rgb(52 51 56/0.7);color:var(--font-light)}.tna-template--js-enabled .tna-tabs__list-item-link:hover::after{height:.125rem;background-color:rgb(52 51 56/0.7);background-color:var(--font-light)}.tna-template--js-enabled .tna-tabs__list-item-link--selected{color:#000;color:var(--font-dark)}.tna-template--js-enabled .tna-tabs__list-item-link--selected::after,.tna-template--js-enabled .tna-tabs__list-item-link--selected:hover::after{height:.25rem;background-color:#26262a;background-color:var(--keyline-dark)}.tna-tabs__item{display:none}.tna-tabs__item:first-child{display:block}.tna-tabs__item:has(~:target){display:none}.tna-tabs__item:target{display:block}.tna-template--js-enabled .tna-tabs__item{display:block}.tna-template--js-enabled .tna-tabs__item[hidden]{display:none}.tna-template--clicked .tna-tabs__item:focus{outline:none}.tna-template--high-contrast-theme .tna-tabs__list-item-link{padding-right:1rem;padding-left:1rem;overflow:hidden;border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-tabs__list-item-link{padding-right:1rem;padding-left:1rem;overflow:hidden;border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media print{.tna-tabs__list{display:none}.tna-tabs__item{display:block !important}.tna-tabs__item+.tna-tabs__item{margin-top:2rem}}/# sourceMappingURL=tabs.css.map /
1	+ @import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@400;500&display=swap";.tna-background-contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-chip,.tna-hgroup__supertitle,.tna-background-accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link-visited);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background-tint{background-color:#e2e2e2;background-color:var(--background-tint);color:#343338;color:var(--font-base)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--link: rgb(0, 0, 0);--link-visited: #4c2c92;--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}.tna-tabs,p,.tna-chip-list,.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-blockquote,.tna-large-paragraph,.tna-scene-setter,.tna-table,.tna-table-wrapper,.tna-aside{margin-top:2rem}.tna-tabs:first-child,p:first-child,.tna-chip-list:first-child,.tna-heading-xl:first-child,.tna-heading-l:first-child,.tna-heading-m:first-child,.tna-heading-s:first-child,.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-blockquote:first-child,.tna-large-paragraph:first-child,.tna-scene-setter:first-child,.tna-table:first-child,.tna-table-wrapper:first-child,.tna-aside:first-child{margin-top:0}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after,.tna-\!--visually-hidden::before,.tna-\!--visually-hidden::after{content:" "}:focus{z-index:9;outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}.tna-\!--no-focus-style:focus{outline:none}:root{--page-background: #f4f4f4;--background-tint: #e2e2e2;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: rgb(0, 76, 126);--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template{background-color:#f4f4f4;background-color:var(--page-background);accent-color:var(--accent)}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #e2e2e2;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: rgb(0, 76, 126);--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #e2e2e2;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme {background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #a6c;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #e2e2e2;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(52 51 56/0.7);--icon-light: rgb(52 51 56/0.45);--link: rgb(0, 76, 126);--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.5);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #e2e2e2;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 76, 126);--contrast-link-visited: rgb(0, 0, 0);--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: #d9d9d6;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme {background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: #69f;--link-visited: #a6c;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent: #d9d9d6;--accent-background: #111;--accent-background-light: rgb(140, 150, 148);--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--black-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important}.tna-template--yellow-accent{--accent: rgb(255, 204, 0) !important;--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(254, 29, 87) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(253, 63, 3) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(134, 188, 37) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent: rgb(0, 176, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template {animation:none !important;transition:none !important}}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:1rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch;font-size:16px}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content{flex:1}img,svg,picture,video,canvas{max-width:100%;height:auto;display:block}video,canvas{width:100%}[hidden]{display:none}hr{margin:0;border-width:1px 0 0;border-color:rgb(38 38 42/0.25);border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-aside--tight{padding:1rem}.tna-ul,.tna-ol{margin:1rem 0 0;padding:0 0 0 2rem}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-ul .tna-ul,.tna-ul .tna-ol,.tna-ol .tna-ul,.tna-ol .tna-ol{margin-top:0}.tna-dl{margin:1rem 0 0;display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:.5rem 1rem;position:relative;box-sizing:border-box;word-wrap:break-word}.tna-dl--plain dt{padding-left:0}.tna-dl--plain dd{padding-right:0}.tna-dl dt{width:30%;font-weight:700}.tna-dl dd{width:70%}.tna-dl dd+dd{margin-left:30%}.tna-dl--icon-padding dt{padding-left:3rem !important;position:relative}.tna-dl--icon-padding dt .fa-solid{overflow:visible;position:absolute;top:50%;left:1rem;color:rgb(52 51 56/0.45);color:var(--icon-light);text-align:left;transform:translateY(-50%)}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:2rem !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:2rem}.tna-dl:not(.tna-dl--plain) dt:first-child,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n)+dt,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n + 1){background-color:#e2e2e2;background-color:var(--background-tint)}@media(min-width: 30.0625em)and (max-width: 48em){.tna-dl dt{width:35%}.tna-dl dd{width:65%}.tna-dl dd+dd{margin-left:35%}}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:1rem}.tna-dl--plain dt{padding-bottom:0}.tna-dl--plain dd{padding-top:0}.tna-dl:not(.tna-dl--plain) dt{background-color:#e2e2e2;background-color:var(--background-tint)}.tna-dl:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important}}.tna-template--high-contrast-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-dl dt,.tna-template--high-contrast-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-dl dt,.tna-template--system-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(max-width: 48em){.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:0.75rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:1.5rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:2rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:3rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:5rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:5rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:0.75rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:1.5rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:2rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:3rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:5rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:5rem !important}}@media(min-width: 64.0625em){.tna-\!--no-margin-top-large,.tna-\!--no-margin-vertical-large{margin-top:0 !important}.tna-\!--no-margin-bottom-large,.tna-\!--no-margin-vertical-large{margin-bottom:0 !important}.tna-\!--no-padding-top-large,.tna-\!--no-padding-vertical-large{padding-top:0 !important}.tna-\!--no-padding-bottom-large,.tna-\!--no-padding-vertical-large{padding-bottom:0 !important}.tna-\!--hide-on-large{display:none}}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--hide-on-medium{display:none}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--hide-on-small{display:none}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--hide-on-tiny{display:none}}.tna-table{width:100%;border-collapse:collapse;text-align:left}.tna-table:first-child{margin-top:0}.tna-table__caption{text-align:left;font-weight:700}.tna-table__header,.tna-table__cell{padding:.25rem 1rem;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-table__header:first-child,.tna-table__cell:first-child{padding-left:0}.tna-table__header:last-child,.tna-table__cell:last-child{padding-right:0}.tna-table__head .tna-table__header{border-bottom:.25rem #26262a solid;border-bottom:.25rem var(--keyline-dark) solid}.tna-table p+p{margin-top:.25rem}.tna-table-wrapper{width:100%;padding-left:2rem;padding-right:2rem;position:relative;left:-2rem;overflow:auto}@media(max-width: 30em){.tna-table-wrapper{padding-left:1rem;padding-right:1rem;left:-1rem}}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}{margin:0;padding:0}strong{font-weight:700}p+p{margin-top:1rem}a{text-decoration-thickness:1.5px}a,a:link{color:#004c7e;color:var(--link)}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-link--no-visited-state:visited{color:#004c7e;color:var(--link)}.tna-template--high-contrast-theme a:active{box-shadow:none}.tna-template--high-contrast-theme a:hover:not(:focus){box-shadow:0 0 0 .3125rem var(--link)}@media(prefers-contrast: more){.tna-template--system-theme a:active{box-shadow:none}.tna-template--system-theme a:hover:not(:focus){box-shadow:0 0 0 .3125rem var(--link)}}small{font-size:0.95625rem}.tna-chip-list{margin-bottom:0;padding-left:0;display:flex;flex-wrap:wrap;gap:1rem;list-style:none}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.125em .25rem;display:block;color:#000;color:var(--font-dark);font-family:"Roboto Mono",monospace;font-weight:400;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1;border:.125rem #111 solid;border:.125rem var(--accent-background) solid}.tna-chip--plain{padding:0;color:inherit;background-color:rgba(0,0,0,0);border:none}a.tna-chip{text-decoration:none}a.tna-chip,a.tna-chip:link,a.tna-chip:visited{color:#000;color:var(--font-dark)}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip--plain,a.tna-chip--plain:link,a.tna-chip--plain:visited{color:inherit}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{color:#000;color:var(--font-dark)}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-s:not(.tna-heading--no-link-arrow) a,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-m:not(.tna-heading--no-link-arrow) a,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-l:not(.tna-heading--no-link-arrow) a,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-xl:not(.tna-heading--no-link-arrow) a{display:inline-block;text-wrap:balance}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a::after{padding-left:.25rem;display:inline-block;font-weight:700;content:"›"}.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a:hover::after{padding-left:.5rem}.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.625rem}}@media(max-width: 48em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.25rem}}.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.625rem}}@media(max-width: 48em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.5rem}}.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:700;font-size:1.375rem;line-height:1.6}@media(max-width: 48em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.25rem}}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:700;font-size:1.125rem;line-height:1.6}.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin-bottom:0;padding:1rem 0 0}.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{padding-top:0}.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:1rem}.tna-hgroup__supertitle{margin:0 0 .25rem}.tna-hgroup__supertitle--plain{padding:0;color:inherit;background-color:rgba(0,0,0,0);border:none}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.375rem #111 solid;border-left:.375rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-style:italic}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}.tna-large-paragraph{font-size:1.375rem;color:#000;color:var(--font-dark)}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:400;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-scene-setter--small{font-size:1.5rem}.tna-tabs__list{margin:0 0 1rem;padding:0;display:flex;align-items:stretch;gap:1rem;flex-wrap:nowrap;list-style:none}.tna-tabs__list-item-link{padding:.5rem 0;display:flex;align-items:center;position:relative;font-size:1.25rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;text-decoration:none;text-align:center;background:rgba(0,0,0,0);border:none;cursor:pointer}.tna-tabs__list-item-link,.tna-tabs__list-item-link:link,.tna-tabs__list-item-link:visited{color:#000;color:var(--font-dark)}.tna-tabs__list-item-link::after{height:0;position:absolute;right:0;bottom:0;left:0;background-color:#26262a;background-color:var(--keyline-dark);content:""}.tna-tabs__list-item-link:hover,.tna-tabs__list-item-link--selected,.tna-tabs__list-item-link--selected:hover{text-decoration:none}.tna-tabs__list-item-link:hover::after,.tna-tabs__list-item-link--selected::after,.tna-tabs__list-item-link--selected:hover::after{height:.25rem}.tna-template--js-enabled .tna-tabs__list-item-link{color:rgb(52 51 56/0.7);color:var(--font-light)}.tna-template--js-enabled .tna-tabs__list-item-link:hover::after{height:.125rem;background-color:rgb(52 51 56/0.7);background-color:var(--font-light)}.tna-template--js-enabled .tna-tabs__list-item-link--selected{color:#000;color:var(--font-dark)}.tna-template--js-enabled .tna-tabs__list-item-link--selected::after,.tna-template--js-enabled .tna-tabs__list-item-link--selected:hover::after{height:.25rem;background-color:#26262a;background-color:var(--keyline-dark)}.tna-tabs__item{display:none}.tna-tabs__item:first-child{display:block}.tna-tabs__item:has(~:target){display:none}.tna-tabs__item:target{display:block}.tna-template--js-enabled .tna-tabs__item{display:block}.tna-template--js-enabled .tna-tabs__item[hidden]{display:none}.tna-template--clicked .tna-tabs__item:focus{outline:none}.tna-template--high-contrast-theme .tna-tabs__list-item-link{padding-right:1rem;padding-left:1rem;overflow:hidden;border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-tabs__list-item-link{padding-right:1rem;padding-left:1rem;overflow:hidden;border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media print{.tna-tabs__list{display:none}.tna-tabs__item{display:block !important}.tna-tabs__item+.tna-tabs__item{margin-top:2rem}}/# sourceMappingURL=tabs.css.map */

package/nationalarchives/components/tabs/tabs.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/components/tabs/tabs.scss"],"names":[],"mappings":"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","file":"tabs.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n // font-display: swap;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n // font-display: swap;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n // font-display: swap;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 2rem 0 0;\n\n + p {\n margin-top: 1rem;\n }\n\n &:first-child {\n margin-top: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n &__item {\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n color: inherit;\n\n background-color: transparent;\n\n border-color: transparent;\n }\n}\n\na.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n text-wrap: balance;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-top: 1rem;\n\n &:first-child {\n padding-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(20);\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%invert {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint-background {\n @include colour-background(\"background-tint\");\n}\n\n@mixin tint-background {\n @extend %tint-background;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.accent-css-vars(\"black\");\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n\n.tna-background {\n &--contrast {\n @include colour.invert;\n }\n\n &--accent {\n @include colour.accent;\n }\n\n &--accent-light {\n @include colour.light-accent-background;\n }\n\n &--tint {\n @include colour.tint-background;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include colour.colour-font(\"font-dark\");\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$font-family-main: \"Open Sans\", sans-serif !default;\n$font-weight-main: normal !default; // Defined in utilities/_typography.scss\n$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$font-weight-heading: 500 !default;\n\n$font-family-detail: \"Roboto Mono\", monospace !default;\n$font-weight-detail: normal !default;\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0 0 1rem;\n padding: 0;\n\n display: flex;\n align-items: stretch;\n gap: 1rem;\n flex-wrap: nowrap;\n\n list-style: none;\n }\n\n &__list-item {\n }\n\n &__list-item-link {\n padding: 0.5rem 0;\n\n display: flex;\n\n align-items: center;\n position: relative;\n\n @include typography.relative-font-size(20);\n @include typography.heading-font;\n text-decoration: none;\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &::after {\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"keyline-dark\");\n\n content: \"\";\n }\n\n &:hover,\n &--selected,\n &--selected:hover {\n text-decoration: none;\n\n &::after {\n height: 0.25rem;\n }\n }\n\n .tna-template--js-enabled & {\n @include colour.colour-font(\"font-light\");\n\n &:hover {\n &::after {\n height: 0.125rem;\n\n @include colour.colour-background(\"font-light\");\n }\n }\n\n &--selected {\n @include colour.colour-font(\"font-dark\");\n\n &::after,\n &:hover::after {\n height: 0.25rem;\n\n @include colour.colour-background(\"keyline-dark\");\n }\n }\n }\n }\n\n &__items {\n // &:not(:target-within) {\n // .tna-tabs__item:first-child {\n // display: block;\n // }\n // }\n }\n\n &__item {\n display: none;\n\n &:first-child {\n display: block;\n }\n\n &:has(~ :target) {\n display: none;\n }\n\n &:target {\n display: block;\n }\n\n .tna-template--js-enabled & {\n display: block;\n\n &[hidden] {\n display: none;\n }\n }\n\n .tna-template--clicked &:focus {\n outline: none;\n }\n }\n\n @include colour.on-high-contrast {\n &__list-item-link {\n padding-right: 1rem;\n padding-left: 1rem;\n\n overflow: hidden;\n\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n }\n\n @include media.on-print {\n &__list {\n display: none;\n }\n\n &__item {\n display: block !important;\n\n & + & {\n margin-top: 2rem;\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/tabs/tabs.scss"],"names":[],"mappings":"CA4CU,sHC2JV,yBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAtHA,mCAPA,4BACA,uBAiKF,yDACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,2CACA,iCACA,2CApKA,mCAPA,4BACA,uBAqLF,qBAjLE,yBAEA,wCAPA,cACA,uBAsMF,6BACE,6CACA,qBACA,0BACA,gCACA,qBACA,wBACA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAlNA,mCAPA,cACA,uBCpFF,iPACE,gBAEA,6bACE,aCNJ,8CAEE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,0HAEE,YAIJ,QACE,UFgHE,+BAIA,4CEjHF,uBAIA,8BACE,aCnCJ,MHQI,g8CGJJ,cHsFE,yBAEA,wCGrFA,2BAEA,4BHDE,g8CGIA,mCAHF,4BHKE,w+CGEA,+BAPF,4BHWE,24CGDE,8BACE,kCAIJ,+DAfF,4BHiBE,49CGGF,2BHrBE,g8CGyBF,0BHnBE,u+CGuBF,mCHjBE,24CGoBA,qCACE,iCAGF,4DHlBA,29CGuBF,4BHJE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDGCF,6BHrBE,sCACA,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,wDGcF,2BHZE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAEE,sCACA,iDACA,yDACA,wDGEN,6BHhBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAOE,qCACA,iDACA,yDACA,wDGCN,4BHpBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAYE,uCACA,+CACA,yDACA,iFAxBJ,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAiBE,sCACA,gDACA,yDACA,uDGDN,+BACE,gBACE,0BACA,4BC3EN,aACE,WCFa,KDIb,gBACE,eAGF,gBACE,eEwBF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","file":"tabs.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n // @import \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line /\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: 1rem;\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--link);\n }\n }\n\n // &[target=\"_blank\"]:not([title=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px 0.85\n );\n}\n\n// .tna-detail[title][data-type] {\n// padding: 0 0.375rem;\n\n// display: inline-flex;\n// flex-flow: row nowrap;\n// align-items: baseline;\n// gap: 0.5rem;\n\n// vertical-align: baseline;\n\n// background-color: #ccc;\n\n// &::after {\n// @include colour.colour-font(\"font-base\");\n// @include typography.detail-font-small;\n// vertical-align: baseline;\n\n// content: attr(data-type) / \"\";\n// }\n\n// &[data-type=\"misc\"] {\n// background-color: #f28482;\n// }\n\n// &[data-type=\"loc\"] {\n// background-color: #edae49;\n// }\n\n// &[data-type=\"per\"] {\n// background-color: #b5e2fa;\n// }\n\n// @at-root #{selector.unify(\"a\", &)} {\n// @include colour.colour-font(\"font-base\");\n\n// &::after {\n// text-decoration: none;\n// }\n// }\n// }\n\n.tna-chip-list {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n &__item {\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n // text-decoration-thickness: .15em;\n\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n @if $colour != \"black\" {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.accent-css-vars(\"black\");\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family: \"Open Sans\", sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0 0 1rem;\n padding: 0;\n\n display: flex;\n align-items: stretch;\n gap: 1rem;\n flex-wrap: nowrap;\n\n list-style: none;\n }\n\n &__list-item {\n }\n\n &__list-item-link {\n padding: 0.5rem 0;\n\n display: flex;\n\n align-items: center;\n position: relative;\n\n @include typography.relative-font-size(20);\n @include typography.heading-font;\n text-decoration: none;\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &::after {\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"keyline-dark\");\n\n content: \"\";\n }\n\n &:hover,\n &--selected,\n &--selected:hover {\n text-decoration: none;\n\n &::after {\n height: 0.25rem;\n }\n }\n\n .tna-template--js-enabled & {\n @include colour.colour-font(\"font-light\");\n\n &:hover {\n &::after {\n height: 0.125rem;\n\n @include colour.colour-background(\"font-light\");\n }\n }\n\n &--selected {\n @include colour.colour-font(\"font-dark\");\n\n &::after,\n &:hover::after {\n height: 0.25rem;\n\n @include colour.colour-background(\"keyline-dark\");\n }\n }\n }\n }\n\n &__items {\n // &:not(:target-within) {\n // .tna-tabs__item:first-child {\n // display: block;\n // }\n // }\n }\n\n &__item {\n display: none;\n\n &:first-child {\n display: block;\n }\n\n &:has(~ :target) {\n display: none;\n }\n\n &:target {\n display: block;\n }\n\n .tna-template--js-enabled & {\n display: block;\n\n &[hidden] {\n display: none;\n }\n }\n\n .tna-template--clicked &:focus {\n outline: none;\n }\n }\n\n @include colour.on-high-contrast {\n &__list-item-link {\n padding-right: 1rem;\n padding-left: 1rem;\n\n overflow: hidden;\n\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n }\n\n @include media.on-print {\n &__list {\n display: none;\n }\n\n &__item {\n display: block !important;\n\n & + & {\n margin-top: 2rem;\n }\n }\n }\n}\n"]}

package/nationalarchives/components/tabs/tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function r(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return n(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?n(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function s(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,(void 0,s=function(t,e){if("object"!==i(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,"string");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(n.key),"symbol"===i(s)?s:String(s)),n)}var s}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&e.querySelectorAll(".tna-tabs__list-item-link"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item")}var e,i;return e=t,(i=[{key:"init",value:function(){var t=this;if(this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length){this.sticky=this.$module.classList.contains("tna-tabs--sticky");var e=window.location.hash.replace(/^#/,""),i=r(this.$tabItems).some((function(t){return t.getAttribute("id")===e}));this.$newTabList=document.createElement("div"),this.$newTabList.setAttribute("role","tablist"),this.$newTabList.setAttribute("class",this.$tabList.getAttribute("class")),this.$tabItems.forEach((function(t,r){t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby","".concat(t.getAttribute("id"),"-tab")),t.setAttribute("tabindex","0"),(i&&t.getAttribute("id")!==e||!i&&r>0)&&t.setAttribute("hidden",!0)})),this.$tabListItemLinks.forEach((function(e){var i=document.createElement("button");i.innerText=e.innerText,i.setAttribute("class",e.getAttribute("class")),i.setAttribute("role","tab"),i.setAttribute("id",e.getAttribute("id")),i.setAttribute("aria-controls",e.getAttribute("href").replace(/^#/,"")),i.setAttribute("tabindex","-1"),t.$newTabList.appendChild(i)})),this.$tabList.replaceWith(this.$newTabList),this.$tabListItemLinks=this.$module.querySelectorAll(".tna-tabs__list-item-link"),this.$tabListItemLinks.forEach((function(i,r){e&&i.getAttribute("aria-controls")==="".concat(e)||!e&&0===r?(i.classList.add("tna-tabs__list-item-link--selected"),i.setAttribute("aria-selected",!0),i.setAttribute("tabindex","0")):i.setAttribute("aria-selected",!1),i.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}),!0),i.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)}))}}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTab(e)}},{key:"handleItemLinkKeyDown",value:function(t){var e=t.currentTarget,i=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.setSelectedToPreviousTab(e),i=!0;break;case"ArrowRight":case"ArrowDown":this.setSelectedToNextTab(e),i=!0;break;case"Home":this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls")),i=!0;break;case"End":this.switchTab(this.$tabListItemLinks[this.$tabListItemLinks.length-1].getAttribute("aria-controls")),i=!0}i&&(t.stopPropagation(),t.preventDefault())}},{key:"setSelectedToNextTab",value:function(t){console.log("setSelectedToNextTab",t);var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i<this.$tabListItemLinks.length-1?i+1:0,console.log(i,e),this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"setSelectedToPreviousTab",value:function(t){console.log("setSelectedToPreviousTab",t);var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i>=1?i-1:this.$tabListItemLinks.length-1,console.log(i,e),this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"switchTab",value:function(t){this.$tabListItemLinks.forEach((function(e){e.getAttribute("aria-controls")===t?(e.classList.add("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!0),e.setAttribute("tabindex","0"),e.focus()):(e.classList.remove("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(e){e.getAttribute("id")===t?(e.removeAttribute("hidden"),e.setAttribute("tabindex","0")):(e.setAttribute("hidden",!0),e.setAttribute("tabindex","-1"))})),this.sticky&&(history.replaceState?history.replaceState(null,null,"#".concat(t)):location.hash="#".concat(t))}}])&&s(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function r(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return n(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?n(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function s(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,(void 0,s=function(t,e){if("object"!==i(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,"string");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(n.key),"symbol"===i(s)?s:String(s)),n)}var s}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&e.querySelectorAll(".tna-tabs__list-item-link"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item")}var e,i;return e=t,(i=[{key:"init",value:function(){var t=this;if(this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length){this.sticky=this.$module.classList.contains("tna-tabs--sticky");var e=window.location.hash.replace(/^#/,""),i=r(this.$tabItems).some((function(t){return t.getAttribute("id")===e}));this.$newTabList=document.createElement("div"),this.$newTabList.setAttribute("role","tablist"),this.$newTabList.setAttribute("class",this.$tabList.getAttribute("class")),this.$tabItems.forEach((function(t,r){t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby","".concat(t.getAttribute("id"),"-tab")),t.setAttribute("tabindex","0"),(i&&t.getAttribute("id")!==e||!i&&r>0)&&t.setAttribute("hidden",!0)})),this.$tabListItemLinks.forEach((function(e){var i=document.createElement("button");i.innerText=e.innerText,i.setAttribute("class",e.getAttribute("class")),i.setAttribute("role","tab"),i.setAttribute("id",e.getAttribute("id")),i.setAttribute("aria-controls",e.getAttribute("href").replace(/^#/,"")),i.setAttribute("tabindex","-1"),t.$newTabList.appendChild(i)})),this.$tabList.replaceWith(this.$newTabList),this.$tabListItemLinks=this.$module.querySelectorAll(".tna-tabs__list-item-link"),this.$tabListItemLinks.forEach((function(i,r){e&&i.getAttribute("aria-controls")==="".concat(e)||!e&&0===r?(i.classList.add("tna-tabs__list-item-link--selected"),i.setAttribute("aria-selected",!0),i.setAttribute("tabindex","0")):i.setAttribute("aria-selected",!1),i.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}),!0),i.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)}))}}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTab(e)}},{key:"handleItemLinkKeyDown",value:function(t){var e=t.currentTarget,i=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.setSelectedToPreviousTab(e),i=!0;break;case"ArrowRight":case"ArrowDown":this.setSelectedToNextTab(e),i=!0;break;case"Home":this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls")),i=!0;break;case"End":this.switchTab(this.$tabListItemLinks[this.$tabListItemLinks.length-1].getAttribute("aria-controls")),i=!0}i&&(t.stopPropagation(),t.preventDefault())}},{key:"setSelectedToNextTab",value:function(t){var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i<this.$tabListItemLinks.length-1?i+1:0,this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"setSelectedToPreviousTab",value:function(t){var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i>=1?i-1:this.$tabListItemLinks.length-1,this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"switchTab",value:function(t){this.$tabListItemLinks.forEach((function(e){e.getAttribute("aria-controls")===t?(e.classList.add("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!0),e.setAttribute("tabindex","0"),e.focus()):(e.classList.remove("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(e){e.getAttribute("id")===t?(e.removeAttribute("hidden"),e.setAttribute("tabindex","0")):(e.setAttribute("hidden",!0),e.setAttribute("tabindex","-1"))})),this.sticky&&(history.replaceState?history.replaceState(null,null,"#".concat(t)):location.hash="#".concat(t))}}])&&s(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
 //# sourceMappingURL=tabs.js.map

package/nationalarchives/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n $module.querySelectorAll(\".tna-tabs__list-item-link\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n }\n\n init() {\n if (\n !this.$module \|\|\n !this.$tabList \|\|\n !this.$tabListItemLinks \|\|\n !this.$tabItems \|\|\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n const startingTarget = window.location.hash.replace(/^#/, \"\");\n const doesStartingTargetExist = [...this.$tabItems].some(\n ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n );\n\n this.$newTabList = document.createElement(\"div\");\n this.$newTabList.setAttribute(\"role\", \"tablist\");\n this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n this.$tabItems.forEach(($tabItem, index) => {\n $tabItem.setAttribute(\"role\", \"tabpanel\");\n $tabItem.setAttribute(\n \"aria-labelledby\",\n `${$tabItem.getAttribute(\"id\")}-tab`,\n );\n $tabItem.setAttribute(\"tabindex\", \"0\");\n if (\n (doesStartingTargetExist &&\n $tabItem.getAttribute(\"id\") !== startingTarget) \|\|\n (!doesStartingTargetExist && index > 0)\n ) {\n $tabItem.setAttribute(\"hidden\", true);\n }\n });\n\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const $replacementButton = document.createElement(\"button\");\n $replacementButton.innerText = $tabListItemLink.innerText;\n $replacementButton.setAttribute(\n \"class\",\n $tabListItemLink.getAttribute(\"class\"),\n );\n $replacementButton.setAttribute(\"role\", \"tab\");\n $replacementButton.setAttribute(\n \"id\",\n $tabListItemLink.getAttribute(\"id\"),\n );\n $replacementButton.setAttribute(\n \"aria-controls\",\n $tabListItemLink.getAttribute(\"href\").replace(/^#/, \"\"),\n );\n $replacementButton.setAttribute(\"tabindex\", \"-1\");\n this.$newTabList.appendChild($replacementButton);\n });\n\n this.$tabList.replaceWith(this.$newTabList);\n\n this.$tabListItemLinks = this.$module.querySelectorAll(\n \".tna-tabs__list-item-link\",\n );\n\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (\n (startingTarget &&\n $tabListItemLink.getAttribute(\"aria-controls\") ===\n `${startingTarget}`) \|\|\n (!startingTarget && index === 0)\n ) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n }\n\n $tabListItemLink.addEventListener(\n \"keydown\",\n (e) => this.handleItemLinkKeyDown(e),\n true,\n );\n $tabListItemLink.addEventListener(\n \"click\",\n (e) => this.handleItemLinkClick(e),\n true,\n );\n });\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n this.switchTab(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n const targetItem = itemLinkKeyDownEvent.currentTarget;\n let overwriteKeyAction = false;\n\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.setSelectedToPreviousTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.setSelectedToNextTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"Home\":\n this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n overwriteKeyAction = true;\n break;\n\n case \"End\":\n this.switchTab(\n this.$tabListItemLinks[\n this.$tabListItemLinks.length - 1\n ].getAttribute(\"aria-controls\"),\n );\n overwriteKeyAction = true;\n break;\n\n default:\n break;\n }\n\n if (overwriteKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n setSelectedToNextTab(targetItem) {\n console.log(\"setSelectedToNextTab\", targetItem);\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex < this.$tabListItemLinks.length - 1) {\n newIndex = currentIndex + 1;\n } else {\n newIndex = 0;\n }\n console.log(currentIndex, newIndex);\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n setSelectedToPreviousTab(targetItem) {\n console.log(\"setSelectedToPreviousTab\", targetItem);\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex >= 1) {\n newIndex = currentIndex - 1;\n } else {\n newIndex = this.$tabListItemLinks.length - 1;\n }\n console.log(currentIndex, newIndex);\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n switchTab(targetId) {\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n $tabListItemLink.focus();\n } else {\n $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n this.$tabItems.forEach(($tabItem) => {\n if ($tabItem.getAttribute(\"id\") === targetId) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", true);\n $tabItem.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n if (this.sticky) {\n if (history.replaceState) {\n history.replaceState(null, null, `#${targetId}`);\n } else {\n location.hash = `#${targetId}`;\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","_this","length","sticky","classList","contains","startingTarget","window","location","hash","replace","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","index","concat","$tabListItemLink","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","console","log","newIndex","currentIndex","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}
1	+ {"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n $module.querySelectorAll(\".tna-tabs__list-item-link\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n }\n\n init() {\n if (\n !this.$module \|\|\n !this.$tabList \|\|\n !this.$tabListItemLinks \|\|\n !this.$tabItems \|\|\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n const startingTarget = window.location.hash.replace(/^#/, \"\");\n const doesStartingTargetExist = [...this.$tabItems].some(\n ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n );\n\n this.$newTabList = document.createElement(\"div\");\n this.$newTabList.setAttribute(\"role\", \"tablist\");\n this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n this.$tabItems.forEach(($tabItem, index) => {\n $tabItem.setAttribute(\"role\", \"tabpanel\");\n $tabItem.setAttribute(\n \"aria-labelledby\",\n `${$tabItem.getAttribute(\"id\")}-tab`,\n );\n $tabItem.setAttribute(\"tabindex\", \"0\");\n if (\n (doesStartingTargetExist &&\n $tabItem.getAttribute(\"id\") !== startingTarget) \|\|\n (!doesStartingTargetExist && index > 0)\n ) {\n $tabItem.setAttribute(\"hidden\", true);\n }\n });\n\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const $replacementButton = document.createElement(\"button\");\n $replacementButton.innerText = $tabListItemLink.innerText;\n $replacementButton.setAttribute(\n \"class\",\n $tabListItemLink.getAttribute(\"class\"),\n );\n $replacementButton.setAttribute(\"role\", \"tab\");\n $replacementButton.setAttribute(\n \"id\",\n $tabListItemLink.getAttribute(\"id\"),\n );\n $replacementButton.setAttribute(\n \"aria-controls\",\n $tabListItemLink.getAttribute(\"href\").replace(/^#/, \"\"),\n );\n $replacementButton.setAttribute(\"tabindex\", \"-1\");\n this.$newTabList.appendChild($replacementButton);\n });\n\n this.$tabList.replaceWith(this.$newTabList);\n\n this.$tabListItemLinks = this.$module.querySelectorAll(\n \".tna-tabs__list-item-link\",\n );\n\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (\n (startingTarget &&\n $tabListItemLink.getAttribute(\"aria-controls\") ===\n `${startingTarget}`) \|\|\n (!startingTarget && index === 0)\n ) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n }\n\n $tabListItemLink.addEventListener(\n \"keydown\",\n (e) => this.handleItemLinkKeyDown(e),\n true,\n );\n $tabListItemLink.addEventListener(\n \"click\",\n (e) => this.handleItemLinkClick(e),\n true,\n );\n });\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n this.switchTab(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n const targetItem = itemLinkKeyDownEvent.currentTarget;\n let overwriteKeyAction = false;\n\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.setSelectedToPreviousTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.setSelectedToNextTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"Home\":\n this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n overwriteKeyAction = true;\n break;\n\n case \"End\":\n this.switchTab(\n this.$tabListItemLinks[\n this.$tabListItemLinks.length - 1\n ].getAttribute(\"aria-controls\"),\n );\n overwriteKeyAction = true;\n break;\n\n default:\n break;\n }\n\n if (overwriteKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n setSelectedToNextTab(targetItem) {\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex < this.$tabListItemLinks.length - 1) {\n newIndex = currentIndex + 1;\n } else {\n newIndex = 0;\n }\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n setSelectedToPreviousTab(targetItem) {\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex >= 1) {\n newIndex = currentIndex - 1;\n } else {\n newIndex = this.$tabListItemLinks.length - 1;\n }\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n switchTab(targetId) {\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n $tabListItemLink.focus();\n } else {\n $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n this.$tabItems.forEach(($tabItem) => {\n if ($tabItem.getAttribute(\"id\") === targetId) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", true);\n $tabItem.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n if (this.sticky) {\n if (history.replaceState) {\n history.replaceState(null, null, `#${targetId}`);\n } else {\n location.hash = `#${targetId}`;\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","_this","length","sticky","classList","contains","startingTarget","window","location","hash","replace","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","index","concat","$tabListItemLink","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","newIndex","currentIndex","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs CHANGED Viewed

@@ -150,7 +150,6 @@ export class Tabs {
   }
   setSelectedToNextTab(targetItem) {
-    console.log("setSelectedToNextTab", targetItem);
     const currentIndex = [...this.$tabListItemLinks].findIndex(
       ($tabListItemLink) =>
         $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
@@ -161,14 +160,12 @@ export class Tabs {
     } else {
       newIndex = 0;
     }
-    console.log(currentIndex, newIndex);
     this.switchTab(
       this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
     );
   }
   setSelectedToPreviousTab(targetItem) {
-    console.log("setSelectedToPreviousTab", targetItem);
     const currentIndex = [...this.$tabListItemLinks].findIndex(
       ($tabListItemLink) =>
         $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
@@ -179,7 +176,6 @@ export class Tabs {
     } else {
       newIndex = this.$tabListItemLinks.length - 1;
     }
-    console.log(currentIndex, newIndex);
     this.switchTab(
       this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
     );

package/nationalarchives/components/tabs/tabs.stories.js CHANGED Viewed

@@ -57,6 +57,9 @@ Standard.args = {
 };
 export const Test = Template.bind({});
+Test.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Test.args = {
   title: "Example tabs",
   items: [
@@ -112,7 +115,7 @@ Test.play = async ({ args, canvasElement, step }) => {
     await expect(section).toHaveAttribute("tabindex", "-1");
   };
-  const expectButtonAndSectionAToBeCurrent = async (section) => {
+  const expectButtonAndSectionAToBeCurrent = async () => {
     await step("Test tab buttons", async () => {
       await expectButtonToBeCurrent(buttonA);
       await expectButtonNotToBeCurrent(buttonB);
@@ -126,7 +129,7 @@ Test.play = async ({ args, canvasElement, step }) => {
     });
   };
-  const expectButtonAndSectionBToBeCurrent = async (section) => {
+  const expectButtonAndSectionBToBeCurrent = async () => {
     await step("Test tab buttons", async () => {
       await expectButtonNotToBeCurrent(buttonA);
       await expectButtonToBeCurrent(buttonB);
@@ -140,7 +143,7 @@ Test.play = async ({ args, canvasElement, step }) => {
     });
   };
-  const expectButtonAndSectionCToBeCurrent = async (section) => {
+  const expectButtonAndSectionCToBeCurrent = async () => {
     await step("Test tab buttons", async () => {
       await expectButtonNotToBeCurrent(buttonA);
       await expectButtonNotToBeCurrent(buttonB);