/* tiles.css: copied to OUT/style.css by tiles.scm. */
:root {
  --bg: #f6f3ec; --fg: #1d1b18; --muted: #6b655b; --line: #d9d2c4;
  --card: #fffdf8; --accent: #2f5d8a; --tile: #ebe6db;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --fg: #e6e2da; --muted: #9a958c; --line: #2c3036;
    --card: #1d2024; --accent: #8fb6e0; --tile: #23272c;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.45 ui-serif, Georgia, serif; }

.grid { list-style: none; padding: 0; margin: 0;
        display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 0; }
.tile { position: relative; }
.icon { display: grid; place-items: center; width: 32px; height: 32px;
        text-decoration: none; color: var(--fg); outline-offset: -2px; }
.icon:hover, .icon:focus-visible { background: var(--tile); outline: 2px solid var(--accent); }
/* .standin: the icon is a tag's stand-in (tiles.scm sets it), unstyled for now */
.icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.blank { width: 32px; height: 32px; background: var(--tile); }   /* no icon */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Related tiles (same entity, or an entity linked by a relation) while one
   is hovered or focused. tiles.scm writes one :has() rule per entity into
   the page's <style>, each setting `--related: ;` on the related tiles.
   Space toggle: unset, var(--related) is invalid and so is the whole
   declaration (outline and background fall back to none); set to empty, it
   vanishes and the rest of the value applies. */
.icon { outline: var(--related) 2px dashed var(--accent);
        background: var(--related) var(--tile); }

.card { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 2;
        width: min(22rem, 90vw); padding: .7rem .8rem; background: var(--card);
        border: 1px solid var(--line);
        box-shadow: 0 6px 24px rgb(0 0 0 / .15); font-size: .88rem; }
.tile:hover .card, .tile:focus-within .card { display: block; }
.card::before { content: ""; position: absolute; inset: -6px 0 auto; height: 6px; }  /* hover bridge */
.name { display: block; font-size: 1rem; }
.by { color: var(--muted); }
.url { display: block; margin: .15rem 0 .4rem; color: var(--muted); font-size: .78rem;
       overflow-wrap: anywhere; }
.desc { margin: .3rem 0; }
.desc.entity { color: var(--muted); font-style: italic; }
.buttons { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: 4px; }
.buttons img { image-rendering: pixelated; }
.card ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tags li { padding: 0 .45rem; border: 1px solid var(--line);
           font: .75rem/1.6 ui-monospace, monospace; }
.tags li.implied { border-style: dashed; color: var(--muted); }
.rels { flex-direction: column; gap: 0; }
.alts a { color: var(--accent); font: .75rem ui-monospace, monospace; }

/* Where anchor positioning exists, flip cards that would overflow the right
   or bottom edge. The tile must stop being the containing block for this: overflow is
   judged against the containing block, and a 40px tile always overflows. */
@supports (anchor-scope: --tile) and (position-try-fallbacks: flip-inline) {
  .tile { position: static; anchor-name: --tile; anchor-scope: --tile; }
  .card { position-anchor: --tile; top: auto; left: auto;
          position-area: bottom span-right; margin-top: 4px;
          position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; }
}

/* tiles.js sets html.follow on mouse-driven devices and takes over hover:
   the card follows the pointer and is placed with fixed coordinates.
   Keyboard focus keeps the anchored card above. */
.follow .tile:hover .card { display: none; }
.follow .tile .card.on { display: block; position: fixed; margin: 0;
                         position-area: none; position-try-fallbacks: none; }
.follow .card::before { display: none; }