/* BeastWeb Tools (FEAT-026): blog.css plus an indigo accent and the
   extension page parts. */
:root { --accent: #4f46e5; --accent-ink: #4338ca; --accent-soft: #eef0ff; }
@media (prefers-color-scheme: dark) {
  :root { --accent: #8b8cf8; --accent-ink: #a5a6ff; --accent-soft: #23264a; }
}
.bw-logo span { color: var(--accent); }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-block: 8px 48px; }
.tl-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.tl-card:hover h2 { color: var(--accent-ink); }
.tl-card-top { display: flex; align-items: center; gap: 14px; }
.tl-card img { inline-size: 56px; block-size: 56px; border-radius: 14px; }
.tl-card h2 { margin: 0; font-size: 20px; }
.tl-card p { margin: 0; color: var(--muted); }
.tl-meta { font-size: 13px; color: var(--muted); }
.tl-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-block: 20px 28px; }
.tl-hero img { inline-size: 96px; block-size: 96px; border-radius: 22px; box-shadow: var(--shadow); }
.tl-hero h1 { margin: 0 0 6px; }
.tl-hero p { margin: 0; color: var(--muted); font-size: 18px; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 0 28px; }
a.tl-store, .bw-prose a.tl-store { display: inline-flex; align-items: center; gap: 8px; min-block-size: 46px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
a.tl-store:hover { filter: brightness(1.06); color: #fff; }
a.tl-secondary { display: inline-flex; align-items: center; min-block-size: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.tl-shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 8px; margin-block: 0 28px; }
.tl-shots img { flex: 0 0 auto; inline-size: min(560px, 86vw); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); scroll-snap-align: start; background: var(--sunken); }
.tl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 28px; }
.tl-facts div { padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.tl-facts dt { font-size: 12px; color: var(--muted); }
.tl-facts dd { margin: 2px 0 0; font-weight: 600; }
.tl-perms { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.tl-perms li { padding: 14px 16px; border-radius: 16px; background: var(--sunken); }
.tl-perms strong { display: block; margin-block-end: 2px; }
.tl-private { padding: 16px 18px; border-radius: 18px; background: var(--accent-soft); margin-block: 8px 28px; }
.tl-logo { display: inline-flex; align-items: center; gap: 10px; }
.tl-logo img { inline-size: 28px; block-size: 28px; border-radius: 7px; }