html, body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* A floor under the width of anything marked detail. The cards on a consultation take it off, because
   their grid sets the width (see fact-grid). It stays for the Detail column of the activity log, which
   shares the class name: the one column there that is cut short is never cut to nothing. */
.detail {
    min-width: 12rem;
}

/* The labelled values in the two cards at the top of a consultation: a grid of equal columns, so
   every value of a column starts at the same place as the one above it, and every value is in the
   same cell on every consultation.

   Each value used to size itself in a row that wrapped, so two values of one card sat at
   different places, and a long value took a line of its own. A value too long for its cell
   wraps inside it rather than pushing the column wider.

   One column here. Each card says below how many it has once it is wide enough for them. */
.fact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
}

.fact-grid .detail {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Each card has as many columns as fit without a label taking two lines, and decides that from
   its own width. The values keep their order and fill the rows one after another, so with fewer
   columns a card is taller and nothing in it changes place in the reading order.

   The Client card: twelve values, four to a row, then three, then two, then one. Its longest
   label is "Wants to stay connected", 187px wide. Its widest value that must stay on one line
   is the start: "10/04/2026 04:41 PM ET" is 184px, and the widest zone, MT, makes it 189.2px
   (all measured 2026-10-07). Counting 190px a column, two columns and their gap need 396px
   inside the card, three need 602px and four need 808px. */
@container fact-card (min-width: 396px) {
    .client-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container fact-card (min-width: 602px) {
    .client-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container fact-card (min-width: 808px) {
    .client-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The Outcome card: eight values four to a row, then three, then two, then one, and after them
   the two written notes. Its longest label is "Clinician gender preference", 212px wide
   (measured 2026-10-06). Counting 214px a column, two columns and their gaps need 444px inside
   the card, three need 674px and four need 904px.

   A note takes half of the card when it has three or four columns, and all of it when it has
   one or two, where half would be one narrow column for sentences. */
@container fact-card (min-width: 444px) {
    .outcome-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .outcome-facts .detail.half {
        grid-column: 1 / -1;
    }
}

/* Three to a row is drawn on six tracks, with a value on two of them, because half of three
   columns is not a whole number of columns and a note has to take half. */
@container fact-card (min-width: 674px) {
    .outcome-facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .outcome-facts .detail {
        grid-column: span 2;
    }

    .outcome-facts .detail.half {
        grid-column: span 3;
    }
}

@container fact-card (min-width: 904px) {
    .outcome-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .outcome-facts .detail {
        grid-column: auto;
    }

    .outcome-facts .detail.half {
        grid-column: span 2;
    }
}

/* A value that can be long, cut to a number of lines: two for a list of choices and four for a
   note somebody wrote. The button under it shows the rest in place and hides it again. Shown
   whole, fourteen choices stood twelve lines tall in a row of values that are one line each.

   The script on the page decides whether there is anything to show and what the button says; see
   ConsultationPage.razor.js. It reads the number of lines from here, so there is one place that
   sets it. */
.shortened {
    --lines: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    line-clamp: var(--lines);
    overflow: hidden;
}

.shortened.written {
    --lines: 4;
}

.shortened[data-open] {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* Drawn as a few words in the link colour rather than as a button with a box round it: it sits
   under a value in every other cell of a row, and a box there would be the heaviest thing on the
   card. */
.show-rest {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--mud-typography-body2-size);
    line-height: 1.5;
    color: var(--mud-palette-primary);
    cursor: pointer;
    white-space: nowrap;
}

.show-rest:hover,
.show-rest:focus-visible {
    text-decoration: underline;
}

/* Setting anything about how the button is drawn would otherwise show one that is marked hidden. */
.show-rest[hidden] {
    display: none;
}

/* Words that are read as one value and must not be split across two lines, such as a clock time and
   its zone. */
.keep-together {
    white-space: nowrap;
}

/* Every card that holds its content directly.

   One rule rather than a padding class written on each card, because written on each card the
   density drifts: five different paddings were in use across eight pages before this. A card that
   holds nothing but a table is left alone, since the cells bring their own.

   Less above and below than beside. A row of labelled values is two lines tall, and the padding a
   stack of inputs would want leaves that row stranded in the middle of the card. */
.portal-card {
    padding: 8px 16px;
}

/* The gap under each section's card on the consultation page, before the next section's heading.
   Ten pixels, between the library's eight and twelve: eight read as cramped, twelve as loose. */
.section-card {
    margin-bottom: 10px;
}

/* The last card on the page has no heading after it to keep apart from, so it keeps no gap. On a
   screen where the page only just fits, that gap alone was enough to bring back the scrollbar. */
.mud-container > .section-card:last-child {
    margin-bottom: 0;
}

/* The cards at the top of a consultation: Client and Outcome in one row.

   What changes with the width is the number of columns inside each card, not the row. Each step
   below gives the two cards at least the width their columns at that step need, which is the
   width inside the card (see client-facts and outcome-facts) and its own 32px of padding:

       Client    two columns 428px   three 634px   four 840px
       Outcome   two columns 476px   three 706px   four 936px

   Past those, the two share what is left in proportion to their columns, so a column is about
   as wide in one card as in the other. A step starts at the two widths of that step and the gap
   of 12px between the cards.

   How wide the row is follows the page and not the screen, because the menu beside the page
   takes a share of the screen: a screen 1440 wide gives a row of 1120px, and 15px less when
   the page is long enough to have a scrollbar. Measured 2026-10-07.

   The outer box is what the widths are asked of. A box cannot be asked about itself. */
.facts-row {
    container: facts-row / inline-size;
    margin-bottom: 8px;
}

/* Too narrow for two columns in each card side by side: one card under the other, and each has
   the columns its own width allows. */
.facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* One row from here up. Two and two: 428px and 476px. A screen 1280 wide gives 960px, and one
   1440 wide gives 1120px, which is 2px short of the next step. */
@container facts-row (min-width: 916px) {
    .facts {
        grid-template-columns: minmax(428px, 1fr) minmax(476px, 1fr);
    }
}

/* Three and two: 634px and 476px. A screen 1600 wide gives 1280px. */
@container facts-row (min-width: 1122px) {
    .facts {
        grid-template-columns: minmax(634px, 3fr) minmax(476px, 2fr);
    }
}

/* Three and three: 634px and 706px. */
@container facts-row (min-width: 1352px) {
    .facts {
        grid-template-columns: minmax(634px, 1fr) minmax(706px, 1fr);
    }
}

/* Four and three: 840px and 706px. A screen 1920 wide gives 1600px. */
@container facts-row (min-width: 1558px) {
    .facts {
        grid-template-columns: minmax(840px, 4fr) minmax(706px, 3fr);
    }
}

/* Four and four, every value in the place it was drawn in: 840px and 936px. A screen 2560 wide
   gives 2240px. */
@container facts-row (min-width: 1788px) {
    .facts {
        grid-template-columns: minmax(840px, 1fr) minmax(936px, 1fr);
    }
}

/* Each card is sized by what it holds, so the cards of one row ended at different heights:
   four values fit on one line and six wrapped onto two.

   The cell is made a flex column and the card is told to take what is left of it, rather than the
   card being given a height of 100%. A percentage height resolves against a height the cell does not
   have, and what that produced was a card taller than the row, with the next section drawn over the
   top of it. The column matters as much: each cell holds a heading and a card, and a flex row put
   the two of them side by side.

   The card is also what its own grid asks about width, so a card decides its number of columns
   from the room it has and not from the screen. */
.facts > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.facts > div > .mud-paper {
    flex: 1;
    container: fact-card / inline-size;
}

/* Tables and cards say the same two things, so they are drawn the same way.

   A column heading names the values under it, which is what the label above a field does; a cell
   holds one of those values, which is what the line under the label holds. The library draws each of
   the four differently: the heading at 14px in the primary colour at weight 500, the label at 14px in
   the secondary colour at weight 400, the cell at 15px and the field's value at 16px. Reading one
   page you meet all four, and nothing about the page explains why.

   Matched onto the card's pair, because that is the pair with the clearer job: the quieter of the two
   is the name, and the one you came to read is the value. */
.mud-simple-table table * tr > th {
    font-size: var(--mud-typography-overline-size);
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.mud-simple-table table * tr > td {
    font-size: var(--mud-typography-body1-size);
}

/* The mark in the top bar, turned white.

   It is drawn in the same purple the bar is painted, so on the bar it disappears. Recoloured here
   rather than kept as a second file, because two files of one drawing is two things to replace when
   the drawing changes and one of them is always the one somebody forgets. brightness(0) takes every
   colour to black and invert(1) takes black to white; the transparent background is untouched, which
   is why this works on this file and would not work on one with a background painted in. */
.appbar-logo {
    filter: brightness(0) invert(1);
}

/* The name in the top bar: the weight the other company applications give theirs, and one line. The
   bar has a fixed height, so a name on two lines would be drawn over the page under it. */
.appbar-title {
    font-weight: 600;
    white-space: nowrap;
}

/* The label after the name that says which system this is; see EnvironmentLabel.

   It keeps its own width when the bar is narrow, so the signed-in address gives way before the label
   does. A name the label does not know is shown whole up to a width and then ends in an ellipsis: a
   long one would otherwise push the sign-out button off the bar. */
.mud-chip.mud-chip-size-small.environment-chip {
    flex: none;
    max-width: 12rem;
    margin: 0 0 0 12px;
    font-weight: 600;
}

/* A block, because an ellipsis is only drawn on one. The library gives these words the full height
   of the label and centres them inside it; as a block of its own height the label centres it. */
.environment-chip .mud-chip-content {
    display: block;
    height: auto;
    font-size: var(--mud-typography-overline-size);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A cell that opens what its row is about.

   The link fills the cell so that a row reads and behaves as one thing. It takes the colour of the
   text around it rather than a link's: a table where every word is blue and underlined says nothing
   about which of them is worth pressing. */
.row-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.row-link:hover {
    color: inherit;
    text-decoration: none;
}

/* The link covers its whole cell, padding included. On its own it covered only the text, so a press
   on the space around a value, or between two values, did nothing and the row felt broken. The cells
   touch, so with every cell covered the whole row opens. */
td:has(> .row-link) {
    position: relative;
}

.row-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The consultations list, and the search results, which are drawn the same way.

   Across the full width of the table window, and no wider while there is a way to fit. Each column is
   sized by what it holds. On a wide screen every value is on one line and the spare width is shared
   between the columns in proportion: when the last column took all of it, every row ended in a wide
   band of nothing. On a laptop the values fold onto a second line instead of pushing the row out of
   the window. With every value on one line the row measured 1673px for a specialist, in a window of
   1046px on a screen 1366 wide, and Status, Outcome and View were out of sight (2026-10-07).

   The columns are named by class and not by position, because there is one more of them for a
   manager than for a specialist. */
.consultations table {
    table-layout: auto;
    width: 100%;
}

/* Half the library's space between one column and the next, and the full space kept at the two
   outer edges, the same as the messages table. It is 96px of a specialist's row, which is what lets
   the row fit on a screen 1366 wide with no value on a third line.

   Named as specifically as the library names its own dense padding, or its rule wins. */
.mud-simple-table.consultations table thead tr th,
.mud-simple-table.consultations table tbody tr td {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-simple-table.consultations table thead tr th:first-child,
.mud-simple-table.consultations table tbody tr td:first-child {
    padding-left: 16px;
}

.mud-simple-table.consultations table thead tr th:last-child,
.mud-simple-table.consultations table tbody tr td:last-child {
    padding-right: 16px;
}

/* A heading is one word and stays on one line with its arrow. The telephone number is never
   split: a number on two lines is read as two numbers. */
.consultations th, .consultations td.phone {
    white-space: nowrap;
}

/* The least each folding column is squeezed to, which is the width its longest value needs to
   stand on two lines. Left to itself the table squeezes a column down to its longest word, and a
   status of nine words then stands five lines tall beside an address that still has room.

   Measured 2026-10-07, as the width of the link: an address of 42 characters needs 187px for two
   lines, the longest status 188px and the longest outcome 120px. With these, the day, a name of
   two words of eleven letters, the number and the button, a specialist's row is 994px at its
   least and a manager's is 1072px. The table window is 1046px on a screen 1366 wide.

   On the link and not on the cell, because a table does not keep to a least width given to a cell.
   The link fills its cell, so the cell is never narrower than this. */
.consultations td.email > .row-link {
    min-width: 12rem;
    /* An address has one place to break, after the "@". One too long for two lines that way breaks
       wherever the line ends, rather than running under the next column. */
    overflow-wrap: anywhere;
}

.consultations td.status > .row-link {
    min-width: 12rem;
}

.consultations td.outcome > .row-link {
    min-width: 7.75rem;
}

/* A window narrower than the one a screen 1366 wide gives. The longest status may take a third line
   there, which is what lets a specialist's row fit a screen 1280 wide: its window is 960px and the
   row is 946px at its least with this. The longest status needs 143px for three lines, and every
   other status still fits on two.

   The window is what the width is asked of. A box cannot be asked about itself. */
.table-window:has(> .consultations) {
    container: consultations-window / inline-size;
}

@container consultations-window (max-width: 1000px) {
    .consultations td.status > .row-link {
        min-width: 9rem;
    }
}

/* The words of a status fold inside its chip. The library keeps a chip to one line of a fixed
   height, which is what made Status the widest column in the table. No margin at the sides: the
   cell's own padding is the space between columns, and the margin put a status 4px to the right
   of its heading. */
.consultations .mud-chip.mud-chip-size-small {
    max-width: 100%;
    height: auto;
    min-height: 24px;
    margin-left: 0;
    margin-right: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.consultations .mud-chip .mud-chip-content {
    white-space: normal;
    line-height: 1.3;
}

/* The View button stays at the right edge of the window, the same way the buttons of the messages
   table do. On a screen too narrow for the row at its least widths the table scrolls sideways
   inside its window, and the button was the part scrolled out of sight.

   The column holds a button and nothing else, so it takes no share of the spare width.

   The background is needed because the rest of the row passes underneath. A row's own stripe and
   hover colours are nearly transparent, so each is laid over the surface colour here: the cell then
   matches the row it is in and hides what is under it. */
.consultations th.view, .consultations td.view {
    width: 1%;
    position: sticky;
    right: 0;
    background-color: var(--mud-palette-surface);
}

/* A line down its left edge, so a value passing under it reads as going behind a fixed column and
   not as cut off by mistake. Drawn as a piece of the cell, for the reason the messages table gives. */
.consultations th.view::before, .consultations td.view::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: var(--mud-palette-table-lines);
}

/* Above the other headings, which are already held at the top and pass under this one sideways. */
.table-window .consultations thead th.view {
    z-index: 2;
}

.mud-simple-table.consultations.mud-table-striped tbody tr:nth-of-type(odd) td.view {
    background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped));
}

.mud-simple-table.consultations.mud-table-hover tbody tr:hover td.view {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

/* The four views of the consultations list, as a row of links above the table.

   They wrap rather than shrink on a narrow window, so a count never pushes a label out of its
   button. The row keeps its own height inside fills-screen: the table takes what is left. */
.view-choices {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* The search results.

   Every column holds a short value of a known kind, so each is given the width that kind needs and
   none of them wraps. Left to itself the table shared the whole width between six columns and put a
   date and a name a hand's width apart. */
.results {
    table-layout: fixed;
}

.results th, .results td {
    white-space: nowrap;
}

.results th:nth-child(1), .results td:nth-child(1) { width: 13rem; }
.results th:nth-child(2), .results td:nth-child(2) { width: 14rem; }
.results th:nth-child(3), .results td:nth-child(3) { width: 12rem; }
.results th:nth-child(4), .results td:nth-child(4) { width: 20rem; }
.results th:nth-child(5), .results td:nth-child(5) { width: 12rem; }
.results th:nth-child(6), .results td:nth-child(6) { width: 15rem; }

/* The one column whose contents have no length anybody controls. A long address wraps rather than
   being cut off, because half an address names the wrong person. */
.results td:nth-child(4) {
    white-space: normal;
    word-break: break-all;
}

/* What the hourly comparison found.

   Every column holds a short value, so every value stays on one line. The widths are fixed and the
   two halves get the same ones, so a column on our side lines up in size with the matching column
   on theirs: the reference, then three columns a side. The percentages add up to 100. */
.findings td, .findings th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-simple-table.findings table {
    table-layout: fixed;
    width: 100%;
}

.findings col.reference  { width: 16%; }
.findings col.when       { width: 16%; }
.findings col.specialist { width: 14%; }
.findings col.status     { width: 12%; }

/* The list of bookings changed directly in the scheduling system. The three time columns hold the
   widest short values, and Status holds a sentence and the two buttons, so those share most of the
   width. The percentages add up to 100. */
.direct-changes col.noticed    { width: 11%; }
.direct-changes col.client     { width: 11%; }
.direct-changes col.reference  { width: 7%; }
.direct-changes col.kind       { width: 9%; }
.direct-changes col.when       { width: 11%; }
.direct-changes col.specialist { width: 9%; }
.direct-changes col.handling   { width: 22%; }

/* The one column on that list that wraps. Who dealt with a row and how is a sentence, and an open
   row carries two buttons; cut off at the column edge, either would hide what it says. Selector as
   specific as the one that keeps every other cell on one line. */
.mud-simple-table.findings table tbody tr td.handling {
    white-space: normal;
    overflow: visible;
}

/* "Open" in the warning colour, the same as a changed value, because an open row is the one asking
   for somebody. */
.direct-changes .open-change {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

.direct-changes .change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* A cell whose value differs from the matching cell on the other side, in the warning colour so the
   eye goes to it first. The darker shade, because the plain one is hard to read as text on white.
   Selector as specific as the component library's own cell rules, which otherwise win and take the
   colour away. */
.mud-simple-table.findings table tbody tr td.unusual {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

/* The rule between our side and the scheduling system's side. Grey rather than the white rule on
   Figures: these rows have no tint, so a white rule would not show on them. Marked by class, because
   the two header rows put the same column at a different position in each row. */
.findings .group-start {
    border-left: 2px solid var(--mud-palette-lines-default);
}

/* The names of the two sides, above the column headings they cover. */
.findings th.group-name {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Two header rows, so the whole head is held at the top rather than each cell. Cells held one by one
   would all stop at the top edge and the second row would cover the first. The cells keep the
   opaque background from table-window, so the rows scrolling under them do not show through. */
.table-window .mud-simple-table.findings table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-window .mud-simple-table.findings table thead th {
    position: static;
}

/* The result of the last check when nothing disagreed, on the line under the heading. A darker green
   than the theme's, because the theme's is too pale to read as text on white. */
.agrees-note {
    color: #2e7d32;
    font-weight: 600;
    margin-left: 8px;
}

/* The messages table.

   Every column is sized by what it holds and every value is on one line, across the full width of
   the page so both tables line up with the cards above them. Any width chosen in advance was wrong
   for some row: a fixed width either left a gap after a short value or pushed a long one across the
   next column, and whichever single column was given the spare width showed it as one wide empty
   space. Sized by content, the spare width is shared between the columns in proportion to what they
   hold. Only Status folds, and the buttons stay in view when a row is still wider than the screen:
   see below.

   The class lands on the div the component wraps the table in, so this names the table inside it. */
.messages table {
    table-layout: auto;
    width: 100%;
}

.messages td, .messages th {
    white-space: nowrap;
}

/* Half the library's space between one column and the next, and the full space kept at the two
   outer edges so the first and last values still line up with the cards above. On a wide screen the
   spare width is shared out again and nothing looks closer together. On a narrow one it is what lets
   a row with a folded status fit: measured 2026-10-07 at a window 1600 wide, a row was 83px wider
   than the table's 1280 with the library's spacing and fits with this.

   Named as specifically as the library names its own dense padding, or its rule wins. */
.mud-simple-table.messages table thead tr th,
.mud-simple-table.messages table tbody tr td {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-simple-table.messages table thead tr th:first-child,
.mud-simple-table.messages table tbody tr td:first-child {
    padding-left: 16px;
}

.mud-simple-table.messages table thead tr th:last-child,
.mud-simple-table.messages table tbody tr td:last-child {
    padding-right: 16px;
}

/* The one column that folds. Every other column holds a short value of a known kind; a status can
   be a whole sentence, such as why a message was never sent. On one line that sentence made the row
   wider than the screen and pushed the column after it, with Read it and Send again, out of sight.

   It folds only when the row does not fit: the other columns keep the width their values need and
   Status takes what is left, so a short status still sits on one line. The least it is squeezed to
   is wide enough for a few words a line. Wider than that kept more of the row out of sight on a
   narrow screen than it saved in lines.

   The padding gives a folded status the same space above and below as a row of one line has: one
   line of 1.5rem plus this is the 2rem row height the window is counted in. Named as specifically as
   the rule that takes the padding off every other cell, or that rule wins. */
.messages td.status {
    white-space: normal;
    min-width: 10rem;
}

.mud-simple-table.messages.scrolls table tbody tr td.status {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* The buttons stay at the right edge of the window.

   Folding Status is not enough on a narrow screen. Measured 2026-10-07 at a window 1280 wide, the
   table has 960 to itself and the two times, the name of the message and the buttons need more than
   that on one line each before any address or status is counted. The row then scrolls sideways, as
   it always has, and Read it and Send again were the part scrolled out of sight. Held at the edge,
   they are there at every width and the rest of the row moves under them.

   The background is needed because the rest of the row passes underneath. A row's own stripe and
   hover colours are nearly transparent, so each is laid over the surface colour here: the cell then
   matches the row it is in and hides what is under it. */
.messages th.content, .messages td.content {
    position: sticky;
    right: 0;
    background-color: var(--mud-palette-surface);
}

/* A line down its left edge, so a value passing under it reads as going behind a fixed column and
   not as cut off by mistake. Drawn as a piece of the cell: the table's borders are shared between
   cells and stay where they are when a cell is held, and a shadow on a cell of such a table is not
   painted at all. */
.messages th.content::before, .messages td.content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: var(--mud-palette-table-lines);
}

/* Above the other headings, which are already held at the top and pass under this one sideways. */
.messages th.content {
    z-index: 2;
}

.mud-simple-table.messages.mud-table-striped tbody tr:nth-of-type(odd) td.content {
    background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped));
}

.mud-simple-table.messages.mud-table-hover tbody tr:hover td.content {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}

/* The one row that is not a value: the whole text of a message, opened under its row. It wraps
   within the width the other rows have already set rather than stretching the table to its own
   longest line. */
.messages td[colspan] {
    white-space: normal;
}

/* Zero width with a full minimum: the text takes the row's width but adds nothing to it, so an open
   message never widens the table. */
.messages .sent-text {
    width: 0;
    min-width: 100%;
}

/* The sign-in page: its card in the middle of the screen, both ways, and its words centred under the
   logo. The layout's container is reached through the page's own class, so the other pages that share
   the layout are not moved. */
.mud-main-content:has(.sign-in-page) .mud-container {
    /* The layout's own space above and below the container: pt-16 (4rem) and pb-8 (2rem). */
    min-height: calc(100vh - 6rem);
    margin-top: 0 !important;
    display: flex;
    align-items: center;
}

/* A raised card with rounded corners, the same weight as the other company applications' sign-in
   pages. The layout's flat card suits a page somebody reads; this one is the front door. */
.mud-main-content:has(.sign-in-page) .mud-container > .mud-paper {
    width: 100%;
    padding: 3rem 3rem 3.5rem !important;
    border-radius: 12px;
    box-shadow: var(--mud-elevation-4);
}

.sign-in-button {
    height: 3.25rem;
    font-size: 1.125rem;
    margin-top: 0.5rem;
}

.sign-in-page {
    text-align: center;
}

/* A page whose table ends at the bottom of the screen.

   The page is exactly the height left under the app bar, a column of heading, line and table. The
   table's card always reaches the bottom edge, however few rows it holds, so the page has the same
   shape every time; a long list stops there and scrolls inside, its heading row held at the top.

   The height takes off what the layout puts above and below the page: pt-12 (3rem) and pb-2 (0.5rem)
   on the main content in MainLayout, mt-2 (0.5rem) on the container, and a further 0.5rem so the
   table's bottom edge stands clear of the bottom of the screen rather than on it. Change one of
   those and this has to change with it, or the page scrolls by the difference. */
.fills-screen {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4.5rem);
}

.fills-screen > .table-window {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.table-window > .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.table-window .mud-table-container {
    overflow: visible;
}

.table-window thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* The number's other bookings, at the foot of the Client card. Amber for one that did not use the
   number's Free 15, red for one that did. */
.other-bookings {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.other-booking {
    color: var(--mud-palette-warning-darken);
    font-weight: 500;
    line-height: 1.75rem;
}

.other-booking .mud-icon-root {
    vertical-align: -0.2em;
    margin-right: 0.25rem;
}

.other-booking.used {
    color: var(--mud-palette-error);
}

/* The label of a field, in every state and on every page.

   The library gives it one line of 18.4px and cuts off what does not fit. The page's font needs
   20px for a line, so the tail of every g, p and y was cut off (measured 2026-10-06: 20px of text
   in a box 18px tall). Padding under the text makes the box tall enough without moving the text:
   the label is placed by its top edge.

   Marked important because the library sets the padding of an outlined label that way itself. */
.mud-input-label {
    padding-bottom: 3px !important;
}

/* The two outcome forms, "Record the outcome" and "Update the outcome", which share this layout.

   The boxes somebody writes sentences into on the left, taking all the width that is left. The three
   short answers and the button on the right, only as wide as their longest label needs. Split by
   proportion instead, the right column on a wide screen was a third of the page for "In person" and
   "55-64", while the sentences beside it were squeezed. One column on a narrow screen.

   19rem, measured 2026-10-06. The longest label, "Clinician gender preference *", is 232px before
   anything is chosen, and the box keeps 14px before it and 46px for the arrow after it. At 17rem
   the star ran 12px under the arrow. */
.outcome-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: 1.5rem;
}

/* The card a form sits in is what the row of four lists asks about width; see outcome-lists. */
.outcome-card {
    container: outcome-card / inline-size;
}

/* A label stops short of the arrow of its list and ends in an ellipsis there, on a box too narrow
   for it. Without this the label ran on under the arrow and the two were drawn over each other. */
.outcome-form .mud-select .mud-input-label-outlined {
    max-width: calc(100% - 60px);
}

/* Compact, on both forms. The question and its answers sit tight against the card's top edge and
   against the first box under them, and the boxes stand closer together. With the library's own
   spacing the row of answers was about as tall as a box, and most of that was white. */
.outcome-choice {
    margin-bottom: 0;
}

/* Room between one box and the next, so a box's label does not sit on the edge of the box above it:
   tightened to 6px a side, the labels read as part of the box above. */
.outcome-form .mud-input-control {
    margin-top: 8px;
    margin-bottom: 0;
}

.outcome-form .mud-input-control.mb-3 {
    margin-bottom: 12px !important;
}

/* The last box in a column has nothing under it but the card's own edge, so it keeps only a small
   gap: with the full one, the card ended in a strip of white under the last box, and with none the
   box sat on the edge. */
.outcome-form > div > .mud-input-control.mb-3:last-child {
    margin-bottom: 6px !important;
}

/* A little more height on the boxes somebody writes sentences into, as room under the last line.
   The library's own room there is 18.5px (measured 2026-10-01); this is that plus about 8px. Marked
   important because the library sets it with a more specific rule. A smaller value here makes the
   boxes shorter, not taller. The reason box on Re-enable a Phone Number gets the same room, so the
   same Lines value shows the same number of lines on both pages. */
.outcome-form textarea,
.allow-form textarea {
    padding-bottom: 26px !important;
}

/* Re-enable a Phone Number: the two boxes on the left and the button on their right, aligned to the
   bottom of the two boxes. Beside rather than under, so the list below the form gets the height. */
.allow-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    /* The same room above the fields as below them, and more of it than the card's own padding:
       with only that, the fields sat tight against the card's edges. */
    padding: 12px 0;
}

/* The library leaves a margin under every field. Under the last box it pushed the bottom of the left
   column below the box's own border, and the button, aligned to that bottom, sat lower than the box. */
.allow-form .mud-input-control:last-child {
    margin-bottom: 0;
}

/* The margin above the first field, for the same reason: with only the bottom one gone, the card had
   more room above the fields than below them. The outlined label sits on the field's border, so the
   margin is not holding room for it. */
.allow-form .mud-input-control:first-child {
    margin-top: 0;
}

/* The four lists a specialist ticks choices from: one row of four equal boxes across the whole
   form, above its two columns. In the right column they would have made it twice the height of the
   left one, and in the left they would have squeezed the boxes somebody writes sentences into.
   minmax(0, 1fr) keeps the four the same width whatever is chosen in them: a box showing a long
   choice does not take width from the other three.

   Two rows of two when the card is too narrow for four. A box needs 240px: its longest label,
   "Treatment orientation", is 178px, with 14px before it and 46px for the arrow. Four of those and
   the three gaps are 1032px. Measured 2026-10-06: the card is 1088px inside on a screen 1440 wide,
   so four fit, and 928px on a screen 1280 wide, where the label ran 16px under the arrow. */
.outcome-lists {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

.outcome-lists > * {
    min-width: 0;
}

@container outcome-card (min-width: 1032px) {
    .outcome-lists {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container outcome-card (max-width: 520px) {
    .outcome-lists {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A closed box is one line. What does not fit in it ends in an ellipsis rather than in half a word:
   the page already shows a count instead of the choices once they pass the width of the box on a
   wide screen, and this covers the narrower ones. By chosen-field and not by the row of four, so
   the fifth list of several choices, in the right column, is cut the same way. */
.chosen-field input.mud-select-input {
    text-overflow: ellipsis;
}

@media (max-width: 960px) {
    .outcome-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* An open list of choices, on the consultation page: the five lists of several choices, the one
   of one choice, and a manager's list of times. The list is drawn at the end of the page and not
   inside its form, so it is reached by the class the page gives it.

   Every choice is one line. The list is as wide as its longest choice and never narrower than its
   box. It was exactly as wide as the box, so a choice of 31 letters stood on two lines in a list of
   one-line choices. A choice longer than the limit here ends in an ellipsis, and its title holds
   the whole text.

   Marked important because the library writes "max-width: none" on the list itself when a list is
   allowed to be wider than its box, and a rule here cannot outrank that any other way. */
.choice-list {
    max-width: min(34rem, calc(100vw - 32px)) !important;
}

/* Rows of 30px, in every list. The library's rows are 48px, and 36px when dense, which showed six
   choices of a list that holds a hundred. The height of the whole list is set on the page as a
   count of these rows; see ListHeight in ConsultationPage.razor. */
.choice-list .mud-list-item {
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.choice-list .mud-list-item-text {
    min-width: 0;
    margin: 0;
}

.choice-list .mud-list-item-text .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The line between the chosen choices at the top of an open list and the rest. Drawn inside the
   row, so the row is still 30px and the list still holds thirteen. */
.choice-list .mud-list-item.rest-starts {
    box-shadow: inset 0 1px 0 var(--mud-palette-lines-default);
}

/* What a closed list of several choices reads, drawn over the box by the script on the page; see
   ConsultationPage.razor.js. The script puts it exactly over the words of the box and gives it
   the box's font. A click goes through it to the box. */
.chosen-field {
    position: relative;
    min-width: 0;
}

.chosen-text {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    pointer-events: none;
}

/* The names give way and end in an ellipsis. The count of the rest never does. */
.chosen-names {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chosen-more {
    flex: none;
    white-space: pre;
}

/* The box's own words are hidden only while the script has drawn something over them. Before the
   script has run, and if it never does, the box shows all of them and cuts them at its edge. */
.chosen-field:has(> .chosen-text:not(:empty)) .mud-input-slot {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* The tick box of a list of several choices, drawn inside the row height rather than setting it. */
.choice-list .mud-list-item-icon {
    min-width: 36px;
}

/* The outcome history.

   Thirteen columns: when, who, the outcome, the reason, and the nine details as that version left
   them: the two that were written, the five that were chosen from a list, and the two short ones. The same rule as the messages table: every column sized by what it holds,
   everything on one line, across the full width of the page. That includes the three columns
   somebody typed into: a long one makes the row wider and the window scrolls sideways, rather than
   one row standing three lines tall in a table read one row at a time. */
.history table {
    table-layout: auto;
    width: 100%;
}

.history td, .history th {
    white-space: nowrap;
}

/* The three columns somebody typed into stop at a width and end in an ellipsis, with the whole text
   on hover. Let run to their full length they pushed the row wider than the page, and the sideways
   scrollbar that followed took the height of part of a row out of a window sized for eight. */
.history td:nth-child(4), .history td:nth-child(5), .history td:nth-child(6) {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The five columns of choices do the same at a narrower width. One of them can hold a dozen
   choices, and there are five side by side. Where is among them since its choices came to be read
   from the database: one long choice there measured 314px (2026-10-06). */
.history td:nth-child(7), .history td:nth-child(8), .history td:nth-child(9), .history td:nth-child(10),
.history td:nth-child(11) {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-aside {
    margin-left: 0.4em;
    font-size: var(--mud-typography-caption-size);
}

/* The words a message went out with, opened under the row it belongs to.

   Kept as written rather than reflowed: a message is composed with its own line breaks, and a blank
   line between two paragraphs is part of what the client read. The monospace is dropped because this
   is prose, not output, and the wrapping is on so a long line does not widen the table. */
.sent-text {
    background: var(--mud-palette-background-grey);
    padding: 12px 16px;
}

.sent-text pre {
    margin: 0;
    font-family: inherit;
    font-size: var(--mud-typography-body2-size);
    white-space: pre-wrap;
    word-break: break-word;
}

/* An email drawn as the client saw it.

   A fixed height with its own scrollbar, because a frame cannot be asked how tall its contents are
   without script, and script is the one thing this frame is not allowed. Tall enough for a whole
   short message, which is what all of these are. */
.sent-body {
    width: 100%;
    height: 22rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: white;
    color-scheme: light only;
}

/* An explanation carried on a section heading instead of on a line of its own.

   Its own size and weight, because it inherits a heading's and a heading's are wrong for a sentence:
   read at that size it competes with the heading it is attached to.

   Its own box, with its own line height. As plain inline text its lines took the heading's line
   height, so on a narrow window a wrapped note had a gap of a whole heading line between its lines.
   As a box it still sits beside the heading when there is room. When there is not, it moves under
   the heading as a whole, with its lines close together. The top margin keeps it off the heading
   then; beside the heading it changes nothing, because the heading's line is taller. */
.heading-note {
    display: inline-block;
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* The By specialist table on Figures: one tint for the bookings that did not end in a consultation,
   another for Completed and the three outcomes that make it. Two depths of one green, so the two
   groups read as the two halves of one sum. Still pale enough for dark text to stay readable.

   Opaque colours on the cells, not see-through ones on the columns: the header and the total row
   stay in place while the rows scroll under them, and a see-through cell shows the rows passing
   behind. The values are the earlier see-through greens as they looked on white. */
.mud-simple-table.by-specialist table tr .not-completed {
    background-color: #c5dbc6;
}

.mud-simple-table.by-specialist table tr .completed {
    background-color: #eaf5ea;
}

/* Total is neither half, so it gets a neutral tint of its own rather than none: with none it read
   as part of the page background beside the two green groups. */
.mud-simple-table.by-specialist table tr .total {
    background-color: #f0f0f0;
}

.mud-simple-table.by-specialist table tr .name {
    background-color: var(--mud-palette-surface);
}

/* The cells now carry their own colour, so the row hover has to darken them rather than paint the
   row behind them. */
.mud-simple-table.by-specialist table tbody tr:hover td {
    filter: brightness(0.95);
}

/* At most as tall as the screen under the app bar. With many specialists the rows scroll inside
   the card, and the two header rows and the total row stay where they are. */
.specialists-window {
    max-height: calc(100vh - 6rem);
    overflow: auto;
}

.specialists-window .mud-table-container {
    overflow: visible;
}

.mud-simple-table.by-specialist table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mud-simple-table.by-specialist table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* Counts sit under their headings. Left aligned in wide columns they ran far from the word that
   names them, and a reader had to trace across the gap. */
/* Selectors as specific as the component library's own cell rules, which otherwise win and put
   every heading back on the left. */
.mud-simple-table.by-specialist table thead tr th,
.mud-simple-table.by-specialist table tbody tr td,
.mud-simple-table.by-specialist table tfoot tr td {
    text-align: center;
}

.mud-simple-table.by-specialist table thead tr th.name,
.mud-simple-table.by-specialist table tbody tr td.name,
.mud-simple-table.by-specialist table tfoot tr td.name {
    text-align: left;
}

/* A white rule where each group starts, so the groups read as groups before the colours do. Marked
   by class, because the two header rows put the same column at a different position in each row. */
.by-specialist .group-start {
    border-left: 3px solid var(--mud-palette-surface);
}

/* The names of the two groups, above the column headings they cover. */
.by-specialist th.group-name {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* All specialists added together: set apart by a rule above it and by weight, so it reads as the
   sum of the rows rather than as one more specialist. */
.by-specialist tfoot td {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
}

/* The chain on Figures, drawn as a tree. Only the name cell is indented, so the numbers and the
   notes stay in one straight column each. Selectors as specific as the component library's own cell
   rules, which otherwise win and take the indent away. */
.mud-simple-table.chain table tbody tr th.level-1 {
    padding-left: 2.5rem;
}

.mud-simple-table.chain table tbody tr th.level-2 {
    padding-left: 4rem;
}

/* A row with rows under it that add up to it. Bold, so the parts read as parts of something. */
.mud-simple-table.chain table tbody tr.parent th,
.mud-simple-table.chain table tbody tr.parent td {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Find a consultation: the note that the list was cut short, on the search row beside the button.
   The consistency check uses it as well, for what the last check found. The darker warning colour,
   because the plain one is too pale to read as text on white. */
.truncated-note {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
    margin-left: 8px;
}

/* Figures: the long table on the left, the conversion rate and the sources on the right.

   The right column must be exactly as tall as the left, not taller. So its content is taken out of
   the flow (absolute, filling the column): the grid row then takes its height from the left column
   alone, and the source list gets whatever is left under the rate and scrolls inside its card.

   On a narrow screen the two columns stack and the right one goes back into the flow. */
.figures-top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    margin-bottom: 16px;
}

.figures-right {
    position: relative;
}

.figures-right-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.figures-right-inner .source-window {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* The heading row of the source list stays in view while the list scrolls under it. */
.mud-simple-table.sources table thead tr th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

.figures-right-inner .source-window .mud-table-container {
    overflow: visible;
}

@media (max-width: 1100px) {
    .figures-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .figures-right-inner {
        position: static;
    }
}

/* An empty row between the stages a booking passes through. Shorter than a real row, without the
   row rules on either side, and not lit up by the hover, so it reads as space rather than as a row
   with nothing in it. */
.mud-simple-table.chain table tbody tr.spacer td {
    height: 14px;
    padding: 0;
    border-bottom: none;
}

.mud-simple-table.chain table tbody tr.spacer:hover {
    background-color: transparent !important;
}

/* The date filter at the top of Figures: From, To and the button on one line, bottom edges level.
   The activity log uses it for its whole row of filters, so its lists are drawn like the boxes.
   Plain inputs with an outline of their own, so both boxes are drawn the same way and nothing draws
   a second line under them. The boxes are as tall as the button beside them. */
.date-filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.date-filter label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--mud-typography-overline-size);
    color: var(--mud-palette-text-secondary);
}

.date-filter input,
.date-filter select {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    font: inherit;
    font-size: var(--mud-typography-body1-size);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

/* Wide enough for its own hint. At the width a search box takes by default, "Name or phone number"
   lost its last letter. The request id box on the activity log is the same width, which shows a whole
   identifier: one from the booking page is 16 characters and measured 151px, and one from a staff
   sign-in is 22 characters and measured 213px, in a box with 234px for its text. */
.date-filter input[type="search"] {
    width: 16rem;
}

.date-filter input:focus,
.date-filter select:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.date-filter .mud-button-root {
    height: 36px;
}

/* A section heading sits on the card it names. The library's gutter is .35em, which on a heading of
   this size is a gap wide enough to read as a separator between two things rather than as a title
   attached to one. */
.mud-typography-h5.mud-typography-gutterbottom,
.mud-typography-h6.mud-typography-gutterbottom {
    margin-bottom: .25rem;
}

/* Shown when the connection to the server is lost and cannot be restored.

   Here rather than beside a layout. A stylesheet next to a layout reaches only that layout's own
   markup, and both layouts carry this bar; while the rule sat next to the staff layout, the bar was
   left showing at the foot of every page a client opens. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* The one row at the top of a consultation: the way back and who this is on the left, the ways of
   reaching them on the right.

   Two rows before this, one holding a link and the next holding the name. That spent a fifth of a
   short screen on four words, on the page that has the most to show.

   The two ends of the row rather than one cluster in the middle. Centred, the name and the buttons
   moved every time a name was longer or shorter, and the call button sat somewhere different on every
   consultation. At the right edge it is where the eye goes for it each time. */
.page-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-top-who,
.page-top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* The left group gives way before the buttons do. When the row decides whether both groups fit
   on one line it counts the left one at its narrowest, which is the way back and the name, and
   then gives it whatever is left. So on a row too narrow for everything the status goes under
   the name and the buttons keep their place, and only a row too narrow for that as well moves
   the buttons down. */
.page-top-who {
    flex: 1 1 0;
}

/* Kept on one line. The narrowest the left group can be is then these two side by side, and not
   the longest word of the name, which is what it was while the name could break. */
.page-top-name {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

/* On a screen too narrow for the two side by side, the name goes under the way back. */
@media (max-width: 600px) {
    .page-top-name {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* On the right whether they share the line or have one to themselves. */
.page-top-actions {
    margin-left: auto;
    justify-content: flex-end;
}

/* Where the consultation stands, after the name. On one line while there is room, on a line of
   its own under the name when there is not, and on two lines inside itself only on a screen
   narrower than its words. The library keeps a chip to one line of a fixed height, which on such
   a screen ran the words off the side of the page. No margin of its own: the row sets the gaps. */
.mud-chip.mud-chip-size-small.status-chip {
    margin: 0;
    max-width: 100%;
    height: auto;
    min-height: 34px;
    padding: 2px 14px;
}

/* Larger than the same chip in a list. There it is one cell among ten; here it stands beside the
   name as the one line that says whether anything is still to be done, and at the list's size it
   was lost next to a heading three times as tall. */
.status-chip .mud-chip-content {
    white-space: normal;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* The arrow on the column a table is ordered by.

   Quieter than the heading it sits on: it says which way round the rows are, which is worth knowing
   and is not worth reading first. */
.sort-mark {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    margin-left: .25rem;
}

/* The two long tables on a consultation: a window of a few rows, scrolled inside.

   Both are newest first, so the rows worth reading are the ones already showing, and the rest are
   there without pushing anything down the page. It is a box with a scrollbar rather than a button
   that unfolds one, so a long history never takes more than its window.

   The heading row stays while the rows move under it. Scrolling a table whose headings have gone is
   reading a grid of values and guessing which column is which.

   Every row is one line and exactly one row height tall, so a window's height is a count of rows
   rather than a guess. The two on the consultation page stop at six rows under the heading row. A
   table with fewer rows ends at its last row: held at the full height, a table of one row left a
   gap of five empty rows under it. */
.scrolls {
    --row: 2rem;
    max-height: 16rem;
    overflow: auto;
}

.scrolls thead tr, .scrolls tbody tr {
    height: var(--row);
}

/* Scrolled in one place. The library's own container scrolls sideways by itself, which put the
   sideways scrollbar under the last row, out of sight until somebody had scrolled all the way down. */
.scrolls .mud-table-container {
    overflow: visible;
}

.messages.scrolls, .history.scrolls {
    max-height: calc(7 * var(--row));
}

/* While a message's words are open under its row, the messages window is let out to the height of
   everything in it. The words are taller than the whole window, so inside it they began below its
   bottom edge whenever the row pressed was the last one showing, and pressing Read it appeared to do
   nothing. Closing the words puts the window back. */
.messages.scrolls.reading {
    max-height: none;
}

/* The buttons in a row are held to the height of the text beside them. At their own height they
   made every row with a button taller than the rows without one, and the count of rows a window
   shows stopped being the count it was sized for. */
.scrolls td .mud-button-root {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    line-height: 1.25rem;
}

/* The row height above sets the spacing, so the cells add none of their own. With the library's
   padding on top of it, a row came out taller than the height the window was counted in. */
/* Named as specifically as the library names its own dense padding, or its rule wins. Measured
   2026-09-30: with the plain selector a row came out at 35.9px against the 32px it was sized for,
   and the messages window showed six rows instead of seven. */
.mud-simple-table.scrolls table thead tr th,
.mud-simple-table.scrolls table tbody tr td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5rem;
    vertical-align: middle;
}

.scrolls thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* The heading row of a table inside a scrolling window stays one line.

   A heading that wraps costs a line of every screen, on the two tables that are already the longest
   things on the page, and it costs it whether or not anybody reads the heading twice. */
.scrolls thead th {
    white-space: nowrap;
}

/* The activity log.

   One line per row. Every column shrinks to what it holds, and Detail takes the rest: a long detail
   is cut with an ellipsis and its title holds the whole text. max-width 0 is what lets the cell be
   narrower than its text, so the cut happens instead of the table growing past the screen. */
.activity th, .activity td {
    width: 1%;
    white-space: nowrap;
}

.activity th.detail, .activity td.detail {
    width: auto;
    max-width: 0;
}

.activity td.detail, .activity td.detail > .row-link {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Refused and failed stand out from done, in the colours the rest of the portal uses for a warning
   and an error. The darker warning colour, because the plain one is too pale to read as text. */
.activity td.result-refused {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

.activity td.result-failed {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Every other line is shaded. Counted over the lines only: the row under a line that holds its
   request id is in the table while it is closed, and counting it would put the shade on the wrong
   lines. The row under a line takes the shade of its line, so the two read as one. */
.activity tbody tr.line:nth-child(odd of .line),
.activity tbody tr.line:nth-child(odd of .line) + tr.source {
    background-color: var(--mud-palette-table-striped);
}

/* The control that opens the row under a line. A box of one width whether it holds the control or
   nothing, so the times stay in one column. Above the link that covers the cell, or a press on it
   would open the consultation instead. */
.activity .source-control {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 20px;
    vertical-align: top;
}

.activity .source-control > summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

/* Beside the control and not under it. The link still covers the whole cell, which is what makes
   the row open its consultation. */
.activity td.when > .row-link {
    display: inline;
}

/* Where a line came from: closed until the control in the line above it is open. One cell across
   the table, so it takes the width the table has and not the 1% a column takes. */
.activity tr.source {
    display: none;
}

.activity tr.line:has(.source-control[open]) + tr.source {
    display: table-row;
}

/* Under the time and not under the control, hence the 20px. Text that can be selected, and a press
   on an identifier selects the whole of it, ready to copy. */
.activity tr.source > td {
    width: auto;
    padding-left: calc(16px + 20px);
    color: var(--mud-palette-text-secondary);
}

.activity tr.source span + span {
    margin-left: 32px;
}

.activity tr.source code {
    font-size: inherit;
    color: var(--mud-palette-text-primary);
    user-select: all;
}

/* The line between the filter and the table: what is shown on the left, the page links on the
   right. */
.activity-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.activity-scope {
    color: var(--mud-palette-text-secondary);
}

.activity-pager-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A manager setting a new time on the consultation page: the list of times and the button that acts
   on it, on one line. */
.change-booking {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* A fixed width rather than the rest of the row, so the button sits beside the list. Measured in
   Chrome with Open Sans: the label "New time (Eastern time)" ends 201px from the left edge and the
   arrow takes the last 38px, so 260px leaves 21px between them. A selected time is narrower than the
   label. */
.change-booking > .mud-select {
    flex: 0 0 260px;
}

/* The line shown in the list while the free times are read. */
.change-booking-reading {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}