body { background:#c0c0c0; color:#000000; font-family:"Times New Roman",Times,serif; margin:8px; }
a { color:#0000ee; text-decoration:underline; }
a:visited { color:#551a8b; }
h1 { font-size:20px; margin:4px 0; }
h2 { font-size:16px; margin:4px 0; }
table { border-collapse:collapse; font-size:14px; }
td,th { border:1px solid #808080; padding:2px 6px; background:#c0c0c0; vertical-align:top; }
input,textarea,select,button { font-family:"Courier New",Courier,monospace; font-size:13px; }
textarea { width:100%; }

/* a table row that is one big link: the anchor in the title cell stretches
   over the whole row, so clicking anywhere works but it stays a real link
   for the keyboard, middle click, and "open in new tab" */
tr.hit { position:relative; cursor:pointer; }
tr.hit:hover, tr.hit:focus-within { background:#ffffcc; }
tr.hit td.t a::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; }
pre, .prose { white-space:pre-wrap; word-wrap:break-word; font-family:"Courier New",Courier,monospace; font-size:13px; }
hr { border:0; border-top:1px solid #808080; }

/* link preview cards: collapsed shows image, title, site and description,
   hover opens the rest and reveals the url. the whole card is one big link.
   youtube plays in place and never collapses again. */
.emb { display:block; border:1px solid #808080; background:#d4d0c8; font-size:11px; margin:3px 0; padding:2px 4px; overflow:hidden; }
.emb:hover { background:#ffffcc; }
.emb .in { display:block; overflow:hidden; position:relative; }
.emb img { max-width:88px; float:left; margin:1px 6px 3px 0; border:1px solid #808080; background:#ffffff; }
.emb .t { display:block; font-weight:bold; }
.emb .s { display:block; color:#404040; }
.emb .d { display:block; }
.emb .cover { position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; display:block; text-decoration:none; }
.emb .more { display:none; clear:both; margin-top:3px; padding-top:3px; border-top:1px dotted #808080; }
.emb:hover .more, .emb.playing .more { display:block; }
.emb .snip { display:block; margin-bottom:3px; }
.emb .real { position:relative; z-index:2; display:inline-block; word-break:break-all; }
.emb .slot { display:block; }
.emb .slot img { max-width:120px; cursor:pointer; }
.emb.yt { cursor:pointer; }
.emb .vid { display:block; width:100%; max-width:480px; aspect-ratio:16/9; border:0; margin-bottom:3px; }

.tip { position:fixed; z-index:99; background:#ffffe1; border:1px solid #000000; padding:1px 4px; font-size:11px; pointer-events:none; white-space:nowrap; }

.scroll { overflow-x:auto; }

/* phones: drop the columns nobody needs, stack the search box, bigger targets */
@media (max-width:600px) {
  .c-id, .c-tags, .c-type { display:none; }
  body { margin:4px; }
  table { font-size:16px; }
  .search input { display:block; width:100%; box-sizing:border-box; margin-bottom:3px; }
  .prose { font-size:15px; }
  .emb { font-size:12px; }
  /* no hover on a phone, so the url is always shown and the stretched cover
     link steps aside for the real one */
  .emb .more { display:block; }
  .emb .cover { display:none; }
}