/* The Link Meteor post: the recording, the screenshot, tables that stack on
   phones, and four demos. The demos show Link Meteor's own surfaces, so their
   night and lime colors stay the same in both themes; everything else uses
   the site's tokens. */
:root {
  --lm-night: #151b2c; --lm-night-2: #1d2438; --lm-night-line: #39415a; --lm-night-ink: #f2f3f8; --lm-night-muted: #b9becd;
  --lm-lime: #c3f344; --lm-lime-ink: #1a2208; --lm-lime-edge: #6f9a1f; --lm-paper: #fafbfd; --lm-paper-ink: #232a3b;
  --lm-paper-muted: #5d6478; --lm-paper-line: #e3e6ee; --lm-link: #2b4f8f;
}

.lm-post li { color: var(--muted); }
.lm-post li + li { margin-top: 0.3rem; }
.lm-post section > table { margin: 1.2rem 0; font-size: 0.94rem; line-height: 1.5; }
.lm-post section > table td { min-width: 9rem; color: var(--muted); }

.lm-film { display: block; width: 100%; max-width: 100%; height: auto; margin: 1rem 0 0; border: 1px solid var(--line-strong); background: #000000; }
.lm-figure { margin: 1.5rem 0; }
.lm-figure img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--line); }
.lm-figure figcaption { margin-top: 0.55rem; color: var(--faint); font-size: 0.88rem; }

/* On phones, each table row in the text becomes a short stack: its first cell
   as a heading, the rest labeled from the table's header row. */
@media (max-width: 560px) {
  .lm-post section > table { border-bottom: 0; }
  .lm-post section > table thead { display: none; }
  .lm-post section > table tbody, .lm-post section > table tr { display: block; }
  .lm-post section > table tr { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .lm-post section > table td { display: block; min-width: 0; padding: 0.12rem 0; border: 0; }
  .lm-post section > table td:first-child { color: var(--ink); font-weight: 650; }
  .lm-post section > table td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--faint); font-weight: 650; }
}

/* Demos: Link Meteor's surfaces inside the post's figure frame. */
.lm-demo { margin: 1.5rem 0; padding: clamp(0.85rem, 2.5vw, 1.25rem); border: 1px solid var(--line); background: var(--accent-soft); display: grid; gap: 0.85rem; }
.lm-demo figcaption { color: var(--faint); font-size: 0.9rem; max-width: 66ch; }
.lm-demo figcaption strong { color: var(--ink); }
.lm-demo p { margin: 0; }
.lm-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lm-page { position: relative; padding: 16px 18px 20px; border-radius: 10px; background: var(--lm-paper); color: var(--lm-paper-ink); border: 1px solid var(--lm-paper-line); user-select: none; -webkit-user-select: none; cursor: crosshair; touch-action: pan-y; }
.lm-page.lm-touch-on { touch-action: none; outline: 2px dashed var(--lm-lime-edge); outline-offset: 3px; }
.lm-site { display: flex; align-items: center; gap: 6px; margin-bottom: 8px !important; color: var(--lm-paper-muted); font: 500 0.76rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
.lm-site span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lm-paper-line); }
.lm-page-title { color: var(--lm-paper-ink); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin-bottom: 8px !important; }
.lm-list { margin: 0; padding: 0; list-style: none; display: grid; }
.lm-list li { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 5px 0; border-bottom: 1px solid var(--lm-paper-line); color: var(--lm-paper-ink); font-size: 0.93rem; line-height: 1.42; }
.lm-list li:last-child { border-bottom: 0; }
.lm-n { flex: none; width: 1.5em; color: var(--lm-paper-muted); font: 500 0.75rem var(--font-mono); }
.lm-list a { color: var(--lm-link); text-decoration-color: color-mix(in srgb, var(--lm-link) 45%, transparent); }
.lm-meta { color: var(--lm-paper-muted); font-size: 0.8rem; white-space: nowrap; }
.lm-thumb { display: inline-block; vertical-align: middle; width: 52px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, #79c08f, #4f93b5); }
.lm-layer { position: absolute; inset: 0; pointer-events: none; }
.lm-rect { position: absolute; border: 1.5px solid var(--lm-lime-edge); background: color-mix(in srgb, var(--lm-lime) 14%, transparent); border-radius: 3px; }
.lm-hit { position: absolute; background: color-mix(in srgb, var(--lm-lime) 48%, transparent); outline: 1px solid var(--lm-lime-edge); border-radius: 3px; }
.lm-badge { position: absolute; padding: 3px 9px; border-radius: 999px; background: var(--lm-night); color: var(--lm-night-ink); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.lm-card { padding: 14px; border-radius: 12px; background: var(--lm-night-2); color: var(--lm-night-ink); border: 1px solid var(--lm-night-line); display: grid; gap: 10px; }
.lm-card p { color: var(--lm-night-muted); }
.lm-card-head { display: flex; gap: 10px; align-items: center; }
.lm-mark { flex: none; width: 24px; height: 24px; color: var(--lm-lime); }
.lm-count { color: var(--lm-night-ink) !important; font-weight: 700; font-size: 1rem; }
.lm-dest { font-size: 0.82rem; }
.lm-table { display: table; width: 100%; border: 0; font-size: 0.82rem; table-layout: fixed; }
.lm-table th { padding: 5px 6px; border-bottom: 1px solid var(--lm-night-line); color: var(--lm-night-muted); font-size: 0.74rem; font-weight: 650; }
.lm-table th:first-child { width: 46%; }
.lm-table td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--lm-night-line) 55%, transparent); color: var(--lm-night-ink); font-size: 0.82rem; overflow-wrap: anywhere; line-height: 1.35; }
.lm-url { font-family: var(--font-mono); font-size: 0.74rem !important; color: var(--lm-night-muted) !important; overflow-wrap: anywhere; }
.lm-rowbtn { display: block; width: 100%; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.lm-rowbtn[aria-pressed="true"] { background: color-mix(in srgb, var(--lm-lime) 18%, transparent); }
.lm-rowbtn:focus-visible { outline: 2px solid var(--lm-lime); outline-offset: 1px; }
.lm-nil { font-style: italic; color: var(--lm-night-muted) !important; }
.lm-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--lm-lime); color: var(--lm-lime-ink); font: 700 0.7rem/1.6 var(--font-body); font-style: normal; white-space: nowrap; }
.lm-check { display: flex; gap: 6px; align-items: center; color: var(--lm-night-muted); font-size: 0.84rem; }
.lm-check input { accent-color: var(--lm-lime); }
.lm-record { padding: 10px 12px; border-radius: 8px; background: var(--lm-night); border: 1px solid var(--lm-night-line); display: grid; gap: 8px; }
.lm-record-title { color: var(--lm-night-ink) !important; font-weight: 700; font-size: 0.84rem; }
.lm-record dl, .lm-pdf-about dl { margin: 0; display: grid; gap: 3px; }
.lm-record dl + dl { padding-top: 8px; border-top: 1px dashed var(--lm-night-line); }
.lm-record dl > div, .lm-pdf-about dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; font-size: 0.8rem; line-height: 1.4; }
.lm-record dt { color: var(--lm-night-muted); }
.lm-record dd, .lm-pdf-about dd { margin: 0; overflow-wrap: anywhere; }
.lm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.lm-card .lm-btn { border-color: var(--lm-night-line); background: transparent; color: var(--lm-night-ink); }
.lm-btn-lime, .lm-card .lm-btn-lime { border-color: var(--lm-lime-edge); background: var(--lm-lime); color: var(--lm-lime-ink); }
.lm-btn:disabled { opacity: 0.5; cursor: default; }
.lm-btn:hover:not(:disabled) { border-color: var(--accent); }
.lm-card .lm-btn:hover:not(:disabled) { border-color: var(--lm-lime); }
.lm-touch { display: none !important; }
@media (pointer: coarse) { .lm-touch { display: inline-flex !important; } }
.lm-touch[aria-pressed="true"] { border-color: var(--lm-lime) !important; color: var(--lm-lime) !important; }
.lm-status { min-height: 1.3em; color: var(--ink) !important; font-size: 0.86rem; font-weight: 600; }
.lm-card .lm-status { color: var(--lm-lime) !important; }
.lm-empty { font-size: 0.9rem; }
.lm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-tabs [role="tab"] { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.lm-tabs [role="tab"][aria-selected="true"] { border-color: var(--lm-lime-edge); background: var(--lm-lime); color: var(--lm-lime-ink); }
.lm-note { font-size: 0.9rem; max-width: none !important; }
.lm-output pre, .lm-identifiers pre { margin: 0; max-height: 22rem; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 0.8rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.lm-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
.lm-sheet { display: table; min-width: 100%; border: 0; font-size: 0.82rem; }
.lm-sheet th, .lm-sheet td { padding: 4px 8px; border: 1px solid var(--line); font-size: 0.8rem; }
.lm-sheet .lm-colhead th, .lm-sheet .lm-rownum { background: var(--accent-soft); color: var(--faint); font-weight: 500; text-align: center; font-size: 0.72rem; }
.lm-sheet .lm-header th { font-weight: 700; color: var(--ink); }
.lm-sheet .lm-url { color: var(--accent) !important; }
.lm-sheet .lm-nil { color: var(--faint) !important; }
.lm-source { color: var(--faint) !important; font-size: 0.84rem; }
.lm-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.lm-field { display: grid; gap: 4px; }
.lm-field label, .lm-label { color: var(--faint); font-size: 0.82rem; font-weight: 600; }
.lm-field input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); font: 0.9rem var(--font-mono); }
.lm-ids { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.lm-ids .lm-chip { margin: 0; font-size: 0.8rem; padding: 1px 8px; }
.lm-drop { display: grid; gap: 10px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: 10px; background: var(--paper); }
.lm-drop.lm-over { border-color: var(--lm-lime-edge); background: color-mix(in srgb, var(--lm-lime) 12%, var(--paper)); }
.lm-drop p { color: var(--muted); }
.lm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lm-pdf-about { padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 6px; }
.lm-pdf-about dt { color: var(--faint); }
.lm-pdf-about dd { color: var(--ink); }
.lm-table-light th { color: var(--faint); border-bottom: 1px solid var(--line); }
.lm-table-light td { color: var(--ink); border-bottom: 1px solid var(--line); }
.lm-table-light .lm-url { color: var(--faint) !important; }
.lm-table-light th:first-child { width: 3.5rem; }
.lm-table-light th:nth-child(2) { width: 52%; }
.lm-num { font-variant-numeric: tabular-nums; }
.lm-anchor { display: block; font-weight: 650; }
.lm-anchor.lm-nil { color: var(--faint) !important; }
.lm-context { display: block; color: var(--faint); font-size: 0.78rem; margin-top: 2px; }
@media (max-width: 760px) {
  .lm-stage, .lm-fields { grid-template-columns: 1fr; }
  .lm-meta { display: none; }
}