[data-palette="App"] {
--Active-Primary:#008655;
--Active-Secondary:rgba(243,243,243,1);
--Alert:rgba(200,0,0,1);
--Available:rgba(0,160,65,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(220,220,220,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "App Typeface 3";
--Button:var(--px15) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:7px;
--Byline:var(--px15) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:3px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12)/130% "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:#008655;
--Header-Secondary:rgba(37,38,40,1);
--Heading:var(--px20) "App Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:0.9;
--Image-Border-Size:0px;
--Image-Radius:10px;
--Image-Shadow:none;
--Line-Spacing:150%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--On-Alert:rgba(255,255,255,1);
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Selected:rgba(0,0,0,0.2);
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Very-Narrow:2px;
--Spacing-Very-Wide:20px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px14) "App Typeface 1";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px16) "App Typeface 1";
--Subtitle:var(--px17) "App Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(11,11,11,1);
--Surface-Secondary:rgba(145,145,145,1);
--Title:var(--px20) "App Typeface 3";
--Title-Case:normal;
--Unavailable:rgba(150,150,150,1);
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="App Logo"] {
--Active:rgba(255,255,255,1);
--Background-Primary:transparent;
--Background-Secondary:transparent;
--Highlight:rgba(255,255,255,0.1);
--Overlay:rgba(255,255,255,1);
--Surface-Primary:rgba(0,0,0,1);
--Surface-Secondary:rgba(0,0,0,0.9);

}
[data-palette="App Menu"] {
--Active:rgba(255,255,255,1);
--Active-Primary:rgba(255,255,255,1);
--Background-Primary:#25282a;
--Footnote:var(--px14) "App Typeface 3";
--Highlight:rgba(255,255,255,1);
--Overlay:rgba(255,255,255,1);
--Page-Gutter:0;
--Surface-Primary:rgba(255,255,255,.6);

}
[data-palette="App Header"] {
--Active-Primary:rgba(237,237,237,1);
--Active-Secondary:transparent;
--Background-Primary:         rgba(37,38,40,1);
--Header-Primary:rgba(11,11,11,1);
--Header-Secondary:rgba(33,3,33,1);
--Line-Spacing:130%;
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(211,211,211,1);
--Surface-Secondary:rgba(170,170,170,0.9);
--Title:var(--px20)/130% "App Typeface 3";

}
[data-palette="App Footer"] {
--Active-Primary:#fff;
--Active-Secondary:rgba(37,38,40,1);
--Background-Primary:#bb423e;
--Background-Secondary:transparent;
--Header-Primary:rgba(37,38,40,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(37,38,40,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Overlay"] {

}
[data-palette="Overlay Header"] {
--Background-Primary:linear-gradient(0deg, rgba(235,235,235,1)
0%,rgba(235,235,235,1) 1px,rgba(255,255,255,1) 1px,rgba(255,255,255,1)
100%);;
--Title:var(--px22)/130% "App Typeface 1";
--Title-Case:uppercase;

}
[data-palette="Editor"] {
--Active-Primary:#008655;
--Active-Secondary:rgba(243,243,243,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px15) "App Typeface 3";
--Button:var(--px13) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:100px;
--Byline:var(--px13) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px12) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:0px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(0,0,0,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px11) "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Heading:var(--px22) "App Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:0px 0px 0px 1px rgba(0,0,0,0.1);
--Line-Spacing:170%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Very-Narrow:2px;
--Spacing-Very-Wide:20px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px12) "App Typeface 2";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px18) "App Typeface 1";
--Subtitle:var(--px17) "App Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(176,176,176,1);
--Title:var(--px20) "App Typeface 3";
--Title-Case:normal;
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="Editor Logo"] {
--Background-Primary:rgba(37,38,40,1);
--Background-Secondary:transparent;
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Editor Menu"] {
--Active-Primary:#008655;
--Active-Secondary:rgba(243,243,243,1);
--Background-Primary:transparent;
--Background-Secondary:rgba(248,248,248,1);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(136,136,136,1);

}
[data-palette="Editor Banner"] {
--Active-Primary:rgba(88,88,88,1);
--Active-Secondary:rgba(236,236,236,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Header"] {
--Active-Primary:rgba(40,160,220,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Footer"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Popover"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(120,120,120,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Header-Primary:rgba(30,30,30,1);
--Header-Secondary:rgba(110,110,110,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(248,248,248,1);

}
[data-palette="Editor Popover Banner"] {
--Background-Primary:rgba(246,246,246,1);

}


@font-face {font-family:"App Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/4035399d606c6fe5b430f9a18889a363/Lato-Bold.ttf") format("truetype");}
@font-face {font-family:"App Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/9b24cccae80a98e96ad6f558a98478eb/Lato-Semibold.ttf") format("truetype");}
@font-face {font-family:"App Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/5d14391995929c6799688d83c870794a/Lato-Regular.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/4035399d606c6fe5b430f9a18889a363/Lato-Bold.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/9b24cccae80a98e96ad6f558a98478eb/Lato-Semibold.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/5d14391995929c6799688d83c870794a/Lato-Regular.ttf") format("truetype");}


.Workflow-List-1 {
  display: grid; 
  grid-template-columns: auto minmax(100px, 1fr) 140px; 
  grid-template-rows: 23px; 
  gap: 0px 0px; 
  grid-template-areas: 
    "check title status" "check detail status";
  width:100%;
}
.Workflow-List-1 > .Operator-Check { grid-area: check; min-width:40px; max-width: 40px; padding:10px; }
.Workflow-List-1 [data-field="Workflow Title"] { 
  display:block; grid-area: title;  
font: var(--Body);
color: var(--Surface-Primary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Title"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}

.Workflow-List-1 [data-field="Workflow Detail"] { 
  display:block; grid-area: detail;  
font: var(--Caption);
color: var(--Surface-Secondary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Detail"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}

.Workflow-List-1 [data-field="Status"] { display:block; text-align:right; grid-area: status;
font: var(--Body);
color: var(--Surface-Primary);
}

.Workflow-List-1 [data-field="Status"] p { padding:10px; color:var(--Overlay-Primary); border-radius:5px; min-width:120px; text-align:center; background: var(--Option-Color,#777); }

.Workflow-List-1.Is-Current { 
background: var(--Active-Secondary);
box-shadow: 0px 0 0px 3px var(--Active-Secondary);
}
.Saved-Article-E1 [data-field="Article"] { z-index:1; display:block; }
.Saved-Article-E1 { position:relative; }
.Saved-Article-E1 > [data-field="Tags"] { 
  display:block; color: var(--Surface-Secondary); font: var(--Caption);
  position:absolute; bottom:4px; right:4px;
  z-index:2;
  padding:2px;
  background:rgba(255,255,255,0.8);
}
/* RL Quickfix for Nav */
#Navigation .Action.Action-Shape-None.LG { --Action-Right-Padding: var(--Spacing-Regular); }

/*
@Name: Article Listing 1 (Regency Lighting)
@Summary: Image on left, title, subtitle and summary on right.
*/
.Article-L1-RL {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Article-L1-RL > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L1-RL > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); display:none;}
.Article-L1-RL > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L1-RL > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L1-RL > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Article-L1-RL {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.XL.Article-L1-RL {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD */
.MD.Article-L1-RL {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.MD.Article-L1-RL > [data-field="Title"] {font: var(--Sub-Subheading);}
.MD.Article-L1-RL > [data-field="Summary"] {display: none;}

/* Old MD: 
.MD.Article-L1-RL {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Article-L1-RL > [data-field="Summary"] {font: var(--Body);} */

/* SM */
.SM.Article-L1-RL {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Article-L1-RL > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Article-L1-RL > [data-field="Summary"] {display: none;}

/* XS */
.XS.Article-L1-RL {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Article-L1-RL > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Article-L1-RL > [data-field="Subtitle"] {display: none;}
.XS.Article-L1-RL > [data-field="Summary"] {display: none;}
/*
@Name: Article Detail 9
@Summary: Cover picture at top with Title and Subtitle overlayed on the cover. Rest of content below in a card.
*/
.Article-D9 > .Card {display:grid; grid-template-columns:[title-start subtitle-start card-start actions-start content-start related-start] auto [content-end actions-end card-end subtitle-end title-end related-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end related-start] auto [related-end] var(--Spacing-Wide) [card-end];
min-height: 50%;
}
.Article-D9 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:0; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Article-D9 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary);}
.Article-D9 > .Card > [data-field="Subtitle"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary);}
.Article-D9 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}

/* Actions */
.Article-D9 > .Card > [data-collection="Actions"] {grid-area: actions; display:block;}

/* Meta */
.Article-D9 > .Card > [data-field="Meta"] {grid-area: meta; padding: 0 var(--Page-Gutter);}
.Article-D9  > .Card >[data-field="Meta"] [data-field="Duration"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-D9 > .Card > [data-field="Meta"] [data-field="Updated"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); padding-right: var(--Spacing-Regular);}

/* Content */
.Article-D9  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter);}
.Article-D9  > .Card > [data-field="Related"] {grid-area: related; display: block;}

.Article-D9 > .Card > [data-field="Title"] { display:none; }
.Article-D9 > .Card > [data-field="Subtitle"] { display:none; }
.Article-D9 > .Card > [data-collection="Actions"] { display:none; }


/*
@Name: Article Extended 5
@Summary: No title subtitle or cover 
*/
.Article-E5 {display:grid; grid-template-columns:[content-start] auto [content-end]; grid-template-rows:[content-start] auto [content-end];}
.Article-E5 > [data-field="Content"] {grid-area: content; display:block; font: var(--Body); color: var(--Surface-Primary); background:#FEE; outline:1px dotted red;}
.Article-L2 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; 
grid-template-columns: [focus-start title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end picture-start] 1fr [picture-end focus-end]; 
grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; 
border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;
}
.Article-L2 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L2 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L2 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Summary"] p:last-child {padding-bottom: 0;}
.Tab-D1 {}
.Tab-D1 > .Card > [data-field="Title"] { display:none; x-note:'This is from Tab-D1 Schema layout CSS.'; }
.Tab-D1 > .Card > [data-field="Subtitle"] { display:none; x-note:'This is from Tab-D1 Schema layout CSS.'; }
/*
@Name: Article Listing 1
@Summary: Image on left, title, subtitle and summary on right.
*/
.Article-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Article-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); display:none;}
.Article-L1 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L1 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD: */
.MD.Article-L1 {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Article-L1 > [data-field="Summary"] {font: var(--Body);}

/* SM */
.SM.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Article-L1 > [data-field="Summary"] {display: none;}

/* XS */
.XS.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Article-L1 > [data-field="Subtitle"] {display: none;}
.XS.Article-L1 > [data-field="Summary"] {display: none;}
/*
@Name: Article Detail 1
@Summary: Cover picture at top with Title and Subtitle overlayed on the cover. Rest of content below in a card.
*/
.Article-D1 > .Card {display:grid; grid-template-columns:[title-start subtitle-start card-start actions-start content-start related-start] auto [content-end actions-end card-end subtitle-end title-end related-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end related-start] auto [related-end] var(--Spacing-Wide) [card-end];
min-height: 50%;
}
.Article-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:0; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Subtitle"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}

/* Actions */
.Article-D1 > .Card > [data-collection="Actions"] {grid-area: actions; display:block;}

/* Meta */
.Article-D1 > .Card > [data-field="Meta"] {grid-area: meta; padding: 0 var(--Page-Gutter);}
.Article-D1  > .Card >[data-field="Meta"] [data-field="Duration"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-D1 > .Card > [data-field="Meta"] [data-field="Updated"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); padding-right: var(--Spacing-Regular);}

/* Content */
.Article-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter);}
.Article-D1  > .Card > [data-field="Related"] {grid-area: related; display: block;}

.Article-D1 > .Card > [data-field="Title"] { display:none; }
.Article-D1 > .Card > [data-field="Subtitle"] { display:none; }
.Article-D1 > .Card > [data-collection="Actions"] {background:var(--Background-Primary);}