/*
 * One hand-written stylesheet, served as one file.
 *
 * Every colour is a token on :root and no colour is written anywhere else.
 * StylesheetColoursTest fails the build on a colour outside that block, and
 * ColourContrastTest reads the same block and fails on any pair below WCAG AA.
 * A new colour is therefore a new token, and a new pair of colours is a new
 * line in the contrast test.
 *
 * Layout starts at phone width and adds to it, since field staff work on
 * their own phones. The main breakpoint is 40rem, the width of a form, which
 * a media query cannot read from the --measure token and so repeats. The case
 * page and the individual's page add one more, at 56.25rem, where their two
 * columns fit side by side.
 */

:root {
    --colour-page: #f5f7f8;
    --colour-surface: #ffffff;
    --colour-text: #1f2a30;
    --colour-text-muted: #55636b;
    --colour-border: #cfd8dc;
    --colour-input-border: #7a878e;
    --colour-accent: #0f5e6e;
    --colour-accent-hover: #0b4a57;
    --colour-accent-tint: #e6f1f3;
    --colour-accent-text: #ffffff;
    /*
     * What a note is written on. Against the page it is a change of hue rather
     * than of lightness, which is the same as the white panels it sits among,
     * so the border and the edge rule are what mark a card out for a reader who
     * cannot tell the two hues apart or is reading in bright sun.
     */
    --colour-note: #fdf6d3;
    --colour-success: #1b6b3a;
    --colour-success-tint: #e3f3e8;
    --colour-danger: #a4262c;
    --colour-danger-tint: #fbe9ea;
    /*
     * What the page is dimmed with behind a pop-up: the text colour at 70%,
     * so the page shows through without competing with what is on top.
     */
    --colour-backdrop: #1f2a30b3;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    --radius: 8px;

    /* The widest a line of text or a form gets, for reading at a desk. */
    --measure: 40rem;
    /* Tall enough to be a comfortable target on a phone. */
    --target: 2.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--colour-page);
    color: var(--colour-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    /* A long username or identifier wraps rather than widening the page. */
    overflow-wrap: anywhere;
}

main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-6);
}

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 var(--space-4);
}

a {
    color: var(--colour-accent);
}

/*
 * One outline for every focused control. It is 3px and in the accent colour,
 * which ColourContrastTest holds at 3:1 against the page and the panels.
 */
:focus-visible {
    outline: 3px solid var(--colour-accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/*
 * The header. It is not sticky, so that it can never sit over the focused
 * field, which WCAG 2.2 calls focus not obscured. It wraps rather than
 * shrinking, so the name and the button stay readable at 200% text.
 */

.site-header {
    background-color: var(--colour-accent);
    color: var(--colour-accent-text);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    /*
     * Full width rather than the content's measure, because the measure differs
     * between a form and the audit table. The height is set so that the sign-in
     * page, which has no button, has the same header as every other page.
     */
    min-height: calc(var(--target) + 2 * var(--space-2));
    padding: var(--space-2) var(--space-3);
}

.site-header__name {
    color: var(--colour-accent-text);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}

.site-header__name:hover {
    text-decoration: underline;
}

/* The accent outline would vanish against the accent background. */
.site-header :focus-visible {
    outline-color: var(--colour-accent-text);
}

.site-header form {
    margin: 0;
}

/* The name and the way to find somebody on one side, who is signed in and the way out on the other. */
.site-header__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.site-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target);
    color: var(--colour-accent-text);
    font-weight: 600;
    text-decoration: none;
}

.site-header__link:hover {
    text-decoration: underline;
}

.site-header__who {
    color: var(--colour-accent-text);
}

/*
 * Buttons come in two kinds. The primary is the main action on a page, and
 * there is one at most. The secondary is everything else.
 */

.button {
    display: inline-flex;
    /* A link drawn as a button reads as a button, so it loses the underline. */
    text-decoration: none;
    align-items: center;
    justify-content: center;
    min-height: var(--target);
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--colour-accent);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    /* Between an icon and the words, where a button carries one. */
    gap: var(--space-2);
}

.button--primary {
    background-color: var(--colour-accent);
    color: var(--colour-accent-text);
}

.button--primary:hover {
    background-color: var(--colour-accent-hover);
    border-color: var(--colour-accent-hover);
}

.button--secondary {
    background-color: var(--colour-surface);
    color: var(--colour-text);
    border-color: var(--colour-input-border);
}

.button--secondary:hover {
    background-color: var(--colour-accent-tint);
}

/*
 * The main action at the foot of a form. It stands further from the last
 * field than the fields stand from each other, so that it does not read as
 * part of that field. On a phone it fills the width, so that a thumb finds it.
 */
.panel > .button--primary {
    width: 100%;
    margin-top: var(--space-4);
}

@media (min-width: 40rem) {
    .panel > .button--primary {
        width: auto;
    }
}

/*
 * Sign out, which sits on the accent colour in the header. It is the action
 * used least, so it is drawn as underlined text rather than an outlined
 * button. It stays a button in a form, because signing out is a post.
 */
.button--on-accent {
    min-height: var(--target);
    padding: var(--space-1) var(--space-2);
    border-width: 0;
    background-color: transparent;
    color: var(--colour-accent-text);
    font-weight: 400;
    text-decoration: underline;
}

.button--on-accent:hover {
    background-color: var(--colour-accent-hover);
}

/*
 * Forms. This application is mostly forms, so these rules carry most of the
 * interface. A form sits on a white panel. Labels sit above their field rather
 * than beside it, which is what survives a narrow screen and enlarged text.
 */

.panel {
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-3);
    margin-bottom: var(--space-4);
}

.panel > :last-child {
    margin-bottom: 0;
}

.field {
    margin: 0 0 var(--space-4);
}

label,
legend {
    display: block;
    font-weight: 600;
}

/*
 * The sections of a long form, such as the one an individual is registered
 * on, and of the page that shows what it holds. A line above each after the
 * first separates one group of fields from the next.
 */
.form-section {
    margin: 0 0 var(--space-3);
    font-size: 1.125rem;
    line-height: 1.25;
}

.form-section:not(:first-of-type) {
    padding-top: var(--space-4);
    border-top: 1px solid var(--colour-border);
}

.optional {
    color: var(--colour-text-muted);
    font-weight: 400;
}

.hint {
    display: block;
    margin: var(--space-1) 0 0;
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

/*
 * Every field that holds something typed. The types are listed one by one
 * rather than matched with :not, so that a checkbox and a radio, which are laid
 * out beside their label rather than under it, cannot be caught by accident.
 */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    min-height: var(--target);
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--colour-input-border);
    border-radius: var(--radius);
    background-color: var(--colour-surface);
    color: var(--colour-text);
    /* Below 16px, iOS Safari zooms the page when the field takes focus. */
    font-size: 1rem;
    /* A text area otherwise takes the browser's monospace font. */
    font-family: inherit;
}

/*
 * A file input, which is the photo's. As wide as the field and no wider, so
 * that the browser's own button and the name of the file chosen wrap rather
 * than push the page sideways at a narrow width or with large text, and as
 * tall as any other control so it is as easy to hit.
 */
input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--target);
    margin-top: var(--space-2);
    font-size: 1rem;
    font-family: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A field for a few characters, such as an age, as wide as what it holds. */
.field--short input {
    max-width: 6rem;
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
}

/*
 * A field in error. The red bar down its side and the thicker border say so to
 * anybody who sees colour, and the icon and the words say so to everybody else.
 */

.field--error {
    border-left: 4px solid var(--colour-danger);
    padding-left: var(--space-3);
}

.field__message {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin: var(--space-2) 0 0;
    color: var(--colour-danger);
    font-weight: 700;
}

.field__message-lines {
    display: flex;
    flex-direction: column;
}

.field--error input[type="text"],
.field--error input[type="password"],
.field--error input[type="tel"],
.field--error input[type="date"],
.field--error input[type="time"],
.field--error input[type="number"],
.field--error select[aria-invalid="true"],
.field--error textarea {
    border: 3px solid var(--colour-danger);
}

/*
 * A group of checkboxes, such as the roles on a staff user. The legend names
 * the group and the label sits beside its box rather than above it, which is
 * the one place that reads better than the rule above.
 */

fieldset {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

fieldset.field--error {
    padding-left: var(--space-3);
}

.choice {
    margin: var(--space-2) 0 0;
}

/*
 * The date of birth: three boxes in a row, each as wide as what it holds, so
 * that their size says what goes in them.
 */

/* In line with the labels of the fields above it. */
.date-of-birth > legend,
.gender > legend {
    padding: 0;
}

.date-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
}

.date-box label {
    font-weight: 400;
}

.date-box--day,
.date-box--month {
    width: 4rem;
}

.date-box--year {
    width: 6rem;
}

/*
 * The age sits closer under the date of birth than one field sits under the
 * next, because it is the same question asked another way.
 */
.date-or-age > .date-of-birth {
    margin-bottom: var(--space-3);
}

.field--error .date-box input[aria-invalid="true"] {
    border: 3px solid var(--colour-danger);
}

/*
 * The phone number rows: the kind of phone and the number side by side where
 * there is room, and one above the other where there is not. The number takes
 * whatever width the kind leaves.
 */

/* In line with the labels of the fields above it. */
.phone-numbers > legend {
    padding: 0;
}

.phone-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
}

.phone-row__label {
    flex: 0 1 9rem;
    min-width: 0;
}

.phone-row__number {
    flex: 0 1 16rem;
    min-width: 0;
}

/* Parts of one row, like the day, month and year boxes, so not bold. */
.phone-row label {
    font-weight: 400;
}

.choice label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
    /* A comfortable target on a phone, box and words together. */
    min-height: var(--target);
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    /* The browser's own margin would push the box right of the label above. */
    margin: 0;
    flex: none;
    accent-color: var(--colour-accent);
}

/*
 * A set of options, such as the genders. One per row on a phone, and side by
 * side where the form is wide enough, each keeping its full-height target.
 */
@media (min-width: 40rem) {
    .choices {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-4);
    }
}

/*
 * The username, password and roles on the create staff user form, put away
 * while "does not sign in" is chosen. A selector rather than a script, so it
 * works on a page running none, and display rather than colour, so the fields
 * leave the page, the tab order and what a screen reader reads. A browser
 * without :has() shows them, and the hint on the choice says to leave them
 * empty. Where the service has just refused one of them, the group stays shown
 * so that the field in error can be seen and cleared.
 */
form:has(input[name="signsIn"][value="false"]:checked) .sign-in-details:not(.sign-in-details--refused) {
    display: none;
}

/*
 * Notices say what just happened. Each has a tinted background, a border that
 * is heavier on the left, an icon and a bold title, so that neither kind
 * depends on colour to be told apart: success carries a tick and error a "!".
 */

.notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 2px solid;
    border-left-width: 6px;
    border-radius: var(--radius);
}

.notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    color: var(--colour-accent-text);
}

.notice__title {
    margin: 0;
    font-weight: 700;
}

.notice--success {
    background-color: var(--colour-success-tint);
    border-color: var(--colour-success);
}

.notice--success .notice__icon {
    background-color: var(--colour-success);
}

.notice--success .notice__title {
    color: var(--colour-success);
}

.notice--error {
    background-color: var(--colour-danger-tint);
    border-color: var(--colour-danger);
}

.notice--error .notice__icon {
    background-color: var(--colour-danger);
}

.notice--error .notice__title {
    color: var(--colour-danger);
}

/* Every problem on the form, each a link to its field. */

.error-summary {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 2px solid var(--colour-danger);
    border-left-width: 6px;
    border-radius: var(--radius);
    background-color: var(--colour-danger-tint);
}

.error-summary h2 {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    color: var(--colour-danger);
}

.error-summary ul {
    margin: 0;
    padding-left: var(--space-4);
}

.error-summary li + li {
    margin-top: var(--space-1);
}

.error-summary a {
    color: var(--colour-danger);
    font-weight: 600;
}

/*
 * The home page, as a list of tasks. Each is one full-width link, so the whole
 * row is the target rather than only its words.
 */

.tasks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tasks li + li {
    margin-top: var(--space-2);
}

.task {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 4rem;
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background-color: var(--colour-surface);
    color: var(--colour-text);
    text-decoration: none;
}

.task:hover {
    background-color: var(--colour-accent-tint);
}

.task__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background-color: var(--colour-accent-tint);
    color: var(--colour-accent);
}

.task__words {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.task__title {
    font-weight: 600;
    color: var(--colour-accent);
}

.task__chevron {
    color: var(--colour-text-muted);
}

/*
 * A table, which today is the audit log and nothing else. Administrative
 * screens are allowed to assume a larger screen, so this stays a table at
 * phone width and scrolls sideways inside its own box rather than making the
 * whole page do it.
 */

.scrolls {
    overflow-x: auto;
    /*
     * A containing block for what the box holds, so that the hidden words
     * beside an empty field's dashes are scrolled with the table rather than
     * sitting wherever the document puts them. Absolutely positioned text is
     * clipped by an ancestor only where that ancestor is positioned, and
     * without this the words beside the last column stretched the page itself
     * sideways at phone width.
     */
    position: relative;
    margin-bottom: var(--space-4);
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

table {
    border-collapse: collapse;
    /* Wider than a phone, which is what the box above is for. */
    min-width: 100%;
}

th,
td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--colour-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    overflow-wrap: normal;
}

tr:last-child td {
    border-bottom: 0;
}

th {
    font-weight: 600;
}

/*
 * The row number on the staff members list. Three digits fit, and the column
 * takes no more room than that, so the columns somebody reads keep theirs.
 */
.staff-users__row-number {
    width: 3ch;
    color: var(--colour-text-muted);
}

/* Long and never read as a word, so it is allowed to be smaller. */
.identifier {
    font-size: 0.875rem;
    color: var(--colour-text-muted);
}

.paging {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

/* The audit page reads at desk width, which the spec allows it to assume. */
.wide {
    max-width: 72rem;
}

/*
 * The top of a record's page: its name, with the main action level with it
 * where there is room and wrapped under it where there is not.
 */

.record-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}

/*
 * A long name wraps inside its own column, so the button stays beside it at
 * desk width. Below about 12rem of room the button wraps under the name.
 */
.record-heading h1 {
    flex: 1 1 12rem;
    margin: 0;
}

/* The line under a name that says who the person is at a glance. */
.summary {
    margin: 0 0 var(--space-3);
    font-size: 1.125rem;
}

/*
 * The mark that says a staff user can sign in, drawn after their name wherever
 * such a person is listed beside somebody who does not.
 *
 * A square turned 45 degrees, drawn here rather than taken from a font, so that
 * it is the same shape on every phone. It is sized in em, so it grows with the
 * name at 200% text, and it sits on the accent colour, so it needs no token of
 * its own and nothing new for the contrast test to check. The words that say
 * what it means travel with it in the fragment that draws it, because a shape
 * on its own says nothing to a screen reader.
 */

.mark {
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: 0.08em;
}

.mark--can-sign-in {
    width: 0.42em;
    height: 0.42em;
    background-color: var(--colour-accent);
    transform: rotate(45deg);
}

/*
 * A state shown as a badge, such as whether a case is open. Its words say the
 * state, so the colour is never the only sign of it.
 */
.badge {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge--open {
    background-color: var(--colour-accent-tint);
    border-color: var(--colour-accent);
    color: var(--colour-accent);
}

.badge--closed {
    background-color: var(--colour-surface);
    border-color: var(--colour-input-border);
    color: var(--colour-text-muted);
}

/*
 * The state of a case and how long ago it was last written on and last visited,
 * in one block. The block carries the space below them, so the badge inside it
 * gives up the margin it has on its own.
 */
.case-state {
    margin: 0 0 var(--space-4);
}

.case-state .badge {
    margin-bottom: 0;
}

/*
 * How long ago something last happened on the record, such as the last note on
 * a case. Muted and smaller than the words it summarises, because the record
 * itself is what the eye should land on.
 */
.last-activity {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

/*
 * A record's details. The label is muted and the value in the text colour,
 * so that the eye lands on the value. On a phone each label sits above its
 * value, so that a long value wraps inside the column instead of pushing the
 * page wider. From the form width up the label sits to the left, and the two
 * share a baseline, so that a phone number drawn as a tall target still lines
 * up with its label.
 */

.details {
    margin: 0 0 var(--space-4);
}

.details > div + div {
    margin-top: var(--space-3);
}

.details dt {
    font-weight: 400;
    color: var(--colour-text-muted);
}

.details dd {
    margin: var(--space-1) 0 0;
    color: var(--colour-text);
    overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
    .details > div {
        display: grid;
        grid-template-columns: 10rem 1fr;
        column-gap: var(--space-3);
        align-items: baseline;
    }

    .details dd {
        margin: 0;
    }
}

/*
 * The few facts that read as one line rather than as a row each, such as the
 * age, the date of birth and the gender at the top of a staff user's page.
 * Each label stays beside its value, and a pair wraps onto the next line where
 * the width runs out, which is what a phone does. Written after the rules above
 * so that it holds at every width.
 */
.details--inline {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
}

.details--inline > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.details--inline > div + div {
    margin-top: 0;
}

.details--inline dd {
    margin: 0;
}

/* A field with nothing in it, which reads as a gap rather than as a value. */
.not-recorded {
    color: var(--colour-text-muted);
}

/* The link that fills the gap, set a little apart from the words before it. */
.add,
.edit {
    margin-left: var(--space-2);
}

/*
 * The people connected to an individual. One per row, ruled between rows, the
 * shape the assignments on a case use. The name first, because that is who
 * somebody is looking for, and the relationship in the muted colour.
 */
.related-parties {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.related-parties li {
    padding: var(--space-2) 0;
}

.related-parties li + li {
    border-top: 1px solid var(--colour-border);
}

.related-party__who,
.related-party__notes,
.related-party__actions {
    margin: 0;
    overflow-wrap: anywhere;
}

.related-party__name {
    font-weight: 600;
}

.related-party__relationship {
    color: var(--colour-text-muted);
}

/* A number is a link that starts a call, so it is tall enough to tap. */
.related-party__phone {
    display: inline-block;
    padding: var(--space-1) 0;
}

.related-party__notes {
    margin-top: var(--space-1);
}

/*
 * The number to call, then Edit and Remove, on one line where there is room.
 * Each is tall enough to tap, and the gap keeps a thumb from catching the
 * wrong one.
 */
.related-party__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

#no-related-parties {
    margin: 0;
}

/* What removing does, set apart from the name above it and the button below. */
.related-party__removal-hint {
    margin: var(--space-2) 0 var(--space-3);
}

/* A value typed over several lines, such as an address, keeps its line breaks. */
.multiline {
    white-space: pre-line;
}

/*
 * A form the page keeps put away until it is asked for, such as writing a note
 * or assigning somebody, so that the record is what the page shows first. The
 * summary is drawn as the button it behaves like, which means clearing the
 * marker the browser draws for it.
 */

/*
 * A section's heading with its action beside it, such as Notes and the way to
 * add one. On a narrow screen the two sit on one line and the action keeps to
 * the right; anything that needs the full width, such as the form once it is
 * open, wraps onto its own line below.
 */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-5) 0 var(--space-3);
}

.section-heading > h2 {
    margin: 0;
}

/*
 * Open, and a form that came back refused, take the line to themselves.
 *
 * A flex item is otherwise never narrower than its widest content, and a
 * drop-down's widest option is wider than a phone screen once text is enlarged,
 * so without this the page scrolls sideways instead of the box shrinking.
 */
.disclosure[open],
.section-heading > .panel {
    flex-basis: 100%;
    min-width: 0;
}

.disclosure__control {
    /* Both are needed: the second is what Safari reads. */
    list-style: none;
}

.disclosure__control::-webkit-details-marker {
    display: none;
}

/*
 * One control with two labels, one shown at a time, so that it says what
 * pressing it does rather than repeating the button at the foot of the form.
 * display: none keeps the label that does not apply out of what a screen
 * reader reads as well as out of the picture.
 */
.disclosure:not([open]) .disclosure__when-open,
.disclosure[open] .disclosure__when-closed {
    display: none;
}

/*
 * Open, the control is a cross sitting above the right-hand corner of the
 * form, which is where something is put away. It steps back to the secondary
 * treatment so that the button at the foot of the form is the only one that
 * reads as the action. Two primary buttons one above the other read as two
 * things to press.
 */
.disclosure[open] {
    text-align: right;
}

/* The form reads left to right, whatever the corner above it is doing. */
.disclosure[open] > .panel {
    text-align: left;
}

.disclosure[open] > .disclosure__control {
    margin-bottom: var(--space-2);
    background-color: var(--colour-surface);
    border-color: var(--colour-input-border);
    color: var(--colour-text);
}

.disclosure[open] > .disclosure__control:hover {
    background-color: var(--colour-accent-tint);
}

/*
 * Who is responsible for the case. One person per row, the name first because
 * that is what somebody is looking for, then what they are responsible for and
 * since when in the muted colour. A rule between rows rather than a card each:
 * this is a short list of names and not a record of something that happened.
 */

.assignments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.assignments li {
    padding: var(--space-2) 0;
}

.assignments li + li {
    border-top: 1px solid var(--colour-border);
}

.assignment__who {
    font-weight: 600;
}

.assignment__responsibility,
.assignment__since,
.assignment__between {
    color: var(--colour-text-muted);
}

/*
 * How long an assignment lasted, in brackets after its days. It takes its colour
 * from .hint, which already passes the contrast floor, and this only keeps it on
 * the same line as the days rather than below them.
 */
.assignment__lasted {
    display: inline;
    margin: 0;
}

/*
 * A Staff Member's history of assignments, which uses the case page's list.
 * A running assignment carries the word ACTIVE in a badge, so it stands out
 * from the ended ones below it. The word is what carries the meaning; the
 * colour only draws the eye to it.
 */
.assignment-history__active {
    display: inline-block;
    padding: 0 var(--space-1);
    border: 1px solid var(--colour-success);
    border-radius: var(--radius);
    background-color: var(--colour-success-tint);
    color: var(--colour-success);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/*
 * The way to end one assignment, at the end of its row. On its own line at
 * phone width, because a name, a responsibility, a day and a link do not fit on
 * one, and tall enough to tap without catching the row above.
 *
 * The gap on the left is what keeps it off the day beside it. The row has no
 * separator between the link and the date, so without this "End" reads as part
 * of the date wherever the two sit on one line.
 */
.assignment__end {
    display: inline-block;
    margin-top: var(--space-2);
    margin-left: var(--space-3);
    padding: var(--space-1) 0;
}

/*
 * The diagnoses recorded against somebody, as the screen that changes them
 * lists them and as a case page lists them per member. One per row, ruled
 * between rows, the same shape as the assignments above: a short list of facts
 * and not a record of something that happened.
 *
 * The record itself draws them as one line instead, because reading them
 * happens on every visit and five ruled rows spent most of a phone screen on
 * the control at the end of each one.
 */
.diagnoses {
    list-style: none;
    margin: 0;
    padding: 0;
}

.diagnoses li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    padding: var(--space-2) 0;
}

.diagnoses li + li {
    border-top: 1px solid var(--colour-border);
}

.diagnosis__label {
    font-weight: 600;
}

/*
 * The same conditions as one line, separated by commas, which is how a record
 * and a case row read them. It carries no weight of its own: on the record it
 * is the value of a field beside the date of birth and the gender, and reading
 * bolder than those would say it mattered more.
 */
.diagnosis__line {
    min-width: 0;
}

/* Who the diagnosis belongs to, where the case covers more than one person. */
.diagnosis__member {
    color: var(--colour-text-muted);
}

/*
 * The way to take one off, at the end of its row. It is a form rather than a
 * link, because taking one off is a post, and it is drawn as text rather than
 * as an outlined button so that a list of six does not read as six buttons.
 * The row pushes it to the end, and it is tall enough to tap without catching
 * the row above.
 */
.diagnosis__form {
    margin-left: auto;
}

.diagnosis__remove {
    min-height: var(--target);
    padding: var(--space-1) 0;
    border-width: 0;
    background-color: transparent;
    color: var(--colour-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/*
 * The conditions the add page offers. One per row, because a label can run to
 * three words and two columns of them wrap badly at phone width with enlarged
 * text. The box and its words are one target.
 *
 * A ticked option reads in bold. That is a second cue on top of the box rather
 * than the only one, and it is a sibling selector on the checkbox, so it needs
 * no script.
 */
.diagnosis-choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    min-height: var(--target);
}

.diagnosis-choice input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    /* The browser's own margin would push the box right of the label above. */
    margin: 0;
    flex: none;
    accent-color: var(--colour-accent);
}

.diagnosis-choice label {
    font-weight: 400;
}

.diagnosis-choice input[type="checkbox"]:checked + label {
    font-weight: 700;
}

/*
 * The line saying what is ticked so far, above the filter. It is set apart
 * from the options below it, because it is about the whole form rather than
 * about any one row.
 */
#diagnosis-selected {
    margin: 0 0 var(--space-3);
}

/* How many of the list the filter left, above the options it left. */
#diagnosis-match-count {
    margin: 0 0 var(--space-2);
}

/*
 * The filter above those options: the box, and the button beside it where
 * there is room and under it where there is not. The button lines up with the
 * foot of the box rather than with its label.
 */
.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.filter > .field {
    flex: 1 1 14rem;
    min-width: 0;
}

.filter > .button {
    margin-bottom: var(--space-4);
}

/*
 * The notes on a case, newest first. Each is a record of something that
 * happened rather than part of the interface around it, so it is marked out by
 * a rule down its edge, and it says who wrote it and when before it says what
 * happened. The text is set a little larger and looser than the interface and
 * its line length is capped, which is what carries legibility on a cheap phone
 * in sunlight.
 */

.notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * Written on paper rather than on the white the interface is built from, so
 * that a record and a form are not the same surface. The form above keeps the
 * white panel, which is the distinction doing the work.
 */
.notes li {
    padding: var(--space-3);
    background-color: var(--colour-note);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-accent);
    border-radius: var(--radius);
}

.notes li + li {
    margin-top: var(--space-3);
}

/*
 * Who wrote it and when, at the size of the rest of the page. It is the
 * provenance that makes an observation worth anything a year later, so it is
 * held back by colour alone rather than by being the smallest text on screen.
 */
.note__by {
    margin: 0 0 var(--space-2);
    color: var(--colour-text-muted);
}

.note__text {
    margin: 0;
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.6;
}

/* Search results: one link per row, each tall enough to tap. */

.results {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.results li + li {
    border-top: 1px solid var(--colour-border);
}

.results a {
    display: flex;
    align-items: center;
    min-height: var(--target);
    padding: var(--space-2) var(--space-3);
    overflow-wrap: anywhere;
}

/*
 * The recently changed list, which carries a time under each name, and the
 * results of a search by phone number, which carry the number that matched.
 * Both sit inside the link, so the whole row stays one target.
 */

/*
 * The underline is moved off the row and onto the name. A decoration drawn by
 * the link propagates to everything inside it and a descendant cannot turn it
 * off, so the time or the number would be underlined too and read as a
 * second link.
 */

.results--two-line a {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
    text-decoration: none;
}

.results--two-line a:hover .results__name,
.results--two-line a:focus-visible .results__name,
.results__name {
    text-decoration: underline;
}

.results__when,
.results__number {
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

/* The label and the number it belongs to, with a gap between them. */
.results__label {
    margin-right: var(--space-1);
}

/*
 * A date, kept on one line. A browser may break a line at a dash, so without
 * this 3-Oct-2026 can come out as "3-Oct-" with "2026" under it, which undoes
 * what the dashes are for. fragments/dates draws the element, around the date
 * and nothing else, so the words beside it still wrap.
 */
.date {
    white-space: nowrap;
}

/*
 * The case page, the individual's page and a staff member's page: a header
 * card above two columns.
 * They are the pages wider than a form, because two columns sit side by side
 * at desk width.
 */
.case-page,
.individual-page,
.staff-user-page {
    max-width: 75rem;
}

/*
 * The header card. Who the case is about and what shape it is in on the left,
 * and the two actions on the right where there is room. Below about 20rem of
 * room the actions wrap under the name.
 */
.case-header,
.record-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-3);
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.case-header__who,
.record-header__who {
    flex: 1 1 20rem;
    min-width: 0;
}

.case-header h1,
.record-header h1 {
    margin: 0 0 var(--space-1);
    font-size: 1.75rem;
}

/*
 * The name is a link to the person's record. It reads as a heading, in the
 * text colour and without an underline, and the chevron after it is what says
 * it leads somewhere. It is underlined on hover, as a badge that leads
 * somewhere is.
 */
.case-header__name {
    color: var(--colour-text);
    text-decoration: none;
}

.case-header__name:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.case-header__name .icon {
    color: var(--colour-accent);
    vertical-align: -0.15em;
    margin-left: var(--space-1);
}

.case-header .summary,
.record-header .summary {
    margin: 0 0 var(--space-2);
    color: var(--colour-text-muted);
}

/* The state, the last note and the last encounter on one line where they fit. */
.case-header .case-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

.case-header .last-activity {
    margin: 0;
}

.case-header__actions,
.record-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

/*
 * The two columns. On a phone there is one, in the order the page is written:
 * the diagnoses and the care team, then the care record. From 56.25rem the care
 * record takes the left-hand column and the other two a narrow one on the
 * right, without changing that order for a screen reader or the keyboard.
 *
 * minmax(0, 1fr) rather than 1fr, because a column is otherwise never narrower
 * than its widest content, and the drop-down of staff is wider than a phone at
 * double text size.
 */
.case-layout,
.record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.case-layout__side,
.record-layout__side,
.record-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.case-layout__record {
    min-width: 0;
}

.case-layout__record > .section-heading {
    margin-top: 0;
}

@media (min-width: 56.25rem) {
    .case-layout,
    .record-layout {
        grid-template-columns: minmax(0, 1fr) 22.5rem;
    }

    .case-layout__side,
    .record-layout__side {
        grid-column: 2;
        grid-row: 1;
    }

    .case-layout__record,
    .record-layout__main {
        grid-column: 1;
        grid-row: 1;
    }
}

/* A white card in a column, holding one short list of facts. */
.card {
    padding: var(--space-3);
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.card > .section-heading {
    margin: 0 0 var(--space-2);
}

/*
 * A card's heading is smaller and muted, so that the people and the conditions
 * in it are what the eye lands on.
 */
.card .section-heading > h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.0625rem;
    color: var(--colour-text-muted);
}

.card .section-heading > h2 .icon {
    color: var(--colour-accent);
}

/*
 * An action drawn as words rather than as an outlined button, such as Change
 * the lead in the care team card, where two outlined buttons would crowd the
 * heading. It is still tall enough to tap.
 */
.text-button,
.card .section-heading > .add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--target);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--colour-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.text-button:hover,
.card .section-heading > .add:hover {
    background-color: var(--colour-accent-tint);
}

/*
 * One condition in the diagnoses card. The chips wrap onto a second line where
 * the card runs out of width, and they are still one list rather than a row
 * each.
 */
.diagnosis__line--chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    display: inline-block;
    padding: 0 var(--space-3);
    background-color: var(--colour-page);
    border: 1px solid var(--colour-border);
    border-radius: 999px;
    font-size: 0.9375rem;
}

/*
 * The care team. The lead is first and drawn larger on a tint, because the
 * lead is who a worker calls. The way to end an assignment sits at the right of
 * the line that says since when.
 */
.case-page .assignments li {
    display: flow-root;
}

.case-page .assignment--lead {
    padding: var(--space-2) var(--space-3);
    background-color: var(--colour-accent-tint);
    border-radius: var(--radius);
}

.case-page .assignment--lead .assignment__who {
    font-size: 1.125rem;
}

.case-page .assignment--lead + li {
    border-top: 0;
}

.case-page .assignment__dates {
    display: block;
}

.case-page .assignment__end {
    float: right;
    margin: 0 0 0 var(--space-3);
}

/*
 * Who used to be responsible, put away behind a control under the people who
 * are responsible now. The chevron turns to point down when the list is open.
 */
.past-assignments {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--colour-border);
}

.past-assignments__control {
    /* Both are needed: the second is what Safari reads. */
    list-style: none;
    padding-left: 0;
}

.past-assignments__control::-webkit-details-marker {
    display: none;
}

.past-assignments__control .icon {
    width: 1rem;
    height: 1rem;
}

.past-assignments[open] .past-assignments__control .icon {
    transform: rotate(90deg);
}

.past-assignments:not([open]) .past-assignments__when-open,
.past-assignments[open] .past-assignments__when-closed {
    display: none;
}

/* What somebody was responsible for, as a small tag at the end of their name. */
.tag {
    float: right;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-input-border);
    border-radius: 999px;
    font-size: 0.875rem;
}

.assignments--past .assignment__dates {
    font-size: 0.9375rem;
}

/*
 * The three ways to cut the care record down, joined into one control. The one
 * showing is filled and bold, so it differs from the other two in lightness and
 * weight and not in hue alone.
 */
.segments {
    display: flex;
    flex-wrap: wrap;
}

.segments__option {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    padding: 0 var(--space-3);
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-input-border);
    color: var(--colour-text);
    text-decoration: none;
}

.segments__option:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.segments__option:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.segments__option + .segments__option {
    border-left: 0;
}

.segments__option:hover {
    background-color: var(--colour-accent-tint);
}

.segments__option[aria-current="page"] {
    background-color: var(--colour-accent);
    border-color: var(--colour-accent);
    color: var(--colour-accent-text);
    font-weight: 700;
}

/*
 * The note form at the top of the care record. It is drawn only while it is
 * the page's target, which the Add a note button makes it, or where a note was
 * refused and the form came back open. That needs no script.
 */
.note-form:not(.note-form--open):not(:target) {
    display: none;
}

.note-form__hide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--target);
    height: var(--target);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) 0 auto;
    border-radius: var(--radius);
    color: var(--colour-text);
}

.note-form__hide:hover {
    background-color: var(--colour-accent-tint);
}

/*
 * The care record: the notes and the encounters in one list, newest first. A
 * note is written on paper with a rule down its edge, as notes are everywhere
 * in the CMS, and an encounter on the white the interface is built from. The
 * icon and the word at the start of each entry say which it is, so the colour
 * is never the only sign.
 */
.care-record {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * The icon sits beside the words where there is room. Where there is not, at
 * the narrowest width with double text, the words wrap under it, because a
 * date kept on one line is wider than the column left beside the icon.
 */
.entry {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.entry + .entry {
    margin-top: var(--space-3);
}

.entry--note {
    background-color: var(--colour-note);
    border-left: 4px solid var(--colour-accent);
}

.entry__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background-color: var(--colour-accent-tint);
    color: var(--colour-accent);
}

.entry--note .entry__icon {
    background-color: var(--colour-surface);
}

.entry__body {
    flex: 1 1 10rem;
    min-width: 0;
}

.entry__kind {
    font-weight: 600;
    color: var(--colour-text);
}

/*
 * The individual's page. Its header, its columns and its cards are the case
 * page's, set out above. What follows is what only this page draws.
 */

/* The Add that fills an empty field, when it sits in a card's heading. */
.card .section-heading > .add {
    margin-left: 0;
}

/* The state of a case, in the heading of the card about it. */
.card .section-heading > .badge {
    margin: 0;
}

/* The line under the columns saying who registered the person, and when. */
.registered {
    margin: var(--space-4) 0 0;
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

/*
 * The patient's own numbers. Each number is large, because it is what
 * somebody came for, with its kind under it and the button that calls it on
 * the right.
 */
.phones {
    list-style: none;
    margin: 0;
    padding: 0;
}

.phone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.phone + .phone {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--colour-border);
}

.phone__what {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.phone__number {
    font-size: 1.25rem;
    font-weight: 600;
}

.phone__label {
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

/*
 * A button that starts a call. Narrower than other buttons, so that it fits
 * beside a number in the narrow column.
 */
.phone__call,
.related-parties .related-party__phone {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    color: var(--colour-accent);
}

/* The address, and the landmark under it in smaller muted type. */
.place__address,
.place__landmark {
    margin: 0;
}

.place__landmark {
    margin-top: var(--space-1);
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

/*
 * A few facts about a case, each label beside its value. The pair wraps onto
 * two lines where the card runs out of width, which a phone does at double
 * text size.
 */
.facts {
    margin: 0;
}

.facts > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
}

.facts > div + div {
    margin-top: var(--space-1);
}

.facts dt {
    flex: 0 0 6rem;
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

.facts dd {
    margin: 0;
}

/*
 * The bar along the foot of a card that opens what the card is about, such as
 * the case. It runs to the card's edges, and the chevron says it leads
 * somewhere.
 */
.card__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--target);
    margin: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3);
    background-color: var(--colour-page);
    border-top: 1px solid var(--colour-border);
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.card__bar:hover {
    background-color: var(--colour-accent-tint);
}

.card__bar .icon,
.record-header__actions .icon {
    width: 1rem;
    height: 1rem;
}

/*
 * The relatives and contacts, one per row, ruled between rows. The name and
 * the relationship as a tag on the left, the note under them, and the number
 * to call with Edit and Remove on the right where there is room.
 */
.related-party {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

.related-parties .related-party__who {
    flex: 1 1 12rem;
    min-width: 0;
}

.related-party__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
}

.related-party .tag {
    float: none;
    margin-left: 0;
    color: var(--colour-text-muted);
}

.related-party .related-party__notes {
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

.card .related-parties {
    margin: 0;
}

/*
 * A staff member's page. Its header, its columns and its cards are the case
 * page's, set out above. What follows is what only this page draws.
 */

/*
 * The initials in a circle at the start of the header, standing in for a
 * photo. The circle keeps its size and the name wraps beside it.
 */
.record-header__initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: var(--colour-accent);
    color: var(--colour-accent-text);
    font-size: 2rem;
    font-weight: 700;
}

/*
 * The person's photo, in the same circle, so the header has the same shape
 * with a photo as without. object-fit crops a photo that is not square to the
 * middle of it rather than squashing it.
 */
.record-header__photo {
    flex: none;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--colour-accent-tint);
}

/*
 * The photo is drawn twice, as a button that opens the pop-up panel and as a
 * link to the image, and only one of them is shown. The link is the default,
 * for a browser without popover. A browser that supports popover also
 * understands the :popover-open selector, so the @supports test shows it the
 * button instead. A browser too old to understand @supports selector() keeps
 * the link.
 */
.record-header__photo-control {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: zoom-in;
}

.record-header__photo-control--button {
    display: none;
}

.record-header__photo-control--link {
    display: block;
}

@supports selector(:popover-open) {
    .record-header__photo-control--button {
        display: block;
    }

    .record-header__photo-control--link {
        display: none;
    }
}

.record-header__photo-control .record-header__photo {
    display: block;
}

/*
 * The pop-up panel holding the whole photo, centred over the page. The image
 * is drawn at its stored size, at most 640 pixels on the longest side, and
 * shrinks to fit a smaller screen with room left for the Close button.
 *
 * The panel is hidden unless the browser has opened it. A browser that does
 * not know :popover-open drops the second rule, so the panel never shows
 * there, and the photo is a link instead.
 */
.photo-panel {
    display: none;
}

.photo-panel:popover-open {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    max-width: calc(100vw - 2 * var(--space-3));
    max-height: calc(100dvh - 2 * var(--space-3));
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background-color: var(--colour-surface);
    color: var(--colour-text);
}

.photo-panel::backdrop {
    background-color: var(--colour-backdrop);
}

.photo-panel__photo {
    display: block;
    max-width: 100%;
    /* The panel's own limit, less its padding, the gap and the Close button. */
    max-height: calc(100dvh - 5 * var(--space-3) - var(--target));
    border-radius: var(--radius);
}

/* The photo held now, on the form that changes it, in the same circle. */
.photo-form__current {
    display: block;
    width: 8rem;
    height: 8rem;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    object-fit: cover;
}

/* What kind of record this is, in small capitals above the name. */
.record-header__kind {
    margin: 0 0 var(--space-1);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--colour-text-muted);
}

.record-header .summary .add {
    margin-left: var(--space-1);
}

/* An account nobody can sign in to or assign any more, drawn in the danger colour. */
.badge--deactivated {
    margin: 0;
    background-color: var(--colour-danger-tint);
    border-color: var(--colour-danger);
    color: var(--colour-danger);
}

/*
 * A field nobody recorded reads "Not recorded" on this page, in muted italics,
 * so that it draws less attention than the fields that hold something.
 */
.staff-user-page .not-recorded {
    font-style: italic;
}

/*
 * The facts in the Contact and Other details cards, ruled between rows. Add
 * keeps to the right of the value, and wraps under it where the card runs out
 * of width.
 */
.facts--ruled > div + div {
    margin-top: 0;
    border-top: 1px solid var(--colour-border);
}

.facts--ruled > div {
    padding: var(--space-1) 0;
}

.facts--ruled dt {
    flex: 0 1 8rem;
    min-width: 0;
}

.facts--ruled dd {
    display: flex;
    flex: 1 1 8rem;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-2);
    min-width: 0;
}

.facts--ruled .add {
    margin-left: 0;
}

/* How many people a card lists, in its heading opposite the title. */
.section-heading__count {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

/*
 * The people somebody looks after now, one per row, ruled between rows. The
 * initials on the left, then the name, the diagnoses, and the responsibility
 * with since when. Where there is no room beside the initials, at the narrowest
 * width with double text, the words wrap under them, because a date kept on one
 * line is wider than the column left beside them.
 */
.patients {
    list-style: none;
    margin: 0;
    padding: 0;
}

.patient {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.patient:first-child {
    padding-top: 0;
}

.patient + .patient {
    border-top: 1px solid var(--colour-border);
}

.patient__initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--colour-accent-tint);
    color: var(--colour-accent);
    font-weight: 700;
}

.patient__body {
    flex: 1 1 10rem;
    min-width: 0;
}

.patient__member + .patient__member {
    margin-top: var(--space-2);
}

.patient__who,
.past-patient__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
}

/*
 * A patient's name, which opens their page. It reads in the text colour, and
 * the chevron after it says it leads somewhere, as the name heading a case does.
 */
.patient__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--colour-text);
    font-weight: 600;
    text-decoration: none;
}

.patient__name:hover {
    color: var(--colour-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.patient__name .icon {
    width: 1rem;
    height: 1rem;
    color: var(--colour-accent);
}

.patient__about {
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

.patient__diagnoses,
.patient__responsibility {
    margin: var(--space-2) 0 0;
}

.patient__diagnoses .not-recorded {
    font-size: 0.9375rem;
}

.patient__responsibility,
.past-patient__dates {
    font-size: 0.9375rem;
    color: var(--colour-text-muted);
}

.staff-user-page .tag {
    float: none;
    margin-left: 0;
    color: var(--colour-text);
}

/* The people somebody used to look after, behind "Show past assignments". */
.past-patients {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.past-patient {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

.past-patient:last-child {
    border-bottom: 0;
}

.past-patient__dates {
    margin: var(--space-1) 0 0;
}

/* Said in a sentence where nothing has ended, in the place the control would be. */
.past-assignments--none {
    margin-bottom: 0;
    color: var(--colour-text-muted);
}

/*
 * The notes the office wrote against the person. Lines stop at about seventy
 * characters, so that a long note stays readable on a wide screen.
 */
.staff-notes {
    margin: 0;
    max-width: 70ch;
}

/*
 * The setup screen for the authenticator app. The QR code is drawn black on
 * white inside the image, whatever the page around it, because that is what a
 * phone camera reads. Large enough to scan from a second phone held at arm's
 * length, and no wider than the screen.
 */
.qr-code {
    display: block;
    width: 14rem;
    max-width: 100%;
    height: auto;
    margin: var(--space-2) 0;
}

/*
 * The key, for somebody who types it into the app instead. Fixed-width, so
 * that 0 and O, and 1 and I, are told apart by shape as well as by context,
 * and allowed to wrap between its groups of four at double text size.
 */
.secret-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
}

/* The line before the button on the page that warns before a reset. */
.reset-authenticator__when {
    margin-bottom: var(--space-3);
}