/* ============================================================
   SUPPORTED PLATFORMS — /tools/goji-auto-social/
   Registered with page_css() from partials/tool-networks.php.

   ⚠ IT USED TO BE AN INLINE <style> IN THAT PARTIAL. Moved out so the rules are cached with every
     other stylesheet instead of being re-sent inside the HTML on each request, and so the file
     obeys the project's asset architecture like every other page-scoped sheet.

   ⚠ Scoped to .tn-* and to this one section. White ground on purpose: it sits between two tinted
     bands, and the marks are the only colour it needs.
   ============================================================ */

.tn-sec { background: #fff; }

.tn-legend {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 auto 2rem;
  font-size: .82rem; color: #64748b;
  max-width: 720px; text-align: center;
}
.tn-dot { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; display: inline-block; margin: 0 .35rem; }

.tn-group { margin-bottom: 2rem; }
.tn-group-h {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .3rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8;
}
.tn-group-h span {
  display: inline-grid; place-items: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 999px; background: #f1f5f9; color: #475569;
  font-size: .7rem; letter-spacing: 0;
}
/* ⚠ THE GROUP HAS TO SAY WHAT IT MEANS. "Content sources" next to a grid of logos reads as
   "more places you can post to" unless the line underneath says otherwise — which is the whole
   reason the section is grouped by capability now. */
.tn-group-p { margin: 0 0 .9rem; font-size: .82rem; color: #64748b; }

.tn-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.tn-card {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem;
  border: 1px solid #e8ecf1; border-radius: 14px; background: #fff;
  transition: border-color .15s;
}
/* The edge, and only the edge — thirty tiles that each lift and shadow under the pointer is a grid
   that never sits still while you read it. */
.tn-card:hover { border-color: color-mix(in srgb, var(--tn, #64748b) 45%, #e8ecf1); }

.tn-mark {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 11px;
  font-size: 1.2rem;
  color: var(--tn, #64748b);
  background: color-mix(in srgb, var(--tn, #64748b) 11%, #fff);
}
.tn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.tn-name { font-weight: 650; font-size: .92rem; line-height: 1.3; color: #0f172a; overflow-wrap: anywhere; }
.tn-cans { display: flex; gap: .25rem; flex-wrap: wrap; }
.tn-chip {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.tn-pub { background: #ede9fe; color: #5b21b6; }
.tn-inb { background: #dcfce7; color: #15803d; }
.tn-src { background: #e0f2fe; color: #0369a1; }

.tn-soon { margin: .5rem 0 0; text-align: center; font-size: .82rem; color: #94a3b8; }
.tn-soon strong { color: #64748b; }

@media (max-width: 575.98px) { .tn-grid { grid-template-columns: 1fr; } }

@supports not (color: color-mix(in srgb, red 10%, #fff)) {
  /* older engines: a flat tint rather than none at all */
  .tn-mark { background: #f4f6f9; }
  .tn-card:hover { border-color: #cbd5e1; }
}