/* The installer admin's back office on a computer. Builds on styles.css (palette, rows, sheet,
   QR code) and only changes the layout: a sidebar, a readable column, the sheet as a dialog. */

.desk-body { min-height: 100vh; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--surface); padding: 0.5rem 0.9rem; border-radius: var(--radius); z-index: 10; }
.skip:focus { left: 0.5rem; }

.desk { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh; }
.desk:has(.pair-card) { display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem 4rem; }

.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 1rem; background: var(--navy); color: var(--on-navy); }
.brand { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.6rem 1.25rem; }
.brand strong { font-family: var(--brand); font-size: 1.5rem; letter-spacing: 0.01em; }
.brand span { color: var(--on-navy-soft); font-size: 0.92rem; }
.side > a { display: block; padding: 0.55rem 0.6rem; border-radius: 8px; color: var(--on-navy-soft); font-weight: 600; }
.side > a:hover { background: rgb(255 255 255 / 0.08); color: var(--on-navy); }
.side > a[aria-current="page"] { background: rgb(255 255 255 / 0.14); color: var(--on-navy); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0.6rem; }
.side-foot .who { margin: 0; color: var(--on-navy-soft); font-size: 0.9rem; }
.side-foot .language { background: rgb(255 255 255 / 0.1); color: var(--on-navy); border: 1px solid rgb(255 255 255 / 0.2); }
.side-foot .text-btn.danger { color: #ffb4ab; padding: 0; text-align: left; }

.desk-main { padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem) 4rem; max-width: 56rem; width: 100%; outline: none; }
.desk-main .large { margin-top: 0; }
.desk-main .row { min-height: 3.5rem; }
.desk-main a.row:hover { background: var(--tint-soft); }

.lede { color: var(--muted); margin: -0.4rem 0 1.25rem; max-width: 42rem; }
.team-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
.team-actions .primary, .team-actions .secondary { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; padding-inline: 1.1rem; }
.desk-main .secondary.danger { width: auto; min-height: 44px; padding-inline: 1.25rem; }

/* Pairing: one card in the middle of the page. */
.pair-top { width: min(30rem, 100%); display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.pair-card { width: min(30rem, 100%); background: var(--surface); border-radius: calc(var(--radius) * 1.6); padding: 2rem; box-shadow: 0 1px 2px rgb(20 37 92 / 0.08), 0 12px 32px rgb(20 37 92 / 0.08); text-align: center; }
.pair-card h1 { font-family: var(--brand); color: var(--ink); margin: 0 0 0.5rem; font-size: 1.6rem; }
.pair-start { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; margin: 1.25rem 0 0; }
.pair-start #pair-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.pair-start .foot { margin: 0 0 0.75rem; }
.pair-start label { font-weight: 600; }
.pair-card .steps { text-align: left; color: var(--muted); padding-left: 1.2rem; margin: 1rem 0 0; }
.pair-card .steps li + li { margin-top: 0.35rem; }
.pair-card .qr { margin: 1.25rem auto; max-width: 16rem; transition: opacity 0.2s; }
.pair-card .qr.expired { opacity: 0.15; }
.check-label { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; }
.countdown { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0; }
.pair-card .secondary, .pair-card .text-btn { margin-top: 0.75rem; }

@media (min-width: 48rem) {
  .sheet { width: min(32rem, 92vw); border-radius: calc(var(--radius) * 1.6); margin: auto; inset: 0; max-height: 86vh; }
}
@media (max-width: 47.99rem) {
  .desk { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0.75rem 1rem; }
  .brand { padding: 0; flex-direction: row; gap: 0.6rem; align-items: baseline; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .side-foot .who { display: none; }
  .desk-main { padding: 1.5rem 1rem 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pair-card .qr { transition: none; }
}
.pair-top .language { width: auto; min-width: 9rem; }