/* Pareto Principle ADHD quick reference table (LSA style) */
:root{
  --link-color:#00a1ff;
  --border-color:#e1e5ea;
  --cell-padding:0.75rem;
  --font-base:0.95rem;
  --hover-bg:#f9fbfc;
}

.table-container{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:1rem;
  border:0 !important;
}

.cmp-table{
  width:100%;
  font-size:var(--font-base);
  table-layout:fixed;
  border-collapse:separate !important;
  border-spacing:0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  font-family:inherit;
}

.cmp-table--citability col.col-fact{
  width:28%;
}
.cmp-table--citability col.col-details{
  width:44%;
}
.cmp-table--citability col.col-source{
  width:28%;
}

.cmp-table thead th{
  background:#fafafa;
  font-weight:600;
  padding:var(--cell-padding);
  border:1px solid var(--border-color);
  text-align:left;
  line-height:1.45;
  white-space:normal !important;
  word-break:keep-all;
  overflow:hidden;
}

.cmp-table td{
  padding:var(--cell-padding);
  border:1px solid var(--border-color);
  vertical-align:top;
  background:#fff;
  line-height:1.55;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  overflow:hidden;
  font-family:inherit;
}

.cmp-table--citability td > p{
  margin:0;
  padding:0;
}

.cmp-table tbody tr:hover td{
  background:var(--hover-bg);
}

.cmp-table a{
  color:var(--link-color);
}

@media (min-width:769px){
  .cmp-table--citability td::before{
    content:none;
  }
}

@media (max-width:768px){
  .table-container{
    overflow-x:visible;
  }

  .cmp-table--citability colgroup,
  .cmp-table--citability thead{
    display:none;
  }

  .cmp-table--citability,
  .cmp-table--citability tbody{
    display:block;
    width:100%;
  }

  .cmp-table--citability tr{
    display:block;
    margin-bottom:1rem;
    border:1px solid var(--border-color);
    border-radius:0.35rem;
    overflow:hidden;
  }

  .cmp-table--citability td{
    display:block;
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:1px solid var(--border-color);
  }

  .cmp-table--citability td:last-child{
    border-bottom:0;
  }

  .cmp-table--citability td::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    margin-bottom:0.25rem;
    color:#5e6a72;
  }

  .cmp-table--citability td[data-label="Pareto Principle and ADHD: Quick Reference"]{
    background:#fafafa;
    font-weight:600;
  }

  .cmp-table--citability td[data-label="Pareto Principle and ADHD: Quick Reference"]::before{
    font-size:0.8em;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }

  .cmp-table--citability tbody tr:hover td{
    background:#fff;
  }
}

@media (max-width:480px){
  .cmp-table{
    font-size:0.9rem;
  }
}