:root {
    --picker-entry-width: 5.5rem;
    --picker-gap-x: 0.5rem;
    --body-padding: 1rem;
}

html {
    height: 100dvh;
}

body {
    font-family: sans-serif;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

#app {
    height: 100%;
}

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    background-color: whitesmoke;
}

.login {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    width: 16rem;
    color: #444;
}

.login .label-and-field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.login .notice {
    font-size: smaller;
    height: 4rem;
}

.login input {
    font-family: monospace;
    font-size: 1rem;
    padding: .25rem;
}

.login button {
    background-color: #444;
    color: whitesmoke;
    padding: .5rem;
    border: none;
}

.login a {
    color: #444;
    text-decoration: underline;
}

.login button:disabled {
    background-color: gray;
}

.login .error {
    color: crimson;
    font-weight: bold;
}

.root {
    height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr;
}

.title {
    display: flex;
    justify-content: flex-end;
    background-color: #444;
    color: whitesmoke;
    padding: .2rem;
    font-size: 1.2rem;
}

.title .app-name {
}

.title .icon {
    padding: .2rem;
    display: flex;
    align-items: center;
}

.title .inactive {
    color: #888;
}

.apps {
    flex-grow: 1;
    padding: var(--body-padding) 0;
    width: max(
      round(
        down,
        calc(100dvw - 2 * var(--body-padding) + var(--picker-gap-x)),
        calc(var(--picker-entry-width) + var(--picker-gap-x))
      )
      -
      var(--picker-gap-x),
      var(--picker-entry-width))
    ;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap-reverse;
    gap: 1.5rem var(--picker-gap-x);
    margin: 0 auto;
}

.app-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    user-select: none;
}

.app-entry:active {
    opacity: 0.5;
}

.app-entry .icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: .2rem .2rem .5rem lightgray;
}

.app-entry .icon .text {
    color: white;
    font-size: 2rem;
    font-weight: lighter;
    text-shadow: .05rem .05rem .1rem black;
}

.app-entry .name {
    font-size: smaller;
    text-align: center;
    width: var(--picker-entry-width);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon-bar {
    display: flex;
    justify-content: space-evenly;
    color: white;
    background-color: #444;
    font-variant-caps: all-small-caps;
    font-size: smaller;
    padding: 0.75rem 0;
}

.icon-bar .icon-bar-icon {
    width: 1.8rem;
    height: 1.8rem;
}

.icon-bar > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.icon-bar > div.icon-bar-disabled {
    opacity: 0.7;
}