/* Tools hub (/tools/) additions: example output on each card, the carried-sighting strip,
   and the record line. */
.tl-eg { display: block; margin-top: var(--space-3); padding: var(--space-3); background: var(--void-0); border-left: 2px solid var(--signal); font-family: var(--mono); font-size: var(--step--1); line-height: 1.5; color: var(--bone); letter-spacing: 0; text-transform: none; font-weight: 400; }
.tl-eg b { display: block; margin-bottom: 2px; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); }

.tl-carry { padding: var(--space-5) 0 0; }
.tl-carry[hidden] { display: none; }
.tl-carry-line { margin: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--rule-strong); border-left: 3px solid var(--signal); background: var(--void-1); color: var(--bone); max-width: 72ch; }
.tl-carry-line .label { display: block; margin-bottom: var(--space-2); color: var(--signal-soft); }
.tl-carry-line a, .tl-record a { color: var(--bone); text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; display: inline-block; min-height: 24px; }
.tl-carry-line a:hover, .tl-record a:hover { color: var(--signal-soft); }

.tl-record { margin: var(--space-6) 0 0; max-width: 62ch; color: var(--bone-dim); }
.tl-record .label { display: block; margin-bottom: var(--space-2); color: var(--bone-faint); }