/* The admin page's own rules. kit.css, the public page's site-kit style.css,
   loads first and gives the tokens, type and banner. */
main { box-sizing: border-box; max-width: 48rem; padding: 3rem 3rem 3.5rem; }
header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
h3 { margin: 1.2rem 0 0.4rem; font-size: 0.82rem; font-weight: 650; color: var(--dim); }
.hint { margin: 0.25rem 0; font-size: 0.82rem; color: var(--dim); }
form { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
label { display: grid; gap: 0.25rem; }
label.toggle { display: flex; align-items: center; gap: 0.5rem; }
input, select, textarea, button, .button { box-sizing: border-box; font: inherit; color: var(--text); padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; accent-color: var(--accent); }
textarea { resize: vertical; }
button, .button { justify-self: start; cursor: pointer; text-decoration: none; }
button[type="submit"], .button { border-color: var(--accent); color: var(--accent); }
#tabs { display: flex; gap: 0.5rem; margin: 1rem 0; }
#tabs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#result:empty { display: none; }
#result { padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
th { font-size: 0.82rem; color: var(--dim); font-weight: 600; }
#users td:last-child { white-space: pre-line; font-size: 0.82rem; }
.banner.off { opacity: 0.5; }
@media (max-width: 48rem) {
  main { padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px)) 3.5rem max(1rem, env(safe-area-inset-left, 0px)); }
}