/* Citability block table: Six-step time management plan (LSA style) */
:root{
  --link-color:#00a1ff;
  --border-color:#e1e5ea;
  --cell-padding:0.75rem;
  --font-base:0.95rem;
  --hover-bg:#f9fbfc;
}

/* Allow horizontal scroll on larger screens */
.table-container{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:1rem;
  border:0 !important;
}

/* Table core */
.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;
}

/* Column widths for citability block table */
.cmp-table--citability-block col.col-term{
  width:30%;
}
.cmp-table--citability-block col.col-definition{
  width:70%;
}

/* Header cells */
.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;
}

/* Callout next to technique heading */
.cmp-table thead th .technique-note{
  font-weight:400;
  font-size:0.85em;
}

/* Body cells */
.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;
}

/* Remove extra spacing from any wrapping paragraph that the theme might add */
.cmp-table--citability-block td > p{
  margin:0;
  padding:0;
}

/* Step lists in the table (kept for consistency with the example) */
.cmp-table--citability-block ol.steps{
  margin:0;
  padding-left:1.15rem;
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
  list-style-position:outside;
}
.cmp-table--citability-block td > p > ol.steps{
  margin:0;
  padding-left:1.15rem;
}
.cmp-table--citability-block ol.steps li{
  margin:0 0 0.15rem 0;
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
}

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

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

/* Desktop and tablet: keep as standard table with horizontal scroll if needed */
@media (min-width:769px){
  .cmp-table--citability-block td::before{
    content:none;
  }
}

/* Mobile layout: stack each row as a card and show labels per cell */
@media (max-width:768px){
  .table-container{
    overflow-x:visible;
  }

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

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

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

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

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

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

  .cmp-table--citability-block td[data-label="Term or Step"]{
    background:#fafafa;
    font-weight:600;
  }

  .cmp-table--citability-block td[data-label="Term or Step"]::before{
    font-size:0.8em;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }

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

  /* Keep step lists compact on mobile */
  .cmp-table--citability-block ol.steps{
    padding-left:1.25rem;
  }
}

/* Slight font size adjustment on very small screens */
@media (max-width:480px){
  .cmp-table{
    font-size:0.9rem;
  }
}