body,
html {
    --font-size: 24px;
    --font-color: black;
    --primary: black;
    --secondary: white;
    --accent: rgb(0, 118, 182);
    --outline: yellow;
    --error: rgb(179, 0, 0);
    --error-back: rgb(247, 221, 221);
    --good: green;
    --info: rgb(39, 156, 252);
    --info-back: rgb(217, 238, 255);

    font-size: var(--font-size);
    height: 100%;
}

/* Reserve the scrollbar's space on every page, whether or not one is shown,
   so a page with a scrollbar does not shift the content beside it. */
html {
    scrollbar-gutter: stable;
}

/* The header and the footer are a matched pair: the same height, the same
   rule, one at each end of the page. The header may grow for a wrapped
   title, but never shrink below the footer's height. */
body {
    display: grid;
    grid-template-rows: minmax(3rem, auto) 1fr 3rem;
}

body>header {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--primary);
    box-sizing: border-box;
}

/* One band: the mark, the page's title, and the rule under both. The band
   wears the same 600px and padding the sections do, so everything on the
   page sits on one grid. It is the footer's height, and centres its
   contents the way the footer does. */
body>header .brand {
    width: 100%;
    max-width: 600px;
    padding: 0 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;
}

body>header img {
    width: 2rem;
    height: 2rem;
    flex: none;
}

/* A title sharing a row with the mark is smaller than a title owning a row:
   one size at which every title but the longest fits the line. */
body>header h1 {
    font-size: 1.5rem;
    min-width: 0;
}

nav {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}

nav a {
    color: var(--primary);
}

/* One size and one weight for a section heading, wherever it appears. */
h2 {
    font-size: 1.2rem;
    font-weight: bold;
}

/* A link is the accent colour, no underline. The launcher's app names are
   the one link that also grows, because there they are content. */
a {
    color: var(--accent);
    text-decoration: none;
}

main {
    display: flex;
    justify-content: center;
    /* The input's intrinsic width would otherwise set a floor the viewport
       cannot go under. */
    min-width: 0;
}

/* The footer is meta: it sits in the secondary size tier with the hints. */
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 1px var(--primary);
    font-size: 0.75rem;
}

nav ul {
    display: flex;
    flex-direction: row;
}

/* HR */

hr {
    width: 100%;
    border: 1px solid var(--font-color);
}

/* FORM */
/* The section is the spacing container: every direct child gets room above
   it, and nothing has to remember to pad itself. border-box keeps the
   600px width meaning the same thing it always did (504px of content). */
section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-self: center;
    min-width: 0;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
}

form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

form>div>label {
    font-weight: bold;
}


/* FIELD */

form .field {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
}

form fieldset.field {
    border: 0;
    margin: 0;
    padding: 0;
}

/* A legend names a field exactly as a label does, so it carries the same
   weight. */
form fieldset legend {
    display: contents;
    font-weight: bold;
}

/* Hints sit in the secondary size tier. */
form .field small {
    font-size: 0.75rem;
}

form .field.invalid {
    border-left: solid 4px var(--error);
    padding-left: 1rem;
    padding-bottom: .3rem;
}

form .field.valid {
    border-left: solid 4px var(--good);
    padding-left: 1rem;
}

form input {
    font-size: 1rem;
    padding: 0.4rem;
    border: solid 2px var(--primary);
    border-radius: 0px;
    transition: box-shadow 0.3s ease;
}

/* At the UA's default size a checkbox is an afterthought next to this text;
   size it to the text and keep it centred on the line. */
form input[type=checkbox] {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

form .field.invalid input {
    border: solid 2px var(--error);
}

form .field.invalid input:focus,
form .field.invalid input:hover {
    box-shadow: 0 0 0 4px var(--error);
}

form .field.valid input {
    border: solid 2px var(--good);
}

form input:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--font-color);
}

/* FORM SUBMIT */

form .submit {
    display: flex;
    justify-content: right;
}

/* BUTTON */

/* A button's label is one unit; if it wrapped, the button would change shape
   under its reader. */
form button {
    white-space: nowrap;
}

form input[type=submit] {
    padding: 0.5rem 1.5rem;
    color: var(--secondary);
    background-color: var(--accent);
    /* border-radius: 1.5rem; */
    border: none;
    font-size: inherit;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

form input[type=submit]:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--font-color);
}

form input[type=submit]:hover {
    box-shadow: 0 0 0 4px var(--font-color);
}

form input[type=submit] {
    align-self: start;
}

/* ERROR SUMMARY */

.error-summary {
    box-shadow: 0 0 0 4px var(--error);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
}

.error-summary div {
    color: var(--error);
}

/* INFO SUMMARY */

.info-summary {
    box-shadow: 0 0 0 4px var(--info);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
}

.info-summary div {
    color: var(--font-color);
}

/* ERROR */

.field-error {
    color: var(--error);
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.field-error svg {
    width: 1.3rem;
    fill: var(--error);
}


@media (min-width:801px) {
    section {
        width: 600px;
    }
}
/* ACCOUNT PAGE */

/* The page's own forms are a single button each, so the generous padding and
   gap the login form wants would put a sea of space around every one of them. */
.sessions form,
.launcher form {
    padding: 0;
    gap: 0;
}

.account-section h2 {
    padding-bottom: 0.5rem;
}

/* LAUNCHER */

.launcher {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.launcher a {
    color: var(--accent);
    font-size: 1.1rem;
}

.empty {
    color: var(--font-color);
    font-size: 1rem;
}

/* SESSIONS */

.sessions {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* A card list: each row self-contained in a frame, its title first, then
   what the row is about, then its actions. The current session wears a
   heavier accent frame, so ending the wrong one is a mistake the page
   prevents rather than explains. */
.sessions li,
.people > li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--primary);
    padding: 1rem 1.2rem;
}

.sessions li.current {
    border: 2px solid var(--accent);
}

.sessions .device,
.people .who {
    font-weight: bold;
    font-size: 1.1rem;
}

.sessions .meta {
    font-size: 0.8rem;
}

/* Destructive actions: red outline, no fill. The danger is legible at rest
   and the blue stays reserved for the ordinary action. Every session row is
   destructive, so the whole list does. */
.sessions button {
    padding: 0.4rem 1.2rem;
    color: var(--error);
    background-color: var(--secondary);
    border: solid 2px var(--error);
    font-size: 0.8rem;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.sessions button:hover,
.sessions button:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--error);
}

/* ADMINISTRATION */

/* Not a warning and not an error: an administrator is being asked to confirm
   something ordinary, and dressing it in red would teach them to ignore red. */
.step-up {
    margin: 0;
    padding: 1rem;
    border-left: solid 4px var(--info);
    background-color: var(--info-back);
}

.step-up p {
    font-size: 1rem;
    padding-bottom: 0.5rem;
}

.step-up form {
    padding: 0;
    gap: 0;
}

/* Every notice this service writes is something that went wrong — a failed
   invitation, a failed save — so it wears the failure's colour. A success
   state will want a class of its own when it exists. */
.notice {
    margin: 0;
    padding: 0.8rem 1rem;
    border-left: solid 4px var(--error);
    background-color: var(--error-back);
    font-size: 1rem;
}

.people {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* The card's actions share a bottom row at the card's end. The eject button
   lives in this row but belongs to the (empty) eject form it points at. */
.people .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

/* Card actions are card-sized, not page-sized: same size, so the pair sits
   level and the two of them fit in the card. */
.people .actions input[type=submit] {
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
}

.step-up form {
    padding: 0.5rem 0;
}

.people fieldset.field label,
.people .field label {
    font-weight: normal;
    font-size: 1rem;
}

/* The decision was made in a reviewed file, so it reads as a statement. */
.people label.fixed {
    color: var(--font-color);
    font-style: italic;
    opacity: 0.8;
}

.people button {
    padding: 0.4rem 1.2rem;
    color: var(--secondary);
    background-color: var(--accent);
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

/* "Save roles" is ordinary; ejecting somebody is not. */
.people button.destructive {
    color: var(--error);
    background-color: var(--secondary);
    border: solid 2px var(--error);
}

.people button.destructive:hover,
.people button.destructive:focus {
    box-shadow: 0 0 0 4px var(--error);
}

.people button:hover,
.people button:focus,
.step-up button:hover,
.step-up button:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--font-color);
}

.step-up button {
    padding: 0.5rem 1.5rem;
    color: var(--secondary);
    background-color: var(--accent);
    border: none;
    font-size: inherit;
    cursor: pointer;
}

/* The sub-navigation between the users and invitations pages. */
.subnav {
    font-size: 1rem;
}

.subnav a {
    color: var(--accent);
}

.subnav .on {
    font-weight: bold;
}