npm - @nationalarchives/frontend - Versions diffs - 0.17.0 → 0.18.0 - Mend

@nationalarchives/frontend 0.17.0 → 0.18.0

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 (36) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA4SA,uTACE,qCAnNA,4CChFF,UACE,gBAEA,sBACE,aCFF,gBACE,SACA,UAEA,aACA,iBACA,oBACA,QAEA,kBACA,UAEA,gBAGF,iCACE,QAGF,kBACE,cAEA,kBAEA,kBAEA,yBAEA,YAEA,+BACA,mBAEA,0BAGA,eAEA,yBFmFA,yDG3FF,iBDaE,sCACE,cFkEA,oDE9DA,6CACE,WAEA,WAEA,kBACA,SACA,QACA,OFsBN,4CEfA,wBACE,iBAEA,cAEA,0BFMF,qCEDA,yCACE,oBEhFF,eFqFA,wGExBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHkEpC,8DACE,qBFUE,8DEPF,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAGF,gBACE,0BAIA,sBACE,oBAIJ,uCACE,aFPE","file":"tabs.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\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\");\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\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: spacing.space(0.5);\n\n position: relative;\n z-index: 2;\n\n list-style: none;\n }\n\n &--small &__list {\n gap: spacing.space(0.25);\n }\n\n &__button {\n padding: bordersVars.$thick-border-width 0;\n\n position: relative;\n\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n border: 1px transparent solid;\n border-bottom: none;\n\n border-radius: bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius 0 0;\n\n cursor: pointer;\n\n &:active {\n @include a11y.focus-outline-without-offset;\n @include a11y.active-outline;\n }\n\n &[aria-selected=\"true\"] {\n padding-top: 0;\n\n @include colour.colour-border(\"keyline\");\n\n &::after {\n content: \"\";\n\n height: 1px;\n\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n\n @include colour.colour-background(\"background\");\n }\n }\n }\n\n &__button-inner {\n padding: spacing.space(0.5) spacing.space(0.75);\n\n display: block;\n\n text-decoration: underline;\n\n @include colour.colour-font(\"font-dark\");\n }\n\n &--small &__button-inner {\n padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);\n\n @include typography.font-size(16);\n }\n\n &__button:hover &__button-inner,\n &__button:focus-visible &__button-inner {\n @include typography.interacted-text-decoration;\n }\n\n &__button[aria-selected=\"true\"] &__button-inner {\n text-decoration: none;\n\n @include colour.thick-keyline-accent(top);\n border-radius: #{bordersVars.$rounded-border-radius - 1px}\n #{bordersVars.$rounded-border-radius - 1px} 0 0;\n }\n\n &__items {\n display: flex;\n flex-direction: column;\n gap: spacing.space(2);\n\n position: relative;\n z-index: 1;\n }\n\n &__item {\n border-radius: 0 0 bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius;\n // @include a11y.no-focus-outline-on-click;\n\n &:focus {\n outline-offset: -#{a11yVariables.$focus-outline-width};\n }\n }\n\n &--interactive &__item {\n padding: spacing.space(1);\n @include colour.colour-border(\"keyline\", 1px, solid);\n }\n\n &--tint#{&}--interactive &__button[aria-selected=\"true\"],\n &--tint#{&}--interactive &__button:hover &__button-inner,\n &--tint#{&}--interactive &__button:focus-visible &__button-inner,\n &--tint#{&}--interactive &__items {\n @include colour.tint;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n // &::before,\n // &::after {\n // content: \"\\00a0\";\n // }\n}\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\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($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA4SA,uTACE,qCAnNA,4CChFF,UACE,gBAEA,sBACE,aCFF,gBACE,SACA,UAEA,aACA,iBACA,oBACA,QAEA,kBACA,UAEA,gBAGF,iCACE,QAGF,kBACE,cAEA,kBAEA,kBAEA,yBAEA,YAEA,+BACA,mBAEA,0BAGA,eAEA,yBFmFA,yDG3FF,iBDaE,sCACE,cFkEA,oDE9DA,6CACE,WAEA,WAEA,kBACA,SACA,QACA,OFsBN,4CEfA,wBACE,iBAEA,cAEA,0BFMF,qCEDA,yCACE,oBEhFF,eFqFA,wGExBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHkEpC,8DACE,qBFUE,8DEPF,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAGF,gBACE,0BAIA,sBACE,oBAIJ,uCACE,aFPE","file":"tabs.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\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\");\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\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: spacing.space(0.5);\n\n position: relative;\n z-index: 2;\n\n list-style: none;\n }\n\n &--small &__list {\n gap: spacing.space(0.25);\n }\n\n &__button {\n padding: bordersVars.$thick-border-width 0;\n\n position: relative;\n\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n border: 1px transparent solid;\n border-bottom: none;\n\n border-radius: bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius 0 0;\n\n cursor: pointer;\n\n &:active {\n @include a11y.focus-outline-without-offset;\n @include a11y.active-outline;\n }\n\n &[aria-selected=\"true\"] {\n padding-top: 0;\n\n @include colour.colour-border(\"keyline\");\n\n &::after {\n content: \"\";\n\n height: 1px;\n\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n\n @include colour.colour-background(\"background\");\n }\n }\n }\n\n &__button-inner {\n padding: spacing.space(0.5) spacing.space(0.75);\n\n display: block;\n\n text-decoration: underline;\n\n @include colour.colour-font(\"font-dark\");\n }\n\n &--small &__button-inner {\n padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);\n\n @include typography.font-size(16);\n }\n\n &__button:hover &__button-inner,\n &__button:focus-visible &__button-inner {\n @include typography.interacted-text-decoration;\n }\n\n &__button[aria-selected=\"true\"] &__button-inner {\n text-decoration: none;\n\n @include colour.thick-keyline-accent(top);\n border-radius: #{bordersVars.$rounded-border-radius - 1px}\n #{bordersVars.$rounded-border-radius - 1px} 0 0;\n }\n\n &__items {\n display: flex;\n flex-direction: column;\n gap: spacing.space(2);\n\n position: relative;\n z-index: 1;\n }\n\n &__item {\n border-radius: 0 0 bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius;\n // @include a11y.no-focus-outline-on-click;\n\n &:focus {\n outline-offset: -#{a11yVariables.$focus-outline-width};\n }\n }\n\n &--interactive &__item {\n padding: spacing.space(1);\n @include colour.colour-border(\"keyline\", 1px, solid);\n }\n\n &--tint#{&}--interactive &__button[aria-selected=\"true\"],\n &--tint#{&}--interactive &__button:hover &__button-inner,\n &--tint#{&}--interactive &__button:focus-visible &__button-inner,\n &--tint#{&}--interactive &__items {\n @include colour.tint;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n // &::before,\n // &::after {\n // content: \"\\00a0\";\n // }\n}\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\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($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/warning/warning.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA6NA,aAxLM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,kCAEE,uCAFF,gCAEE,qCAFF,k+CA2LJ,+BAHF,aAlKM,iCAEE,sCAFF,kDAEE,+BAFF,0BAEE,+BAFF,2BAEE,gCAFF,iCAEE,sCAFF,gBAEE,qBAFF,wBAEE,6BAFF,8BAEE,mCAFF,6BAEE,kCAFF,68CAoRN,aACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CA1QA,4CAJA,gCAoRE,mCADF,yCAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,uCAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iECtYJ,aACE,gBAEA,yBACE,aCRJ,aAEE,aAEA,aACA,uBACA,SFkFA,oCA4GE,uCGvMF,cCDsB,IFmBtB,yBACA,4BGoCA,wBHpDF,aAmBI,sBACA,SAMF,2BACE,WACA,YAEA,cAEA,iBACA,kBACA,yBAEA,mBF4CF,qCMhFA,iBAiBA,YCiBsB,IP6ElB,qDKnCJ,wBHlDA,2BAmBI,aACA,cI9CJ,oBJiDI,mBF8DA,qDExDJ,mBACE,WACA,aAEA,OAEA","file":"warning.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\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\");\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\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-warning {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n display: flex;\n align-items: flex-start;\n gap: spacing.space(1);\n\n @include colour.accent-light;\n @include colour.always-light;\n\n @include colour.colour-background-brand(\"cream\");\n\n @include colour.thick-keyline-brand(left, \"yellow\");\n @include borders.rounded-border;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @include media.on-tiny {\n flex-direction: column;\n gap: spacing.space(0.5);\n }\n\n &__heading {\n }\n\n &__heading-icon {\n width: 2rem;\n height: 2rem;\n\n display: block;\n\n line-height: 2rem;\n text-align: center;\n text-transform: lowercase;\n\n border-radius: 100%;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-border(\"font-dark\", 0.1875rem);\n\n @include media.on-mobile {\n width: 1.5rem;\n height: 1.5rem;\n\n @include typography.font-size(19);\n line-height: 1.5rem;\n\n @include colour.colour-border(\"font-dark\", 0.125rem);\n }\n }\n\n &__body {\n width: 100%;\n margin-top: 0;\n\n flex: 1;\n\n align-self: center;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 4px !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\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($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/warning/warning.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA6NA,aAxLM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,kCAEE,uCAFF,gCAEE,qCAFF,k+CA2LJ,+BAHF,aAlKM,iCAEE,sCAFF,kDAEE,+BAFF,0BAEE,+BAFF,2BAEE,gCAFF,iCAEE,sCAFF,gBAEE,qBAFF,wBAEE,6BAFF,8BAEE,mCAFF,6BAEE,kCAFF,68CAoRN,aACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CA1QA,4CAJA,gCAoRE,mCADF,yCAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,uCAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iECtYJ,aACE,gBAEA,yBACE,aCRJ,aAEE,aAEA,aACA,uBACA,SFkFA,oCA4GE,uCGvMF,cCDsB,IFmBtB,yBACA,4BGoCA,wBHpDF,aAmBI,sBACA,SAMF,2BACE,WACA,YAEA,cAEA,iBACA,kBACA,yBAEA,mBF4CF,qCMhFA,iBAiBA,YCiBsB,IP6ElB,qDKnCJ,wBHlDA,2BAmBI,aACA,cI9CJ,oBJiDI,mBF8DA,qDExDJ,mBACE,WACA,aAEA,OAEA","file":"warning.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n // \"background-tint\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n // \"focus-outline\",\n \"keyline\",\n \"keyline-dark\",\n // \"input-foreground\",\n // \"input-background\",\n // \"input-border\",\n // \"form-error-border\",\n // \"form-error-text\",\n // \"button-text\",\n // \"button-background\",\n // \"button-hover-text\",\n // \"button-hover-background\",\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n 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 border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\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\");\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\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\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 --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\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 --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\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);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($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}: #{space($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}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-warning {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n display: flex;\n align-items: flex-start;\n gap: spacing.space(1);\n\n @include colour.accent-light;\n @include colour.always-light;\n\n @include colour.colour-background-brand(\"cream\");\n\n @include colour.thick-keyline-brand(left, \"yellow\");\n @include borders.rounded-border;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @include media.on-tiny {\n flex-direction: column;\n gap: spacing.space(0.5);\n }\n\n &__heading {\n }\n\n &__heading-icon {\n width: 2rem;\n height: 2rem;\n\n display: block;\n\n line-height: 2rem;\n text-align: center;\n text-transform: lowercase;\n\n border-radius: 100%;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-border(\"font-dark\", 0.1875rem);\n\n @include media.on-mobile {\n width: 1.5rem;\n height: 1.5rem;\n\n @include typography.font-size(19);\n line-height: 1.5rem;\n\n @include colour.colour-border(\"font-dark\", 0.125rem);\n }\n }\n\n &__body {\n width: 100%;\n margin-top: 0;\n\n flex: 1;\n\n align-self: center;\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 4px !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\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($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n"]}

package/nationalarchives/error-page.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-warning,.tna-template{--background: #f4f4f4;--base-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--base-font-base: #343338;--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--base-font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--base-icon-light: rgba(1, 1, 1, 0.58);--link: #005fa3;--base-link: #005fa3;--link-visited: #634abb;--base-link-visited: #634abb;--keyline: rgba(38, 38, 42, 0.25);--base-keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--base-keyline-dark: rgb(38, 38, 42);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--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: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-warning,.tna-template{--background: rgb(255, 255, 255);--base-background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--base-font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--base-font-light: rgb(1, 1, 1);--icon-light: rgba(1, 1, 1, 0.8);--base-icon-light: rgba(1, 1, 1, 0.8);--link: #202fbc;--base-link: #202fbc;--link-visited: #6a286b;--base-link-visited: #6a286b;--keyline: rgba(1, 1, 1, 0.8);--base-keyline: rgba(1, 1, 1, 0.8);--keyline-dark: rgb(1, 1, 1);--base-keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-header,.tna-footer__inner,.tna-background-contrast,.tna-block-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, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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, #f4f4f4);color:var(--font-base, #343338)}}.tna-background-base,.tna-block-base{--background: var(--base-);--font-base: var(--base-);--font-dark: var(--base-);--font-light: var(--base-);--icon-light: var(--base-);--link: var(--base-);--link-visited: var(--base-);--keyline: var(--base-);--keyline-dark: var(--base-);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-background-tint,.tna-block-tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-chip:not(.tna-chip--plain),.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent,.tna-block-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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-warning,.tna-background-accent-light,.tna-block-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--accent-border: var(--accent-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-warning,.tna-template--system-theme .tna-background-accent-light,.tna-template--system-theme .tna-block-accent-light{--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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background)}}.tna-template--dark-theme .tna-warning,.tna-template--dark-theme .tna-background-accent-light,.tna-template--dark-theme .tna-block-accent-light{--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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background)}.tna-chip--yellow,.tna-template--yellow-accent,.tna-accent-yellow{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-border: rgb(255, 204, 0) !important;--accent-font-base: rgb(1, 1, 1) !important;--accent-font-dark: rgb(1, 1, 1) !important;--accent-font-light: rgba(1, 1, 1, 0.7) !important;--accent-icon-light: rgba(1, 1, 1, 0.7) !important;--accent-link: rgb(1, 1, 1) !important;--accent-link-visited: rgb(1, 1, 1) !important;--accent-keyline: rgba(1, 1, 1, 0.5) !important;--accent-keyline-dark: rgba(1, 1, 1, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important;--button-accented-background: rgb(101, 78, 55) !important}.tna-chip--black,.tna-chip--pink,.tna-chip--orange,.tna-chip--green,.tna-chip--blue,.tna-template--black-accent,.tna-template--pink-accent,.tna-template--orange-accent,.tna-template--green-accent,.tna-template--blue-accent,.tna-accent-black,.tna-accent-pink,.tna-accent-orange,.tna-accent-green,.tna-accent-blue{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-icon-light: rgba(255, 255, 255, 0.7) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important}.tna-chip--black,.tna-template--black-accent,.tna-accent-black{--accent-background: rgb(1, 1, 1) !important;--accent-background-light: rgb(217, 217, 214) !important;--accent-border: rgb(1, 1, 1) !important;--button-accented-text: rgb(1, 1, 1) !important;--button-accented-background: rgb(140, 150, 148) !important}.tna-chip--pink,.tna-template--pink-accent,.tna-accent-pink{--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--accent-border: rgb(254, 29, 87) !important;--button-accented-background: rgb(156, 25, 58) !important}.tna-chip--orange,.tna-template--orange-accent,.tna-accent-orange{--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--accent-border: rgb(253, 63, 3) !important;--button-accented-background: rgb(143, 52, 21) !important}.tna-chip--green,.tna-template--green-accent,.tna-accent-green{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-chip--blue,.tna-template--blue-accent,.tna-accent-blue{--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--accent-border: rgb(0, 176, 255) !important;--button-accented-background: rgb(0, 76, 126) !important}.tna-warning,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-aside{margin-top:32px}.tna-warning: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-aside:first-child{margin-top:0}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;background-color:rgba(0,0,0,0) !important;border:0 !important;clip:rect(0, 0, 0, 0) !important}:focus-visible{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}@supports not selector(:focus-visible){:focus{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}}a:active,button:active,input:active,textarea:active,select:active,summary:active{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid}:active{outline-offset:0}.tna-\!--no-focus-style:focus,[tabindex="-1"]:focus{outline:none}.tna-section{padding-top:48px;padding-bottom:48px}.tna-aside{padding:32px;border-radius:4px}@media(forced-colors: active){.tna-aside{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-aside{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}.tna-aside--tight{padding:16px}@media(max-width: 48em){.tna-section{padding-top:32px;padding-bottom:32px}.tna-aside{padding:16px}}.tna-template{background-color:var(--background, #f4f4f4)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--background: #212223;--base-background: #212223;--background-tint: #323334;--font-base: rgba(255, 255, 255, 0.95);--base-font-base: rgba(255, 255, 255, 0.95);--font-dark: rgb(255, 255, 255);--base-font-dark: rgb(255, 255, 255);--font-light: rgba(255, 255, 255, 0.65);--base-font-light: rgba(255, 255, 255, 0.65);--icon-light: rgba(255, 255, 255, 0.65);--base-icon-light: rgba(255, 255, 255, 0.65);--link: rgb(0, 176, 255);--base-link: rgb(0, 176, 255);--link-visited: #a8f;--base-link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.25);--base-keyline: rgba(255, 255, 255, 0.25);--keyline-dark: rgba(255, 255, 255, 0.75);--base-keyline-dark: rgba(255, 255, 255, 0.75);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgba(255, 255, 255, 0.8);--link: #8fc7ff;--link-visited: #ccb8ff;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.8);--base-keyline: rgba(255, 255, 255, 0.8);--keyline-dark: rgb(255, 255, 255);--base-keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-template--dark-theme{--background: #212223;--base-background: #212223;--background-tint: #323334;--font-base: rgba(255, 255, 255, 0.95);--base-font-base: rgba(255, 255, 255, 0.95);--font-dark: rgb(255, 255, 255);--base-font-dark: rgb(255, 255, 255);--font-light: rgba(255, 255, 255, 0.65);--base-font-light: rgba(255, 255, 255, 0.65);--icon-light: rgba(255, 255, 255, 0.65);--base-icon-light: rgba(255, 255, 255, 0.65);--link: rgb(0, 176, 255);--base-link: rgb(0, 176, 255);--link-visited: #a8f;--base-link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.25);--base-keyline: rgba(255, 255, 255, 0.25);--keyline-dark: rgba(255, 255, 255, 0.75);--base-keyline-dark: rgba(255, 255, 255, 0.75);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgba(255, 255, 255, 0.8);--link: #8fc7ff;--link-visited: #ccb8ff;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.8);--base-keyline: rgba(255, 255, 255, 0.8);--keyline-dark: rgb(255, 255, 255);--base-keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-border-keyline{border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-border-keyline-dark{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(:is(.tna-global-header,.tna-header)):has(.tna-main):has(.tna-footer){display:flex;flex-direction:column}.tna-main{flex:1}.tna-container{width:100%;max-width:1280px;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;box-sizing:border-box}.tna-container .tna-container--no-padding{max-width:calc(1280px - 64px);padding-right:0;padding-left:0}.tna-container--max{max-width:none}.tna-container--centred,.tna-container--align-centre{justify-content:center}.tna-container--align-right{justify-content:flex-end}.tna-container .tna-container--nested{width:auto;margin-right:-32px;margin-left:-32px}ul.tna-container{list-style:none}.tna-column{padding-right:16px;padding-left:16px;box-sizing:border-box}.tna-column .tna-column--no-padding{padding-right:0;padding-left:0}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--no-margin-right-medium{margin-right:0}.tna-column--no-margin-left-medium{margin-left:0}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--no-margin-right-small{margin-right:0}.tna-column--no-margin-left-small{margin-left:0}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-container{padding-right:8px;padding-left:8px}.tna-container .tna-container--nested{width:auto;margin-right:-16px;margin-left:-16px}.tna-column{padding-right:8px;padding-left:8px}.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--no-margin-right-tiny{margin-right:0}.tna-column--no-margin-left-tiny{margin-left:0}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}{margin:0;padding:0}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}@media(prefers-contrast: more){{background-image:none}}:root{color-scheme:only light}@supports(font: -apple-system-body){html{font:-apple-system-body}}@supports(font: -apple-system-body) and (not (-webkit-touch-callout: default)){html{font-size:1rem}}img,svg,picture,video,canvas{max-width:100%;height:auto;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}[hidden]{display:none !important}hr{border:0 var(--keyline, rgba(38, 38, 42, 0.25)) solid;border-top-width:1px}hr.tna-hr-dark{border-color:var(--keyline-dark, rgb(38, 38, 42))}.tna-template{color:var(--font-base, #343338);font-family:Open Sans,sans-serif;font-style:normal;font-optical-sizing:auto;font-variation-settings:"wdth" 100;font-weight:400;direction:ltr;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.tna-template__body{color:inherit;font-size:1.1875rem;line-height:1.75}@media(min-width: 48.0625em)and (max-width: 64em){.tna-template__body{font-size:1.125rem}}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}strong{font-weight:700}p+p{margin-top:16px}a{text-decoration-thickness:0.09375rem;text-underline-offset:.125em;border-radius:.1px}a,a:link{color:var(--link, #005fa3)}a:visited{color:var(--link-visited, #634abb)}a:hover,a:focus-visible,a:active{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}a.tna-link--no-visited-state:visited{color:var(--link, #005fa3)}small{font-size:1.009375rem}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:2px 4px;display:flex;align-items:center;gap:8px;color:var(--font-base, #343338);font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;font-size:0.875rem;line-height:1.1;text-transform:uppercase;line-height:1;text-align:center;border-radius:4px}a.tna-hgroup__supertitle,a.tna-chip{text-decoration:underline}a.tna-hgroup__supertitle:hover,a.tna-chip:hover,a.tna-hgroup__supertitle:focus-visible,a.tna-chip:focus-visible{text-decoration:underline;text-decoration-thickness:.1875em;text-underline-offset:.0625em}a.tna-hgroup__supertitle:hover .fa-solid,a.tna-chip:hover .fa-solid,a.tna-hgroup__supertitle:focus-visible .fa-solid,a.tna-chip:focus-visible .fa-solid{color:inherit}.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon-light, rgba(1, 1, 1, 0.58))}@media(prefers-contrast: more){.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon, )}}.tna-hgroup__supertitle--plain,.tna-chip--plain{padding:0;background-color:rgba(0,0,0,0);border:none;border-radius:.1px}a.tna-hgroup__supertitle--plain:hover,a.tna-chip--plain:hover,a.tna-hgroup__supertitle--plain:focus-visible,a.tna-chip--plain:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}a.tna-hgroup__supertitle--plain .fa-solid,a.tna-chip--plain .fa-solid{color:inherit}.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-chip:not(.tna-chip--plain){border:2px var(--accent-background, #afb6b5) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-chip:not(.tna-chip--plain),.tna-template--dark-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-template--dark-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain){color:var(--contrast-font-base, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e);border-color:var(--contrast-background, #1e1e1e)}.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-background-accent .tna-chip:not(.tna-chip--plain) .fa-solid,.tna-template--dark-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-template--dark-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain) .fa-solid{color:var(--contrast-icon-light, rgba(255, 255, 255, 0.7))}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-template--system-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain){color:var(--contrast-font-base, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e);border-color:var(--contrast-background, #1e1e1e)}.tna-template--system-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-template--system-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain) .fa-solid{color:var(--contrast-icon-light, rgba(255, 255, 255, 0.7))}}.tna-chip-list{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.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:var(--font-dark, rgb(1, 1, 1));text-wrap:pretty}.tna-hgroup-s .tna-hgroup__title a,.tna-heading-s a,.tna-hgroup-m .tna-hgroup__title a,.tna-heading-m a,.tna-hgroup-l .tna-hgroup__title a,.tna-heading-l a,.tna-hgroup-xl .tna-hgroup__title a,.tna-heading-xl a{display:inline-block;vertical-align:top}.tna-hgroup-s .tna-hgroup__title a::after,.tna-heading-s a::after,.tna-hgroup-m .tna-hgroup__title a::after,.tna-heading-m a::after,.tna-hgroup-l .tna-hgroup__title a::after,.tna-heading-l a::after,.tna-hgroup-xl .tna-hgroup__title a::after,.tna-heading-xl a::after{content:"";width:.3125em;height:.3125em;margin-bottom:.1em;margin-left:.375em;display:inline-block;vertical-align:middle;transform:rotate(45deg);border-top:.125em var(--link, #005fa3) solid;border-right:.125em var(--link, #005fa3) solid}.tna-hgroup-s .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-s a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-m .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-m a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-l .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-l a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-xl .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-xl a:not(.tna-link--no-visited-state):visited::after{border-color:var(--link-visited, #634abb)}.tna-hgroup-s .tna-hgroup__title strong,.tna-heading-s strong,.tna-hgroup-m .tna-hgroup__title strong,.tna-heading-m strong,.tna-hgroup-l .tna-hgroup__title strong,.tna-heading-l strong,.tna-hgroup-xl .tna-hgroup__title strong,.tna-heading-xl strong{font-weight:inherit}.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.1;font-size:4rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:3rem}}@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;line-height:1.3;font-size:2.25rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.875rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.75rem}}@media(max-width: 30em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.5625rem}}.tna-hgroup-l .tna-hgroup__title a::after,.tna-heading-l a::after{width:.275em;height:.275em;margin-bottom:0;margin-left:.25em;border-top-width:.1em;border-right-width:.1em}.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:700;line-height:1.6;font-size:1.375rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.375rem}}@media(max-width: 48em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.3125rem}}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:700;line-height:1.6;font-size:1.1875rem}.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:16px 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,.tna-hgroup-xl+.tna-large-paragraph,.tna-hgroup-l+.tna-large-paragraph,.tna-hgroup-m+.tna-large-paragraph,.tna-hgroup-s+.tna-large-paragraph,.tna-heading-s+.tna-large-paragraph,.tna-heading-m+.tna-large-paragraph,.tna-heading-l+.tna-large-paragraph,.tna-heading-xl+.tna-large-paragraph{margin-top:16px}.tna-heading--no-link-arrow a::after{display:none}.tna-hgroup__supertitle{margin:0 0 4px}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:16px 16px 16px 32px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-blockquote__quote{font-weight:600;quotes:auto;quotes:"‘" "’"}.tna-blockquote__quote:has(:is(ul,ol)){quotes:none}.tna-blockquote__quote>:first-child::before{content:open-quote}.tna-blockquote__quote>:last-child::after{content:close-quote}.tna-blockquote__citation{margin-top:16px;font-size:1rem}.tna-blockquote__citation::before{content:"—" " ";content:"—" " "/""}@media(max-width: 30em){.tna-blockquote{padding:8px 8px 8px 16px}}.tna-large-paragraph{font-size:1.375rem;color:var(--font-dark, rgb(1, 1, 1))}@media(max-width: 48em){.tna-large-paragraph{font-size:1.25rem}}.tna-large-paragraph--bold{color:var(--font-base, #343338);font-weight:600}.tna-scene-setter{font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;color:var(--font-dark, rgb(1, 1, 1));font-size:1.375rem;line-height:1.7}@media(max-width: 48em){.tna-scene-setter{font-size:1.25rem}}address{line-height:1.375;font-style:inherit}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer__theme-selector-button{font-weight:700}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover,.tna-footer__social-item-link:focus-visible{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:hsla(0,0%,100%,.14);border-radius:4px}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover,.tna-footer__navigation-block-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo-wrapper{padding-top:20px;padding-bottom:20px}.tna-header__logo{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo--link,.tna-header__logo--link:link,.tna-header__logo--link:visited{color:inherit}.tna-header__logo--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header__logo-strapline{margin:0 12px;display:inline-block;line-height:1.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-button-wrapper{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;font-weight:700;font-size:1rem;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer}.tna-header__navigation-button:hover,.tna-header__navigation-button:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__navigation-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link:focus-visible,.tna-header__top-navigation-item-link:focus-visible:link,.tna-header__top-navigation-item-link:focus-visible:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}.tna-header .tna-logo{width:5rem;height:5rem;display:inline-block;flex-shrink:0}.tna-header .tna-logo svg{width:100%;height:100%}@media(max-width: 48em){.tna-header__logo-wrapper{padding-top:16px;padding-bottom:16px}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-button-wrapper{display:block}.tna-header__navigation-button-wrapper.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:8px 0}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:focus-visible{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:hsla(0,0%,100%,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-left:.5rem var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:32px}.tna-header__logo-wrapper,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:32px;padding-left:32px}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo-wrapper{padding-right:16px}.tna-header__logo-wrapper{padding-left:16px}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{font-size:.9rem;line-height:1.25}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}.tna-warning{padding:16px;display:flex;align-items:flex-start;gap:16px;background-color:rgb(249, 247, 226);border-left:5px rgb(255, 204, 0) solid;border-radius:4px;border-top-left-radius:0;border-bottom-left-radius:0}@media(max-width: 30em){.tna-warning{flex-direction:column;gap:8px}}.tna-warning__heading-icon{width:2rem;height:2rem;display:block;line-height:2rem;text-align:center;text-transform:lowercase;border-radius:100%;color:var(--font-dark, rgb(1, 1, 1));font-size:1.5rem;font-weight:700;border:.1875rem var(--font-dark, rgb(1, 1, 1)) solid}@media(max-width: 48em){.tna-warning__heading-icon{width:1.5rem;height:1.5rem;font-size:1.1875rem;line-height:1.5rem;border:.125rem var(--font-dark, rgb(1, 1, 1)) solid}}.tna-warning__body{width:100%;margin-top:0;flex:1;align-self:center}/# sourceMappingURL=error-page.css.map */
1	+ .tna-warning,.tna-template{--background: #f4f4f4;--base-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--base-font-base: #343338;--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--base-font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--base-icon-light: rgba(1, 1, 1, 0.58);--link: #005fa3;--base-link: #005fa3;--link-visited: #634abb;--base-link-visited: #634abb;--keyline: rgba(38, 38, 42, 0.25);--base-keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--base-keyline-dark: rgb(38, 38, 42);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--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: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-warning,.tna-template{--background: rgb(255, 255, 255);--base-background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--base-font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--base-font-light: rgb(1, 1, 1);--icon-light: rgba(1, 1, 1, 0.8);--base-icon-light: rgba(1, 1, 1, 0.8);--link: #202fbc;--base-link: #202fbc;--link-visited: #6a286b;--base-link-visited: #6a286b;--keyline: rgba(1, 1, 1, 0.8);--base-keyline: rgba(1, 1, 1, 0.8);--keyline-dark: rgb(1, 1, 1);--base-keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-header,.tna-footer__inner,.tna-background-contrast,.tna-block-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, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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, #f4f4f4);color:var(--font-base, #343338)}}.tna-background-base,.tna-block-base{--background: var(--base-);--font-base: var(--base-);--font-dark: var(--base-);--font-light: var(--base-);--icon-light: var(--base-);--link: var(--base-);--link-visited: var(--base-);--keyline: var(--base-);--keyline-dark: var(--base-);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-background-tint,.tna-block-tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-chip:not(.tna-chip--plain),.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent,.tna-block-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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-warning,.tna-background-accent-light,.tna-block-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--accent-border: var(--accent-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-warning,.tna-template--system-theme .tna-background-accent-light,.tna-template--system-theme .tna-block-accent-light{--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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background)}}.tna-template--dark-theme .tna-warning,.tna-template--dark-theme .tna-background-accent-light,.tna-template--dark-theme .tna-block-accent-light{--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);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background)}.tna-chip--yellow,.tna-template--yellow-accent,.tna-accent-yellow{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-border: rgb(255, 204, 0) !important;--accent-font-base: rgb(1, 1, 1) !important;--accent-font-dark: rgb(1, 1, 1) !important;--accent-font-light: rgba(1, 1, 1, 0.7) !important;--accent-icon-light: rgba(1, 1, 1, 0.7) !important;--accent-link: rgb(1, 1, 1) !important;--accent-link-visited: rgb(1, 1, 1) !important;--accent-keyline: rgba(1, 1, 1, 0.5) !important;--accent-keyline-dark: rgba(1, 1, 1, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important;--button-accented-background: rgb(101, 78, 55) !important}.tna-chip--black,.tna-chip--pink,.tna-chip--orange,.tna-chip--green,.tna-chip--blue,.tna-template--black-accent,.tna-template--pink-accent,.tna-template--orange-accent,.tna-template--green-accent,.tna-template--blue-accent,.tna-accent-black,.tna-accent-pink,.tna-accent-orange,.tna-accent-green,.tna-accent-blue{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgba(255, 255, 255, 0.7) !important;--accent-icon-light: rgba(255, 255, 255, 0.7) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgba(255, 255, 255, 0.5) !important;--accent-keyline-dark: rgba(255, 255, 255, 0.8) !important;--button-accented-text: rgb(255, 255, 255) !important}.tna-chip--black,.tna-template--black-accent,.tna-accent-black{--accent-background: rgb(1, 1, 1) !important;--accent-background-light: rgb(217, 217, 214) !important;--accent-border: rgb(1, 1, 1) !important;--button-accented-text: rgb(1, 1, 1) !important;--button-accented-background: rgb(140, 150, 148) !important}.tna-chip--pink,.tna-template--pink-accent,.tna-accent-pink{--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--accent-border: rgb(254, 29, 87) !important;--button-accented-background: rgb(156, 25, 58) !important}.tna-chip--orange,.tna-template--orange-accent,.tna-accent-orange{--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--accent-border: rgb(253, 63, 3) !important;--button-accented-background: rgb(143, 52, 21) !important}.tna-chip--green,.tna-template--green-accent,.tna-accent-green{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-chip--blue,.tna-template--blue-accent,.tna-accent-blue{--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--accent-border: rgb(0, 176, 255) !important;--button-accented-background: rgb(0, 76, 126) !important}.tna-warning,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-aside{margin-top:32px}.tna-warning: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-aside:first-child{margin-top:0}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;background-color:rgba(0,0,0,0) !important;border:0 !important;clip:rect(0, 0, 0, 0) !important}:focus-visible{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}@supports not selector(:focus-visible){:focus{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}}a:active,button:active,input:active,textarea:active,select:active,summary:active{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid}:active{outline-offset:0}.tna-\!--no-focus-style:focus,[tabindex="-1"]:focus{outline:none}.tna-section{padding-top:48px;padding-bottom:48px}.tna-aside{padding:32px;border-radius:4px}@media(forced-colors: active){.tna-aside{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-aside{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}.tna-aside--tight{padding:16px}@media(max-width: 48em){.tna-section{padding-top:32px;padding-bottom:32px}.tna-aside{padding:16px}}.tna-template{background-color:var(--background, #f4f4f4)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--background: #212223;--base-background: #212223;--background-tint: #323334;--font-base: rgba(255, 255, 255, 0.95);--base-font-base: rgba(255, 255, 255, 0.95);--font-dark: rgb(255, 255, 255);--base-font-dark: rgb(255, 255, 255);--font-light: rgba(255, 255, 255, 0.65);--base-font-light: rgba(255, 255, 255, 0.65);--icon-light: rgba(255, 255, 255, 0.65);--base-icon-light: rgba(255, 255, 255, 0.65);--link: rgb(0, 176, 255);--base-link: rgb(0, 176, 255);--link-visited: #a8f;--base-link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.25);--base-keyline: rgba(255, 255, 255, 0.25);--keyline-dark: rgba(255, 255, 255, 0.75);--base-keyline-dark: rgba(255, 255, 255, 0.75);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgba(255, 255, 255, 0.8);--link: #8fc7ff;--link-visited: #ccb8ff;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.8);--base-keyline: rgba(255, 255, 255, 0.8);--keyline-dark: rgb(255, 255, 255);--base-keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-template--dark-theme{--background: #212223;--base-background: #212223;--background-tint: #323334;--font-base: rgba(255, 255, 255, 0.95);--base-font-base: rgba(255, 255, 255, 0.95);--font-dark: rgb(255, 255, 255);--base-font-dark: rgb(255, 255, 255);--font-light: rgba(255, 255, 255, 0.65);--base-font-light: rgba(255, 255, 255, 0.65);--icon-light: rgba(255, 255, 255, 0.65);--base-icon-light: rgba(255, 255, 255, 0.65);--link: rgb(0, 176, 255);--base-link: rgb(0, 176, 255);--link-visited: #a8f;--base-link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.25);--base-keyline: rgba(255, 255, 255, 0.25);--keyline-dark: rgba(255, 255, 255, 0.75);--base-keyline-dark: rgba(255, 255, 255, 0.75);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgba(255, 255, 255, 0.8);--link: #8fc7ff;--link-visited: #ccb8ff;--focus-outline: rgb(253, 63, 3);--keyline: rgba(255, 255, 255, 0.8);--base-keyline: rgba(255, 255, 255, 0.8);--keyline-dark: rgb(255, 255, 255);--base-keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.8);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.8);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: #8f9997}}.tna-border-keyline{border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-border-keyline-dark{border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(:is(.tna-global-header,.tna-header)):has(.tna-main):has(.tna-footer){display:flex;flex-direction:column}.tna-main{flex:1}.tna-container{width:100%;max-width:1280px;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;box-sizing:border-box}.tna-container .tna-container--no-padding{max-width:calc(1280px - 64px);padding-right:0;padding-left:0}.tna-container--max{max-width:none}.tna-container--centred,.tna-container--align-centre{justify-content:center}.tna-container--align-right{justify-content:flex-end}.tna-container .tna-container--nested{width:auto;margin-right:-32px;margin-left:-32px}ul.tna-container{list-style:none}.tna-column{padding-right:16px;padding-left:16px;box-sizing:border-box}.tna-column .tna-column--no-padding{padding-right:0;padding-left:0}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--no-margin-right-medium{margin-right:0}.tna-column--no-margin-left-medium{margin-left:0}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--no-margin-right-small{margin-right:0}.tna-column--no-margin-left-small{margin-left:0}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-container{padding-right:8px;padding-left:8px}.tna-container .tna-container--nested{width:auto;margin-right:-16px;margin-left:-16px}.tna-column{padding-right:8px;padding-left:8px}.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--no-margin-right-tiny{margin-right:0}.tna-column--no-margin-left-tiny{margin-left:0}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}{margin:0;padding:0}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}@media(prefers-contrast: more){{background-image:none}}:root{color-scheme:only light}@supports(font: -apple-system-body){html{font:-apple-system-body}}@supports(font: -apple-system-body) and (not (-webkit-touch-callout: default)){html{font-size:1rem}}img,svg,picture,video,canvas{max-width:100%;height:auto;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}[hidden]{display:none !important}hr{border:0 var(--keyline, rgba(38, 38, 42, 0.25)) solid;border-top-width:1px}hr.tna-hr-dark{border-color:var(--keyline-dark, rgb(38, 38, 42))}.tna-template{color:var(--font-base, #343338);font-family:Open Sans,sans-serif;font-style:normal;font-optical-sizing:auto;font-variation-settings:"wdth" 100;font-weight:400;direction:ltr;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.tna-template__body{color:inherit;font-size:1.1875rem;line-height:1.75}@media(min-width: 48.0625em)and (max-width: 64em){.tna-template__body{font-size:1.125rem}}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}strong{font-weight:700}p+p{margin-top:16px}a{text-decoration-thickness:0.09375rem;text-underline-offset:.125em;border-radius:.1px}a,a:link{color:var(--link, #005fa3)}a:visited{color:var(--link-visited, #634abb)}a:hover,a:focus-visible,a:active{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}a.tna-link--no-visited-state:visited{color:var(--link, #005fa3)}small{font-size:1.009375rem}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:2px 4px;display:flex;align-items:center;gap:8px;color:var(--font-base, #343338);font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;font-size:0.875rem;line-height:1.1;text-transform:uppercase;line-height:1;text-align:center;border-radius:4px}a.tna-hgroup__supertitle,a.tna-chip{text-decoration:underline}a.tna-hgroup__supertitle:hover,a.tna-chip:hover,a.tna-hgroup__supertitle:focus-visible,a.tna-chip:focus-visible{text-decoration:underline;text-decoration-thickness:.1875em;text-underline-offset:.0625em}a.tna-hgroup__supertitle:hover .fa-solid,a.tna-chip:hover .fa-solid,a.tna-hgroup__supertitle:focus-visible .fa-solid,a.tna-chip:focus-visible .fa-solid{color:inherit}.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon-light, rgba(1, 1, 1, 0.58))}@media(prefers-contrast: more){.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon, )}}.tna-hgroup__supertitle--plain,.tna-chip--plain{padding:0;background-color:rgba(0,0,0,0);border:none;border-radius:.1px}a.tna-hgroup__supertitle--plain:hover,a.tna-chip--plain:hover,a.tna-hgroup__supertitle--plain:focus-visible,a.tna-chip--plain:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}a.tna-hgroup__supertitle--plain .fa-solid,a.tna-chip--plain .fa-solid{color:inherit}.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-chip:not(.tna-chip--plain){border:2px var(--accent-background, #afb6b5) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-chip:not(.tna-chip--plain),.tna-template--dark-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-template--dark-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain){color:var(--contrast-font-base, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e);border-color:var(--contrast-background, #1e1e1e)}.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-background-accent .tna-chip:not(.tna-chip--plain) .fa-solid,.tna-template--dark-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-template--dark-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain) .fa-solid{color:var(--contrast-icon-light, rgba(255, 255, 255, 0.7))}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-template--system-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain){color:var(--contrast-font-base, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e);border-color:var(--contrast-background, #1e1e1e)}.tna-template--system-theme .tna-background-accent-light .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) .fa-solid,.tna-template--system-theme .tna-background-accent-light .tna-chip:not(.tna-chip--plain) .fa-solid{color:var(--contrast-icon-light, rgba(255, 255, 255, 0.7))}}.tna-chip-list{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.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:var(--font-dark, rgb(1, 1, 1));text-wrap:pretty}.tna-hgroup-s .tna-hgroup__title a,.tna-heading-s a,.tna-hgroup-m .tna-hgroup__title a,.tna-heading-m a,.tna-hgroup-l .tna-hgroup__title a,.tna-heading-l a,.tna-hgroup-xl .tna-hgroup__title a,.tna-heading-xl a{display:inline-block;vertical-align:top}.tna-hgroup-s .tna-hgroup__title a::after,.tna-heading-s a::after,.tna-hgroup-m .tna-hgroup__title a::after,.tna-heading-m a::after,.tna-hgroup-l .tna-hgroup__title a::after,.tna-heading-l a::after,.tna-hgroup-xl .tna-hgroup__title a::after,.tna-heading-xl a::after{content:"";width:.3125em;height:.3125em;margin-bottom:.1em;margin-left:.375em;display:inline-block;vertical-align:middle;transform:rotate(45deg);border-top:.125em var(--link, #005fa3) solid;border-right:.125em var(--link, #005fa3) solid}.tna-hgroup-s .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-s a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-m .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-m a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-l .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-l a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-xl .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-heading-xl a:not(.tna-link--no-visited-state):visited::after{border-color:var(--link-visited, #634abb)}.tna-hgroup-s .tna-hgroup__title strong,.tna-heading-s strong,.tna-hgroup-m .tna-hgroup__title strong,.tna-heading-m strong,.tna-hgroup-l .tna-hgroup__title strong,.tna-heading-l strong,.tna-hgroup-xl .tna-hgroup__title strong,.tna-heading-xl strong{font-weight:inherit}.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.1;font-size:4rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:3rem}}@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;line-height:1.15;font-size:2.25rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:2rem}}@media(max-width: 48em){.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.8125rem}}.tna-hgroup-l .tna-hgroup__title a::after,.tna-heading-l a::after{width:.275em;height:.275em;margin-bottom:0;margin-left:.25em;border-top-width:.1em;border-right-width:.1em}.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:700;line-height:1.4;font-size:1.375rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.375rem}}@media(max-width: 48em){.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.3125rem}}.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:700;line-height:1.5;font-size:1.1875rem}.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:16px 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,.tna-hgroup-xl+.tna-large-paragraph,.tna-hgroup-l+.tna-large-paragraph,.tna-hgroup-m+.tna-large-paragraph,.tna-hgroup-s+.tna-large-paragraph,.tna-heading-s+.tna-large-paragraph,.tna-heading-m+.tna-large-paragraph,.tna-heading-l+.tna-large-paragraph,.tna-heading-xl+.tna-large-paragraph{margin-top:16px}.tna-heading--no-link-arrow a::after{display:none}.tna-hgroup__supertitle{margin:0 0 4px}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:16px 16px 16px 32px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-blockquote__quote{font-weight:600;quotes:auto;quotes:"‘" "’"}.tna-blockquote__quote:has(:is(ul,ol)){quotes:none}.tna-blockquote__quote>:first-child::before{content:open-quote}.tna-blockquote__quote>:last-child::after{content:close-quote}.tna-blockquote__citation{margin-top:16px;font-size:1rem}.tna-blockquote__citation::before{content:"—" " ";content:"—" " "/""}@media(max-width: 30em){.tna-blockquote{padding:8px 8px 8px 16px}}.tna-large-paragraph{font-size:1.375rem;color:var(--font-dark, rgb(1, 1, 1))}@media(max-width: 48em){.tna-large-paragraph{font-size:1.25rem}}.tna-large-paragraph--bold{color:var(--font-base, #343338);font-weight:600}.tna-scene-setter{font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;color:var(--font-dark, rgb(1, 1, 1));font-size:1.375rem;line-height:1.7}@media(max-width: 48em){.tna-scene-setter{font-size:1.25rem}}address{line-height:1.375;font-style:inherit}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer__theme-selector-button{font-weight:700}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover,.tna-footer__social-item-link:focus-visible{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:hsla(0,0%,100%,.14);border-radius:4px}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover,.tna-footer__navigation-block-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, rgb(38, 38, 42)) solid}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo-wrapper{padding-top:20px;padding-bottom:20px}.tna-header__logo{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo--link,.tna-header__logo--link:link,.tna-header__logo--link:visited{color:inherit}.tna-header__logo--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header__logo-strapline{margin:0 12px;display:inline-block;line-height:1.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-button-wrapper{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;font-weight:700;font-size:1rem;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer}.tna-header__navigation-button:hover,.tna-header__navigation-button:focus-visible{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__navigation-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link:focus-visible,.tna-header__top-navigation-item-link:focus-visible:link,.tna-header__top-navigation-item-link:focus-visible:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}.tna-header .tna-logo{width:5rem;height:5rem;display:inline-block;flex-shrink:0}.tna-header .tna-logo svg{width:100%;height:100%}@media(max-width: 48em){.tna-header__logo-wrapper{padding-top:16px;padding-bottom:16px}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-button-wrapper{display:block}.tna-header__navigation-button-wrapper.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:8px 0}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:focus-visible{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:hsla(0,0%,100%,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-left:.5rem var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:32px}.tna-header__logo-wrapper,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:32px;padding-left:32px}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo-wrapper{padding-right:16px}.tna-header__logo-wrapper{padding-left:16px}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{font-size:.9rem;line-height:1.25}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}.tna-warning{padding:16px;display:flex;align-items:flex-start;gap:16px;background-color:rgb(249, 247, 226);border-left:5px rgb(255, 204, 0) solid;border-radius:4px;border-top-left-radius:0;border-bottom-left-radius:0}@media(max-width: 30em){.tna-warning{flex-direction:column;gap:8px}}.tna-warning__heading-icon{width:2rem;height:2rem;display:block;line-height:2rem;text-align:center;text-transform:lowercase;border-radius:100%;color:var(--font-dark, rgb(1, 1, 1));font-size:1.5rem;font-weight:700;border:.1875rem var(--font-dark, rgb(1, 1, 1)) solid}@media(max-width: 48em){.tna-warning__heading-icon{width:1.5rem;height:1.5rem;font-size:1.1875rem;line-height:1.5rem;border:.125rem var(--font-dark, rgb(1, 1, 1)) solid}}.tna-warning__body{width:100%;margin-top:0;flex:1;align-self:center}/# sourceMappingURL=error-page.css.map */