@view-transition {
    navigation: auto;
}
        
/*.panel{background: #ffffff; padding: 40px 20px 20px; border-radius: 40px; height: 100%; display: flex; flex-direction: column;}*/
.panel > h1, panel[main] h1{margin-bottom: 25px;font-size:55px; line-height: 1.1;}
.panel > p{font-size: 1.5rem; opacity: .6; padding-bottom: 50px; line-height: 1.4;}
.panelapps{display: flex; flex-direction: row; overflow: auto; gap: 10px; flex: 1;}

.panelapps{

  .block{display: flex;flex-direction: column; align-items: flex-start; }
  .block > h2{font-size:40px; line-height: 1.1; margin-bottom: 30px;}

  .cards{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 40px;
    overflow-x: auto;
    width: calc(100% + 100px);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: 1200px;
  }

  .cards > .card {
    position: relative;
    flex: 0 0 340px;
    border-radius: 30px;
    scroll-snap-align: center;
  }

  template + .card{background-color: #ffffff !important; }
}

.card > .sticky-top-right, .block > .sticky-top-right{opacity: 0; pointer-events: none; margin: -20px;}
.card:hover > .sticky-top-right,.block:hover > .sticky-top-right{opacity: .8; pointer-events: auto;}


.phable-nav{
  justify-items: center !important; justify-content: center; padding: 0; position: fixed; left: 50%; top: 21px; transform: translateX(-50%); z-index: 1;
    flex-wrap: nowrap; transition: var(--transition);

    &:hover{z-index: 9;}

    li .buttons{position: absolute; left: 0; top: 90%; opacity: 0; display: none;}
    
    li .buttons .button{
      width: max-content; background: #fff; box-shadow: 0 5px 15px 15px rgba(0,0,0,.05); 
      
      &:hover{transform: translateX(5px);}
    }
  &  > li{position: relative;}
  &  > li:hover .buttons{width: auto; opacity: 1; display: flex; gap: 5px; flex-direction: column;}
}
  .cards{gap: 20px;
        flex-wrap: nowrap;
        padding: 0 50px;
        margin-left: -50px;

        .card{padding: 40px; width: 150px; height: 150px; min-width: auto;}
  }

@media (min-width: 901px) {
  .block {
    padding: 50px 50px;
  }
  /*.panel{padding: 60px 70px 10px;}*/
  .block{flex: 1 1 320px; overflow: hidden;}
  .panel > h1{font-size:60px; margin-bottom: 20px;}
  .panel > p{padding-bottom: 20px;}
  .expanded .phable-card a{grid-template-rows: 80px auto auto 1fr auto 20px}
}

@media (max-width: 500px) {
    body{padding:5px 0;}
    panel[main]{padding: 50px 25px 200px 35px;}
    .phable-blocks .buttons{zoom: .9; gap: 15px;}
    .block{padding: 20px 30px; margin: 10px 0;}
    .card{
      width: 100px !important;
      overflow: hidden;
    }
    .expanded .cards{
      flex-direction: column;
      margin: 0 -10px;
      gap: 10px;

      .card{
        width: 100%;
      }
    }
}

panel[top]{
  padding-left: 0;
  padding-right: 0;
}

panel[main]{
  background-color: var(--color-field-bg);
}

panel[left]{
  left: -5px;
  background-color: var(--color-field-bg);
}
panel[left]:hover{
  left: 1px;
}

panel[left] .buttons{
  flex-direction: column;
}

.cat{display: block; text-transform: capitalize; opacity: .45;}

.phable-card{
    display: block; border-radius: 20px; overflow: auto; position: relative;

        > .title{display: block;font-size: 30px; line-height: 40px;}

        > .media{
            display: block; background-position: center center;
        }

        > .content{}

        > .remove-button{margin-left: 20px; position: absolute; top: 20px; right: 20px; opacity: 0; visibility: none;}
}

.phable-card:hover .remove-button{opacity: 1; visibility: visible;}

.media-detail, .phable-content{
display: block; 
grid-row-start: 3;  grid-row-end: 5; grid-column-start: 2; grid-column-end: 3; z-index: 0; 
max-width: 100%;
max-height: 100%;
justify-self: center;
align-self: center;
}

.media-detail{
    box-shadow: 0 0 150px 0 rgba(0,0,0,.6); 
    border-radius: 10px; 
}

.phable-content{
    max-width: 900px;
    max-height: 100%; overflow: auto;

    .description{
        opacity: 1;
        font-size: 20px;
        margin-bottom: 2em;
    }
}

/* add form widget */

label.add-form{ 
  margin-top: 20px; border-radius: 100px; background: #000; color: #fff; display: inline-flex; 
  
  input{background: transparent; border: 0; font-size: 1rem; border-radius: 100px;} 
}

label.add-form input { width: 0; opacity: 0; padding: 0; transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease; color: #fff;}

label.add-form:focus-within input:focus, label.add-form:focus-within input:first-child { width: 180px; opacity: 1; padding: 20px; outline: none; }
label.add-form:focus-within input:first-child{width: fit-contents;}

label.add-form .button{ background: transparent; }

label.add-form .button{ transform: scale(1.1); pointer-events: none; color: #fff; }

label.add-form:focus-within .button{ background: var(--color-bg-alt); transform: scale(1); margin: 10px;pointer-events: auto;}

.card label.add-form{ background: #f6f6f6; input{font-size: 1.15rem} } .card .add-form:focus-within .button{ background: #ffffff; }

.backdrop{
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  position: absolute;
  inset: -20px;
  z-index: 99;
  display: none;
}

dialog.add-form{
  z-index: 999;
  margin: auto;
  max-width: 360px;
  flex-direction: column;
  border-radius: 30px;
  padding: 30px;
  background: var(--color-bg-odd);
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  box-shadow: 0 80px 60px 70px rgba(0,0,0,.2);

  .pull-top-right{background: var(--color-bg-alt); margin-bottom: -50px;}

  input{
    padding: 2px 0px;
    background: transparent;
    color: #fff;
    border-radius: 5px;
    border: 0;
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }
  input[name="title"]{
    font-size: 30px;
    font-weight: bold;
  }
  input[type="file"]{
    display: none;
  }
  .addfile{
    background-color: var(--color-bg-alt);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    padding: 50px 20px;
    height: 300px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 30px;
    gap: 5px;
    border: 2px dashed rgba(255,255,255,.2);

    strong{
      font-size: 30px;
      line-height: 1.2;
    }
    span{opacity: .4; }
  }
  .add-button{
    font-size: 18px;
    padding: 15px 30px;
    margin-bottom: 10px;
  }
  .select-button{
    font-size: 18px;
    padding: 15px 30px;
    margin-right: 10px;
    background: var(--color-bg-alt);
  }
}

.toggle-checkbox:checked ~ dialog, .toggle-checkbox:checked ~ .backdrop, dialog.add-form[open]{
  display: block;
}

.add-button{
  background: #fff; color: #000;
  margin-top: 20px;
}

/* Hide native styling */
input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  top: -3px;
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: #ff0075;
  border-color: #ff0075;
}

/* Custom Checkmark */
input[type="checkbox"]:checked::before {
  content: '✔';
  position: absolute;
  color: white;
  font-size: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.simplelist{margin: 15px 0 0; font-size: 1.2rem; line-height: 1.3rem;}
.simplelist li{display: flex; gap: 10px; padding: 10px 0;}
.simplelist li .title{flex: 1;opacity: .8;}
.simplelist li input[type="checkbox"]:checked ~ span{opacity: .2; text-decoration: line-through;}
.simplelist li button{border: 0; background: transparent; padding: 0; font-size: 1.2rem; line-height: 1.3rem;opacity: 0; visibility: none; transition: all 0.2s; margin-top: -5px;}
.simplelist li:hover button{opacity: 1; visibility: visible;}

.outline{

  .block{
    /*border: 2px solid rgba(0,0,0,.1);*/
    border: 2px solid rgba(0,0,0,.05);
    overflow: auto;
    border-radius: 20px; margin: 0 0 10px;

    > .cards{
      gap: 30px;

      > .card{
        background-color: #fff;
        background-position: center center;
        background-size: cover;
        color: #000;
        border-radius: 15px;
        overflow: auto;
        flex: none;
        box-shadow: 0 10px 40px 0 rgba(0,0,0,.04);

        .card{
          display: block;
        }
      }
      

    }
  }
  
}

.outline.minimal .block{
    border-radius: 0;
    border: 0;
    padding-inline: 0;
    padding-block: 20px;
}


.outline.minimal .block + .block{
}

.card{
  overflow: hidden;

  .buttons{
    display: none;
  }
  .add-button{
    display: none;
  }
  .add-form{
    display: none;
  }
}

.expanded  .card{
  overflow: auto;

  .buttons{
    display: inline-flex;
  }
  .add-button{
    display: inline-flex;
  }
  .add-form{
    display: inline-flex;
  }
}