/* The /dashboard page. Kept out of style.css because nothing else uses it.
   Colours come from the site's own variables, so dark mode follows for free. */

#dashboard .hidden {
    display: none;
}

/* Who is signed in. A card, like the storage page's groups. */
#dashboard .dashboard-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em 1em;
    margin: 0.75em 0;
    padding: 0.75em 1em;
    border: 0.125em solid var(--text-color);
    border-radius: 1em;
    background: var(--help-background);
}

/* min-width: 0 lets a long name or address wrap instead of pushing the
   button off the side of a phone. */
#dashboard .dashboard-who {
    flex: 1 1 12em;
    min-width: 0;
}

#dashboard .dashboard-who p {
    margin: 0;
    overflow-wrap: anywhere;
}

#dashboard .dashboard-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--help-heading-color);
}

#dashboard .dashboard-role {
    padding: 0 0.5em;
    border: 0.0625em solid currentColor;
    border-radius: 0.6em;
    font-size: 0.65em;
    text-transform: uppercase;
    vertical-align: middle;
}

#dashboard .dashboard-note {
    margin-top: 0.4em;
    font-size: 0.85em;
    color: var(--text-color-sub);
}

#dashboard .dashboard-button {
    flex: 0 0 auto;
    min-height: 2.4em;
    padding: 0.4em 1em;
    border: 0.0625em solid var(--border-color);
    border-radius: 0.6em;
    background: var(--button-background);
    color: var(--button-text-color);
    font: inherit;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

#dashboard .dashboard-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Signing out everywhere, and deleting the account. The card's sides come
   from content.css, which leaves top and bottom to whatever is inside. */
#dashboard .dashboard-manage {
    margin-top: 1.5em;
    padding-bottom: 1em;
}

#dashboard .dashboard-actions {
    display: grid;
    gap: 1em;
    margin-top: 0.75em;
}

/* Each button with what it does underneath, at every width. */
#dashboard .dashboard-action {
    display: grid;
    justify-items: start;
    gap: 0.35em;
}

#dashboard .dashboard-action span {
    font-size: 0.85em;
    color: var(--text-color-sub);
}

#dashboard .dashboard-danger.armed {
    background: #b3261e;
    border-color: #b3261e;
    color: #ffffff;
}

/* content.css tints every button under the pointer, and a phone leaves a
   button "under the pointer" after a tap. The warning stays red. */
#dashboard .dashboard-danger.armed:hover,
#dashboard .dashboard-danger.armed:active {
    filter: none;
}

#dashboard-status {
    min-height: 1.2em;
    margin: 0.4em 0 0;
    font-weight: bold;
}

#dashboard-status:empty {
    display: none;
}

/* Where to go from here: one large target each, easy to hit with a thumb. */
#dashboard .dashboard-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: 0.75em;
    margin: 0.75em 0 1.5em;
}

#dashboard .dashboard-links a {
    display: block;
    padding: 0.75em 1em;
    border: 0.125em solid var(--text-color);
    border-radius: 1em;
    background: var(--help-background);
    color: inherit;
    text-decoration: none;
}

#dashboard .dashboard-links a:hover,
#dashboard .dashboard-links a:focus-visible {
    border-color: var(--help-heading-color);
}

#dashboard .dashboard-links b {
    display: block;
    font-size: 1.2em;
    color: var(--help-heading-color);
}

#dashboard .dashboard-links span {
    font-size: 0.9em;
    color: var(--text-color-sub);
}

/* Recently played. The icons and the row they sit in are style.css's
   (.icons, .icon), the same as under a game's help. All that is said here
   is how they sit in this card: room under them (content.css gives a card
   none of its own), and none over them, where the heading already is. */
#dashboard #dashboard-history {
    padding-bottom: 1.25em;
}

#dashboard #dashboard-apps {
    padding-top: 0;
}

#dashboard #dashboard-all {
    display: block;
    margin: 1.5em auto 0.5em;
    padding: 0.6em 1.2em;
    border: 0.0625em solid var(--border-color);
    border-radius: 0.6em;
    background: var(--button-background);
    color: var(--button-text-color);
    font-size: 1.3em;
    font-weight: bold;
}

/* Two notes in the sign-in card: a little air between them. */
#dashboard .dashboard-who .dashboard-note + .dashboard-note {
    margin-top: 0.4em;
}