@financial-times/n-myft-ui 37.0.0 → 38.0.0

package/myft/ui/lists.js

@@ -196,10 +196,10 @@ function FormElement (createList, attachDescription, onListCreated, onCancel, mo
 		</div>
 
 		<div class="myft-ui-create-list-form-buttons">
-			<button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big" type="button" data-trackable="cancel-link" text="cancel">
+			<button data-o3-theme="inverse" class="o3-button o3-button--primary" type="button" data-trackable="cancel-link" text="cancel">
 			Cancel
 			</button>
-			<button class="o-buttons o-buttons--big o-buttons--secondary" type="submit" data-trackable="add-button">
+			<button class="o3-button o3-button--secondary" type="submit" data-trackable="add-button">
 			Add
 			</button>
 		</div>
@@ -265,7 +265,7 @@ function ContentElement (hasDescription, onClick) {
 			${description}
 		` : ''}
 			<span
-			class="myft-ui-create-list-announcement o-normalise-visually-hidden"
+			class="myft-ui-create-list-announcement o3-visually-hidden"
 			role="region"
 			aria-live="assertive"
 			/>
@@ -351,7 +351,7 @@ function ListCheckboxElement (addToList, removeFromList) {
 		const listCheckbox = `<label>
 		<input type="checkbox" name="default" value="${list.uuid}" ${list.checked ? 'checked' : ''}>
 		<span class="o-forms-input__label">
-			<span class="o-normalise-visually-hidden">
+			<span class="o3-visually-hidden">
 			${list.checked ? 'Remove article from ' : 'Add article to ' }
 			</span>
 			${escapeText(list.name)}

package/myft/ui/lists.scss

@@ -1,25 +1,7 @@
 .myft-ui__logo {
-	border: 0;
-}
-
-.myft-ui__icon {
-	@include oIconsContent('logo', oColorsByName('white'), 16);
-	width: 34px;
-	margin: 0 8px -5px;
+  border: 0;
 }
 
 .n-notification {
-	z-index: 105; //bring notifications in front of the sticky header
-
-	.myft-ui__icon {
-		@include oIconsContent('logo', oColorsByName('black-80'), 20);
-		margin: 0 3px -5px;
-	}
-
-	&--error,
-	&--success {
-		.myft-ui__icon {
-			@include oIconsContent('logo', oColorsByName('white'), 20);
-		}
-	}
+  z-index: 105; //bring notifications in front of the sticky header
 }

package/myft/ui/myft-buttons/main.scss

@@ -15,7 +15,7 @@
 			content: ' ';
 			position: absolute;
 			display: block;
-			background-color: oColorsByName('teal');
+			background-color: var(--o3-color-palette-teal);
 			top: 0;
 			right: 0;
 			height: 100%;

package/myft/ui/personalise-links.js

@@ -1,8 +1,7 @@
 import myFtClient from 'next-myft-client';
-import { $$ as findElements } from 'n-ui-foundations';
 
 export default function (el) {
-	const links = (el && el.nodeName === 'A') ? [el] : findElements('a[href^="/myft"]', el);
+	const links = (el && el.nodeName === 'A') ? [el] : Array.from(el.querySelectorAll('a[href^="/myft"]'));
 	return Promise.all(links.map(link => myFtClient.personaliseUrl(link.getAttribute('href'))
 		.then(personalisedUrl => link.setAttribute('href', personalisedUrl)))
 	);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "37.0.0",
+  "version": "38.0.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
@@ -36,6 +36,7 @@
     "@financial-times/dotcom-build-js": "^8.2.1",
     "@financial-times/dotcom-build-sass": "^8.2.1",
     "@financial-times/dotcom-server-handlebars": "^8.2.1",
+    "@financial-times/dotcom-ui-base-styles": "^13.0.0-beta.0",
     "@financial-times/eslint-config-next": "^7.1.0",
     "@financial-times/n-express": "^28.0.3",
     "ascii-table": "0.0.9",
@@ -89,10 +90,13 @@
     "nodemon": "^1.9.2",
     "npm-prepublish": "^1.2.3",
     "pa11y-ci": "^3.0.1",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^0.9.1",
     "puppeteer": "^18.2.1",
     "regenerator-runtime": "^0.13.3",
-    "sass": "^1.68.0",
+    "sass": "^1.85.1",
     "semver": "6.3.0",
     "sinon": "^7.1.0",
     "sinon-chai": "^3.7.0",
@@ -101,16 +105,14 @@
     "webpack-cli": "^4.9.2"
   },
   "peerDependencies": {
-    "@financial-times/n-notification": "^8.2.2",
-    "@financial-times/o-buttons": "^7.7.3",
-    "@financial-times/o-editorial-typography": "^2.3.2",
-    "@financial-times/o-forms": "^9.4.0",
-    "@financial-times/o-grid": "^6.1.1",
-    "@financial-times/o-normalise": "^3.3.0",
-    "@financial-times/o-overlay": "^4.0.0",
-    "@financial-times/o-spacing": "^3.0.0",
-    "@financial-times/o-tooltip": "^5.2.4",
-    "n-ui-foundations": "^9.0.0 || ^10.0.0",
+    "@financial-times/n-notification": "^9.0.0",
+    "@financial-times/o-forms": "^10.0.1",
+    "@financial-times/o-grid": "^6.1.8",
+    "@financial-times/o-overlay": "^5.0.1",
+    "@financial-times/o-tooltip": "^6.0.0",
+    "@financial-times/o3-button": "^3.0.0",
+    "@financial-times/o3-editorial-typography": "^3.0.2",
+    "@financial-times/o3-foundation": "^3.0.0",
     "next-myft-client": "^13.0.0",
     "react": "^17.0.2"
   },

package/scripts/build-demo.sh

@@ -11,7 +11,7 @@ demo-build() {
     # Copy components to the corresponding directory
     cp -r components node_modules/@financial-times/n-myft-ui/components/
     # Compile SCSS file to CSS
-    sass demos/src/demo.scss public/main.css --load-path node_modules
+    sass demos/src/demo.scss --load-path node_modules | postcss -u postcss-import --output public/main.css
     # Indicate that build is complete
     echo "Demo build completed."
 }

package/components/onboarding-cta/main.scss

@@ -1,10 +0,0 @@
-
-.n-myft-onboarding-cta {
-	@include oButtonsContent($opts: (
-		'type': 'secondary',
-		'theme': (
-			'color': 'white',
-			'context': 'claret'
-		)
-	));
-}

package/mixins/buttons.scss

@@ -1,23 +0,0 @@
-@mixin buttonWithIcon($iconSpace, $iconSize, $colorOff, $iconOff, $iconOn: $iconOff, $colorOn: $colorOff) {
-	$topMargin: #{$iconSize * -0.5}px;
-	$horizontalMargin: #{($iconSpace - $iconSize) / 2}px;
-	position: relative;
-	padding-left: #{$iconSpace}px;
-
-	&::before {
-		@include oIconsContent($iconOff, $colorOff, $iconSize, $iconset-version: 1);
-		content: ' ';
-		position: absolute;
-		top: 50%;
-		left: $horizontalMargin;
-		margin: $topMargin $horizontalMargin 0 0;
-	}
-
-	&[aria-pressed="true"]::before {
-		@include oIconsContent($iconOn, $colorOn, $iconSize, $iconset-version: 1);
-	}
-
-	&[aria-pressed="true"]:hover::before {
-		@include oIconsContent($iconOn, $colorOff, $iconSize, $iconset-version: 1);
-	}
-}

package/styles.css

@@ -1 +0,0 @@
-@keyframes load-notice{0%{max-height:0}to{max-height:200px}}.n-notification{position:fixed;top:0;left:0;width:100%;z-index:10}.n-notification__item{position:relative;background-color:rgba(255,241,229,.95);border-bottom:3px solid #33302e;color:#33302e;box-sizing:border-box;margin:0;padding:14px 0;overflow:hidden;animation:load-notice .2s forwards}.n-notification__content-wrapper{margin:0 auto;width:100%;position:relative;text-align:center;padding:0 30px;box-sizing:border-box}.n-notification__title{font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;font-weight:600;display:inline-block;padding-right:10px;margin:0}.o-typography--loading-sans-bold .n-notification__title{font-size:16.6px;font-family:sans-serif}.n-notification__content{font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;display:inline-block;margin:0}.o-typography--loading-sans .n-notification__content{font-size:17.4px;font-family:sans-serif}.n-notification__content b,.n-notification__content strong{font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;font-weight:600}.o-typography--loading-sans-bold .n-notification__content b,.o-typography--loading-sans-bold .n-notification__content strong{font-size:16.6px;font-family:sans-serif}.n-notification__content a{color:#33302e;border-bottom-color:#33302e}.n-notification--error{background-color:#fad9ce;color:#b30000}.n-notification--error .n-notification__content a{color:#fff}.n-notification--error .n-notification__close{width:40px;height:40px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23B30000%2C%23B30000)}@media screen and (-ms-high-contrast:active){.n-notification--error .n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-notification--error .n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-notification--success{background-color:#ccdfc7;color:#00572c}.n-notification--success .n-notification__content a{color:#00572c}.n-notification--success .n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%2300572C%2C%2300572C);position:absolute;right:0;top:0;border:0;cursor:pointer;background-size:20px;background-position:50%;margin-top:5px;width:40px;height:40px;text-indent:-999em}@media screen and (-ms-high-contrast:active){.n-notification--success .n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-notification--success .n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-notification__close{display:inline-block;background-repeat:no-repeat;background-size:contain;background-color:transparent;vertical-align:baseline;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%2333302E%2C%2333302E);position:absolute;right:0;top:0;border:0;cursor:pointer;background-size:20px;background-position:50%;margin-top:5px;width:40px;height:40px;text-indent:-999em}@media screen and (-ms-high-contrast:active){.n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-notification__close{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.myft-ui__logo{border:0}.myft-ui__icon{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:16px;height:16px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23FFFFFF%2C%23FFFFFF);width:34px;margin:0 8px -5px}@media screen and (-ms-high-contrast:active){.myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-notification .myft-ui__icon{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:20px;height:20px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%2333302E%2C%2333302E);margin:0 3px -5px}@media screen and (-ms-high-contrast:active){.n-notification .myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-notification .myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-notification--error .myft-ui__icon,.n-notification--success .myft-ui__icon{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:20px;height:20px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23FFFFFF%2C%23FFFFFF)}@media screen and (-ms-high-contrast:active){.n-notification--error .myft-ui__icon,.n-notification--success .myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-notification--error .myft-ui__icon,.n-notification--success .myft-ui__icon{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:logo?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.myft-pin-divider{height:18px;width:1px;background:#e6d9ce;margin:0 1px}.myft-pin-button-wrapper .myft-pin-button{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;vertical-align:baseline;width:36px;height:36px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%2366605C%2C%2366605C)}@media screen and (-ms-high-contrast:active){.myft-pin-button-wrapper .myft-pin-button{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.myft-pin-button-wrapper .myft-pin-button{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.myft-pin-button-wrapper .myft-pin-button:not([disabled]):hover,.myft-pin-button-wrapper .myft-pin-button[aria-pressed=true]{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;vertical-align:baseline;width:36px;height:36px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%23990F3D%2C%23990F3D);background-color:transparent;border:0}@media screen and (-ms-high-contrast:active){.myft-pin-button-wrapper .myft-pin-button:not([disabled]):hover,.myft-pin-button-wrapper .myft-pin-button[aria-pressed=true]{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.myft-pin-button-wrapper .myft-pin-button:not([disabled]):hover,.myft-pin-button-wrapper .myft-pin-button[aria-pressed=true]{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:pin?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.myft-pin-button__label{position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0,0 0);clip-path:polygon(0 0,0 0);margin:-1px;border:0;overflow:hidden;padding:0;width:2px;height:2px;white-space:nowrap}.myft-pin-button-wrapper .myft-pin-button{background-color:transparent;border:0;padding:0;min-width:28px}.myft-pin-button-wrapper .o-tooltip--myft-pin-button{min-width:200px}.myft-pin-button-wrapper>form{display:flex}.myft-pin-button-wrapper.loading{position:relative}.myft-pin-button-wrapper.loading form{visibility:hidden}.myft-pin-button-wrapper.loading:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:" ";display:block;width:12px;height:12px;margin:0 auto;border-radius:50%;border-color:#66605c transparent;border-style:solid;border-width:3px;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.n-myft-ui--instant{position:relative}.n-myft-ui--instant .n-myft-ui__button{position:relative;padding-left:26px;display:inline-block}.n-myft-ui--instant .n-myft-ui__button:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:24px;height:24px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%230A5E66%2C%230A5E66);content:" ";position:absolute;top:50%;left:1px;margin:-12px 1px 0 0}@media screen and (-ms-high-contrast:active){.n-myft-ui--instant .n-myft-ui__button:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-myft-ui--instant .n-myft-ui__button:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:24px;height:24px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23FFFFFF%2C%23FFFFFF)}@media screen and (-ms-high-contrast:active){.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:hover:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:24px;height:24px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%230A5E66%2C%230A5E66)}@media screen and (-ms-high-contrast:active){.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:hover:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-myft-ui--instant .n-myft-ui__button[aria-pressed=true]:hover:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:mail?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui__button--instant.n-myft-ui__button--instant-light{border:0;padding-left:8px;padding-right:36px;color:#33302e;font-weight:400;background:transparent}.n-myft-ui__button--instant.n-myft-ui__button--instant-light:not([disabled]):focus,.n-myft-ui__button--instant.n-myft-ui__button--instant-light:not([disabled]):hover,.n-myft-ui__button--instant.n-myft-ui__button--instant-light[aria-pressed=true]{background:transparent;color:#33302e}.n-myft-ui__button--instant.n-myft-ui__button--instant-light:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:36px;height:36px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%2366605C%2C%2366605C);left:auto;right:1px;margin-top:-18px}@media screen and (-ms-high-contrast:active){.n-myft-ui__button--instant.n-myft-ui__button--instant-light:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-myft-ui__button--instant.n-myft-ui__button--instant-light:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui__button--instant.n-myft-ui__button--instant-light:not([disabled]):hover:before,.n-myft-ui__button--instant.n-myft-ui__button--instant-light[aria-pressed=true]:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:36px;height:36px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%23990F3D%2C%23990F3D)}@media screen and (-ms-high-contrast:active){.n-myft-ui__button--instant.n-myft-ui__button--instant-light:not([disabled]):hover:before,.n-myft-ui__button--instant.n-myft-ui__button--instant-light[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.n-myft-ui__button--instant.n-myft-ui__button--instant-light:not([disabled]):hover:before,.n-myft-ui__button--instant.n-myft-ui__button--instant-light[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:notifications?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui--instant--hide-text .n-myft-ui__button--instant.n-myft-ui__button--instant-light{margin-top:5px;width:20px;overflow:hidden;white-space:nowrap;text-indent:-110px}.myft-ui,.n-myft-ui{display:inline-block}@keyframes myft-flash{25%{opacity:1}50%{opacity:1}}@keyframes myft-flash-white{10%{filter:brightness(0) invert(1)}75%{filter:brightness(0) invert(1)}}.experimental-myft-flash .o-header__top-column--right:before{content:" ";position:absolute;display:block;background-color:#0d7680;top:0;right:0;height:100%;opacity:0;animation:myft-flash 1.2s linear;width:58px}@media(min-width:46.25em){.experimental-myft-flash .o-header__top-column--right:before{width:88px}}@media(min-width:61.25em){.experimental-myft-flash .o-header__top-column--right:before{width:100px}}.experimental-myft-flash .o-header__top-link--myft:before{animation:myft-flash-white 1.2s linear}.myft-ui__button--manage[aria-pressed=true]:before,.myft-ui__button--myft-manage[aria-pressed=true]:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:28px;height:28px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23FFFFFF%2C%23FFFFFF)}@media screen and (-ms-high-contrast:active){.myft-ui__button--manage[aria-pressed=true]:before,.myft-ui__button--myft-manage[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.myft-ui__button--manage[aria-pressed=true]:before,.myft-ui__button--myft-manage[aria-pressed=true]:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:cross?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.n-myft-ui--article-saved__list-select{margin-bottom:10px}.o-overlay.o-overlay--myft-lists{height:100%;width:100%;max-width:640px}@media(min-width:30.625em){.o-overlay.o-overlay--myft-lists{height:auto}}.myft-list-form__wrapper{margin-bottom:20px}@media(min-width:46.25em){.myft-list-form__wrapper{display:flex}}.o-overlay__content .myft-list-form__wrapper{margin-bottom:0}.myft-list-form{overflow:hidden}@media(min-width:46.25em){.myft-list-form{flex:1}}.myft-list-form__button{float:right}.mypage .myft-list-form__message,.o-overlay .myft-list-form__message{font-family:MetricWeb,sans-serif;font-size:18px;line-height:20px;background:#fff1e5;border-radius:0;margin:3px 0 0;padding:20px}.o-typography--loading-sans .mypage .myft-list-form__message,.o-typography--loading-sans .o-overlay .myft-list-form__message{font-size:15.66px;font-family:sans-serif}.mypage .myft-list-form__message h3,.o-overlay .myft-list-form__message h3{font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;font-weight:600;margin:0 5px 0 0}.o-typography--loading-sans-bold .mypage .myft-list-form__message h3,.o-typography--loading-sans-bold .o-overlay .myft-list-form__message h3{font-size:16.6px;font-family:sans-serif}.mypage .myft-list-form__message p,.o-overlay .myft-list-form__message p{font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;padding:8px 0;margin:0}.o-typography--loading-sans .mypage .myft-list-form__message p,.o-typography--loading-sans .o-overlay .myft-list-form__message p{font-size:17.4px;font-family:sans-serif}.mypage .myft-list-form__message h3,.mypage .myft-list-form__message p,.o-overlay .myft-list-form__message h3,.o-overlay .myft-list-form__message p{display:inline-block;padding:0}.myft-list-form__message+.myft-list-form__wrapper{margin-top:20px}.o-overlay .myft-list-form__message{border-top:1px solid #ccc1b7;margin:0 -20px}.o-overlay .myft-list-form__message:first-child{border-top:0;margin-top:-20px}.myft-list-form__message--success h3{color:#00994d}.myft-list-form__message--success h3:before{display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:14px;height:14px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%2300994D%2C%2300994D);content:"";margin-right:3px}@media screen and (-ms-high-contrast:active){.myft-list-form__message--success h3:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.myft-list-form__message--success h3:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.myft-list-form-divider{text-align:center;margin-bottom:32px;padding:24px 0}@media(min-width:46.25em){.myft-list-form-divider{display:flex;position:relative;justify-content:center;align-items:center;margin:0;padding:0 8px}}.myft-list-form-divider:after{content:"";display:block;border-top:1px solid #ccc1b7;margin-top:-10px}@media(min-width:46.25em){.myft-list-form-divider:after{position:absolute;top:0;height:100%;width:1px;margin-top:0;border-top:0;border-left:1px solid #ccc1b7}}.myft-list-form-divider__inner{padding:10px;background-color:#fff9f5}@media(min-width:46.25em){.myft-list-form-divider__inner{z-index:10}}.o-overlay__content .myft-list-form-divider__inner{background-color:#fff}.share-nav.data-overlap-initialised .o-overlay{transition:opacity .15s ease-in;opacity:0;z-index:-1}.share-nav .myft-ui-create-list-variant{border-radius:10px;border:1px solid #f2e5da;background:#fffcfa}.share-nav .myft-ui-create-list-variant .o-overlay__heading{border-radius:10px 10px 0 0;background:#fff9f5;font-family:MetricWeb,sans-serif;font-size:20px;line-height:24px;color:#33302e}.o-typography--loading-sans .share-nav .myft-ui-create-list-variant .o-overlay__heading{font-size:17.4px;font-family:sans-serif}.share-nav .myft-ui-create-list-variant .o-overlay__content{font-family:MetricWeb,sans-serif;font-size:16px;line-height:20px;color:#33302e;padding:0}.o-typography--loading-sans .share-nav .myft-ui-create-list-variant .o-overlay__content{font-size:13.92px;font-family:sans-serif}.share-nav .myft-ui-create-list-variant .o-overlay__title{margin:8px 14px 0 8px}.share-nav .myft-ui-create-list-variant-container{display:block;width:340px;top:115.5px;left:50px}.share-nav .myft-ui-create-list-variant-add{border:0;background:none;font-family:MetricWeb,sans-serif;font-size:18px;line-height:20px;font-weight:600;color:#33302e;padding-left:0;margin-left:-8px}.o-typography--loading-sans-bold .share-nav .myft-ui-create-list-variant-add{font-size:14.94px;font-family:sans-serif}.share-nav .myft-ui-create-list-variant-add:hover{text-decoration:underline}.share-nav .myft-ui-create-list-variant-add:before{content:"";display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:28px;height:28px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:plus?format=svg&source=n-myft-ui&tint=%2333302E%2C%2333302E);vertical-align:middle;margin-top:-2px}@media screen and (-ms-high-contrast:active){.share-nav .myft-ui-create-list-variant-add:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:plus?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.share-nav .myft-ui-create-list-variant-add:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:plus?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.share-nav .myft-ui-create-list-variant-add-description{margin:4px 0}.share-nav .myft-ui-create-list-variant-heading:before{content:"";display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;vertical-align:baseline;width:32px;height:32px;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%230D7680%2C%230D7680);vertical-align:middle;margin-top:-2px}@media screen and (-ms-high-contrast:active){.share-nav .myft-ui-create-list-variant-heading:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%23ffffff%2C%23ffffff)}}@media screen and (-ms-high-contrast:black-on-white){.share-nav .myft-ui-create-list-variant-heading:before{background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:tick?format=svg&source=n-myft-ui&tint=%23000000%2C%23000000)}}.share-nav .myft-ui-create-list-variant-footer{border-top:1px solid #f2e5da;padding:16px}.share-nav .myft-ui-create-list-variant-icon:before{content:"";display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:50%;background-color:transparent;background-image:url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);width:42px;height:42px;vertical-align:middle;margin-top:-2px}.share-nav .myft-ui-create-list-variant-icon-visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.share-nav .myft-ui-create-list-variant-form{display:flex;width:calc(100% - 32px);justify-content:space-between;height:40px;gap:8px;padding:0 16px 16px}.share-nav .myft-ui-create-list-variant-form>*{flex:1 1 auto}.share-nav .myft-ui-create-list-variant-form .o-forms-input{margin-top:0}.share-nav .myft-ui-create-list-variant-lists{padding:16px 16px 0;font-family:MetricWeb,sans-serif;font-size:18px;line-height:20px}.o-typography--loading-sans .share-nav .myft-ui-create-list-variant-lists{font-size:15.66px;font-family:sans-serif}.share-nav .myft-ui-create-list-variant-lists-text{font-family:MetricWeb,sans-serif;font-weight:600;color:#33302e;margin-bottom:16px}.share-nav .myft-ui-create-list-variant-lists-container{margin-top:0}