/* Draw directions as vectors, independent of the device's emoji font. */
svg.zaltt-direction {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 1.1em;
  overflow: visible;
  vertical-align: -.17em;
  pointer-events: none;
}

/* Each case study borrows the same palette as its own page. */
.home-page .zh-case-card[href="/projects/saltgrid"] {
  --case-hover: #dae5eb;
  --case-ink: #1f3440;
  --case-muted: #4e6471;
  --case-accent: #3c6c84;
}
.home-page .zh-case-card[href="/projects/route-canvas"] {
  --case-hover: #e6d8e8;
  --case-ink: #3f2c44;
  --case-muted: #6e5974;
  --case-accent: #805789;
}
.home-page .zh-case-card[href="/projects/kinetica"] {
  --case-hover: #d4e6df;
  --case-ink: #233e37;
  --case-muted: #4c655c;
  --case-accent: #337966;
}
[data-theme="dark"] .home-page .zh-case-card[href="/projects/saltgrid"],
.home-page[data-theme="dark"] .zh-case-card[href="/projects/saltgrid"] {
  --case-hover: #283e4a; --case-ink: #e4eef4; --case-muted: #adc2cf; --case-accent: #a4cedf;
}
[data-theme="dark"] .home-page .zh-case-card[href="/projects/route-canvas"],
.home-page[data-theme="dark"] .zh-case-card[href="/projects/route-canvas"] {
  --case-hover: #3b2e43; --case-ink: #f2e6f5; --case-muted: #c9b5cf; --case-accent: #d4b1df;
}
[data-theme="dark"] .home-page .zh-case-card[href="/projects/kinetica"],
.home-page[data-theme="dark"] .zh-case-card[href="/projects/kinetica"] {
  --case-hover: #294237; --case-ink: #e1f0e9; --case-muted: #aec8bc; --case-accent: #a0d3bb;
}
.home-page .zh-case-card:is(:hover, :focus-visible) {
  --ink: var(--case-ink);
  --muted: var(--case-muted);
  background: var(--case-hover);
  color: var(--case-ink);
}
.home-page .zh-case-card:is(:hover, :focus-visible) :is(h3, .zh-jane-link) { color: var(--case-ink); }
.home-page .zh-case-card:is(:hover, :focus-visible) p { color: var(--case-muted); }
.home-page .zh-case-card:is(:hover, :focus-visible) .zh-case-symbol { color: var(--case-accent); }

/* Remove only the browser's touch flash; native details and focus stay intact. */
.zaltt-legal { flex-wrap: wrap; }
.zaltt-legal .zaltt-identity { flex-basis: 100%; max-width: 70ch; }
@media (any-pointer: coarse) {
  .bloooom-faq-list summary,
  .bloooom-faq-list summary *,
  .zh-note__summary,
  .zh-note__summary * { -webkit-tap-highlight-color: transparent; }
}