/* =============================================================================
   SectraTEK Lab: lab-0006.css
   Styles for LAB-0006 "Linking records across files" (Figure 2, the record linker). Loaded after research.css.
   Tokens only; no inline styles. The linker sits in a .lab-instrument (navy in both themes).
   ============================================================================= */

.lk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lk-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
.lk-event { order: 1; min-width: 0; }
.lk-stores { order: 2; min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.lk-verdict { order: 3; min-width: 0; }
.lk-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (max-width: 55.99em) { .lk-lines { display: none; } }
@media (min-width: 56em) {
  .lk-board { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "stores event" "stores verdict"; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 7vw, 6.5rem); row-gap: var(--space-5); padding: var(--space-6); }
  .lk-stores { grid-area: stores; }
  .lk-event { grid-area: event; align-self: start; }
  .lk-verdict { grid-area: verdict; align-self: start; }
}

/* event and verdict */
.lk-anchor { padding: var(--space-4) var(--space-5); border: 1.5px solid var(--navy-accent); border-radius: var(--radius-card); background: var(--accent-soft); }
.lk-eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--navy-accent); }
.lk-evtext { margin: 0; font-size: var(--text-ui); line-height: 1.45; color: var(--on-navy); }
.lk-evkey { margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--on-navy-2); }
.lk-evkey code, .lk-rec__key, .lk-meta code { font-family: var(--font-mono); letter-spacing: 0; background: none; padding: 0; }
.lk-evkey code { color: var(--on-navy); font-size: 0.875rem; }
.lk-h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--on-navy-2); }
.lk-rules { margin: 0; padding-inline-start: 1.2em; font-size: var(--text-small); line-height: 1.5; color: var(--on-navy); }
.lk-rules li { margin-block: 0.3em; }
.lk-verdict { padding: var(--space-5); border: 1px solid var(--navy-line); border-radius: var(--radius-card); background: var(--white-12); }
.lk-tierrow { display: flex; align-items: center; gap: var(--space-3); }
.lk-dots { display: inline-flex; gap: 4px; flex: none; }
.lk-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--navy-accent); }
.lk-dot.is-on { background: var(--navy-accent); }
.lk-tier { margin: 0; font-size: 1.125rem; font-weight: var(--weight-semibold); line-height: 1.25; color: var(--on-navy); }
.lk-text { margin: var(--space-3) 0 0; font-size: var(--text-small); line-height: 1.55; color: var(--on-navy); }
.lk-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.lk-nums > div { padding-block-start: var(--space-3); border-block-start: 1px solid var(--navy-line); }
.lk-nums dt { font-size: var(--text-caption); color: var(--on-navy-2); }
.lk-nums dd { margin: 2px 0 0; font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--on-navy); }
.lk-removed { margin: var(--space-3) 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--on-navy-2); }
.lk-gaps { margin: 0; padding-inline-start: 1.1em; font-size: var(--text-small); line-height: 1.5; color: var(--on-navy); }
.lk-gaps li { margin-block: 0.4em; }

/* stores and records */
.lk-store { padding: var(--space-4); border: 1px solid var(--navy-line); border-radius: var(--radius-card); }
.lk-store__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.lk-store__head h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; color: var(--on-navy); }
.lk-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: var(--text-small); color: var(--on-navy); cursor: pointer; }
.lk-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy-accent); cursor: pointer; }
.lk-meta { margin: var(--space-1) 0 0; font-size: var(--text-caption); line-height: 1.45; color: var(--on-navy-2); }
.lk-keeps { margin: var(--space-2) 0 0; font-size: var(--text-small); line-height: 1.5; color: var(--on-navy); }
.lk-recs { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.lk-item { margin: 0; }
.lk-rec { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px var(--space-4); border: 1px solid var(--navy-line); border-inline-start: 3px solid var(--navy-line); border-radius: var(--radius-sm); background: transparent; color: var(--on-navy); font: inherit; text-align: start; cursor: pointer; }
.lk-rec:hover:not(:disabled) { border-color: var(--navy-accent); }
.lk-rec[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--navy-accent); }
.lk-rec:disabled { cursor: not-allowed; }
.lk-rec__key { font-size: 0.875rem; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.lk-rec__what { font-size: var(--text-caption); color: var(--on-navy-2); }
.lk-tag { justify-self: start; margin-block-start: 4px; padding: 1px 10px; border: 1px solid var(--navy-line); border-radius: var(--radius-pill); font-size: var(--text-micro); font-weight: var(--weight-medium); line-height: 1.6; color: var(--on-navy-2); }
.lk-tag--ok { background: var(--navy-accent); border-color: var(--navy-accent); color: var(--navy-2); }
.lk-tag--part { border-color: var(--navy-accent); border-style: dashed; color: var(--on-navy); }
.lk-tag--no { border-color: var(--on-navy-2); color: var(--on-navy); }
.lk-checks { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--navy-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--white-12); }
.lk-checks[hidden] { display: none; }
.lk-checks--part { border-inline-start-style: dashed; }
.lk-checks--no { border-inline-start-color: var(--on-navy-2); }
.lk-checks > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--navy-line); }
.lk-checks > div:last-child { border-block-end: 0; }
.lk-checks dt { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--on-navy-2); }
.lk-checks dd { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--on-navy); }
@media (max-width: 39.99em) { .lk-checks > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.lk-store.is-removed { border-style: dashed; }
.lk-store.is-removed .lk-keeps, .lk-store.is-removed .lk-recs, .lk-store.is-removed .lk-meta { opacity: 0.5; }

/* lines drawn from a record to the event (wide screens) */
.lk-line { fill: none; stroke: var(--navy-accent); stroke-width: 2.5; }
.lk-line--part { stroke-dasharray: 7 5; }
.lk-line--no { stroke: var(--on-navy-2); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.lk-note { margin: 0; padding: 0 var(--space-5) var(--space-4); font-size: var(--text-caption); line-height: 1.5; color: var(--on-navy-2); }
@media (min-width: 56em) { .lk-note { padding-inline: var(--space-6); } }

/* Figure 3 legend and static figure helpers */
.lk-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-small); color: var(--ink-2); }
.lk-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.lk-sw { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); }
.lk-sw--grey { background: var(--line-strong); }
.lk-tabnum { font-variant-numeric: tabular-nums; }

@media (forced-colors: active) {
  .lk-rec[aria-pressed="true"] { outline: 2px solid Highlight; }
  .lk-line { stroke: CanvasText; }
  .lk-dot.is-on { background: CanvasText; }
}
.lk-ios { fill: var(--muted); stroke: none; }