/* The public application forms.

   Everything structural comes from sindisa.css, which dresses both halves of
   the site; what is here is the little the public pages need and the signed-in
   ones do not. */

/* The masthead in place of the menu. A stranger has nowhere to navigate to. */
.public-head {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 0.5rem;

  & img {
    height: 64px;
    width: auto;
  }
}

/* Without the fixed menu beside it, the content column has no left edge to
   sit against, so it centres on the page instead. */
.public-head + .main {
  margin-inline: auto;
  max-width: 46rem;
}

/* A section's blurb, above the questions it introduces. The gap between two
   questions is the bottom margin of the form row inside each of them, and a
   blurb has no form row -- so without this the wording sits tight against the
   first question and reads as part of it. The same gap, so that it reads as
   something said before them. */
.module > .help {
  white-space: pre-line;
  margin-bottom: 1rem;
}

/* The form's own words: the intro above the first question, and the closing
   message on the page after it has been sent. They were grey, on a page whose
   ground is a tinted grey of its own, and set apart from the questions by
   being harder to read than them -- which is the wrong way round. A contract's
   intro is what somebody is agreeing to.

   So they read in the ink everything else does, in a card of their own above
   the questions rather than among them -- and on the soft teal rather than
   the white the fieldsets below them stand on, which is what now sets them
   apart: the same colour the sections are edged and titled in, saying this
   belongs to the form without being one of its questions. */
.wording {
  white-space: pre-line;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--accent);
}

/* A question the answers above it have made irrelevant. Hidden by script
   only: without it every question is shown, each explaining when it applies,
   and the server decides what actually had to be answered. */
.question[hidden] {
  display: none;
}

/* A field no person ever sees. Hidden by being moved off the page rather than
   by display:none or an attribute, because a bot worth catching reads the
   markup, and anything that announces itself as a trap is not one. Kept out
   of the tab order and out of the accessibility tree in the markup, so nobody
   navigating by keyboard or screen reader lands in it either. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sent, and still uploading: see core/js/submit-once.js. */
form[aria-busy="true"] .submit-row button {
  opacity: 0.6;
  cursor: progress;
}

.name-confirmation {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  width: min(30rem, 90vw);
  max-height: 85dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;

  &::backdrop { background: rgb(0 0 0 / 45%); }
  & .dialog-actions { flex-wrap: wrap; }
}

.name-confirmation[open]:not(:modal) {
  position: static;
  margin-block: 1rem;
}

/* The box to sign in. Wide and short, the shape of a line to sign on, and
   sized by aspect-ratio so that what is drawn keeps its proportions on a
   telephone as on a desk -- the canvas's own backing store is set in the
   script, at the screen's pixel ratio.

   touch-action matters: without it a finger dragged across the box scrolls
   the page instead of leaving a mark. */
.signature-pad {
  margin-top: 0.25rem;
  max-width: 32rem;
}

.signature-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

/* The hint and the Clear button sit on one line under the box, the hint
   taking the room left over so the button stays where the eye left it. */
.signature-tools {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;

  & .signature-hint { margin-top: 0.25rem; }
}

/* The KC numbers of the animals a contract is for, a box each, one under
   another; each after the first has its Remove beside it, and the button for
   another animal comes last. See kc-numbers.js. */
.kc-numbers {
  display: grid;
  justify-items: start;
  gap: 0.4rem;

  & .kc-number {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    gap: 0.5rem;
  }
  /* What the check made of the number, on a line of its own under its box,
     and no wider than the box and its button already are. */
  & .kc-number-problem {
    grid-column: 1 / -1;
    contain: inline-size;
    margin: 0;
    font-size: var(--text-small);
    color: var(--bad);
  }
  /* Unfilled, as core's .scan is: they help fill the question, and are not
     the form's action. */
  & button {
    background: transparent;
    color: var(--accent);
  }
  & button[hidden] { display: none; }
}

/* ---------- colour, on the public forms only ---------- */

/* These forms run to sixty questions down one column, and a stranger is
   reading them cold. The palette they are already painted in was doing
   nothing to help: white cards on a tinted ground, with the only colour on
   the page the submit button at the very bottom and the red stars beside the
   required questions -- so the one thing the eye was drawn to was what might
   go wrong.

   What follows puts the teal to work instead, as the structure of the form
   rather than as decoration: it says where a section starts, what it is
   called, which box you are in, and what you have already answered. Nothing
   here is a colour of its own -- every one is a token the rest of the site
   already uses, so light and dark mode come out right without a second set
   of rules. The signed-in forms are untouched; this stylesheet is loaded
   only by applications/base.html, which is the public shell. */

/* Where a section starts. A rule down the edge in the accent, which is the
   one thing on the page that reads at a glance while scrolling past thirty
   questions -- the hairline border the card already had does not. */
form > fieldset.module {
  border-inline-start: 3px solid var(--accent);
}

/* And what it is called. On the tint rather than in it: a legend sits in a
   gap in its own border, so a coloured word there floats; a filled pill
   makes the gap deliberate and joins the title to the rule beneath it. */
form > fieldset.module > legend {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.7rem;
}

/* Which box you are in. The focus outline is already the accent; this
   carries it into the field's own edge, so a box under the cursor is
   plainly the live one on a page of thirty identical boxes. */
.question input:focus-visible,
.question select:focus-visible,
.question textarea:focus-visible {
  border-color: var(--accent);
}

/* What you have answered. Each option of a checkbox or radio group gets room
   of its own to be tinted in, so a set of eight age ranges shows which two
   were picked without reading all eight -- and hovering one says what is
   about to be picked. A tick in a list is easy to miss; a tinted line is
   not. */
.choice-group > div > div {
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-control);
}

.choice-group > div > div:hover {
  background: var(--accent-soft);
}

/* Darker than the hover, deliberately: a pointer resting somewhere must not
   look like an answer given. --accent-row is the shade that reads as teal
   on its own rather than only under something else. */
.choice-group > div > div:has(input:checked) {
  background: var(--accent-row);
}

/* What still needs answering. A long form sends you back to the top with a
   count of the questions that failed, and finding them meant reading for a
   line of small red text. The whole question is grounded in the soft red
   instead, so it is visible while scrolling rather than only once found.

   Pulled out into the card's padding so the ground runs the full width of
   the question rather than stopping short of the boxes inside it. */
.question:has(.errorlist) {
  background: var(--bad-soft);
  border-radius: var(--radius);
  padding: 0.7rem;
  margin-inline: -0.7rem;
}