svg#defs
  symbol#hinge
    line(x1='50%', y1='50%', x2='50%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='0', y1='50%', x2='50%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%") 

svg#defs
  symbol#hinge-2
    line(x1='50%', y1='50%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='50%', y1='100%', x2='50%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")

svg#defs
  symbol#vertical
    line(x1='50%', y1='100%', x2='50%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    
svg#defs
  symbol#vertical-down
    line(x1='50%', y1='100%', x2='50%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='45%', y1='68%', x2='50%', y2='100%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='55%', y1='68%', x2='50%', y2='100%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")

svg#defs
  symbol#vertical-up
    line(x1='50%', y1='100%', x2='50%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='45%', y1='30%', x2='50%', y2='10%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    line(x1='55%', y1='30%', x2='50%', y2='10%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    
svg#defs
  symbol#horizontal
    line(x1='0%', y1='50%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%")
    
svg#defs
  symbol#horizontal-left
    line(x1='0%', y1='50%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='35%', y1='30%', x2='0', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='35%', y1='70%', x2='0', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")

svg#defs
  symbol#horizontal-right
    line(x1='0%', y1='50%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='70%', y1='30%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='70%', y1='70%', x2='100%', y2='50%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")

svg#defs
  symbol#quad-1
    line(x1='0%', y1='100%', x2='100%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    
svg#defs
  symbol#quad-2
    line(x1='0%', y1='0%', x2='100%', y2='100%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")

svg#defs
  symbol#quad-3
    line(x1='0%', y1='0%', x2='100%', y2='100%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")

svg#defs
  symbol#quad-4
    line(x1='0%', y1='100%', x2='100%', y2='0%', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")

svg#defs
  symbol#angle
    line(x1='0', y1='100%', x2='100%', y2='0', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='65%', y1='0', x2='100%', y2='0', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
    line(x1='100%', y1='45%', x2='100%', y2='0', style='stroke-width: 1px;' stroke="blue" width="100%" height="100%" x="0px" y="0px")
  

.notice
  h1 CSS Grid Responsive Flowchart Demo
  p 
    = "NB: This will look like a garbled mess without CSS Grid support. Take a look at this in " 
    a(href="https://www.google.co.uk/chrome/browser/canary.html") Chrome Canary
    = " or "
    a(href="https://nightly.mozilla.org/") Firefox Nightly 
    = " to see it in action."

.diagram.gr.flow
  .cell.row-1.col-5.brackets
    .layer
      svg.liner.hinge
        use(xlink:href='#hinge-2')
  
  .cell.row-1.col-6.center
    svg.liner.vertical
      use(xlink:href='#vertical')
    svg.liner.horizontal
      use(xlink:href='#horizontal')
  
  .cell.row-1.col-7.center
    svg.liner.vertical
      use(xlink:href='#vertical')
    svg.liner.horizontal
      use(xlink:href='#horizontal')
  
  .cell.row-1.col-8.center
    svg.liner.vertical
      use(xlink:href='#vertical')
    svg.liner.horizontal
      use(xlink:href='#horizontal')
  
  .cell.row-1.col-9.box.brackets
    .layer
      label 
        | Recover   
        span.br password
        
  .cell.row-1.col-11.box.brackets
    .layer
      label Onboarding
  
  .cell.row-1.col-13.btm
    .terminal.set
      label A
  
  .cell.row-1.col-15.box.brackets
    .layer
      label 
        | Profile  
        span.br view / edit
  
  .cell.row-2.col-5.center.brackets
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-left')
      
  .cell.row-2.col-9.brackets.center.nope.after
    svg.liner.vertical.up
      use(xlink:href='#vertical-up')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-2.col-11.brackets.center.nope.after
    svg.liner.vertical.up
      use(xlink:href='#vertical-up')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-2.col-12.brackets

  .cell.row-2.col-13.center.brackets
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-left')

  .cell.row-2.col-14.brackets
    svg.liner.angle
      use(xlink:href='#angle')

  .cell.row-3.col-1.center.start
    .terminal
      label S
      
  .cell.row-3.col-2.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-3.box.brackets
    .layer
      label
          | Landing 
          span.br
            | Page

  .cell.row-3.col-4.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-5.box.brackets
    .layer
      label Sign in

  .cell.row-3.col-6.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-7.brackets.choice
    .layer
      label Recognised email?
    .layer
      .quad
        svg.liner
          use(xlink:href='#quad-1')
      .quad
        svg.liner
          use(xlink:href='#quad-2')
      .quad
        svg.liner
          use(xlink:href='#quad-3')
      .quad
        svg.liner
          use(xlink:href='#quad-4')

  .cell.row-3.col-8.center.yes
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-9.brackets.choice
    .layer
      label Recognised password?
    .layer
      .quad
        svg.liner
          use(xlink:href='#quad-1')
      .quad
        svg.liner
          use(xlink:href='#quad-2')
      .quad
        svg.liner
          use(xlink:href='#quad-3')
      .quad
        svg.liner
          use(xlink:href='#quad-4')

  .cell.row-3.col-10.center.yes
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')

  .cell.row-3.col-11.brackets.choice
    .layer
      label Is all mandatory information entered?
    .layer
      .quad
        svg.liner
          use(xlink:href='#quad-1')
      .quad
        svg.liner
          use(xlink:href='#quad-2')
      .quad
        svg.liner
          use(xlink:href='#quad-3')
      .quad
        svg.liner
          use(xlink:href='#quad-4')

  .cell.row-3.col-12.center.yes
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-13.box.brackets
    .layer
      label Dashboard / View previous receipts
  
  .cell.row-3.col-14.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-3.col-15.box.brackets
    .layer
      label Create new reciept
  
  .cell.row-3.col-16.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
  
  .cell.row-3.col-17.box.brackets
    .layer
      label
          | Complete   
          span.br form

  .cell.row-3.col-18.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')

  .cell.row-3.col-19.brackets.choice
    .layer
      label
          | Review  
          span.br OK?
          
    .layer
      .quad
        svg.liner
          use(xlink:href='#quad-1')
      .quad
        svg.liner
          use(xlink:href='#quad-2')
      .quad
        svg.liner
          use(xlink:href='#quad-3')
      .quad
        svg.liner
          use(xlink:href='#quad-4')

  .cell.row-3.col-20.center.yes
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')

  .cell.row-3.col-21.box.brackets
    .layer
      label
          | Send 
          span.br summary

  .cell.row-3.col-22.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')

  .cell.row-3.col-23.center.end
      .terminal.set
        label A
      
  .cell.row-4.col-5.center.brackets
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-4.col-7.center.brackets.nope.before
    svg.liner.vertical.down
      use(xlink:href='#vertical')
    svg.liner.horizontal
      use(xlink:href='#horizontal')
      
  .cell.row-4.col-13.center.brackets
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-4.col-14.brackets
    svg.liner.angle
      use(xlink:href='#angle')
  
  .cell.row-4.col-16.brackets

  .cell.row-4.col-17.brackets.center
    svg.liner.vertical.up
      use(xlink:href='#vertical-up')
    svg.liner.horizontal
      use(xlink:href='#horizontal-right')
      
  .cell.row-4.col-19.center.brackets.nope.before
    svg.liner.vertical.down
      use(xlink:href='#vertical')
    svg.liner.horizontal
      use(xlink:href='#horizontal')


  .cell.row-4.col-21.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-left')

  .cell.row-5.col-5.box.brackets
    .layer
      label Sign up

  .cell.row-5.col-6.center
    svg.liner.vertical.down
      use(xlink:href='#vertical-down')
    svg.liner.horizontal
      use(xlink:href='#horizontal-left')

  .cell.row-5.col-7.brackets
    .layer
      svg.liner.hinge.hinge-b
        use(xlink:href='#hinge')

  .cell.row-5.col-13.box.brackets
    .layer
      label Log out
  
  .cell.row-5.col-15.box.brackets
    .layer
      label View / create from existing

  .cell.row-5.col-16.center
    
  .cell.row-5.col-17.box.brackets
    .layer
      label Edit

  .cell.row-5.col-18.center
    svg.liner.vertical.up
      use(xlink:href='#vertical-up')
    svg.liner.horizontal
      use(xlink:href='#horizontal-left')

  .cell.row-5.col-19.brackets
    .layer
      svg.liner.hinge.hinge-b
        use(xlink:href='#hinge')

  .cell.row-5.col-21.box.dashed.brackets
    .layer
      label Send to inbox

$h-width-cell:      4fr
$h-width-gutter:    20px
$h-width-terminal:  20px
$v-width-cell:      40px
$v-width-gutter:    20px
$v-width-terminal:  25px

body
  margin: 0
  padding: 0
  background: #eee
  font-family: 'Roboto mono'

label
  padding: 0
  margin: 0
  font-size: 11px
  color: blue

.notice
  padding: 1em 1em 2em 1em
  background: #fffb99
  h1, p
    font-family: "Roboto"
    padding: 0
    margin: 0
  h1
    font-weight: 500
    font-size: 26px
  p
    font-size: 12px
    line-height: 16px
    max-width: 300px
    margin-top: 2em

svg#defs
  display: none 

svg.liner
  width: 100%
  height: 100%
  
  &.horizontal
    height: 20px
 
  &.vertical
    height: 20px

.terminal
  margin:           auto
  display:          block
  height:           20px
  width:            20px
  line-height:      15px
  border-radius:    50%
  border: 1px solid rgba(0,0,255,0.3) 
  text-align:       center
  transition:       color ease 200ms, background ease 200ms
  &.set
    background:     blue
    label
      color:          white
    


.diagram.gr.flow
  display: grid
  grid-template-columns: $h-width-terminal $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-cell $h-width-gutter $h-width-terminal
  grid-template-rows: 60px 20px 60px 20px 60px
  line-height: 0
  margin: 3em 1em
  
  span.br
    display: block 
  .col-1
    grid-column: 1 / 2
  .col-2
    grid-column: 2 / 3
  .col-3
    grid-column: 3 / 4
  .col-4
    grid-column: 4 / 5
  .col-5
    grid-column: 5 / 6
  .col-6
    grid-column: 6 / 7
  .col-7
    grid-column: 7 / 8
  .col-8
    grid-column: 8 / 9
  .col-9
    grid-column: 9 / 10
  .col-10
    grid-column: 10 / 11
  .col-11
    grid-column: 11 / 12
  .col-12
    grid-column: 12 / 13
  .col-13
    grid-column: 13 / 14
  .col-14
    grid-column: 14 / 15
  .col-15
    grid-column: 15 / 16
  .col-16
    grid-column: 16 / 17
  .col-17
    grid-column: 17 / 18
  .col-18
    grid-column: 18 / 19
  .col-19
    grid-column: 19 / 20
  .col-20
    grid-column: 20 / 21
  .col-21
    grid-column: 21 / 22
  .col-22
    grid-column: 22 / 23
  .col-23
    grid-column: 23 / 24
  .row-1
    grid-row: 1 / 2
  .row-2
    grid-row: 2 / 3
  .row-3
    grid-row: 3 / 4
  .row-4
    grid-row: 4 / 5
  .row-5
    grid-row: 5 / 6
      
  .cell
    width: 100%
    text-align: center
    align-self: stretch
    
    label
      font-size: 9px
      line-height: 11px


    &.nope.after::after
      font-size: 8px
      font-weight: bold
      z-index: 99999999 
      display: block
      content: "N"
      color: red
      padding-left: 3em
      
    &.nope.before::before
      font-size: 8px
      font-weight: bold
      z-index: 99999999 
      display: block
      content: "N"
      color: red
      padding-left: 3em
      
    &.yes::before
      content: "Y"
      color: green
      margin-left: -6px
      font-size: 8px
      font-weight: bold
      z-index: 99999999 
      display: block

    &.start
      .terminal
        margin-right: 0

    &.end
      .terminal
        margin-left: 0

    &.center
      align-self: center
    &.box
      outline: 1px solid blue
      &.dashed
        outline-style: dashed
    
    &.choice
      .layer
        .quad
          opacity: 0.3

    &.brackets
      position: relative
      .layer
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        display: flex
        flex-flow: row wrap
        text-align: center
        justify-content: center
        
        label
          align-self: center
          text-align: center
          padding: 3px
        .quad
          width: 50%
          height: 50%

  .cell.btm
    align-self: end

  .cell.row-2,
  .cell.row-4
    svg.liner.horizontal
      display: none

  .cell.row-1,
  .cell.row-3,
  .cell.row-5
    svg.liner.vertical
      display: none

  .cell.row-4.col-16
    svg.liner.angle.se
      transform: scaleY(-1)


@media (max-width: 650px)
  .diagram.gr.flow
    display: grid
    grid-template-columns: auto 20px auto 20px auto
    grid-template-rows: $v-width-terminal $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-cell $v-width-gutter $v-width-terminal
    margin: 0 auto

    span.br
      display: inline

    .row-1
      grid-column: 5 / 6
    .row-2
      grid-column: 4 / 5
    .row-3
      grid-column: 3 / 4
    .row-4
      grid-column: 2 / 3
    .row-5
      grid-column: 1 / 2

    .col-1
      grid-row: 1 / 2
    .col-2
      grid-row: 2 / 3
    .col-3
      grid-row: 3 / 4
    .col-4
      grid-row: 4 / 5
    .col-5
      grid-row: 5 / 6
    .col-6
      grid-row: 6 / 7
    .col-7
      grid-row: 7 / 8
    .col-8
      grid-row: 8 / 9
    .col-9
      grid-row: 9 / 10
    .col-10
      grid-row: 10 / 11
    .col-11
      grid-row: 11 / 12
    .col-12
      grid-row: 12 / 13
    .col-13
      grid-row: 13 / 14
    .col-14
      grid-row: 14 / 15
    .col-15
      grid-row: 15 / 16
    .col-16
      grid-row: 16 / 17
    .col-17
      grid-row: 17 / 18
    .col-18
      grid-row: 18 / 19
    .col-19
      grid-row: 19 / 20
    .col-20
      grid-row: 20 / 21
    .col-21
      grid-row: 21 / 22
    .col-22
      grid-row: 22 / 23
    .col-23
      grid-row: 23 / 24

    .cell.btm
      align-self: center

    .cell.row-1.col-7
      align-self: stretch
      svg.liner.vertical
        height: 40px

    .cell.row-2.col-12
      svg.liner.angle.se
        transform: scaleX(-1)

    .cell.row-2.col-14
      svg.liner.angle.up
        transform: scaleX(-1)
        transform: scaleY(-1)
    
    .cell.row-4.col-14
      svg.liner.angle.se
        transform: scaleX(-1)

    svg.liner.hinge
      transform: scaleX(-1)

    .cell
      &.start,
      &.end
        .terminal
          margin: auto
    
    .cell.row-1.col-13
      .terminal.set
        margin-left: 0

    .cell.row-2,
    .cell.row-4
      svg.liner.horizontal
        display: block
          
    .cell.row-1,
    .cell.row-3,
    .cell.row-5
      svg.liner.vertical
        display: block

    .cell.row-2,
    .cell.row-4
      svg.liner.vertical
        display: none
          
    .cell.row-1,
    .cell.row-3,
    .cell.row-5
      svg.liner.horizontal
        display: none