/* 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;
}