/* What the signed-in user has asked for in Preferences, in the sheet that loads after every
 * theme — see layouts/_head. Nothing in here is styling in its own right; it is all one
 * preference or another overruling a theme.
 * ------------------------------------------------------------------------------------- */

/* Preferences → Advanced → "Hide Breadcrumbs". The List / Show / Edit / New trail is a
 * scaffold habit and every page it appears on is reachable from the nav menu, so this is
 * a matter of taste. Hidden rather than left unrendered, so keyboard_controller's retro
 * accelerators (which click .breadcrumb-item a by name) go on working for someone who has
 * only asked not to look at them. */
body.hide-breadcrumbs nav[aria-label="breadcrumb"] {
  display: none;
}

/* Loud required fields — on unless Preferences → Advanced → "Calm Required Fields" is.
 *
 * The colour is the browser's own :valid/:invalid, so it keeps up as you type with nothing
 * listening: red while a required field is empty or holds something it won't accept, green
 * once it does.
 *
 * A field the draft switch has let off the hook keeps its data-require-on-submit and loses
 * its [required] (request_form_controller#toggleDraft) — that middle state is the yellow
 * one: still wanted before this can be submitted, not wanted to save a draft.
 *
 * Loaded last of all the stylesheets (layouts/_head), after each theme and after
 * theme-overrides. Those repaint every input in dark mode at the same specificity this
 * needs, so being last is what decides it — raising specificity here instead would only
 * move the argument. Both halves of each state are set together for the same reason: a
 * background from here over a colour from a theme is how you get black on dark red.
 *
 * Checkboxes, radios and the off-screen link-proof stand-in are left alone: a border and a
 * background say nothing useful on the first two, and the third is deliberately invisible. */
body.requirements-loud {
  --req-ok-border: #198754;
  --req-ok-bg: #fff;
  --req-ok-fg: #212529;
  --req-bad-border: #dc3545;
  --req-bad-bg: #ffe3e6;
  --req-bad-fg: #58151c;
  --req-cond-border: #e0a800;
  --req-cond-bg: #fff8e1;
  --req-cond-fg: #4d3800;
}

[data-bs-theme="dark"] body.requirements-loud {
  --req-ok-border: #2fa36b;
  --req-ok-bg: #23272b;
  --req-ok-fg: #f1f3f5;
  --req-bad-border: #ef5f6b;
  --req-bad-bg: #3f1d23;
  --req-bad-fg: #ffdde1;
  --req-cond-border: #d3a017;
  --req-cond-bg: #3b3116;
  --req-cond-fg: #ffeeba;
}

/* Required to submit, but not right now — the draft switch has it off the hook. Also the
   base the two below only recolour, so a required field gets the 2px border from here
   whether or not it is on a form with a draft switch. */
body.requirements-loud
  :is(input, select, textarea):is([required], [data-require-on-submit]):not(
    [type="checkbox"], [type="radio"], [type="hidden"], .link-proof
  ) {
  border: 2px solid var(--req-cond-border);
  background-color: var(--req-cond-bg);
  color: var(--req-cond-fg);
}

body.requirements-loud
  :is(input, select, textarea)[required]:not(
    [type="checkbox"], [type="radio"], [type="hidden"], .link-proof
  ) {
  border-color: var(--req-bad-border);
  background-color: var(--req-bad-bg);
  color: var(--req-bad-fg);
}

body.requirements-loud
  :is(input, select, textarea)[required]:valid:not(
    [type="checkbox"], [type="radio"], [type="hidden"], .link-proof
  ) {
  border-color: var(--req-ok-border);
  background-color: var(--req-ok-bg);
  color: var(--req-ok-fg);
}

/* The two fields that answer "a link on an item, or an attachment" between them. Neither is
   `required` on its own — the rule is satisfied by either — so there is no :valid to read
   and purchase_items#recalculate says which state they are in instead. Yellow is the same
   yellow as a field the draft switch has let off the hook, and green the same green as any
   other answered requirement, because that is exactly what these two are. */
body.requirements-loud .link-proof-field {
  border: 2px solid var(--req-cond-border);
  background-color: var(--req-cond-bg);
  color: var(--req-cond-fg);
}

body.requirements-loud .link-proof-field.link-proof-met {
  border-color: var(--req-ok-border);
  background-color: var(--req-ok-bg);
  color: var(--req-ok-fg);
}

/* The retro themes fake their input frames with inset box-shadows and no border at all
   (98.css and friends), which would sit inside the border this adds and read as a second
   frame in the wrong colour. Nothing is lost by dropping it: the border and the background
   are already saying what the shadow was there to say. */
:is(html[data-theme="98"], html[data-theme="xp"], html[data-theme="7"],
    html[data-theme="sys"])
  body.requirements-loud
  :is(
    :is(input, select, textarea):is([required], [data-require-on-submit]):not(
      [type="checkbox"], [type="radio"], [type="hidden"], .link-proof
    ),
    .link-proof-field
  ) {
  box-shadow: none;
}