/* Work sample pages. Loaded after /assets/site.css and uses its colour tokens. */

.work-page { padding-top: 36px; padding-bottom: 56px; }
.work-page h2 { font-size: 1.35rem; margin-top: 2em; }
.work-page h3 { font-size: 1.08rem; margin-top: 1.5em; }
.work-page ul { padding-left: 1.2em; }
.work-page li { margin-bottom: 6px; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}

.notice {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  margin: 16px 0;
}
.notice p:last-child { margin-bottom: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }

.meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0; font-size: 0.95rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }

.work-page .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.work-page .tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); margin: 0; }
.tile b { display: block; font-size: 1.6rem; line-height: 1.15; }
.tile span { font-size: 0.85rem; color: var(--muted); }

.table-wrap { overflow-x: auto; margin: 12px 0 20px; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data caption { text-align: left; color: var(--muted); font-size: 0.88rem; padding-bottom: 8px; }
table.data th, table.data td { border-bottom: 1px solid var(--border); padding: 10px 8px; text-align: left; vertical-align: top; }
table.data thead th { background: var(--surface-2); font-size: 0.85rem; }
table.data td.num { font-variant-numeric: tabular-nums; }
table.data tbody th[scope="row"] { overflow-wrap: normal; }
table.stack tbody th[scope="row"] { white-space: nowrap; }
table.data code { font-size: 0.85em; }

.sev { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sev-high { color: var(--fail); background: var(--fail-bg); }
.sev-medium { color: var(--warn); background: var(--warn-bg); }
.sev-low { color: var(--skip); background: var(--skip-bg); }
.sc { display: block; font-weight: 600; white-space: nowrap; }
.sc-name { display: block; color: var(--muted); font-size: 0.85rem; }

pre.output, pre.code {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 10px 0 18px;
}
pre code { background: none; padding: 0; font-size: inherit; }

details.more { margin: 12px 0 20px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; background: var(--surface); }
details.more summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
details.more[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }

.work-page .samples { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 16px; }
.work-page .samples li { margin: 0; }
.samples .card h2 { font-size: 1.2rem; margin: 0 0 6px; }
.samples .card p { margin: 0 0 10px; }
.samples .card p.small { font-size: 0.9rem; color: var(--muted); }

.sources { font-size: 0.9rem; }
.sources li { overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .work-page .tiles { grid-template-columns: repeat(4, 1fr); }
}

/* Findings table: stack each row on narrow screens. */
@media (max-width: 719px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack, table.stack caption, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  table.stack td, table.stack th { border-bottom: 0; padding: 4px 0; }
  table.stack td::before, table.stack th[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sc { white-space: normal; }
}