/* A refusal, in the red of whichever theme is on - and the second selector of each pair is the
   whole reason these are two rules rather than one declaration.

   The card that holds most of these messages paints its own paragraphs, in a rule naming a class
   and an element ; that outweighs a rule naming this class alone, however late the file holding it
   is loaded. So every message written as a paragraph inside a card has been drawn in the card's
   own grey rather than in this red, on every page that shows one, since before either page existed
   - read in a browser as rgb(204, 204, 204) on the dark theme and rgb(51, 51, 51) on the light one.
   Nothing reports that : the markup asks for the right class, the class says the right colour, and
   the colour never arrives. The second selector of each pair is shaped to outweigh the card's rule
   rather than to tie with it, so this cannot come back the day a file order changes.

   A selector list is used rather than a second block because each selector in a list is weighed on
   its own : the plain one answers a message drawn anywhere else, and the longer one answers the
   same message inside a card, and both carry the same declarations because they are the same
   intention said twice for the cascade's benefit. */
.error-message,
.card .error-message {
    color: var(--error-dark);
    margin-bottom: 20px;
    text-align: center;
}

body.light-mode .error-message,
body.light-mode .card .error-message {
    color: var(--error-light);
}

/* Good news, in the green of whichever theme is on.

   It became a pair of rules for the two reasons the refusal above it already is one. The colour was a
   single value serving both themes, and read in a browser that value sits at 2.8 to 1 against the
   dark theme's topbar and against its card - legible in the stylesheet and not on the screen. The
   light theme's value is the same colour it always was, written as a number rather than as a keyword,
   so nothing there moved.

   And the second selector of each pair answers the same specificity war the file's opening comment
   records : a card paints its own paragraphs in a rule naming a class and an element, which outweighs
   a rule naming this class alone however late the file holding it is loaded. Nothing draws good news
   as a paragraph inside a card today - the page that draws it uses a box, which that rule does not
   reach - so this costs nothing now and is what stops the refusal's own history from repeating itself
   the day somebody writes a sentence instead of a box. */
.success-message,
.card .success-message {
    color: var(--success-dark);
    margin-bottom: 20px;
}

body.light-mode .success-message,
body.light-mode .card .success-message {
    color: var(--success-light);
}

/* The link the submission page puts at the end of its success sentence, once a design is on its way.
   It takes the sentence's own colour rather than the site's link blue, so the answer reads as one
   thing rather than as a green sentence with a blue word dropped into it -- and the underline is
   then what says it can be followed, since the colour no longer does.

   Written against the two rules above rather than beside either one, so it follows the sentence into
   whichever theme is on without naming a colour of its own. */
.success-message a,
.card .success-message a {
    color: inherit;
    text-decoration: underline;
}

/* Neutral information uses the established link blue pair so it remains readable in both themes. */
.information-message,
.card .information-message {
    color: var(--link-dark);
    margin-bottom: 20px;
    text-align: center;
}

body.light-mode .information-message,
body.light-mode .card .information-message {
    color: var(--link-light);
}

/* A refusal the visitor has to be unable to miss, worn on top of the class above rather than
   instead of it.

   The colour alone was not enough on a phone : one short sentence, in the same weight as
   everything else on the page, above a form the visitor has just failed to get through. The
   weight is what makes it read as the answer to "why can I not get in" rather than as a caption.

   It is worn as a second class rather than folded into the one above because the other pages
   carrying that class report what a tool did, and none of them asked to shout. Nothing else on
   this site sets a weight on these messages, so this one rule needs no help winning. */
.error-message-strong { font-weight: 700; }

/* A refusal belonging to one box of a form, drawn under that box rather than under the whole page.

   Two declarations, and each of them undoes something the rule at the top of this file does for the
   pages it was written for. That rule centres a message and pushes twenty pixels of space under it,
   which is right for one sentence answering a whole form and wrong under a single field : a sentence
   about the box above it has to start where that box's own label starts, or the eye has to hunt for
   which field is being talked about, and the space below it would open a gap in the middle of a form
   whose rows already space themselves.

   THE SECOND SELECTOR IS THE POINT AND IT IS NOT A DUPLICATE. Every field refusal this site is about
   to draw lives inside a card, and this file's own opening comment records what that costs : a rule
   naming a class and a card outweighs a rule naming one class however late it is written, so
   `.card .error-message` would go on centring these sentences and pushing them down while this rule
   sat here looking perfectly correct. Naming the card as well as both classes outweighs it rather
   than tying with it, so this cannot come back the day a file order changes. The plain selector
   answers the same refusal drawn anywhere else, and it wins there by being the later rule in the one
   file that defines both. */
.error-message-field,
.card .error-message.error-message-field {
    text-align: left;
    margin-bottom: 0;
}

/* --- An answer drawn as a box rather than as a coloured sentence --- */

/* THE SAME TWO ANSWERS AS ABOVE, GIVEN A SURFACE OF THEIR OWN, for a page whose whole answer arrives
   in one line above a form the visitor has just filled in. A coloured sentence sitting on the card's
   own surface is one line of text among the several the card already carries, and somebody who has
   just pressed a button and is watching it is looking at the button. A box with a face, a hairline and
   an icon is seen without being hunted for, and the icon says which of the two it is without relying
   on the colour alone.

   The shape is the design note's, deliberately, since this site already has one box that says
   something about what is on the page and a second shape for a second box would be a second thing to
   learn. It is a row rather than a block so the icon stays beside the first line and every wrapped
   line after it lines up under the first instead of running back under the icon.

   NO DISPLAY IS DECLARED ON THE ROW ITSELF, and the rule under it puts back what any display here
   would outrank. The box is taken out of the page with the browser's own hidden attribute while there
   is nothing to say - which is how every one of these pages starts - and a display declared by a
   stylesheet of ours beats the browser's rule for that attribute whatever the selector, so an empty
   coloured rectangle would be drawn above the form on arrival. The design note in the comment panel
   records the same trap.

   The bottom margin is the one the two rules at the top of this file already set, so a box and a
   sentence leave the same gap under them. The centring is not : a sentence answering a whole form is
   centred, and a box is a block with its own edges, inside which text starts at the left the way it
   does everywhere else. */
.message-box {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.message-box:not([hidden]) {
    display: flex;
}

/* The two kinds, each naming its own surface, hairline and text. The text colour is named rather than
   inherited for the reason the design note names its own : the box draws a surface of its own under
   it, and the card's grey was chosen against the card. */
.message-box-success {
    border-color: var(--good-news-edge-dark);
    background-color: var(--good-news-surface-dark);
    color: var(--text-dark);
}

body.light-mode .message-box-success {
    border-color: var(--good-news-edge-light);
    background-color: var(--good-news-surface-light);
    color: var(--text-light);
}

.message-box-error {
    border-color: var(--refusal-edge-dark);
    background-color: var(--refusal-surface-dark);
    color: var(--text-dark);
}

body.light-mode .message-box-error {
    border-color: var(--refusal-edge-light);
    background-color: var(--refusal-surface-light);
    color: var(--text-light);
}

/* The icon is a character and not a drawing, so it carries its own colour on both themes and needs no
   pair in the palette. It never shrinks : a flex item beside a long sentence is squeezed by default,
   and half an icon says nothing. */
.message-box-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.35;
}

/* The sentence takes the rest of the row. The floor on the width is not decoration : without it a long
   unbroken address inside a message would stretch the box, and a flex item may grow past its container
   by default, so the box would push the card wider than the screen instead of wrapping. */
.message-box-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A link inside the box takes the sentence's own colour and is told apart by its underline, exactly as
   the link at the end of a success sentence already is - the box's surface is its own, and the site's
   link blue was measured against the card rather than against this. */
.message-box-text a,
.message-box-text a:visited {
    color: inherit;
    text-decoration: underline;
}