/* ============================================================
   put.io — _tier.css
   The binding-tier strip that every specimen card carries.

   ADR 0009 (putio-frontend docs/decisions/0009-design-binding-tiers.md)
   and the public statement in putio-design DESIGN.md say a preview must
   declare which tier it binds: "a web-rendered mock is never a native
   spec". This strip is that declaration. It is preview chrome — it sits
   outside the artboard and is never part of a product surface.

   Tiers
     0  Foundations — the @putdotio/design token graph. Binds all four.
     1  Web (www / app / auth) — the full system: component library,
        components.css recipes, dedicated styles. The recipes ARE the
        contract here and only here.
     2  Native apps (iOS, iPadOS, tvOS, watchOS, Android, Android TV) —
        tokens only. Components come from the platform HIG.
     3  Roku — tier-2 token inheritance, more room for put.io's own
        conventions in custom SceneGraph components.
     4  Web TV (tv.put.io, Tizen, webOS) — the system as on web, but
        restrained to a generic list-first 10-foot interface.
   ============================================================ */

.tierbar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
}
.tierbar .tno {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--component-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
/* Tier 1 is the one tier where the web recipes are the contract, so it
   is the one chip that carries the brand fill. */
.tierbar.t1 .tno {
  background: var(--yellow-solid);
  border-color: var(--yellow-solid);
  color: var(--primary-foreground);
}
.tierbar.t0 .tno { border-style: dashed; }
.tierbar .twhat { flex: 1 1 340px; color: var(--text); }
.tierbar .twhat b { font-weight: var(--fw-medium); }
.tierbar .ttok {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--yellow-text-secondary);
  letter-spacing: 0;
}
@media (max-width: 700px) { .tierbar .ttok { flex-basis: 100%; } }