/* The brand layer: the wordmark, the glyphs, and the one typeface. Every page mounts this, the
   same way every page mounts auth.css - a control that more than one page shows brings its own
   rules rather than a copy of them in each <style>.

   Everything here has a SwiftUI equivalent, because the web leads and Apple follows: the
   wordmark is an HStack of `Glyph(name: "glyph-mark")` and a Text, and `--font` is
   `.system(design: .rounded)`, which is what the app has always used. */

.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
/* The mark is the accent; the word is not. One accent, and it is on the thing that IS the
   identity rather than spread across the sentence next to it. */
.wordmark .glyph { color: var(--accent); flex: none; }
.wordmark b { color: var(--accent); font-weight: 650; }
/* The tracking that spaces the letters also pushes the full stop off the R. It belongs ON the
   word - that stop is the logotype, not punctuation. */
.wordmark b { margin-left: -.1em; letter-spacing: 0; }
.wordmark:hover .glyph { color: var(--text); }

/* A glyph is a template: it takes the colour of whatever it sits in, exactly as
   apple/Sources/Design.swift's `Glyph` does. */
.glyph { display: block; flex: none; vertical-align: middle; }

/* The tile an item wears in a list - the app's feed rows, said in CSS. It names what the item
   IS (a link, a note, something that plays) before you have read a character of the title. */
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 8px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .tile { background: #1b2415; }
}

/* Nothing is ready yet. The mark, breathing, instead of a signed-out shell flashing past on
   every page - a loading state that is the brand is worth more than a spinner. */
.waiting {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  color: var(--dim); padding: 3rem 0; font-size: 13px;
}
.waiting .glyph { color: var(--accent); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .waiting .glyph { animation: none; } }

/* The mark, moving (web/core/dither.mjs). A 64-cell canvas scaled up with its pixels kept
   square: the dither IS the pixels, and a smoothed one is a blur. Accent, like the glyph. */
.dither { display: block; flex: none; color: var(--accent); image-rendering: pixelated; }