/*********************************************************************/
/*********************************************************************/
/**** ----------------------------------------------------------  ****/
/****       THE HUMANE REPRESENTATION OF MODELS PROJECT           ****/
/**** ----------------------------------------------------------  ****/
/****    CORE stylesheet for the main interface...                ****/
/****    Note: Intoduction and data visualisation stylesheets     ****/
/****    are separated into modular stylesheets.                  ****/             
/****    - Made by Little Sketches                                ****/            
/*********************************************************************/
/*********************************************************************/

  /****************************************************/
  /********** COLOUR PALETTES AND TYPOGRAPHY **********/
  /****************************************************/

    /** Colour palette CSS variables ***/
    :root {
        --bg-color: rgb(10,15,10); 
        --bg-shade-color: rgb(50,55,50); 
        --fore-shade-color: #ddd; 
        --fore-color: #fff; 
        --highlight-color: #C6ED2C; 
        --highlight-second-color: #FF00B4; 
        --muted-color-01: #FEF6AD; 
        --muted-color-01: #ddd; 
        --pallette-1: #00F9FF; 
        --pallette-2: #FE019A; 
        --neon-text-color: #f40;
    }

  /****************************************************/
  /*** TYPOGRAPHY | IMPORTED FONTS AND CLASS STYLES ***/
  /****************************************************/
    /*** Text class styling ***/
    .strong{
      font-weight: bold;
    }
    /* Sub-pane header / label format */
    .pane > .label {
      margin: 1rem 1rem 0rem 1rem;
    }
    .glowText{
      text-shadow:
          -0.2rem -0.2rem 1rem #fff,
          0.2rem 0.2rem 1rem #fff,
          0 0 2rem var(--neon-text-color),
          0 0 4rem var(--neon-text-color),
          0 0 6rem var(--neon-text-color),
          0 0 8rem var(--neon-text-color),
          0 0 10rem var(--neon-text-color);
      filter: blur(0.007em);
      animation-duration: 250ms;  
    }

  /****************************************************/
  /*************** GENERAL LAYOUT STUFF ***************/
  /****************************************************/
    html{
      scroll-behavior: smooth;    
    }
    body{
      height: 100vh;
      width: 100vw;
      font-family:  'Dosis'     
    }
    /* DISPLAY CONTROLS */
      .hidden {
          display: none !important;
      }
      .cursor {
        display: none;
      }
    /* IMAGES */
      .scaledSVG{
        width: 100%;
        max-height: 100%;
      }
    /* BACKGROUND MODAL OPTIONS:  MAIN CONTENT WRAPPER AND BASIC MODAL ANBIMATION STYLING;  */
      #mainContent {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #mainContent.perspective {
        background: #aaa;
        -webkit-perspective: 1500px;
        perspective: 1500px;  
      }
      #mainContent .mainContent-container {
        background:var(--fore-color);
        min-height: 100%;
        position: relative;
        outline: 1px solid rgba(0,0,0,0);
        z-index: 10;
        -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */
        transform: translateZ(0) translateX(0) rotateY(0deg);
      }
      #mainContent .mainContent-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0px;
        opacity: 0;
        background: rgba(0,0,0,0.2);
        -webkit-transition: opacity 0.5s, height 0s 0.5s;   /* the transition delay of the height needs to be synced with the container transition time */
        transition: opacity 0.5s, height 0s 0.5s;
      }
      #mainContent .wrapper {
        position: relative;
      }
      #mainContent.perspective.modalview .mainContent-container {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      #mainContent.perspective.modalview .mainContent-wrapper {
        -webkit-transform: translateZ(-1px); /* solves a rendering bug in Chrome on Windows */
      }
      /* BACKGROUND MODAL: main screen zoomed out right;  & Temporal assumption modal zoomed out top*/
        #mainContent.storyMode {
          background: #b8b6b4;      /* Med grey */
        }
        #mainContent.storyMode .mainContent-container {
          -webkit-transition: -webkit-transform 0.4s;
          transition: transform 0.4s;
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
        }
        #mainContent.storyMode.animate .mainContent-container {
          -webkit-transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
          transform: translateZ(-1500px) translateX(100%) rotateY(-45deg);
        }
        #mainContent.storyMode.animateTop .mainContent-container {
          -webkit-transform: translateZ(-1000px) translateY(-35%) rotateX(-20deg);
          transform: translateZ(-1000px) translateY(-35%) rotateX(-20deg);
        }

  /*********************************************************/
  /*** MODAL: BACKSTORY CONTENT | GRID LAYOUT STRUCTURE  ***/
  /********************************************************/

    #storyModeContent{
      position: fixed;
      display: grid;
        grid-gap: 1vw;  
        grid-template-columns: repeat(8, 1fr); 
        grid-template-rows: 25% repeat(6, 1fr);   
        z-index: -10;
        height: 100%;
        width: 100%;
        line-height: 0.9;
        pointer-events: none;
    }
    #storyMode-header{
      grid-area: 1 / 2 / 2 / 9;
      font-size: 5rem;
      color: #FFEB3B;
      align-self: center;  
      padding-top: 0rem;  
      text-transform: uppercase;
    }    
    #storyMode-container{
      grid-area: 2 / 2 / 6 / 7; 
      z-index: 2;
      pointer-events: auto;
    }
    #storyMode-container #storyModeHTML{
      column-width: 15rem;
      column-gap: 3rem;
      orphans:  10;
      line-height: 1.2;            
    }
    #storyMode-container #storyModeHTML p{
      margin-block-start: 0em;
    }
    #storyMode-container #storyModeHTML p.header{
      font-weight: bold
    }

  /*********************************************************/
  /*** MODAL: GLOBAL ASSUMPTION | GRID LAYOUT STRUCTURE  ***/
  /*********************************************************/
    #modalContainer{
      position: fixed;
      display: grid;
        grid-template-columns: 20% calc(30% - 0.5vw) calc(30% - 0.5vw) 20%; 
        grid-template-rows: calc(60% - 1vw) 20% 20%;   
        z-index: -10;
        height: 100%;
        width: 100%;
        pointer-events: none;
    }
    #modalInfo-container{ 
      grid-area:  2 / 1 / 4 / 2;
      padding: 0rem 2rem;
    } 
      #modalHeader{
        font-weight: bold;
        padding-bottom: 0.5rem
      } 
      #modalDescription,
      #modalInstructionDescription{
        font-size: 0.8rem;
        line-height: 1.2;
        padding-bottom: 0.5rem        
      }      
    #modalForecast-container{ 
      grid-area:  2 / 4 / 4 / 5;
      padding: 0rem 2rem;
    } 
      #modalForecastHeader{
        font-weight: bold;
        padding-bottom: 0.5rem
      }
      #modalForecastDescription{
        font-size: 0.8rem;     
        line-height: 1.2;     
      }
    #modalForecastDescription ul{
      margin-block-start: 0rem;
      padding-inline-start: 1rem;
    }
    #modalForecastDescription li{
      padding-bottom: 0.25rem
    }
    #modalChart-container{
      grid-area: 2 / 2 / 4 / 4; 
      z-index: 2;
      align-self: end;
      pointer-events: auto;
      padding-bottom: 1rem;
    }
    #modalChart{
      width: 100%
    }
    #modalChart .assumptionLine{
      fill: none;
      stroke: #643075;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke-width: 3;
    }
    #modalChart .assumptionPoint{
      cursor: ns-resize;
      fill: #643075;
      stroke: #643075;
      stroke-width: 3
    }
    #modalChart .axis text{
      font-family:  'Dosis';          
      font-size: 12px;
    }
    #modalChart .axis.axis--x path,
    #modalChart .axis.axis--y path{
      stroke: none;
    }
    #modalChart .axis.axis--x  text.axisLabel,
    #modalChart .axis.axis--y  text.axisLabel{
      font-size: 15px;      
      font-weight: bold;
      fill: #000;
      text-anchor: end;
    }
    #modalChart .axis text.axisLabelMinor{
      font-size: 12px;      
      fill: #000;
      text-anchor: end;
    }
    #modalChart text.valueLabel{
      pointer-events: none;
      text-anchor: middle;
      fill: #C6ED2C
    }

/****************************************************/
/****** CONTENT LAYOUT | GRID LAYOUT STRUCTURE  *****/
/****************************************************/
  
  /* CONTENT CONTAINER: Full page with CSS grid; */
    .content-container{        
        position: fixed;
        top: 0;
        left: 0;  
        height: 100vh;
        width: 100vw;
        padding: 1vw;                  /*  Use padding for full page border */
        display: grid;                 /*  Layouts specified in yth elayout-X class */
        pointer-events: none;
    }
    .content-container >  div {
      pointer-events: all 
    }
    .content-container.fullBleed{        
        padding: 0vw;     
        overflow: hidden;            
    }
  /* LAYERING OF ARTICLES / SECTIONS Z-INDEX */
    #baselineAct-container{ z-index: 1; }
    #planAct-container{ z-index: 2; }
    #actionAct-container{ z-index: 3; }
    #actionActMenu-container{ z-index: 4; }
    #setupScene-container{ 
      z-index: 5;
      transition: all 1000ms;
    }
    #introduction-container{ z-index: 6; }
    #pageNavigation-container{ z-index: 999; }

    /*************************************************/
    /***  THREE-PANE LAYOUT CONFIGURATIONS         ***/
    /***  For the  main action explorer sections   ***/
    /*************************************************/

      /* ACTION EXPLORER SECTIONS; Three reconfigurable grid area definitions */
        .content-section{
          box-sizing: border-box; 
        }
          #actionAct-title-section{
            grid-area: title;
            pointer-events: all;   
          }
          #actionAct-visualisation-section{
            grid-area: vis;        
            position: relative;  
            pointer-events: all;          
          }
          #actionAct-information-section{
            grid-area: info;    
            pointer-events: all;               
          }
      /* ACTION EXPLORER VIEW */
      .content-container.layout-A{
        grid-template-columns: 36.7% 60.3%; 
        grid-template-rows: calc(30% - 1.5vw) calc(70% - 1.5vw);
        grid-gap: 1vw;   
        grid-template-areas:
          "title vis"
          "info  vis";
      }
      /* Flipped view with into and title on right hand side for overlay with layout G (plan views); */
        .content-container.layout-A2{
          grid-template-columns: calc(75% - 8.75vw) calc(16% + 5.75vw); 
          grid-template-rows: 0% calc(100% - 2vw);
          grid-template-areas:
            "vis title"
            "vis info ";
        }      
        .content-container.layout-A2 div{
          color: #000;
        }      
        .content-container.layout-A2 div .tangleVariable{
          color: var(--pallette-2);
        }      
      /* ADDITONAL LAYOUT OPTIONS: for mobile table etc.*/
        .content-container.layout-B{
          grid-template-columns: repeat(2, calc(50% - 1.5vw)) ; 
          grid-template-rows: calc(30% - 1.5vw) calc(70% - 1.5vw);
          grid-gap: 1vw;  
          grid-template-areas:
            "title vis"
            "info  vis";   
        }
        .content-container.layout-C{
          grid-template-columns: calc(30% - 1.5vw) calc(70% - 1.5vw); 
          grid-template-rows: calc(20% - 1.5vw) calc(80% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "title title"
            "info  vis";
        }
        .content-container.layout-D{
          grid-template-columns: calc(10% - 1vw) calc(30% - 1vw) calc(70% - 1vw); 
          grid-template-rows: calc(20% - 1.5vw) calc(80% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "title info vis"
            "title info  vis";
        }
        .content-container.layout-E{
          grid-template-columns: calc(10% - 1.5vw) calc(90% - 1.5vw); 
          grid-template-rows: calc(20% - 1.5vw) calc(80% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "title info"
            "title vis";  
        }
      /* MAIN MENU 4 PANE DISPLAY LAYOUT > STARTING VIEW*/
      .content-container.layout-F{
        grid-template-columns: calc(40% - 1.333vw) calc(25% - 1.333vw) calc(35% - 1.333vw) ; 
        grid-template-rows: calc(30% - 1.5vw) calc(70% - 1.5vw);
        grid-gap: 1vw;        
        grid-template-areas:
          "banner banner banner"
          "paneA paneB paneC";
      }        
      /* MAIN MENU 4 PANE DISPLAY LAYOUT > STARTING VIEW*/
        .content-container.layout{
          grid-template-columns:  calc(30% - 1.5vw) calc(70% - 1.5vw);
          grid-template-rows: repeat(3, auto);
          grid-gap: 1vw;        
          grid-template-areas:
            "banner paneA"
            "banner paneB"
            "banner paneC";
        }
      /* CONTEXT VIEW > TRANSITION TO LARGER BANNER HEIGHT */
        .content-container.layout-M{
          grid-template-columns: calc(40% - 1.333vw) calc(25% - 1.333vw) calc(35% - 1.333vw) ; 
          grid-template-rows: calc(70% - 1.5vw) calc(30% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "banner banner banner"
            "paneA paneB paneC";
          transition: all 500ms;          
        }
      /* CHAPTER VIEWS > TRANSITION TO ZERO BANNER HEIGHT */
        .content-container.layout-G{
          grid-template-columns: calc(30% - 1.333vw) calc(70% - 2.666vw) ; 
          grid-template-rows: calc(100% - 2vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneC"
        }
      /* PLAN VIEWS >  THREE EVEN  PANES + MENU  */
        .content-container.layout-H{
          grid-template-columns: 35% calc(40% - 1.75vw) 0vw ; 
          grid-template-rows: calc(50% - 1.5vw) calc(50% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneD"
            "paneA paneC paneD"
        }
      /* PLAN VIEWS > TWO CHART FOCUS: MIDDLE PANES IN VEIW WITH LEFT REDUCED  */
        .content-container.layout-I{
          grid-template-columns: 5% calc(70% - 1.75vw) 0vw ; 
          grid-template-rows: calc(50% - 1.5vw) calc(50% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneD"
            "paneA paneC paneD"
        }
      /* PLAN VIEWS > TOP/MID PANE FOCUS (COST CURVE)  */
        .content-container.layout-J{
          grid-template-columns: 5% calc(70% - 1.75vw) 0vw ; 
          grid-template-rows: calc(95% - 1.5vw) calc(5% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneD"
            "paneA paneC paneD"
        }
      /* PLAN VIEWS > BOTTOM/MID PANE FOCUS (WEDGES CURVE) */
        .content-container.layout-K {
          grid-template-columns: 5% calc(70% - 1.75vw) 0vw ; 
          grid-template-rows: calc(17.5% - 1.5vw) calc(82.5% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneD"
            "paneA paneC paneD"
        }
      /* PLAN VIEWS > LEFT PAN IN FOCUS (PLAYBOOK)  */
        .content-container.layout-L {
          grid-template-columns: calc(75% - 1.75vw) 0vw 0vw ; 
          grid-template-rows: calc(50% - 1.5vw) calc(50% - 1.5vw);
          grid-gap: 1vw;        
          grid-template-areas:
            "paneA paneB paneD"
            "paneA paneC paneD"
        }
 

    /*************************************************/
    /***  FOUR PANE SUB-PANE LAYOUT CONFIGURATIONS ***/
    /***  Used to layout primary section areas     ***/
    /**************************************************/

      /*******************************************/
      /* DEFINE GRID AREAS AVAILABLE FOR LAYOUT  */
      /*******************************************/   
        .pane{
          overflow: auto;
        } 
        .area-1{ grid-area: area-1 }
        .area-2{ grid-area: area-2 }
        .area-3{ grid-area: area-3 }
        .area-4{ grid-area: area-4 }
        /**** CONTENT SHAPER: applied to each non-rectangularlayout type ***/
        .content-shaper{
          shape-margin: 1rem;
        }

      /*******************************************/
      /* GRID lAYOUT WITH 2 x ROW | 4 x COLUMNS  */
      /*******************************************/
        .grid-2x4{  
          width: 100%;
          height: 100%;
          display: grid;             
            grid-template-columns: repeat(4, auto);
            grid-template-rows: calc(40% - 0.5vw) calc(60% - 0.5vw);
            grid-column-gap: 1vw;  
            grid-row-gap: 1vw;            
        }
      
        /******************************************
          2 x 4 GRID              | 50%  |  50% | 
          LAYOUT A > 4 PANES      |   75%   |25%|          
        *******************************************/
          .grid-2x4.configuration-A{
            grid-template-areas:
              "area-1 area-1 area-2 area-2"
              "area-3 area-3 area-3 area-4";  
          }

        /******************************************
          2 x 4 GRID              | 50%  |  50% | 
          LAYOUT B > THREE PANES  |     100%    |    
        ******************************************/
          .grid-2x4.configuration-B{    
            grid-template-areas:
             "area-1 area-1 area-2 area-2" 
             "area-3 area-3 area-3 area-3";              
          }
          /* GUTTER SHAPE OPTIONS: shared styles */
            .grid-2x4.configuration-B.shape1,  .grid-2x4.configuration-B.shape2{
              grid-column-gap: 0vw;            
            }
            .grid-2x4.configuration-B > .area-4{       
              display: none;
            }
          /* GUTTER SHAPE OPTION 1 : Row 1 with forward angled gutter */
            .grid-2x4.configuration-B.shape1 > .area-1{
              margin-right: -1vw;      
              clip-path: polygon(
                0 0,
                100% 0,
                calc(100% - 3vw) 100%,
                0 100%
              );      
            }
            .grid-2x4.configuration-B.shape1 > .area-2{
              margin-left: -1vw;
              padding-left: 2.5vw;              
              clip-path: polygon(
                3vw 0,
                100% 0,
                100% 100%,
                0 100%
              );       
            }
          /* GUTTER SHAPE OPTION 2 : Row 1 with back angled gutter */
            .grid-2x4.configuration-B.shape2 > .area-1{
              margin-right: -1vw;      
              clip-path: polygon(
                0 0,
                calc(100% - 3vw) 0,
                100% 100%,
                0 100%
              );      
            }
            .grid-2x4.configuration-B.shape2 > .area-2{
              margin-left: -1vw;
              clip-path: polygon(
                0 0,
                100% 0,
                100% 100%,
                3vw 100%
              );       
            }

        /******************************************
          2 x 4 GRID              | 50%  |  50% | 
          LAYOUT C > THREE PANES  |  v   |  50% |    
        ******************************************/
          .grid-2x4.configuration-C {  
            grid-template-areas:
              "area-1 area-1 area-2 area-2"
              "area-1 area-1 area-3 area-3";              
          }

          /* GUTTER SHAPE OPTIONS: shared styles */
            .grid-2x4.configuration-C.shape1{
              grid-column-gap: 0vw;            
            }
            .grid-2x4.configuration-C > .area-4{       
              display: none;
            }          
          /* GUTTER SHAPE OPTION 1: back anggled gutter */
          .grid-2x4.configuration-C.shape1 > .area-1{
            margin-right: -1vw;      
            padding-right: 2vw;
            clip-path: polygon(
              0 0,
              calc(100% - 3vw) 0,
              100% 100%,
              0 100%
            );      

          }
          .grid-2x4.configuration-C.shape1 > .area-2{
            margin-left: -1vw;
            clip-path: polygon(
              0 0,
              100% 0,
              100% 100%,
              1vw 100%
            );       
          }
          .grid-2x4.configuration-C.shape1 > .area-3{   
            padding-right: 1vw;            
            clip-path: polygon(
              0.25vw 0,
              100% 0,
              100% 100%,
              2vw 100%
            );            
          }
          /* CONTENT SHAPERS */
          .grid-2x4.configuration-C.shape1 > .area-3 > .content-shaper{
            width: 100%;
            height: 100%;
            shape-outside: polygon(
              0 0,
              0 0.25vw,
              2vw 100%,
              0 100%
            );
            float: left;  
          }

      /*******************************************/
      /* GRID lAYOUT WITH 1 x ROW | 2 x COLUMNS  */
      /*******************************************/
        .grid-1x2{  
          width: 100%;
          height: 100%;
          display: grid;             
            grid-template-columns: repeat(2, 50%);
            grid-template-rows: 100%;   
            grid-column-gap: 1vw;                 
        }

        /******************************************
         1 x 2 GRID > LAYOUT A     | 50 | 50% | 
        ******************************************/
          .grid-1x2.configuration-A {  
            grid-template-areas:
              "area-1 area-2"           
          }
          .grid-1x2.configuration-A.shape1 > .area-3, .grid-1x2.configuration-A > .area-4{       
            display: none;
          } 
          /* GUTTER SHAPE OPTIONS: shared styles */
            .grid-1x2.configuration-A.shape1, .grid-1x2.configuration-A.shape2 {
              grid-column-gap: 0vw; 
            } 
          /* GUTTER SHAPE OPTION 1: back angled gutter */
            .grid-1x2.configuration-A.shape1 > .area-1{
              margin-right: -1vw;      
              clip-path: polygon(
                0 0,
                calc(100% - 3vw) 0,
                100% 100%,
                0 100%
              );      
            }
            .grid-1x2.configuration-A.shape1 > .area-2{
              margin-left: -1vw;
              clip-path: polygon(
                0 0,
                100% 0,
                100% 100%,
                3vw 100%
              );       
            }
          /* GUTTER SHAPE OPTION: with forward angled gutter */
            .grid-1x2.configuration-A.shape2 > .area-1{
              margin-right: -1vw;      
              clip-path: polygon(
                0 0,
                100% 0,
                calc(100% - 3vw) 100%,
                0 100%
              );       
            }
            .grid-1x2.configuration-A.shape2 > .area-2{
              margin-left: -1vw;
              clip-path: polygon(
                3vw 0,
                100% 0,
                100% 100%,
                0 100%
              );       
            }

      /*******************************************/
      /* GRID lAYOUT WITH 2 x ROW | 1 x COLUMNS  */
      /*******************************************/
        .grid-2x1{  
          width: 100%;
          height: 100%;
          display: grid;             
            grid-template-columns: 100%;  
            grid-template-rows: repeat(2, 50%);     
            grid-row-gap: 1vw;             
        }

        /******************************************
         2 x 1 GRID > LAYOUT A     | 50 / 50% | 
        ******************************************/
          .grid-2x1.configuration-A {  
            grid-template-areas:
              "area-1"
              "area-2"           
          }
          /* GUTTER SHAPE OPTIONS: shared styles */        
            .grid-2x1.configuration-A.shape1 > .area-3, .grid-2x1.configuration-A > .area-4{       
              display: none;
            } 
            .grid-2x1.configuration-A.shape1, .grid-2x1.configuration-A.shape2{
              grid-row-gap: 0vw;            
            }
          /* GUTTER SHAPE OPTION: with forward angled gutter */
            .grid-2x1.configuration-A.shape1 > .area-1{
              clip-path: polygon(
                0 0,
                100% 0,
                100% calc(100% - 4vw),
                0 100%
              );      
            }
            .grid-2x1.configuration-A.shape1 > .area-2{
              margin-top: -3vw;
              padding-top: 4vw;
              clip-path: polygon(
                0 4vw,
                100% 0,
                100% 100%,
                0 100%
              );       
            }
          /* GUTTER SHAPE OPTION: with back angled gutter */
            .grid-2x1.configuration-B.shape2 > .area-1{
              grid-area: 1 / 1 / 1 / 1;  
              clip-path: polygon(
                0 0,
                100% 0,
                100% 100%,
                0 calc(100% - 4vw)
              );      
            }
            .grid-2x1.configuration-B.shape2 > .area-2{
              margin-top: -3vw;
              padding-top: 2vw;
              grid-area: 2 /  1 / 2 / 1; 
              clip-path: polygon(
                0 0,
                100% 4vw,
                100% 100%,
                0 100%
              );       
            }

        /******************************************
         2 x 1 GRID > LAYOUT A     | 61 / 39% | 
        ******************************************/
          .grid-2x1.configuration-B {  
            grid-template-rows: min-content;   
            grid-template-areas:
              "area-1"
              "area-3";      
            padding-left: 6vw;
            transform: rotate(-7deg);     
          }
          /* GUTTER SHAPE OPTIONS: shared styles */        
          .grid-2x1.configuration-B.shape1 > .area-2, 
          .grid-2x1.configuration-B.shape1 > .area-4{       
            display: none;
          } 
          /* GUTTER SHAPE OPTION: with forward angled gutter */
            .grid-2x1.configuration-B.shape1 > .area-1{
              background: #fff;
              height: auto;
            }
            .grid-2x1.configuration-B.shape1 > .area-3{
              background: #fff; 
              margin-top: -1vw;         
            }

  /****************************************************/
  /******* TOOLTIP STYLING | HTML CONTENT TIPS ********/
  /****************************************************/
    #tooltip-container{
      display: grid;
      z-index: 999;
    }
      /* Tooltip styling */
      .tooltip-wrapper{
        position: absolute;
      }
        .tooltip {
          position: relative;
          display: inline-block;
        }
        .tooltip__trigger {
          cursor: pointer;
          position: relative;
        }
        .tooltip__trigger-text {
          display: block;
          pointer-events: none;
        }
        .tooltip__base {
          position: absolute;
          top: 0;
          left: 0;
          margin-left: -150px;
          width: 300px;
          height: 200px;
          display: flex;
            align-items: center;
            justify-content: center;
          opacity: 0;
          pointer-events: none;
        }
        .tooltip__content {
          color: #fff;
          text-align: center;
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          width: 65%;
          padding: 0 1em;
          opacity: 0;
          font-size: 0.65em;
        }
        .tooltip__shape,
        .tooltip__deco {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
        .tooltip__shape > path {
          fill: #FF00B4;
        }

      /* Indivudual styles */
        /* Cora */
        .tooltip--cora .tooltip__base{
          transform-origin: 50% 100%;
        }
        .tooltip--cora .tooltip__content {
          margin-bottom: 1em;
        }
        /* Smaug */
        .tooltip--smaug .tooltip__base {
          bottom: -0.5em;
          transform-origin: 50% 100%;
        }
        .tooltip--smaug .tooltip__content {
          padding: 0;
        }
        /* Dori */
        .tooltip--dori .tooltip__base {
          bottom: -0.5em;
        }
        .tooltip--dori .tooltip__content {
          margin: 0 0 1em;
        }
        /* Walda */
        .tooltip--walda .tooltip__base {
          left: 0;
          bottom: 0.75em;
          position: absolute;
          margin-left: 0;
          width: 250px;
          height: 100px;
          padding: 0 0 0 0.25em;
        }
        .tooltip--walda .tooltip__trigger-text {
          padding: 1em;
        }
        .tooltip--walda .tooltip__content {
          margin: 0;
          width: 100%;
          height: 100%;
          align-items: flex-start;
          text-align: left;
          font-size: 0.85em;
          line-height: 2;
          opacity: 1;
          justify-content: flex-start;
        }
        .tooltip--walda .tooltip__letters span {
          display: inline-block;
          white-space: pre;
          opacity: 0;
        }
        .tooltip--walda .tooltip__deco {
          width: 4px;
          height: 100%;
          background: #141514;
          transform-origin: 50% 100%;
        }
        /* Gram */
        .tooltip--gram .tooltip__base {
          bottom: -0.5em;
        }
        /* Narvi */
        .path-narvi {
          transform-origin: 200px 150px;
        }
        .tooltip--narvi .tooltip__content {
          width: 80%;
        }
        /* Amras */
        .path-amras-1 { transform-origin: 115px 111px; }
        .path-amras-2 { transform-origin: 204px 107px; }
        .path-amras-3 { transform-origin: 279px 66px; }
        .path-amras-4 { transform-origin: 320px 99px; }
        .path-amras-5 { transform-origin: 137px 199px; }
        .path-amras-6 { transform-origin: 222px 217px; }
        .path-amras-7 { transform-origin: 80px 168px; }
        .path-amras-8 { transform-origin: 296px 211px; }
        .path-amras-9 { transform-origin: 310px 167px; }
        /* Hador */
        .tooltip--hador .tooltip__base {
          bottom: 2.25em;
          margin-left: -115px;
        }
        .path-hador-1 { transform-origin: 148px 284px; }
        .path-hador-2 { transform-origin: 160px 268px; }
        .path-hador-3 { transform-origin: 171px 246px; }
        .path-hador-4 { transform-origin: 200px 120px; }
        .tooltip--hador .tooltip__content {
          width: 50%;
          margin: 0 0 2.5em;
        }
        /* Malva */
        .tooltip--malva .tooltip__content {
          width: 50%;
        }
        /* Sadoc */
        .tooltip--sadoc .tooltip__base {
          bottom: 2.5em;
        }
        .tooltip--sadoc .tooltip__shape path {
          fill: #1d1f1e;
          stroke: #5a5c5b;
          stroke-width: 3px;
        }

  /****************************************************/
  /***********    SVG FILTER TEXT STYLE    ************/
  /****************************************************/

    .filter-breakup{
      filter: url(#breakup);
    }
    .filter-outline{
      filter: url(#outline);
    }
    .filter-shadow{
      filter: url(#shadow);
    }  
    .fill-polka{
      fill: url(#polka);    
    }
      pattern#polka > rect{
        fill: pink;
      }
      pattern#polka > circle#dot{
        fill: blue;
      }
    feFlood.rgbFLOOD{
      flood-opacity: 0.8;
    }

  /******************************/
  /*** BESPOKE CONTEXT CURSOR ***/
  /******************************/  
    #pageNavigation-container{
      display: grid;
    }
    @media (any-pointer: fine) {
      .cursor {
        display: grid;               
        z-index: 9999;
        mix-blend-mode: exclusion;
      }
      .cursor__inner {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: #fff;
      }
      .cursor__side {
        position: absolute;
        top: 50%;
        width: 5px;
        height: 1px;
        background: #fff;
        opacity: 0;
      }
      .cursor__side--left {
        right: calc(100% + 5px);
      }
      .cursor__side--right {
        left: calc(100% + 5px);
      }
      .cursor__inner--circle {
        width: 30px;
        height: 30px;
        border: 1px solid #000;
      }
      #cursor__message{
        text-align: center;
        font-size: 0.5rem;
        color: #000;
        position: absolute;
        top: calc(50% - 0.35rem); 
      }
    }

  /*********************************************************************/
  /***  TANGLE STYLING  Adapated from TangleKit.css                  ***/
  /***  Tangle 0.1.0 (c) 2011 Bret Victor.  MIT open-source license. ***/
  /*********************************************************************/
    /* Cursor */
    .TKCursorDragHorizontal {
      cursor: text;        
    }
    /* TKToggle */
    .TKToggle {
      color: var(--pallette-1);
      border-bottom: 1.25px dashed var(--pallette-1);
      cursor: pointer;
      display:inline-block;
    }
    /* TKAdjustableNumber */
    .TKAdjustableNumber {
      position: relative;
      color:  #C6ED2C;
      border-bottom: 1.25px dashed #C6ED2C;
    }
    .TKAdjustableNumber:hover{
    }
    .TKAdjustableNumberHover {
      color: var(--pallette-3);
    }
    .TKAdjustableNumberDown {
      color: var(--pallette-2);
      mix-blend-mode: difference;  
      border-bottom: 1.25px dashed var(--pallette-2);
    }
    .TKAdjustableNumberHelp {
      position: absolute;
      z-index: 999;
      font: 6px;
      text-align: center;
      width: 80px;
      padding: 0.25rem;
      background-color: #FF00B4;        
      border-color: #FFF;
      border-radius: 2vw;        
      color: #FFF;        
    }

/*-------------------------------------------------------------------*/
/*------------------------  CONTENT SECTIONS ------------------------*/
/*-------------------------------------------------------------------*/

  /****************************************************/
  /***** PROLOGUE: "THE SETUP" SCENE / MAIN MENU  *****/
  /****************************************************/

    /*************************/
    /***  FOUR PANE LAYOUT ***/
    /*************************/
      #setupScene-container .pane-setupScene{
        display: grid;
      }

    /**************************************************/
    /** GENERAL: pane styling for overlays and title **/
    /**************************************************/
      #setupScene-container .setup-title{
        line-height: 1;
        pointer-events: none;
      } 
      #setupScene-container .setup-pane-overlay{
          grid-area: 1 / 1 / 10 / 10;   
          transition: all 800ms;  
          z-index: 5;  
      }
      .gridAreaButton{
        height: fit-content;
        cursor: pointer;
      }
      .setup-pane-overlay > img{ 
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .setupPane-background-container {
        display: grid;
        grid-template-columns: 100%;  
        grid-template-rows: 100%;           
      }
      .setupPane-bgImgage{
        grid-area:  1 / 1 / 1 / 1;     
        background-size: cover;
        background-position: center;    
      }

    /*************************************************************/
    /** 0. TOP SECTION: "SETUP" SCENE BANNER SECTION - Problem  **/
    /*************************************************************/
      #setup-banner{
        grid-area: banner;   
        overflow: hidden;
      }
      /* Overlay div with 'darkness' effect */
        #setup-banner-background-container{
          grid-area: 1 / 1 / 5 / 5;   
          overflow: hidden;  
        }
          #setup-banner-bgImage{
            grid-area: 1 / 1 / 1 / 1;   
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          #setup-banner-bgFilter{
            grid-area:  1 / 1 / 1 / 1;
            z-index: 1;
            opacity: 0;
          }
          #setup-banner-bgOverlay{
            grid-area: 1 / 1 / 1 / 1;   
            z-index: 2;
          }
      /* Narrative header/labels */ 
        #setup-banner-introLabel{ 
          grid-area: 1 / 1 / 1 / 1;   
          z-index: 2;        
        }      
        #setup-banner-title{
          grid-area: 1 / 2 / 2 / 4;
        }
      /* Context paragraph */
        #setup-context-container{
          grid-area: 1 / 1 / 5 / 5;           
          display: grid;   
          z-index: 1;
        }
        #setup-contextDescription-container{
          grid-area: 2 / 1 / 5 / 5; 
        }

    /*************************************************************/
    /** 1. LEFT "SETUP" SCENE PANE #1 - Baseline                **/
    /*************************************************************/
      #setup-pane-1{
        grid-area: paneA;  
      }
      /* SVG background, label (button) and title (above overlay) */
        #setup-pane-1-background-container{
          grid-area: 1 / 1 / 7 / 7; 
          z-index: 0;  
        }
        #setup-pane-1-svg-container{
          grid-area: 1 / 1 / 7 / 7; 
          z-index: 1;
        }
        #setup-pane-1-label{
          grid-area: 5 / 2 / 5 / 5;      
          z-index: 2 ;      
        }
        #setup-pane-1-return{
          grid-area: 5 / 4 / 5 / 6;      
          z-index: 2 ;    
          justify-self: end;    
          align-self: end;      
        }
        #setup-pane-1-title{
          grid-area: 2 / 2 / 3 / 5;     
          z-index: 6;      
        }
        #setup-pane-1-return{
          color: #fff;
          cursor: pointer;
        }        

    /*************************************************************/
    /** 2. CENTER "SETUP" SCENE PANE #2 - Action content        **/
    /*************************************************************/  
      #setup-pane-2{
        grid-area: paneB;
      }
      /* Label (button) and title (above overlay) */      
        #setup-pane-2-title{
          z-index: 6;   
        }
        #setup-pane-2-label {
          z-index: 1;                
        }  

    /*************************************************************/
    /** 3. RIGHT "SETUP" SCENE PANE #3 - Action content         **/
    /*************************************************************/  
      #setup-pane-3{
        grid-area: paneC;      
      }
      /* SVG background, label (button) and title (above overlay) */
        #setup-pane-3-background-container{
          grid-area: 1 / 1 / 9 / 7; 
          z-index: 0;
        }
        #setup-pane-3-battlePlanMenu-container{
          grid-area: 1 / 1 / 9 / 7; 
          z-index: 1;
          display: grid;
            grid-template-columns: 20% repeat(3, 25%) 5%;
            grid-template-rows: 5% repeat(6, 15%) 5% ;  
        }
        #setup-pane-3-battlePlanMenu-container .battlePlan-menuButton {
          cursor: pointer;
          height: fit-content;
          opacity: 0;
        }
        #setup-pane-3-battlePlanMenu-container  .battlePlan-menuButton:hover{
          font-weight:bold;
        }
        #setup-pane-3-battlePlanMenu-container #battlePlan-allPanes{
          grid-area: 1 / 1 / 2 / 3; 
        }
        #setup-pane-3-battlePlanMenu-container #battlePlan-focusCharts{
          grid-area: 3 / 4 / 5 / 4; 
          align-self: center;             
        }
        #setup-pane-3-battlePlanMenu-container #battlePlan-exit{
          grid-area: 8 / 4 / 8 / 5; 
        }
      #setup-pane-3-svg-container{
        z-index: 1;
      }
      #setup-pane-3-label { 
        z-index: 2 ; 
      }  
      #setup-pane-3-title{ 
        z-index: 6;   
      }

  /****************************************************/
  /******  ACT I: THE "BASELINE" VISUALISATIONS  ******/
  /****************************************************/

    #baselineAct-container{
      transition: all 500ms ease-in-out; 
    }
    #baselineAct-container #baseline-pane-2 {
      grid-area: 1 /  2 / 1 / 2;    
      perspective: 1500px;  
      transition: all 500ms ease-in-out;      
      display: grid;
        grid-template-columns: 5% repeat(4, 22.5%) 5% ;  
        grid-template-rows: 5% repeat(4, 22.5%) 5% ;  
    }
    /* Visualisation containers: general styling; */
      #baselineAct-container #baseline-vis-bubbleChart-container,
      #baselineAct-container #baseline-vis-sankeyChart-container,
      #baselineAct-container #baseline-vis-mapVis-container{
        grid-area: 2 /  2 / 6 / 6;
        transition: all 500ms ease-in-out;  
        display: grid;
          grid-template-columns: 5% repeat(4, 22.5%) 5%;  
          grid-template-rows: 5% repeat(5, 18%) 5% ;     
      }
      #baselineAct-container #baseline-vis-bubbleChart-container #bubbleChart-header,
      #baselineAct-container #baseline-vis-sankeyChart-container #sankeyChart-header,
      #baselineAct-container #baseline-vis-mapVis-container #mapVis-header{
          grid-area: 1 / 1 / 1 / 3;
          color: #fff; 
          opacity: 0;
          z-index: 10;   
      }
      /* Headline metrics */
       #baselineAct-container #baseline-vis-headline-container{
        grid-area: 2 /  2 / 4 / 4;      
        transition: all 800ms ease-in-out;  
        display: grid;        
          grid-template-columns: 5% 90% 5%;  
          grid-template-rows: 10% 45% 45%;   
        height: fit-content;
      }
        #baseline-vis-headline-container #baseline-vis-headline-totalEmissions{
          grid-area: 2 / 2 / 3 / 3;
          display: grid;
            grid-template-columns: min-content auto;
            grid-template-rows: 10% 90%;  
        }
        #baselineTotalEmissions-subHeader{
          grid-area: 1 / 1 / 1 / 3;
        }
        #baselineTotalEmissions{
          grid-area: 2 / 1 / 2 / 2;
        }
        #baselineTotalEmissions-units{
          grid-area: 2 / 2 / 2 / 3;
          padding-left: 0.5rem;
          align-self: center;
          line-height: 0.9;          
        }
        #baseline-vis-headline-container #baseline-vis-headline-unitBreakdown{
          grid-area: 3 / 2 / 4 / 5;
          height: 100px;
          display: grid;
            grid-template-columns: 25% 25% 25% 25%;  
            grid-template-rows: 80% 20%;            
        }
        #baseline-vis-headline-container #baseline-vis-headline-unitBreakdown ul{
          margin-block-start: 0rem;
          margin-block-end: 0rem;
        }
        #baseline-vis-headline-container #baseline-vis-headline-unitBreakdown li{
          padding-top: 0.25rem;
        }
        /* More info / label button */
        #baseline-vis-headline-container #baseline-vis-headline-moreInfo{
          grid-area: 5 / 2 / 5 / 4; 
        }
        .baseline-headline-minor{
          font-size: 0.7rem;
          line-height: 1.2;
        }
        .baseline-headline-major{
          font-size: 2.5rem;
        }
        .baseline-icon-container{
          display: grid;
        }
        .baselinePerUnitEmissions-container{
          text-align:  center;         
          line-height: 0.8; 
        }
        #baseline-vis-headline-totalEmissions{
          display: grid;
            grid-template-columns: 30% 70%;  
            grid-template-rows: 100%;            
        }
        #baselinePerCapita-container,
        #baselinePerCapitaEmissions-container{
          grid-area: 1 / 1 / 1 / 1;
        }
        #baselinePerHousehold-container,
        #baselinePerHouseholdEmissions-container{
          grid-area: 1 / 2 / 1 / 2;               
        }
        #baselinePerBusiness-container,
        #baselinePerBusinessEmissions-container{
          grid-area: 1 / 3 / 1 / 3;              
        }
        #baselinePerFarm-container,
        #baselinePerFarmEmissions-container{
          grid-area: 1 / 4 / 1 / 4;              
        }
        .baseline-perUnit-unit{
          text-align:  center;
          padding-top: 0.25rem;
          font-size: 0.5rem;
          color: #fff;
        }
        #baselinePerCapita-unit{
          grid-area: 2 / 1 / 2 / 1;          
        }
        #baselinePerHousehold-unit{
          grid-area: 2 / 2 / 2 / 2;               
        } 
        #baselinePerBusiness-unit{
          grid-area: 2 / 3 / 2 / 3;    
        }
        #baselinePerFarm-unit{
          grid-area: 2 / 4 / 2 / 4;   
        }                       
        svg.baseline-icon{
          align-self: end;
          justify-self: center;   
          fill: #fff;
        }
        #baselinePersonSVG{
          height: 50%;
        }
        #baselineHouseholdSVG{
          height: 45%;
        }
        #baselineBusinessSVG{
          height: 65%;
        }
        #baselineFarmSVG{
          height: 100%;
        }
    /* showCharts*/
      #baselineAct-container  #baseline-vis-headline-showCharts-container {
        grid-area: 5 / 4 / 5 / 6;
        z-index: 6;  
      }
      #baselineAct-container  #baseline-vis-headline-showCharts{
        background: #fff; 
        border: solid 2px #000;
        height: fit-content;   
        padding: 0.5rem;      
        cursor: pointer;
      }
      #baselineAct-container #baseline-vis-headline-showCharts:hover{
        background: #000; 
        color: #fff;
      }
    /* Map visualisation */
      #baselineAct-container #baseline-vis-mapVis-container{
        grid-area: 2 /  2 / 6 / 7;
        z-index: 2;   
      }
      #baselineAct-container #baseline-vis-mapVis-container svg#mapVis{
        grid-area: 1 / 1 / 7 / 6;
        width: 100%;     
        align-self: center
      }
      #baselineAct-container #baseline-vis-mapVis-container #mapVis-turbine-group{
        grid-area: 4 / 4 / 5 / 4;
        width: 100%;     
        align-self: center
      }
    /* Emissions bubble chart */
      #baselineAct-container #baseline-vis-bubbleChart-container{
        transform-origin: 50% 50%;    
        z-index: 1;
      }
      #baselineAct-container #baseline-vis-bubbleChart-container svg#bubbleChart{ 
        grid-area: 1 /  1 / 7 / 6;
        width: 100%;
        align-self: center;
      }
      #baselineAct-container #baseline-vis-bubbleChart-container #bubbleChart-controls{ 
          grid-area: 1 /  5 / 1 / 7;  
          align-self: start;
          padding: 0.5rem;
          font-size: 1rem;
          text-align: left; 
          mix-blend-mode: exclusion;           
      }
    /* Emissions sankey chart */
      #baselineAct-container #baseline-vis-sankeyChart-container{
        transform-origin: 50% 150%;    
        z-index: 3;
      }  
      #baselineAct-container #baseline-vis-sankeyChart-container #sankeyChart-container{
        grid-area: 1 / 1 / 7 / 6;
        justify-self: start;
      }

  /****************************************************/
  /***** ACT IIa: INTRO & MENU FOR "ACTIONS MODEL" ****/
  /****************************************************/

    /***********************************/
    /****** CONTENT > TITLE PANE  ******/
    /***********************************/
      #actionActMenu-container{
          transition: all 800ms  
      }
      /* TITLE SECTION */
      #actionActMenu-title-section,
      #actionActMenu-context-message{
        display: none;
      }
      #actionActMenu-context-container{
        grid-area: 2 / 2 / 2 / 3;
        z-index: 2;
      }

  /****************************************************/
  /***** ACT IIb: THE INTERACTIVE "ACTIONS MODEL" *****/
  /****************************************************/

    /***********************************/
    /****** CONTENT > TITLE PANE  ******/
    /***********************************/

      /* TITLE SECTION */
        /* Main title block container */
        #actionAct-titleBlock{
          width: 100%;
          height: 100%;
          font-size: 6vh;
          display: flex;
            align-items: center;
            justify-content: center;    
        }
        #actionAct-titleText{
          text-align: center;
        }

    /**************************************************/
    /*** CONTENT >  BUSINESS CASE INFORMATION PANE ***/
    /*************************************************/

      /************************************************/
      /**** BUSINESS CASE INFORMATION SUB-PANES   ****/
      /************************************************/
        /*** IN TEXT TIPS ***/
        .tipBC{
          color: #f8fb7f;
          cursor: pointer;
        }
        /*** KEY INPUTS PANE ***/
        .table-container{
          overflow: scroll;
        }
        #bc-actionInput-container .table-container{
          overflow: visible;
        }
        table.table-2col, table.table-3col {
          width: auto;
          flex: 1;    
          display: grid;
          border-collapse: collapse; 
        }
        table.table-2col{
          grid-template-columns: 
            minmax(5vw, 1fr)
            minmax(5vw, 1fr) 
        }
        table.table-3col{
          grid-template-columns: 
            minmax(7.5vw, 1.25fr)
            minmax(2.5vw, 0.5fr)
            minmax(2.5vw, 0.5fr);    
        }
        table thead,
        table tbody,
        table tr {
          display: contents;
        }
        table.summaryTable tr > td{
          padding-top: 0.25rem;   
        }
        table.summaryTable .header{ 
          margin-top: 0.75rem; 
        }
        table.summaryTable .label{
        }
        table.summaryTable .value{
          text-align: right;  
          margin-right: 0.25rem;
        }
        table.summaryTable .unit{
        }
        table.summaryTable.table-2col tr > td{
          padding-bottom: 0.5vh;   
        }
        .actionInput-container > div, 
        .actionDescription-container > div,
        .actionOutput-container > div{
          margin-bottom: 0.25rem;
          line-height: 1.2;
        }
        /* Clickable temporoal assumptions */
        .action_temporalAssumption{
          box-shadow: inset 0 -0.15rem 0 0 #C6ED2C;
          transition: box-shadow 0.5s;
          cursor: pointer;
        }
        .action_temporalAssumption:hover {
          box-shadow: inset 0 -2.5rem 0 0 #C6ED2C;
          color: #000;
        }

    /********************************************/
    /*** ACTION CONTENT > VISUALISATION PANE ***/
    /*******************************************/
      #actionAct-visNarrative-container{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;          
        display: grid;    /* 10 x 10 with thin start and end */
          grid-template-columns: 1.5vw repeat(8, calc(12.5% - 7.5vw/8)) 1.5vw ;
          grid-template-rows: 1.5vw  repeat(8, calc(12.5% - 7.5vw/8)) 1.5vw ;
          grid-column-gap: 0.5vw;  
          grid-row-gap: 0.5vw;   
      }

      #actionAct-visNarrative-container #actionAct-actionSelector-container{
        grid-area: 2 / 2 / 4 / 10;
        font-size: 5rem;
        z-index: 1;          
      }
      #actionAct-actionSelector-container  select > option{     
        -moz-white-space: pre-wrap;             /* wrap text in compatible browsers */
        -o-white-space: pre-wrap;
        white-space: pre-wrap;
        overflow: hidden;                       /* hide text that can't wrap with an ellipsis */
        text-overflow: ellipsis;
        border-bottom: 1px solid #DDD;         /* add border after every option */
      }
      #actionAct-visNarrative-container #actionAct-vis-return{
        grid-area: 9 / 6 / 9 / 10;
        font-size: 3rem;
        place-self: end end;
        filter: url(#rgb);
        z-index: 5;
        cursor: pointer;
      }
      /* MAIN ACTION EXPLORER VISUALISATION BACKGROUND IMAGES */
        #actionAct-visBackground{
          width: 100%;
          height: 100%;   
          background-repeat: no-repeat;
          background-size: 100% 100%;  
          background: #000; 
        }
        #actionAct-visBackground #actionAct-actionImage{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;   
          background-size: cover;
          background-position: center;       
        }
        #actionAct-visBackground #actionAct-actionImage-filter-1,
        #actionAct-visBackground #actionAct-actionImage-filter-2{
          display: block;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-size: cover;        
        }
      /* DATA TABLE STYLING */
      #actionAct-visNarrative-container #bc-dataTable-container{
        grid-area: 4 / 2 / 10 / 10; 
        height: 100%;
        -webkit-perspective: 1500px;
        perspective: 1500px;
        overflow: scroll;
        z-index: 2;             
      }
      #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container{
        width: calc(100% - 2rem);
        padding: 1rem;   
        overflow: scroll;
        -webkit-transition: -webkit-transform 0.4s;
        transition: transform 0.4s;                
      }
      /* Data tables perpsectives */
      #actionAct-visNarrative-container #bc-dataTable-container .perspective.bc-data-container {
        -webkit-transform: translateZ(-1500px) translateX(100%) translateY(0%) rotateY(-45deg);
        transform: translateZ(-1500px) translateX(100%) translateY(0%) rotateY(-45deg);
      } 
      #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container{
        margin-bottom: 2rem;      
      }
      #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .header{      
        font-size: 1.25rem;
        position: relative;
        left: 0;
      }
      #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .subHeader{
        font-size: 0.75rem;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
      }
      #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .subHeader.referenceCase{
        margin-top: 1.5rem;
      }
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable{
        display: grid;
        overflow-x: scroll;
      }
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable > span{
        padding: 0.1rem;    
      }    
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .modelYearRow{
       border-bottom: 1px solid black;      
      }        
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .tableHeaderRow{  
        font-weight: bold;     
      }    
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .tableCell.tableSubHeaderRow{
        padding-top: 1rem;
        font-weight: bold;     
      }    
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .tableCell{
        font-size: 0.75vw; 
        padding-bottom: 0.2rem;
        padding-top: 0.2rem;
        text-align: right; 
      }  
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .titleColumn{
        text-align: left; 
        padding-left: 0.25rem;
      }  
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .titleColumn.tableSubHeaderRow, 
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .titleColumn.modelYearRow{
        padding-left: 0rem;
      }  
      /* Sparkline charts */
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .sparkline{
        stroke: #000;
        stroke-width: 2.5px;
        fill: none;
      }
      #actionAct-visNarrative-container #bc-dataTable-container .gridTable .sparkArea{
        stroke: none;
        fill: #000;
      }

  /****************************************************/
  /********* ACT III: EXPLORING THE "BATTLE"  *********/
  /****************************************************/
    #planAct-container{
      transition: all 500ms ease-in-out;
    }
    #planAct-container #plan-pane-1 {
      grid-area: paneA;
      perspective: 1500px;  
      transition: all 500ms ease-in-out;
      display: grid;
        grid-template-columns: 5% repeat(4, 21%) 10%; 
        grid-template-rows: 5% repeat(4, 22.5%) 5% ;  
    }
    #planAct-container #plan-pane-2 {
      grid-area: paneB;
      perspective: 1500px;  
      transition: all 500ms ease-in-out;
      display: grid;
        grid-template-columns: 5% repeat(4, 21%) 10%; 
        grid-template-rows: 5% repeat(4, 22.5%) 5% ;  
    }
    #planAct-container #plan-pane-3 {
      grid-area: paneC;
      perspective: 1500px;  
      transition: all 500ms ease-in-out;
      display: grid;
        grid-template-columns: 5% repeat(4, 22.5%) 5%; 
        grid-template-rows: 5% repeat(4, 22.5%) 5% ;  
    }

    /*********************************************/
    /*** VISUALISATION STORY CONTROLS <HEADER> ***/
    /*********************************************/
      #planAct-container .visHeader{
        display: grid;
          grid-template-columns: 10% 80% 10%; 
          grid-template-rows: 100%; 
        height: fit-content;
      }
      #planAct-container #plan-vis-costCurve-container #costCurve-header .visHeader #costCurvePrevious,
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header .visHeader #wedgesPrevious,    
      #planAct-container #plan-vis-playbook-container #playbook-header .visHeader #playbookPrevious{         
        grid-area: 1 / 1 / 1 / 1;
        align-self: center;
        cursor: pointer;
      }
      #planAct-container #plan-vis-costCurve-container #costCurve-header .visHeader #costCurveHeaderText,
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header .visHeader #wedgesChartHeaderText,       
      #planAct-container #plan-vis-playbook-container #playbook-header .visHeader #playbookHeaderText{        
        grid-area: 1 / 2 / 1 / 2;
        align-self: center;
        text-align:  center;         
      }   
      #planAct-container #plan-vis-costCurve-container #costCurve-header .visHeader #costCurveNext,
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header .visHeader #wedgesNext,   
      #planAct-container #plan-vis-playbook-container #playbook-header .visHeader #playbookNext{   
        grid-area: 1 / 3 / 1 / 3;
        align-self: center;
        cursor: pointer;
      }    
      #planAct-container #plan-vis-costCurve-container #costCurve-header div.costCurveButton,
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header div.wedgesButton,        
      #planAct-container #plan-vis-playbook-container #playbook-header div.playbookButton{        
        opacity: 0.25;
      } 
      #planAct-container #plan-vis-costCurve-container #costCurve-header div.costCurveButton:hover,
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header div.wedgesButton:hover,
      #planAct-container #plan-vis-playbook-container #playbook-header div.playbookButton:hover{
        opacity: 1;
      }

    /*************************************/
    /*** COST CURVE VISUALASTION STORY ***/
    /*************************************/
      #planAct-container #plan-vis-costCurve-container{
        grid-area: 2 / 2 / 6 / 6;
        display: grid;
          grid-template-columns: 10% repeat(4, 20%) 10%; 
          grid-template-rows: 10% repeat(4, 20%) 10%; 
          perspective: 1500px;          
      }
        #planAct-container #plan-vis-costCurve-container #costCurve-header{
          grid-area: 1 / 1 / 1 / 4;
          z-index: 5;   
        }
        #planAct-container #plan-vis-costCurve-container svg#costCurve{
          grid-area: 2 / 1 / 6 / 7;
          color: #fff; 
          z-index: 1;   
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-narrative-container{
          grid-area: 2 / 2 / 4 / 6;
          z-index: 2;   
          transform-origin: 50% 150%;
          height: fit-content;
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-narrative-container #costCurve-narrative{
          transition: transform 0.8s;
          height: 100%;
          opacity: 0;
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-narrative-container #costCurve-narrative.perspective{
          -webkit-transform: translateZ(-500px) rotateX(80deg);
          transform: translateZ(-500px) rotateX(80deg);
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-options{
          grid-area: 1 / 1 / 6 / 4; 
          z-index: 2;           
          align-self: start;
          font-size: 0.5rem;
          display: none;
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-options select{
          font-size: 0.5rem;
        }
        #planAct-container #plan-vis-costCurve-container #costCurve-timeSelector-container{
          grid-area: 1 / 6 / 1 / 7; 
          z-index: 3;           
          align-self: end;
        }

    /* Time slider styling: with fallbacks */;
      #planAct-container #plan-vis-costCurve-container .slidecontainer {
        width: 100%; 
      }
      /* The slider itself */
      #planAct-container #plan-vis-costCurve-container .slider {
        -webkit-appearance: none; 
        appearance: none;
        width: 70%; 
        height: 5px; 
        background: #fff; 
        outline: none; 
        opacity: 0.7; 
        -webkit-transition: .2s; 
        transition: opacity .2s;
      }
      #planAct-container #plan-vis-costCurve-container .slider:hover {
        opacity: 1; 
      }
      #planAct-container #plan-vis-costCurve-container .slider::-webkit-slider-thumb {
        -webkit-appearance: none; 
        appearance: none;
        width: 10px; 
        height: 5px; 
        background: #000;
        cursor: pointer; 
      }
      #planAct-container #plan-vis-costCurve-container .slider::-moz-range-thumb {
        width: 5px; 
        height: 5px; 
        background: #000; 
        cursor: pointer; 
      }

    /******************************/
    /* Action viewer */
    /******************************/
      #planAct-container  #actionCostCurve-infoClose{
        cursor: pointer;
        background: #000;
        color: #fff;
      }
    /******************************/
    /* Plan narratives  */
    /******************************/
      #planAct-container #plan-vis-playbook-container #playbook-narrative #playbook-narrative-mainHeader{
        position: relative;
        top: 0;
        left: 0;
        height: 2rem;
        z-index: 2;
      }
      #planAct-container #plan-vis-playbook-container #playbook-narrative .plan-narrative-header{
        font-size: 1.25rem;
        font-weight: bold;
      }
      #planAct-container #plan-vis-playbook-container #playbook-narrative .plan-narrative-paragraph{
        font-size: 1rem;
      }

    /********************/
    /*** WEDGES CHART ***/
    /********************/
      #planAct-container #plan-vis-wedgesChart-container{
        grid-area: 2 / 2 / 6 / 6;
        display: grid;
        grid-template-columns: 10% repeat(4, 20%) 10%; 
        grid-template-rows: 10% repeat(4, 20%) 10%; 
        height: auto;
      }
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-header{
        grid-area: 2 / 4 / 2 / 6;
        z-index: 5;   
      }
      #planAct-container #plan-vis-wedgesChart-container svg#wedgesChart{
        grid-area: 2 / 1 / 7 / 7;
        z-index: 1;   
        align-self: center;
      }
      #planAct-container #plan-vis-wedgesChart-container #wedgesChart-narrative-container{
        grid-area: 5 / 2 / 7 / 6;
        z-index: 2;   
        transform-origin: 50% 150%;
        height: fit-content;
        align-self: end;
      }

    /******************************/
    /*** PLAYBOOK VISUALISATION ***/
    /******************************/
      #planAct-container #plan-vis-playbook-container{
        grid-area: 2 / 2 / 6 / 6;
        display: grid;
        grid-template-columns: 10% repeat(4, 20%) 10%; 
        grid-template-rows: 7.5% repeat(4, 20%) 10% 2.5%;
        height: auto;
        scroll-behavior: smooth;
      }
      #planAct-container #plan-vis-playbook-container #playbook-header{
        grid-area: 1 / 1 / 1 / 4;
        z-index: 5;   
      }
      #planAct-container #plan-vis-playbook-container div#playbook-container{
        grid-area: 2 / 1 / 7 / 7;
        z-index: 1;   
        overflow-x: scroll;
        overflow-y: hidden;
        height: 98%;
        align-self: end;
      }
      #planAct-container #plan-vis-playbook-container #playbook-narrative{
        grid-area: 7 / 2 / 8 / 8;
        z-index: 5;   
        background-color: white;
        padding: 0.5rem;
        height: fit-content;
        align-self: center       
      }
      #planAct-container #plan-vis-playbook-container #playbook-narrativeDetail{
        grid-area: 2 / 5 / 8 / 8;
        z-index: 5;   
        background-color: white;
        height: fit-content;
        font-weight: 0.8rem;    
        -webkit-transform: translateX(50%) rotateZ(-7deg) rotateY(-45deg) translateZ(200px);
        transform: translateX(50%) rotateZ(-7deg) rotateY(-45deg) translateZ(200px) translateY(-10%);         
      }