/* ts-listing.css — Timex/Sinclair listing + verification footnote
   Install once in Astra child theme style.css, or Appearance >
   Customize > Additional CSS. Then generate posts with --no-css so
   the markup carries no stylesheet and the palette has one home.
   Retune the five --tsl-* hues below; everything else derives from
   the surrounding theme text colour. */

.tsl{
  --tsl-bg: rgba(127,127,127,.07);
  --tsl-bg: color-mix(in srgb, currentColor 6%, transparent);
  --tsl-edge: rgba(127,127,127,.28);
  --tsl-edge: color-mix(in srgb, currentColor 20%, transparent);
  --tsl-dim: rgba(127,127,127,.85);
  --tsl-dim: color-mix(in srgb, currentColor 55%, transparent);
  --tsl-quiet: color-mix(in srgb, currentColor 62%, transparent);
  --tsl-addr: #8ba6c1;
  --tsl-byte: #cf9d6b;
  --tsl-label: #6fc3d8;
  --tsl-mnem: currentColor;
  --tsl-flag-bg: rgba(224,176,80,.13);
  --tsl-flag-bar: #e0b050;
  --tsl-hover: color-mix(in srgb, currentColor 4%, transparent);

  font:13px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:inherit;background:var(--tsl-bg);
  border:1px solid var(--tsl-edge);border-radius:4px;
  padding:1rem 1.1rem;margin:1.2rem 0;overflow-x:auto}
.tsl-row{display:grid;grid-template-columns:5.5em 9em 6em 13em minmax(0,1fr);
  gap:.6em;white-space:pre;align-items:baseline}
.tsl-row:hover{background:var(--tsl-hover)}
.tsl-a{color:var(--tsl-addr)}
.tsl-b{color:var(--tsl-byte)}
.tsl-l{color:var(--tsl-label);font-weight:600}
.tsl-m{color:var(--tsl-mnem);font-weight:600}
.tsl-c{color:var(--tsl-quiet);font-style:italic;white-space:pre-wrap}
.tsl-remark{display:block;color:var(--tsl-quiet);font-style:italic;
  white-space:pre-wrap;padding:.35em 0}
.tsl-flag{background:var(--tsl-flag-bg);
  box-shadow:inset 3px 0 0 var(--tsl-flag-bar)}
@media(max-width:700px){.tsl-row{grid-template-columns:minmax(0,1fr);gap:0}}


.tsl-note{
  --tsl-bg: rgba(127,127,127,.07);
  --tsl-bg: color-mix(in srgb, currentColor 6%, transparent);
  --tsl-edge: rgba(127,127,127,.28);
  --tsl-edge: color-mix(in srgb, currentColor 20%, transparent);
  --tsl-dim: rgba(127,127,127,.85);
  --tsl-dim: color-mix(in srgb, currentColor 55%, transparent);
  --tsl-quiet: color-mix(in srgb, currentColor 62%, transparent);
  --tsl-addr: #8ba6c1;
  --tsl-byte: #cf9d6b;
  --tsl-label: #6fc3d8;
  --tsl-mnem: currentColor;
  --tsl-flag-bg: rgba(224,176,80,.13);
  --tsl-flag-bar: #e0b050;
  --tsl-hover: color-mix(in srgb, currentColor 4%, transparent);

  font:italic 14px/1.65 Georgia,"Times New Roman",serif;
  color:var(--tsl-dim);background:var(--tsl-bg);
  border-left:3px solid var(--tsl-edge);border-radius:0 4px 4px 0;
  padding:.95rem 1.15rem;margin:1.5rem 0}
.tsl-note h4{font:600 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tsl-label);
  margin:0 0 .65rem;font-style:normal}
.tsl-note p{margin:0 0 .55rem}
.tsl-note p:last-child{margin-bottom:0}
.tsl-note strong{color:var(--tsl-addr);font-style:normal}
.tsl-note-list{margin:.25rem 0 .65rem;padding-left:1.25rem}
.tsl-note-list li{margin:.25rem 0}
.tsl-note code{font:normal 12.5px/1 ui-monospace,Menlo,Consolas,monospace;
  color:var(--tsl-byte);background:var(--tsl-bg);
  border:1px solid var(--tsl-edge);
  padding:.08em .35em;border-radius:3px;font-style:normal}