/* The admin and setup pages, in the Relay design system (design/system/project/README.md).
   Colors, type and spacing come from tokens.css, generated from design/tokens.json. */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--type-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono, code { font-family: var(--font-mono); font-size: 13px; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* Top bar: the app name in headline type, no mark. */
.bar { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.bar .word { font: var(--type-headline); letter-spacing: -.01em; }
.bar .server { color: var(--muted); font: var(--type-small); }
.bar .spacer { flex: 1; }
.bar .who { color: var(--muted); font: var(--type-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.tabs { display: flex; gap: var(--space-xs); max-width: 880px; margin: 0 auto; padding: var(--space-l) var(--space-l) 0; overflow-x: auto; }
.tabs a { padding: 6px var(--space-m); border-radius: var(--radius-pill); color: var(--muted); font: var(--type-label); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--hover); color: var(--fg); }
.tabs a[aria-current=page] { background: var(--fg); color: var(--bg); }
.tabs + main { padding-top: var(--space-l); }
main { max-width: 880px; margin: 0 auto; padding: var(--space-xl) var(--space-l) var(--space-xxl); display: grid; gap: var(--space-xl); }
.notice { padding: var(--space-m); border-radius: var(--radius-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.notice.warn { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px var(--line); }

/* A section is a heading over a panel of rows on surface, split by hairlines. */
section > header { display: flex; align-items: baseline; gap: var(--space-s); margin: 0 0 var(--space-s); padding: 0 var(--space-xs); }
section h2 { margin: 0; font: var(--type-title); }
section > header .muted { font: var(--type-small); }
section > header .spacer { flex: 1; }
section > header { flex-wrap: wrap; }
.panel { background: var(--surface); border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); min-height: 56px; }
.row + .row, .panel > form + .row, .panel > .row + .empty { box-shadow: inset 0 1px 0 var(--line); }
.row .main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .main small { color: var(--muted); font: var(--type-small); }
.row .side { display: flex; align-items: center; gap: var(--space-s); flex: none; }
.empty { padding: var(--space-xl) var(--space-l); color: var(--muted); text-align: center; }
.error { color: var(--danger); font: var(--type-small); padding: var(--space-s) var(--space-l) 0; }
.error:empty { display: none; }

/* Status labels are pills; color is never the only signal, the words are. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 8%, transparent); font: var(--type-caption); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.ok .dot { background: var(--ok); }

/* Buttons with words are ink (fg on bg), never coral. Quiet buttons are text on hover. */
button { font: inherit; color: inherit; cursor: pointer; }
.btn { height: 36px; padding: 0 var(--space-l); border: 0; border-radius: var(--radius-pill); background: var(--fg); color: var(--bg); font: var(--type-label); white-space: nowrap; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); }
.btn:disabled { opacity: .5; cursor: default; }
.quiet { height: 32px; padding: 0 var(--space-m); border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font: var(--type-label); font-weight: 500; white-space: nowrap; }
.quiet:hover { background: var(--hover); color: var(--fg); }
.quiet.danger:hover { color: var(--danger); }

input[type=email], input[type=text] { height: 40px; min-width: 0; flex: 1; padding: 0 14px; border: 0; border-radius: var(--radius-m); background: var(--input); color: var(--fg); font: var(--type-body); }
input::placeholder { color: var(--muted); }
form.row { gap: var(--space-s); }

/* The admin toggle: ink when on. */
.switch { display: inline-flex; align-items: center; gap: var(--space-s); font: var(--type-small); color: var(--muted); cursor: pointer; }
.switch input { appearance: none; margin: 0; width: 36px; height: 22px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 18%, var(--surface)); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.switch input:checked { background: var(--fg); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:disabled { opacity: .45; cursor: not-allowed; }
.switch:has(input:disabled) { cursor: not-allowed; }

/* An inline confirmation replaces the row's actions; no browser dialogs. */
.confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-m); border-radius: var(--radius-m); background: var(--input); }
.confirm p { margin: 0; flex: 1; min-width: 200px; font: var(--type-small); }
.row.confirming { flex-wrap: wrap; }

dl.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
dl.facts dt, dl.facts dd { margin: 0; padding: var(--space-m) var(--space-l); }
dl.facts dt { color: var(--muted); }
dl.facts dt:not(:first-of-type), dl.facts dd:not(:first-of-type) { box-shadow: inset 0 1px 0 var(--line); }
dl.facts dd { overflow-wrap: anywhere; }

/* Sign-in and setup are one centered card. */
.center { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: var(--space-xl) var(--space-l); }
.card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-bubble); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-xl); display: grid; gap: var(--space-l); }
.card h1 { margin: 0; font: var(--type-title); font-size: 20px; }
.card p { margin: 0; color: var(--muted); }
.card .error { padding: 0; color: var(--danger); }
.card form { display: flex; gap: var(--space-s); }
.card .divider { display: flex; align-items: center; gap: var(--space-s); color: var(--muted); font: var(--type-caption); text-transform: uppercase; letter-spacing: .06em; }
.card .divider::before, .card .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#gsi { min-height: 44px; display: flex; justify-content: center; }

.setup { max-width: 880px; margin: 0 auto; padding: var(--space-xl) var(--space-l); display: grid; gap: var(--space-xl); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.setup .get, .setup .claim { grid-column: 1 / -1; }
.setup .claim .notice { margin: var(--space-l) 0; }
.setup .claim ol { margin-top: var(--space-l); }
.setup .add .notice { margin: var(--space-l) 0 0; }
.setup li code { background: var(--input); padding: 1px 6px; border-radius: 6px; }
.setup .get > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-s); margin: 0 0 var(--space-s); padding: 0 var(--space-xs); cursor: pointer; list-style: none; }
.setup .get > summary::-webkit-details-marker { display: none; }
.setup .get > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.setup .get[open] > summary::before { transform: rotate(90deg); }
.setup .get h2 { margin: 0; font: var(--type-title); white-space: nowrap; }
.setup .get > summary .muted { font: var(--type-small); }
.tag { font: var(--type-caption); color: var(--accent); white-space: nowrap; }
.setup .qr { background: #fff; padding: var(--space-m); border-radius: var(--radius-bubble); box-shadow: inset 0 0 0 1px var(--line); width: 236px; }
.setup .qr img { display: block; width: 100%; image-rendering: pixelated; }
.setup h1 { margin: 0 0 var(--space-xs); font: var(--type-headline); }
.setup .link { display: flex; gap: var(--space-s); margin: var(--space-l) 0; align-items: center; }
.setup .link code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--input); padding: 10px 14px; border-radius: var(--radius-m); }
.setup ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-s); }
.setup li { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius-m); padding: var(--space-m) var(--space-l); }
.setup ol + p { margin: var(--space-l) 0 0; }
.setup li b { display: block; font-weight: 600; }
.setup li span { color: var(--muted); }

.add-device { display: flex; gap: var(--space-l); align-items: center; padding: var(--space-l); margin-bottom: var(--space-m); }
.add-device[hidden] { display: none; }
.add-device .qr { flex: none; background: #fff; padding: var(--space-s); border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); width: 180px; }
.add-device .qr img { display: block; width: 100%; image-rendering: pixelated; }
.add-device .how { flex: 1; min-width: 0; display: grid; gap: var(--space-m); }
.add-device .how b { font-weight: 500; }
.add-device .how p { margin: 0; font: var(--type-small); }
.add-device .link { display: flex; gap: var(--space-s); align-items: center; }
.add-device .link code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--input); padding: 10px 14px; border-radius: var(--radius-m); }

@media (max-width: 640px) {
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup .qr { justify-self: center; }
  .row { flex-wrap: wrap; }
  .row .side { width: 100%; justify-content: flex-end; }
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dd { padding-top: 0; box-shadow: none !important; }
  .bar .server { display: none; }
  .add-device { flex-direction: column; align-items: stretch; }
  .add-device .qr { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }