/* ── responsive ──
 * Width breakpoints. Stays HERE, not last: it is where the cascade expects it.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 700px) {
  #document-container { padding: 20px 12px 24px; }

  .hint-cards { grid-template-columns: repeat(2, 1fr); }
  .wordmark { font-size: 24px; }
  .wordmark .cursor-blink { width: 11px; height: 21px; }

  #status { padding: 0 8px; font-size: 10.5px; }
  #status-lang, #status-font, #status-hint { display: none; }

  #palette {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  #palette::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 8px auto 2px;
  }
  #palette.anchored { top: auto !important; left: 0 !important; bottom: 0; }
  #palette-list li { padding: 10px 8px; }
  #palette-foot { display: none; }

  .share-body { flex-direction: column; align-items: center; }
  .share-right { width: 100%; }
  .capacity { margin-top: 14px; }
}