#sticky-bar { display: none; }

@media (max-width: 800px) {
  #sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--rind); color: var(--ink-on-rind);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 4px solid var(--green);   /* decoration; --green never carries text */
  }
  #sticky-bar a {
    display: flex; align-items: center; justify-content: center;
    padding: 1rem 0.5rem; min-height: 52px;
    text-align: center; text-decoration: none; color: inherit;
    font-family: var(--font-display); font-size: var(--step--1);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  #sticky-bar [data-order] { background: var(--red); color: var(--ink-on-red); }
  #sticky-bar [data-state] {
    grid-column: 1 / -1; order: -1; text-align: center;
    background: var(--yellow); color: var(--ink-on-yellow);   /* 11.60:1 */
    font-size: var(--step--1); font-weight: 700; padding: 0.35rem;
  }
  body { padding-bottom: 8rem; }
}