/* Screens that are not a room: sign-in, device lock, settings, admin,
   search, and a space's front page. */

.auth-card {
    max-width: 380px;
    margin: var(--space-11) auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.admin {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.admin table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-6);
}

.admin th, .admin td {
    text-align: left;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.admin tr.off {
    color: var(--color-text-muted);
}

.issued-invite {
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-m);
    padding: var(--space-6);
}

.search {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.search .form-row {
    display: flex;
    gap: var(--space-5);
}

.search select {
    width: auto;
}

.search-hit {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--space-5) var(--space-6);
    color: var(--color-text);
}

.space-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.space-rooms {
    flex: 1;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
}

.space-rooms h3, .roles h3 {
    margin: var(--space-4) 0;
}

.settings {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
}

.settings section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.settings h2 {
    margin: 0;
    font-size: var(--text-l);
}

.settings h3 {
    margin: var(--space-4) 0 0;
    font-size: var(--text-s);
}

.settings table {
    width: 100%;
    border-collapse: collapse;
}

.settings td, .settings th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.settings tr.me {
    color: var(--color-accent);
}

.settings .form-row {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
}

.settings select {
    width: auto;
}

/* A table cell must stay a table cell, or its border leaves the row's. */
.actions-cell > * {
    margin-right: var(--space-5);
}

.actions-cell .form-row {
    display: inline-flex;
    margin-top: var(--space-2);
}

.admin .form-row {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}

.admin select {
    width: auto;
}

.unlock-card {
    max-width: 420px;
    margin: var(--space-11) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.unlock-card .hint.text-small, .unlock-card .link.text-small {
    font-size: var(--text-s);
}

/* The rooms of a space: name on the left, topic on the right. */
.space-rooms .room-link {
    justify-content: flex-start;
}

.space-rooms .room-link .dim {
    margin-left: auto;
    font-size: var(--text-s);
}

.space-rooms .new-room {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* ── settings and admin: each subject in a card of its own ─────────────── */

.settings, .admin {
    width: 100%;
    gap: var(--space-8);
}

.settings section, .admin section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
}

.settings h2, .admin h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-l);
}

.settings h3, .admin h3 {
    margin: var(--space-5) 0 0;
    font-size: var(--text-s);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.settings section p, .admin section p {
    margin: 0;
}

/* A button says what it does; it does not need the card's whole width. */
.settings section > button, .admin section > button {
    align-self: flex-start;
}

.settings th, .admin th {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── nothing to show yet ───────────────────────────────────────────────── */

/* A line alone on an otherwise empty page sits in its middle. */
.room-page > .page-notice, .page > .page-notice, .app-main > .page-notice {
    margin: auto;
    padding: var(--space-10);
}

/* On a phone the button that opens the sidebar sits over the top left
   corner of the page; every page leaves it room. Last in the last file, so
   no page's own padding undoes it. */
@media (max-width: 720px) {
    .room-head {
        padding-left: calc(var(--control-size) + var(--space-8));
    }

    .settings, .admin, .search {
        padding-top: var(--bar-height);
    }
}