/* Topic cards on small screens. Desktop table, sorting and moderation remain. */
.ec-topic-list article { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .ec-thread-list, .ec-thread-list > tbody { display: block; width: 100%; }
  .ec-thread-list > tbody > tr { display: block; }
  .ec-thread-list > tbody > tr > td[colspan] { display: block; width: 100%; }
  .ec-thread-list .thead .float_right { float: none; margin-bottom: 6px; }
  .ec-thread-list > tbody > .ec-thread-columns { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; background: #f6f7f8; border-bottom: 1px solid #e1e7eb; }
  .ec-thread-list > tbody > .ec-thread-columns > td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .ec-thread-list > tbody > .ec-thread-row { display: grid; grid-template-columns: 20px minmax(0,1fr) minmax(0,1fr) 24px; gap: 5px 8px; padding: 14px 12px; border-bottom: 1px solid #e1e7eb; background: #fff; }
  .ec-thread-list .ec-thread-row > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; background: transparent; white-space: normal !important; text-align: left !important; overflow-wrap: anywhere; }
  .ec-thread-list .ec-thread-status { grid-column: 1; grid-row: 1; padding-top: 3px !important; }
  .ec-thread-list .ec-thread-icon { display: none; }
  .ec-thread-list .ec-thread-icon:has(img) { display: block; grid-column: 1; grid-row: 2; }
  .ec-thread-list .ec-thread-subject { grid-column: 2 / -1; grid-row: 1; font-size: 14px; line-height: 1.5; }
  .ec-thread-list .ec-thread-subject .subject_new { font-weight: 650; }
  .ec-thread-list .ec-thread-subject .smalltext { font-size: 12px; }
  .ec-thread-list .ec-thread-forum { grid-column: 2 / -1; grid-row: 2; font-size: 12px; }
  .ec-thread-list .ec-thread-replies { grid-column: 2; grid-row: 3; }
  .ec-thread-list .ec-thread-views { grid-column: 3; grid-row: 3; }
  .ec-thread-list .ec-thread-replies, .ec-thread-list .ec-thread-views { font-size: 12px; color: #64717c; }
  .ec-thread-list .ec-thread-replies::before, .ec-thread-list .ec-thread-views::before { content: attr(data-label) ": "; }
  .ec-thread-list .ec-thread-lastpost { grid-column: 2 / -1; grid-row: 4; font-size: 12px; }
  .ec-thread-list .ec-thread-lastpost br { display: none; }
  .ec-thread-list .ec-thread-lastpost br::after { content: " "; }
  .ec-thread-list .ec-thread-lastpost a { display: inline-block; margin-left: 3px; }
  .ec-thread-list .ec-thread-rating { grid-column: 2 / -1; grid-row: 5; }
  .ec-thread-list .ec-thread-select { grid-column: 4; grid-row: 3; align-self: start; }
  .ec-thread-list .ec-thread-select input { margin: 0; width: 20px; height: 20px; }
  .ec-thread-list .tfoot { padding: 12px; }
  .ec-thread-list .tfoot form { display: flex; flex-wrap: wrap; gap: 8px; }
  .ec-thread-list .tfoot form select { flex: 1 1 140px; min-width: 0; }
  .ec-thread-list .tfoot form select[name=sortby] { flex-basis: 100%; }
  .ec-thread-list .tfoot .float_right { float: none; margin-bottom: 8px; }
  .ec-thread-list .tfoot select { max-width: 100%; }
  .ec-account-layout, .ec-account-layout > tbody, .ec-account-layout > tbody > tr, .ec-account-layout > tbody > tr > td { display: block; width: 100%; min-width: 0; }
  .ec-account-layout > tbody > tr > td { padding-left: 0; padding-right: 0; }
  .ec-account-layout > tbody > tr > td + td { padding-top: 14px; }
}

/* Give the workshop directory a distinct, readable accent in the main menu. */
.ecu-nav nav a.ecu-recommended-workshops {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #d2b385;
  border-radius: 5px;
  background: #e6c89a;
  color: #28343e;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}
.ecu-nav nav a.ecu-recommended-workshops:hover {
  background: #efd9b6;
  border-color: #efd9b6;
  color: #28343e;
  text-decoration: underline;
}
.ecu-nav nav a.ecu-recommended-workshops:focus-visible {
  outline: 3px solid #f4dfbf;
  outline-offset: 3px;
}