/* =============================================================================
   SectraTEK Lab: lab-0008.css
   Styles for LAB-0008 only (What the OfferUp app leaves on an iPhone). Loaded after research.css and oss.css.
   Tokens only; no inline styles; motion is not used. State is shown by text and shape, not by colour alone.

   Contents
     1  Figure 1: dated public record
     2  Figure 2: sale stages
     3  Figure 3: evidence explorer
     4  Figure 3 table fallback
     5  Table 2 (artifacts) and the sources table
     6  Figure 4: SVG type size
   ============================================================================= */

/* 1 Figure 1 ------------------------------------------------------------------- */
.of-tl { table-layout: fixed; width: 100%; min-width: 0; font-size: 0.9375rem; }
.of-tl th, .of-tl td { vertical-align: top; padding: var(--space-4); line-height: 1.5; overflow-wrap: anywhere; }
.of-tl thead th { font-size: var(--text-small); color: var(--muted); font-weight: var(--weight-medium); }
.of-tl thead th:nth-child(1) { width: 11%; }
.of-tl thead th:nth-child(2) { width: 47%; }
.of-tl thead th:nth-child(3) { width: 24%; }
.of-tl tbody th { font-weight: var(--weight-regular); }
.of-date { display: inline-block; font-family: var(--font-mono); font-size: var(--text-small); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.of-kind { display: inline-block; padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-semibold); line-height: 1.5; background: var(--accent-soft); color: var(--info-ink); }
.of-kind--cat { background: transparent; border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
@media (max-width: 47.99em) {
  .of-tl thead, .of-flow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .of-tl, .of-tl tbody, .of-tl tr, .of-tl th, .of-tl td { display: block; width: 100%; }
  .of-tl tr { padding: var(--space-4); border-block-end: 1px solid var(--line); }
  .of-tl tr:last-child { border-block-end: 0; }
  .of-tl caption { display: block; }
  .of-tl th, .of-tl td { height: auto; padding: 4px 0; border: 0; }
  .of-tl td::before, .of-flow td::before { content: attr(data-label); display: block; margin-block: var(--space-2) 4px; font-size: var(--text-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted); }
}

/* 2 Figure 2 ------------------------------------------------------------------- */
.of-flow { table-layout: fixed; width: 100%; min-width: 0; font-size: 0.9375rem; }
.of-flow th, .of-flow td { vertical-align: top; padding: var(--space-4); line-height: 1.45; }
.of-flow thead th { font-size: var(--text-small); color: var(--muted); font-weight: var(--weight-medium); }
.of-flow thead th:first-child { width: 22%; }
.of-flow tbody th { font-weight: var(--weight-regular); }
.of-rname { display: block; font-weight: var(--weight-semibold); font-size: var(--text-ui); color: var(--ink); }
.of-box { display: block; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--text-small); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.of-box--on { background: var(--accent-soft); border-color: var(--accent-fill); }
.of-box--dim { border-style: dashed; background: var(--surface-2); color: var(--muted); }
.of-box--miss { border-style: dashed; background: transparent; }
@media (max-width: 47.99em) {
  .of-flow, .of-flow tbody, .of-flow tr, .of-flow th, .of-flow td { display: block; width: 100%; }
  .of-flow tr { padding: var(--space-4); border-block-end: 1px solid var(--line); }
  .of-flow tr:last-child { border-block-end: 0; }
  .of-flow caption { display: block; }
  .of-flow th, .of-flow td { height: auto; padding: 4px 0; border: 0; }
}

/* 3 Figure 3: explorer --------------------------------------------------------- */
.of-explorer .rs-figbar__label { color: var(--ink-2); }
.of-explorer:not(.is-ready) .of-live { display: none; }
.of-explorer.is-ready .of-nojs { display: none; }
.of-explorer .of-nojs { padding: var(--space-5); }
.of-pick { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); }
.of-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--space-3); }
.of-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); line-height: 1.35; text-align: start; cursor: pointer; }
.of-item:hover { border-color: var(--accent); }
.of-item[aria-pressed="true"] { border: 2px solid var(--accent-fill); background: var(--accent-soft); padding: 9px 11px; }
.of-item__name { font-weight: var(--weight-medium); }
.of-tag { display: inline-flex; align-items: center; padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap; }
.of-tag--phone { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.of-tag--server { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.of-tag--unknown { background: transparent; border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
.of-panel { padding: var(--space-5); }
.of-h { margin: 0 0 var(--space-3); font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.of-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--ink-2); }
.of-keys dd { overflow-wrap: anywhere; line-height: 1.5; }

/* 4 Figure 3 table fallback ------------------------------------------------------ */
.of-table { font-size: 0.875rem; table-layout: fixed; min-width: 0; }
.of-table th, .of-table td { vertical-align: top; padding-block: var(--space-4); line-height: 1.5; overflow-wrap: anywhere; }
.of-table thead th:nth-child(1) { width: 17%; }
.of-table thead th:nth-child(2) { width: 30%; }
.of-table thead th:nth-child(3) { width: 25%; }
.of-table tbody th { font-weight: var(--weight-semibold); }
.of-rows { display: block; margin-block-start: 4px; color: var(--muted); }
@media (max-width: 74.99em) {
  .of-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .of-table, .of-table tbody, .of-table tr, .of-table th, .of-table td { display: block; width: 100%; }
  .of-table tr { padding: var(--space-4); border-block-end: 1px solid var(--line); }
  .of-table tr:last-child { border-block-end: 0; }
  .of-table caption { display: block; }
  .of-table th, .of-table td { height: auto; padding: 4px 0; border: 0; }
  .of-table tbody th { font-size: 1.0625rem; padding-block-end: var(--space-2); }
  .of-table td::before { content: attr(data-label); display: block; font-size: var(--text-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted); margin-block-start: var(--space-2); }
}

/* 5 Table 2 and sources -------------------------------------------------------- */
.of-art { font-size: 0.875rem; table-layout: fixed; min-width: 0; }
.of-art th, .of-art td { vertical-align: top; line-height: 1.5; overflow-wrap: anywhere; }
.of-art tbody th { font-weight: var(--weight-semibold); }
.of-art code { font-size: 0.8125rem; }
.of-art thead th:nth-child(1) { width: 14%; }
.of-art thead th:nth-child(2) { width: 24%; }
.of-art thead th:nth-child(3) { width: 22%; }
.of-art thead th:nth-child(4) { width: 18%; }
@media (max-width: 74.99em) {
  .of-art thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .of-art, .of-art tbody, .of-art tr, .of-art th, .of-art td { display: block; width: 100%; }
  .of-art tr { padding: var(--space-4) 0; border-block-end: 1px solid var(--line); }
  .of-art caption { display: block; }
  .of-art th, .of-art td { height: auto; padding: 3px 0; border: 0; }
  .of-art tbody th { font-size: 1.0625rem; }
  .of-art td::before { content: attr(data-label); display: block; margin-block-start: var(--space-2); font-size: var(--text-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted); }
}
.of-src { font-size: 0.9375rem; table-layout: fixed; min-width: 0; }
.of-src th, .of-src td { vertical-align: top; line-height: 1.5; overflow-wrap: anywhere; }
.of-src thead th:first-child { width: 55%; }

/* 6 Figure 4 type size ----------------------------------------------------------- */
.of-svg .d-t { font-size: 16px; }
.of-svg .d-t2 { font-size: 14.5px; }
.of-svg .d-mono { font-size: 14.5px; }
.oss-figure .rs-details { margin-block-start: var(--space-3); }

@media (forced-colors: active) {
  .of-tag, .of-kind, .of-item { border: 1px solid CanvasText; }
  .of-item[aria-pressed="true"], .of-tag--phone { outline: 2px solid Highlight; }
}