/* Fleet links — the .fleet-pill motif.
 *
 * Canonical copy: ServerCLI `docs/fleet-links-reference/fleet_links.css`,
 * vendored byte-for-byte into every app that renders fleet markdown (contract:
 * `docs/fleet-links.md`). Fix the canonical copy and re-vendor; a patched copy
 * fails `tests/test_fleet_links.py`.
 *
 * It declares no tokens of its own and reads none of the host's. Everything is
 * the surrounding text's own `currentColor`, mixed — so the same bytes land in
 * a light app, a dark app and a print stylesheet without any of them having to
 * agree on a palette first.
 */

.fleet-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  max-width: 100%;
  padding: 0.05em 0.6em 0.15em 0.5em;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
}

.fleet-pill:hover {
  background: color-mix(in srgb, currentColor 11%, transparent);
  border-color: color-mix(in srgb, currentColor 34%, transparent);
}

.fleet-pill__icon {
  flex: none;
  opacity: 0.7;
}

/* The one element allowed to shrink: a long title ellipses, the app glyph and
   the metadata line never do. */
.fleet-pill__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-pill__meta {
  flex: none;
  font-size: 0.85em;
  opacity: 0.62;
}

/* --- states --------------------------------------------------------------- */

/* The fallback text drawn from the URL alone, while the unfurl is in flight. */
.fleet-pill.is-loading {
  opacity: 0.55;
}

/* Gone: what used to be there, struck through — never a dead link. */
.fleet-pill.is-gone .fleet-pill__title {
  text-decoration: line-through;
}

/* Nothing answered (a locked keychain, a login-gated target, a timeout). The
   dotted border is the whole claim: this is the URL's own text, not a reading. */
.fleet-pill.is-unknown {
  border-style: dotted;
}

/* --- per-kind glyphs ------------------------------------------------------- */

.fleet-pill[data-kind="backlog"] .fleet-pill__icon::before { content: "\25EB"; }
.fleet-pill[data-kind="archive"] .fleet-pill__icon::before { content: "\25A4"; }
.fleet-pill[data-kind="tinybox"] .fleet-pill__icon::before { content: "\25A3"; }
.fleet-pill[data-kind="facts"] .fleet-pill__icon::before { content: "\A7"; }
.fleet-pill[data-kind="vaults"] .fleet-pill__icon::before { content: "\2261"; }
.fleet-pill[data-kind="docs"] .fleet-pill__icon::before { content: "\B6"; }
.fleet-pill[data-kind="calendar"] .fleet-pill__icon::before { content: "\25A6"; }
.fleet-pill[data-kind="storage"] .fleet-pill__icon::before { content: "\25A5"; }
.fleet-pill[data-kind="mail"] .fleet-pill__icon::before { content: "\2709"; }
.fleet-pill[data-kind="build"] .fleet-pill__icon::before { content: "\2699"; }
.fleet-pill[data-kind="track"] .fleet-pill__icon::before { content: "\2691"; }
.fleet-pill[data-kind="tasks"] .fleet-pill__icon::before { content: "\25A8"; }
.fleet-pill[data-kind="todo"] .fleet-pill__icon::before { content: "\2610"; }
.fleet-pill[data-kind="journal"] .fleet-pill__icon::before { content: "\25A7"; }
.fleet-pill[data-kind="status"] .fleet-pill__icon::before { content: "\25C9"; }
.fleet-pill[data-kind="lawn"] .fleet-pill__icon::before { content: "\25BA"; }
.fleet-pill[data-kind="pod"] .fleet-pill__icon::before { content: "\266A"; }
.fleet-pill[data-kind="transcript"] .fleet-pill__icon::before { content: "\275D"; }
.fleet-pill[data-kind="brainstorm"] .fleet-pill__icon::before { content: "\2726"; }
.fleet-pill[data-kind="map"] .fleet-pill__icon::before { content: "\2316"; }
.fleet-pill[data-kind="links"] .fleet-pill__icon::before { content: "\29C9"; }
.fleet-pill[data-kind="if"] .fleet-pill__icon::before { content: "\21A6"; }
.fleet-pill[data-kind="approve"] .fleet-pill__icon::before { content: "\2696"; }
.fleet-pill[data-kind="atlas"] .fleet-pill__icon::before { content: "\229E"; }
.fleet-pill[data-kind="breath"] .fleet-pill__icon::before { content: "\25CE"; }
.fleet-pill[data-kind="canvas"] .fleet-pill__icon::before { content: "\25F0"; }
.fleet-pill[data-kind="layers"] .fleet-pill__icon::before { content: "\274F"; }
.fleet-pill[data-kind="notice"] .fleet-pill__icon::before { content: "\26AD"; }
.fleet-pill[data-kind="schedule"] .fleet-pill__icon::before { content: "\25A9"; }
.fleet-pill[data-kind="sticky"] .fleet-pill__icon::before { content: "\259A"; }
.fleet-pill[data-kind="kindle"] .fleet-pill__icon::before { content: "\25AE"; }
.fleet-pill[data-kind="tarot"] .fleet-pill__icon::before { content: "\2727"; }
.fleet-pill[data-kind="now"] .fleet-pill__icon::before { content: "\25D0"; }
.fleet-pill[data-kind="log"] .fleet-pill__icon::before { content: "\2630"; }
.fleet-pill[data-kind="release"] .fleet-pill__icon::before { content: "\21E7"; }
.fleet-pill[data-kind="plant"] .fleet-pill__icon::before { content: "\2698"; }
.fleet-pill[data-kind="letter"] .fleet-pill__icon::before { content: "\2399"; }

/* --- status, for the kinds that have one ----------------------------------- */
/* "Colour" here is depth of the host's own ink, in three groups: something
   happening right now is louder, something finished or switched off is
   quieter, and something that will never happen again is struck through. A
   kind with no status renders none of this. */

.fleet-pill[data-kind="backlog"][data-status="doing"],
.fleet-pill[data-kind="build"][data-status="running"],
.fleet-pill[data-kind="pod"][data-status="downloading"],
.fleet-pill[data-kind="transcript"][data-status="running"],
.fleet-pill[data-kind="status"][data-status="warn"],
.fleet-pill[data-kind="status"][data-status="down"],
.fleet-pill[data-kind="approve"][data-status="pending"],
.fleet-pill[data-kind="notice"][data-status="active"],
.fleet-pill[data-kind="kindle"][data-status="queued"],
.fleet-pill[data-kind="kindle"][data-status="sending"],
.fleet-pill[data-kind="release"][data-status="submitted"],
.fleet-pill[data-kind="plant"][data-status="due"],
.fleet-pill[data-kind="letter"][data-status="preparing"],
.fleet-pill[data-kind="letter"][data-status="sending"],
.fleet-pill[data-kind="letter"][data-status="submitted"],
.fleet-pill[data-kind="letter"][data-status="accepted"],
.fleet-pill[data-kind="letter"][data-status="processing"],
.fleet-pill[data-kind="letter"][data-status="printing"],
.fleet-pill[data-kind="letter"][data-status="transferring"] {
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.fleet-pill[data-kind="backlog"][data-status="done"],
.fleet-pill[data-kind="backlog"][data-status="dropped"],
.fleet-pill[data-kind="todo"][data-status="done"],
.fleet-pill[data-kind="build"][data-status="canceled"],
.fleet-pill[data-kind="pod"][data-status="cancelled"],
.fleet-pill[data-kind="track"][data-status="resolved"],
.fleet-pill[data-kind="track"][data-status="closed"],
.fleet-pill[data-kind="links"][data-status="off"],
.fleet-pill[data-kind="if"][data-status="disabled"],
.fleet-pill[data-kind="map"][data-status="closed"],
.fleet-pill[data-kind="docs"][data-status="trash"],
.fleet-pill[data-kind="approve"][data-status="approved"],
.fleet-pill[data-kind="approve"][data-status="denied"],
.fleet-pill[data-kind="approve"][data-status="answered"],
.fleet-pill[data-kind="approve"][data-status="expired"],
.fleet-pill[data-kind="approve"][data-status="cancelled"],
.fleet-pill[data-kind="atlas"][data-status="archived"],
.fleet-pill[data-kind="notice"][data-status="done"],
.fleet-pill[data-kind="notice"][data-status="cancelled"],
.fleet-pill[data-kind="notice"][data-status="expired"],
.fleet-pill[data-kind="notice"][data-status="orphaned"],
.fleet-pill[data-kind="schedule"][data-status="expired"],
.fleet-pill[data-kind="now"][data-status="parked"],
.fleet-pill[data-kind="now"][data-status="done"],
.fleet-pill[data-kind="log"][data-status="skipped"],
.fleet-pill[data-kind="release"][data-status="shipped"],
.fleet-pill[data-kind="release"][data-status="abandoned"],
.fleet-pill[data-kind="release"][data-status="archived"],
.fleet-pill[data-kind="plant"][data-status="gone"],
.fleet-pill[data-kind="letter"][data-status="sent"],
.fleet-pill[data-kind="letter"][data-status="delivered"],
.fleet-pill[data-kind="letter"][data-status="cancelled"] {
  opacity: 0.62;
}

.fleet-pill[data-kind="backlog"][data-status="done"] .fleet-pill__icon::before,
.fleet-pill[data-kind="todo"][data-status="done"] .fleet-pill__icon::before,
.fleet-pill[data-kind="build"][data-status="success"] .fleet-pill__icon::before,
.fleet-pill[data-kind="approve"][data-status="approved"] .fleet-pill__icon::before,
.fleet-pill[data-kind="notice"][data-status="done"] .fleet-pill__icon::before,
.fleet-pill[data-kind="kindle"][data-status="sent"] .fleet-pill__icon::before,
.fleet-pill[data-kind="now"][data-status="done"] .fleet-pill__icon::before,
.fleet-pill[data-kind="release"][data-status="shipped"] .fleet-pill__icon::before,
.fleet-pill[data-kind="letter"][data-status="sent"] .fleet-pill__icon::before,
.fleet-pill[data-kind="letter"][data-status="delivered"] .fleet-pill__icon::before {
  content: "\2713";
}

.fleet-pill[data-kind="backlog"][data-status="dropped"] .fleet-pill__title,
.fleet-pill[data-kind="build"][data-status="canceled"] .fleet-pill__title,
.fleet-pill[data-kind="pod"][data-status="cancelled"] .fleet-pill__title,
.fleet-pill[data-kind="map"][data-status="closed"] .fleet-pill__title,
.fleet-pill[data-kind="approve"][data-status="expired"] .fleet-pill__title,
.fleet-pill[data-kind="approve"][data-status="cancelled"] .fleet-pill__title,
.fleet-pill[data-kind="notice"][data-status="orphaned"] .fleet-pill__title,
.fleet-pill[data-kind="release"][data-status="abandoned"] .fleet-pill__title,
.fleet-pill[data-kind="plant"][data-status="gone"] .fleet-pill__title {
  text-decoration: line-through;
}

/* An event that has already happened is still worth linking to, just quietly. */
.fleet-pill[data-kind="calendar"][data-status="past"] {
  opacity: 0.62;
}

/* A phone has no room for a long title beside the app glyph and the metadata;
   this block is last so no base rule can outrank it at equal specificity. */
@media (max-width: 640px) {
  .fleet-pill__title {
    max-width: 36ch;
  }
}