/* ============================================================
   Shroff handbooks summary table (/page/shroffs)
   ============================================================
   Styles the fragment generated by scripts/build-shroff-table.mjs into
   content/pages/shroffs/handbooks-table.html, which templates/page.php
   substitutes at the page's {{include:handbooks-table.html}} token.

   The cream panel deliberately reproduces .clc-panel from
   public/css/chopmark-lookup.css (background/border/radius/padding/margin) so
   the two pages read as one site. It is COPIED, not shared: chopmark-lookup.css
   is the whole matcher stylesheet — canvas, worker status, result tiles,
   variant grids — and loading all of it on a prose page to borrow five
   declarations would be the wrong trade. If the lookup panels are ever
   restyled, these five values are what to bring across.

   Colours are checked against the #fdfbf5 panel: body text #2c2418 (~14:1),
   muted #6f6149 (~5.8:1), the Yes green #4e6b32 (~6:1) — all above the 4.5:1
   text threshold, and none of them the sole carrier of meaning (the Digitized
   cell says "Yes" or "No" in words). */

.shroff-handbooks {
  background: #fdfbf5;
  border: 1px solid #d8cdb6;
  border-radius: 12px;
  padding: 1.3rem 1.5rem 1.5rem;
  margin: 1.6rem 0;
}

/* The table scrolls inside THIS box, never the page. Without the explicit
   min-width:0 a wide table can force the panel itself wider than its parent in
   some layout contexts, which is precisely the sideways page scroll this is
   here to prevent. role+tabindex make the scroll region reachable by keyboard,
   which a bare overflow container is not. */
.shroff-handbooks-scroll {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}
.shroff-handbooks-scroll:focus-visible {
  outline: 2px solid #b08a3e;
  outline-offset: 3px;
  border-radius: 4px;
}

.shroff-handbooks-table {
  border-collapse: collapse;
  width: 100%;
  /* Below this the five columns stop being readable, so the container scrolls
     instead of crushing them. Set in rem so it tracks the user's text size. */
  min-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #2c2418;
  text-align: left;
}

/* Named for screen readers; the visible heading and the owner's prose above
   the table already say this on screen. */
.shroff-handbooks-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.shroff-handbooks-table thead th {
  padding: 0 1rem 0.55rem 0;
  vertical-align: bottom;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6f6149;
  border-bottom: 1px solid #d8cdb6;
  white-space: nowrap;
}

.shroff-handbooks-table tbody th,
.shroff-handbooks-table tbody td {
  padding: 0.8rem 1rem 0.8rem 0;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid #ece4d3;
}
.shroff-handbooks-table tbody tr:last-child th,
.shroff-handbooks-table tbody tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Last column carries no trailing gutter, so the panel padding does the work. */
.shroff-handbooks-table th:last-child,
.shroff-handbooks-table td:last-child {
  padding-right: 0;
}

/* Column width hints. `table-layout` stays `auto` so a long CJK holder name can
   still claim the room it needs; these are preferences, not caps. Without them
   auto layout hands almost everything to Contents (much the longest text) and
   squeezes the three-line title cell to a word per line. */
.shroff-handbooks-table th:nth-child(1) { width: 21%; }
.shroff-handbooks-table th:nth-child(2) { width:  8%; }
.shroff-handbooks-table th:nth-child(3) { width: 42%; }
.shroff-handbooks-table th:nth-child(4) { width: 21%; }
.shroff-handbooks-table th:nth-child(5) { width:  8%; }

/* ---- Title cell: Chinese title, English gloss, romanisation -------------- */
.shroff-handbooks-table .sh-title {
  min-width: 11rem;
}
.sh-zh {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.sh-en {
  display: block;
  margin-top: 0.2rem;
  line-height: 1.35;
}
.sh-rom {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #6f6149;
}

.sh-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shroff-handbooks-table .sh-contents {
  /* The widest column by content, and the one worth the most space. */
  min-width: 18rem;
}

/* ---- Holder: principal holder, then the rest -----------------------------*/
.shroff-handbooks-table .sh-held {
  min-width: 10rem;
}
.sh-held-main {
  display: block;
}
.sh-held-more {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #6f6149;
}

.sh-dig {
  white-space: nowrap;
  font-weight: 600;
}
.sh-dig--yes { color: #4e6b32; }
.sh-dig--no  { color: #6f6149; }

/* ---- Scroll hint --------------------------------------------------------- */
/* Real markup rather than a ::after, so it is in the accessibility tree; hidden
   at widths where the table fits and nothing scrolls. */
.shroff-handbooks-hint {
  display: none;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: #6f6149;
}

@media (max-width: 860px) {
  .shroff-handbooks-hint { display: block; }
}

@media (max-width: 600px) {
  .shroff-handbooks {
    padding: 1rem 1rem 1.1rem;
    margin: 1.2rem 0;
    border-radius: 10px;
  }
  .shroff-handbooks-table {
    font-size: 0.9rem;
    min-width: 42rem;
  }
  .shroff-handbooks-table thead th,
  .shroff-handbooks-table tbody th,
  .shroff-handbooks-table tbody td {
    padding-right: 0.75rem;
  }
  .sh-zh { font-size: 1.05rem; }
}