/* ---- Made for you -------------------------------------------------------- */
.md-wrap{margin:22px 0 0}
.md-h{font:600 11px var(--mono);letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase;margin-bottom:9px}
.md-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 15px;margin-bottom:7px;color:inherit;cursor:pointer;
  transition:border-color .15s,background .15s}
.md-row:hover{border-color:var(--line-3);background:var(--surface-2)}
.md-row:focus-visible{outline:2px solid var(--h4);outline-offset:-2px}
/* The type reads as a tag, not as a filename extension — "page", not ".html". */
.md-kind{flex:none;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px}
.md-name{flex:1;min-width:0;font:450 14.5px var(--sans);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-meta,.md-when{flex:none;font:400 11.5px var(--mono);color:var(--faint)}
.md-none{font:400 13px/1.55 var(--sans);color:var(--faint);padding:4px 0 2px}

/* The preview. Fixed aspect rather than a scrolling frame inside a scrolling
   sheet, which is the layout nobody can use on a phone. */
.md-frame{margin:14px 0 4px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#fff}
.md-frame iframe{display:block;width:100%;height:min(62vh,520px);border:0}
.md-open{display:inline-block;text-decoration:none;font:500 13.5px var(--sans);
  color:var(--text);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 16px;transition:border-color .15s}
.md-open:hover{border-color:var(--accent-dim)}