/* Rack views — layout shared by rack, rack-layout, installation and self-test (the head, the job strip and the paired
   phone come from app/pages/rack/parts.ts). Who may see a control is decided on the server, not here. */
@layer page {
  /* On a phone the top bar's rack picker says which rack is the working one and switches it: the head's viewing bar
     would say it a second time above the rack. */
  @media (max-width: 560px) { .head__actions:has(> #rk-viewing) { display: none; } }
  .rk-vo__none { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

  /* The paired phone, mirrored on this screen: a device frame beside what its answer becomes. */
  .pp { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
  .pp__phone { width: 244px; display: grid; gap: var(--s3); padding: var(--s4) var(--s3); border: 6px solid var(--ink-800); border-radius: var(--r5); background: var(--sheet); }
  .pp__top { display: flex; justify-content: space-between; font-size: var(--t-cap); color: var(--text-3); }
  .pp__q { font-weight: 650; }
  .pp__a { display: grid; gap: var(--s2); }
  .pp__cap { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; max-width: 34ch; font-size: var(--t-small); color: var(--text-2); }
  /* On a phone the page is the phone: questions are answered in place, so "Ask on my phone" is not offered. */
  @media (max-width: 560px) { [data-ask-phone] { display: none; } }
}