/* ====================================================================== *
 * The notice a phone or an upright tablet sees instead of the panel
 * (/desk-only.js, which says why). Every rule is under data-desk-only, so
 * on a computer this file draws nothing at all.
 *
 * Its own file rather than a section of admin.css or panel.css: the door
 * loads one of those and the panel the other, and the notice has to look
 * the same in front of both. The colours are the door's own triplets
 * (admin.css), restated because neither stylesheet's tokens are certain to
 * be loaded here; the stored Light/Dark choice is admin.js's to apply, and
 * admin.js does not run behind the notice, so the system's preference
 * decides.
 * ====================================================================== */

/* Everything the document brought with it is gone from the screen at once,
   before /desk-only.js has drawn the notice and after. */
html[data-desk-only] body > :not(.desk-only) { display: none !important; }

html[data-desk-only] {
  --desk-sheet: rgb(251, 252, 253);
  --desk-ink: rgb(14, 26, 32);
  --desk-ink-2: rgb(74, 96, 105);
  --desk-rule: rgb(213, 221, 229);
  background: var(--desk-sheet);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-desk-only] {
    --desk-sheet: rgb(11, 17, 22);
    --desk-ink: rgb(221, 231, 234);
    --desk-ink-2: rgb(147, 167, 176);
    --desk-rule: rgb(29, 41, 51);
  }
}

/* Fixed over the whole viewport rather than placed in the body: the panel's
   body is a grid with a rail column, and the notice must not land in a cell
   of it. It scrolls inside itself on a phone held sideways, where two lines
   at this size can be taller than 390 px of screen with the bars showing. */
html[data-desk-only] .desk-only {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  overflow-y: auto;
  margin: 0;
  padding: 24px 16px;
  background: var(--desk-sheet);
  color: var(--desk-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

html[data-desk-only] .desk-only__title {
  max-width: 22rem;
  margin: 0 auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--desk-rule);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

html[data-desk-only] .desk-only__line {
  max-width: 22rem;
  margin: 12px auto 0;
  color: var(--desk-ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}