html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* The row a press visited, and the only row marked (Components/Assessment/QuestionnaireRowMark). An
   outline rather than a border: it draws outside the box, so a marked row is exactly the geometry of
   an unmarked one and nothing on a long questionnaire shifts when the mark moves. It changes an
   outline and nothing else: no answer, no NA flag, no record.

   It lives here, in the app's own stylesheet, because the mark is written over a row identifier and
   nothing else - it belongs to no one component. The questionnaire carries it: QuestionnaireRow's
   Mark parameter emits this class on the one row a go-to press visited, and the rows are re-keyed on
   finding ids so a mark that moves moves the animation with it.

   No prefers-reduced-motion variant, deliberately: the animation moves nothing - no transform, no
   translate - it fades one colour, so the media query has nothing to answer, and shortening it would
   only remove the thing the clinician is being shown. */
.qrow-visited {
    outline: 2px solid transparent;
    outline-offset: 2px;
    animation: qrow-visited-fade 2s ease-out forwards;
}

/* The app's warning token. `forwards` leaves the outline transparent once the fade has run, so a mark
   that has faded is invisible while still being the marked row. */
@keyframes qrow-visited-fade {
    from {
        outline-color: var(--mud-palette-warning);
    }

    to {
        outline-color: transparent;
    }
}

/* The slot a questionnaire row keeps for its Confirm checkbox (ADR 0046). One width whether the row
   draws a box or only reserves its space, so the measurement and the N/A box run straight down a
   Category that draws the "Follow-up findings" panel: a row below the panel would otherwise sit a
   checkbox's width to the right of the ones in it, and the column a clinician scans would step in and
   out of line. It follows the panel and not the count, so ticking the last row shifts no column.

   It lives here beside .qrow-visited, for that rule's reason: it is written over a row and belongs to
   no one component, and QuestionnaireRow is a child the questionnaire's own scoped stylesheet does
   not reach. Only a Category with a Follow-up finding in it reserves the slot, so every row of a full
   assessment is exactly the geometry it has always been. */
.qrow-confirm-slot {
    width: 7rem;
}

/* The "Follow-up findings" panel, and the bar on each of its rows that still needs the clinician
   (ADR 0046, #1115). The group had no visible edge: a small grey heading, and a line after its last
   row no different from the line between any two rows.

   These three rules live here beside .qrow-confirm-slot for that rule's reason, and it is the
   ticket's reason too: the rows inside the panel are a child component's elements, so the
   questionnaire's own scoped stylesheet cannot reach them with the scope attribute the Razor
   compiler puts on its markup. Every colour is a theme token and none is written out, so dark mode
   and a theme change follow without a second rule - --mud-palette-background-gray is a step off
   --mud-palette-surface in both of MudBlazor's palettes, which is the switch-off panel's precedent
   (AskEverythingSwitchOffListing.razor.css), and --mud-palette-lines-default is the divider colour
   the rest of the app's rules use.

   An *outline* rather than a border, for .qrow-visited's reason above: it takes no part in layout,
   so the panel's margin box is exactly its content plus its padding and the arithmetic below has two
   numbers in it instead of three. outline-offset: -1px draws it on the panel's own edge rather than
   a pixel outside it, which keeps everything the panel paints inside its margin box - and that is
   what makes "nothing scrolls sideways at phone width" a property of the box model rather than a
   coincidence.

   The panel extends outward by exactly the padding it adds. Its negative horizontal margin and its
   horizontal padding are one number, so its content box is the width of the block it sits in, the
   rows in it are the width of the rows below it, and the answer columns a clinician scans run down
   the whole Category in one line (#1114, User Story 13). The slot rule above is the other half of
   that: both follow the panel and not the count, so ticking the last row shifts no column
   (User Story 14).

   There is no padding at the bottom, deliberately: the last row's own divider then lies on the
   panel's edge, under the outline, so the panel closes with one line rather than with a divider and
   an outline four pixels apart.

   Whether any of this takes effect is the computed-style tier's fact and not a stylesheet read's
   (ADR 0037): a tint a later rule overrode is still in this file, and an outline-offset against a
   border-radius the cascade resolved differently is a panel whose edge the clinician cannot see. */
.follow-up-findings-panel {
    margin: 0 -8px 8px;
    padding: 4px 8px 0;
    background-color: var(--mud-palette-background-gray);
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -1px;
    border-radius: var(--mud-default-borderradius);
}

/* The gutter the bar is drawn in, on every row of the panel whether or not it draws one, so a row
   whose bar goes away when it is ticked does not take its question along with it. It narrows the
   row's content on the left only, and the answer, the N/A box and the confirm slot are set from the
   row's right edge, so the columns below the panel keep their line regardless. */
.qrow-follow-up-finding {
    padding-left: 12px;
}

/* The bar itself: the remaining work findable without reading the far-right column (#1114, User
   Stories 5, 6 and 7). Which rows draw it is ConfirmCheckbox.DrawsTheBar's answer and nothing this
   file decides.

   An inset box-shadow rather than a border or a pseudo-element, so the bar takes no part in layout
   at all: a row gaining or losing one is exactly the same geometry, which is what stops a tick
   moving anything on the screen.

   The primary token and not the warning one, deliberately: the warning colour is the go-to-
   outstanding mark's (.qrow-visited above), and a second meaning on it would make one colour say two
   things. Primary is what the box the clinician is being pointed at is drawn in. */
.qrow-confirm-bar {
    box-shadow: inset 4px 0 0 0 var(--mud-palette-primary);
}

/* A rated list is offered exactly one Sort affordance (ADR 0038): its column headers on a desktop, and
   the Sort control beside the list's title, which is the only way in at phone width where MudBlazor
   drops the header row. MudTable brings a small-device sort select of its own, worded differently and
   saying nothing about the Sort the session page holds, and at phone width it would sit on screen
   beside ours - two ways to sort one list, which is what this suppresses.

   Three classes, not two, because the cascade order is against us: App.razor links MudBlazor.min.css
   after app.css, so MudBlazor's own `.mud-xs-table .mud-table-smalldevices-sortselect{display:block}`
   (0-2-0) wins any tie. `.mud-table.rated-elements-table ...` is 0-3-0 and so wins on specificity
   regardless of which sheet came last.

   Only the rated tables, and by the class RatedElementsTable emits: every other MudTable in the app
   keeps MudBlazor's select, because nothing else has a Sort control of its own to be a second one of.

   A note for a reader who cannot find the element: MudTable gates that select on
   `Context.SortLabels.Any()`, and the labels register after the table's first render, so it is absent
   from a first render and present from every later one. In a live circuit the clinician reaches the
   later ones, which is why this rule is needed; the Browser tier's fixture forces a second render so
   the rule can be measured at all. */
.mud-table.rated-elements-table .mud-table-smalldevices-sortselect {
    display: none;
}

/* The Activation mark (ADR 0048) rides the name cell beside the Outside-the-Filter mark rather than a
   column of its own, so at phone width it is on the same line as the element's name. At MudBlazor's Xs
   breakpoint that cell is a flex row - `.mud-xs-table .mud-table-cell{display:flex}`, which is how the
   table stacks without a header row - and a flex row does not wrap, so the mark's words were on an
   unbreakable line with the name and widened the row, and so the table under auto layout, past its own
   scroll container: a marked row's Rating, Coverage and Combined Rating sat off screen, reachable only
   by scrolling the table sideways (#1148).

   Letting the cell wrap is the whole of the fix: the mark is the last thing in the cell, so it is what
   goes onto the new line, and it drops below the name without being moved, restyled or resized. The
   mark keeps its words, its place in the name cell and its order beside the Outside-the-Filter mark
   (ADR 0048). `flex-wrap` changes nothing for a line that was not overflowing, so every other rated
   list - none of which ever carries this mark - is laid out exactly as before.

   Nothing stretches the mark to the new line's full width, deliberately: MudBlazor gives every chip
   `justify-content:center`, so a mark told to fill the line would read centred in the cell rather than
   under the name it belongs to. It keeps its own width and the start of its line, which is where the
   stacked cell's words begin.

   Three classes for the same reason the rule above has three: App.razor links MudBlazor.min.css after
   app.css, so `.mud-xs-table .mud-table-cell` (0-2-0) would win any tie. The mark's own class is the
   hook the Browser tier measures it by, and carries no rule of its own. */
.mud-table.rated-elements-table .mud-table-cell {
    flex-wrap: wrap;
}