/* Single-page protein entry (protein-page.js), plugin pages and the home page.
 * UniProt / InterPro reading pattern: white sections separated by rules, one
 * accent colour, compact tables, no cards inside sections. Module stylesheets
 * read --accent, --rule and --label, which alias the tokens in styles.css. */

.entry-page .entry-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
/* Section menu: entry.css (grouped links, counts, scroll-spy; select <= 900 px). */

.entry-page .entry-section {
  margin: 0;
  padding: 18px 0 14px;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
}
.entry-page .entry-section > h2 {
  margin: 0 0 10px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}
.entry-page .entry-summary { padding-top: 0; }
.entry-page .entry-section.hidden { display: none; }
.entry-page .entry-section > h2 .section-count { margin-left: 8px; font-size: 13px; }

/* Nested module wrappers become plain subsections. */
.entry-page .entry-section .database-section,
.entry-page .entry-section .summary-section {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.entry-page .entry-section .database-section .section-heading { margin: 0 0 6px; padding: 0; border: 0; background: none; }
.entry-page .entry-section .database-section .section-heading h2,
.entry-page .entry-section .summary-section h2 { margin: 0; padding: 0; border: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.entry-page .entry-section .database-section .section-heading p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.entry-page .entry-section .database-section .section-count { color: var(--ink-soft); font-weight: 400; }
.entry-page .entry-section .database-section .section-body { padding: 0; }
.entry-page .record-layout { display: block; }
.entry-page .record-side-column { display: block; }

/* Summary table */
.entry-summary-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-summary-table th { width: 170px; padding: 5px 12px 5px 0; color: var(--ink-soft); text-align: left; vertical-align: top; font-weight: 400; border-bottom: 1px solid var(--line-soft); }
.entry-summary-table td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.entry-summary-table tr:first-child td strong { color: var(--ink); font-size: 15px; font-weight: 600; }

/* Tables */
.entry-page .measure-table, .entry-page .entry-table { font-size: 13px; }
.entry-page .measure-table th, .entry-page .entry-table th { color: var(--ink); font-weight: 600; letter-spacing: 0; text-transform: none; }
.entry-page .measure-notable td { background: none; }
.entry-page .entry-table.compact th { width: 170px; padding: 5px 12px 5px 0; vertical-align: top; color: var(--ink-soft); font-weight: 400; border-top: 0; border-bottom: 1px solid var(--line-soft); background: none; }
.entry-page .entry-table.compact thead th { width: auto; padding: 6px 10px; color: var(--ink); font-weight: 600; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.entry-page .entry-table.compact td { border-bottom: 1px solid var(--line-soft); }

/* Notes: one line, secondary; method text lives in <details class="about"> */
.entry-page .summary-caption, .entry-page .entry-note { margin: 6px 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.entry-page details.about { margin: 8px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.entry-page details.about > summary { width: fit-content; color: var(--teal); cursor: pointer; }
.entry-page details.about[open] > summary { margin-bottom: 4px; }
.entry-page .notice { padding: 4px 0 4px 10px; border: 0; border-left: 3px solid var(--orange); border-radius: 0; background: none; font-size: 13px; }

/* Badges and chips: square, bordered, 12px */
.entry-page .ev-badge { border-radius: 2px; font-family: var(--mono); font-size: 12px; }
.entry-page .entry-chip { border-radius: 2px; font-size: 12.5px; }
.entry-page .go-filter { padding: 3px 10px; border-radius: var(--radius); font-size: 13px; }
.entry-page .go-filter.active { color: var(--ink); border-color: var(--teal); background: var(--teal-soft); }
.entry-page .go-column h3 { color: var(--ink); font-size: 14px; letter-spacing: 0; text-transform: none; }

@media print {
  .entry-page .entry-toc, .utility-bar, .database-header, .record-navigation, .workspace-tabs, .record-actions, .structure-stage, .agent-launcher, .database-footer { display: none !important; }
  .entry-page .entry-layout { display: block; }
  .entry-page details { display: block; }
  .entry-page details > * { display: block !important; }
}

/* Life-cycle heat strip (toxodb.js stageSection) */
.stage-heatmap { width: 100%; border-collapse: collapse; }
.stage-heatmap th { width: 290px; padding: 5px 14px 5px 0; color: var(--ink); text-align: left; vertical-align: top; font-size: 13px; font-weight: 400; }
.stage-heatmap th small { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.stage-heatmap td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.hm-row { display: flex; flex-wrap: wrap; gap: 3px; }
.hm-cell { display: inline-flex; flex-direction: column; justify-content: space-between; min-width: 74px; max-width: 120px; height: 40px; padding: 3px 6px; border-radius: 0; background: #f1f4f5; cursor: help; }
.hm-label { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hm-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-cell.lvl-1 { color: #44585e; background: #eef4f4; }
.hm-cell.lvl-2 { color: #2c4a4f; background: #cfe3e2; }
.hm-cell.lvl-3 { color: #1c3a3e; background: #92c2bd; }
.hm-cell.lvl-4 { color: #fff; background: #3f8f89; }
.hm-cell.lvl-5 { color: #fff; background: #0b5c62; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; }
.hm-key { display: inline-block; width: 14px; height: 10px; margin-left: 8px; border-radius: 0; }
.hm-key:first-child { margin-left: 0; }
.hm-key.lvl-1 { background: #eef4f4; } .hm-key.lvl-2 { background: #cfe3e2; } .hm-key.lvl-3 { background: #92c2bd; } .hm-key.lvl-4 { background: #3f8f89; } .hm-key.lvl-5 { background: #0b5c62; }
.entry-page details.about-more { margin-top: 8px; font-size: 13px; }
.entry-page details.about-more > summary { color: var(--teal); cursor: pointer; }

/* Threshold highlight in phenotype tables: a thin left rule, value in weight 600. */
.entry-page .measure-table tr.measure-notable td { background: transparent; }
.entry-page .measure-table tr.measure-notable td:first-child { box-shadow: inset 2px 0 0 var(--teal); }
.entry-page .measure-table tr.measure-notable td:last-child { color: var(--ink); font-weight: 600; }

/* References and comments */
.entry-page .entry-sub { margin: 4px 0 6px; color: var(--ink); font-size: 15px; font-weight: 600; }
.entry-page .entry-sub small { margin-left: 4px; color: var(--ink-soft); font-weight: 400; }
.ref-list { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.ref-list li { margin: 0 0 6px; }
.ref-list.plain { padding-left: 0; list-style: none; }
.ref-list .ref-title { display: block; color: var(--ink); }
.ref-list .ref-meta { display: block; color: var(--ink-soft); font-size: 12.5px; }
.entry-summary-table .name-src { margin-left: 6px; color: var(--ink-soft); font-size: 12.5px; font-weight: 400; }

/* ---------- Home page ---------- */
.home-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; max-width: 1200px; }
.home-section { min-width: 0; padding: 0 0 22px; border-top: 0; }
.home-section h2 { margin: 0 0 8px; padding: 0 0 5px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 600; }
.home-wide { grid-column: 1 / -1; }
.home-counts { width: 100%; table-layout: auto; }
.home-page .home-counts th,
.home-page .home-counts td { padding: 5px 10px 5px 0; color: var(--ink); font-weight: 400; border-top: 0; border-bottom: 1px solid var(--line-soft); background: none; }
.home-page .home-counts tr.home-count-sub td:first-child { padding-left: 18px; color: var(--ink-soft); }
.home-page .home-counts tr.home-count-ptype td { padding-top: 3px; padding-bottom: 3px; }
.home-page .home-counts tr.home-count-ptype td:first-child { padding-left: 34px; }
.home-page .home-counts tr.home-count-ptype-head td.num a { font-weight: 400; white-space: nowrap; }
.home-counts td.num a.home-count-link { font-weight: 600; font-variant-numeric: tabular-nums; }
.home-counts td.num { text-align: right; }
.home-counts td.num .text-button { padding: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-examples { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; }
.home-examples .text-button { padding: 0; font-size: 14px; }
.home-examples small { color: var(--ink-soft); font-size: 12.5px; }
.home-page .entry-note, .home-page .summary-caption { color: var(--ink-soft); font-size: 12.5px; }
.home-page .measure-table th { letter-spacing: 0; text-transform: none; }
/* Browse and tools: a plain link list in up to four columns. */
.home-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.home-tools li { min-width: 0; }
.home-tools small { display: block; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 1100px) { .home-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .home-page { grid-template-columns: 1fr; }
  .home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .home-tools { grid-template-columns: 1fr; } }

.entry-page .measure-dataset { margin-bottom: 20px; }
.entry-page .rows-toggle { margin-top: 6px; }
.entry-page .measure-correction { padding-left: 8px; border-left: 2px solid var(--orange); }
.entry-page .go-redundant { margin-left: 12px; }
.entry-page .go-toolbar .go-redundant:first-of-type { margin-left: auto; }
.entry-page .structure-stage.collapsed { justify-content: flex-start; height: auto; padding: 14px; border-style: solid; background: transparent; }
.entry-page .structure-load { padding: 5px 14px; border-radius: var(--radius); font-size: 13.5px; }
.entry-page .relationship-fill { background: var(--teal) !important; }
.entry-page .relationship-track { height: 6px; }
.entry-page .measure-table th.num, .entry-page .entry-table th.num { text-align: right; }


/* Narrow screens (<= 900 px): the section menu is a select (entry.css) and
 * the main column takes the full width. Wide tables scroll inside their own
 * box instead of widening the page. */
@media (max-width: 900px) {
  .entry-page .entry-layout { display: block; }
  .entry-page .entry-main { min-width: 0; max-width: 100%; }
  .entry-summary-table, .entry-summary-table tbody, .entry-summary-table tr { display: block; width: 100%; }
  .entry-summary-table th { display: block; width: auto; padding: 6px 0 0; border-bottom: 0; }
  .entry-summary-table td { display: block; padding: 1px 0 6px; overflow-wrap: anywhere; }
  .entry-page .entry-table.compact th { width: auto; min-width: 96px; }
  .entry-page .entry-section { overflow-wrap: break-word; }
}
/* Tables never widen the entry column; they scroll horizontally instead.
 * On narrow screens every table inside an entry section becomes its own
 * horizontal scroll box (display:block keeps the table semantics for the
 * rows while letting the box clip). */
.entry-page .entry-main { min-width: 0; }
.entry-page .entry-section table.measure-table.compact { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  .entry-page .entry-section table:not(.entry-summary-table):not(.stage-heatmap) { display: block; max-width: 100%; overflow-x: auto; }
}
.entry-page .stage-heatmap th { width: auto; max-width: 290px; }
@media (max-width: 600px) {
  .stage-heatmap, .stage-heatmap tbody, .stage-heatmap tr, .stage-heatmap th, .stage-heatmap td { display: block; width: 100%; max-width: none; }
  .stage-heatmap th { padding-bottom: 2px; border: 0; }
  .hm-cell { min-width: 64px; }
}
.hm-gene { display: block; color: var(--teal); font-size: 12px; font-weight: 600; }

/* Home tables wrap labels instead of overflowing on phones. */
@media (max-width: 600px) {
  .home-page .entry-table.compact th, .home-page .entry-table.compact td { width: auto; white-space: normal; overflow-wrap: break-word; }
  .home-page .measure-table { display: block; overflow-x: auto; }
}
.unknown-view { margin: 0 0 16px; }