/*
 * The Article 16 report form: everything below is used only by /report/.
 * Split from legal.css to keep both sheets under the repo line cap; the report page
 * links this sheet after legal.css, preserving the original cascade order.
 *
 * Two mechanics decide how everything here is written:
 *
 * 1. THE FORM IS ANTD, like every other form in the fleet. Most of its look already comes from
 *    `src/theme/antdTheme.ts`, which carries this estate's MBNXT values into antd's own tokens
 *    (green, blue, ink, font, radius). So this sheet only holds what a theme token cannot say:
 *    the DS control height and focus ring, the two checkbox panels, and the submit pill. Reach for
 *    the theme first, always. A rule here that restates a token is a second copy of a decision.
 *
 *    Until 2026-09-01 this form was a JSON-Forms schema and this sheet was a 180-line map of the
 *    MBNXT register onto `--jsonform-*` custom properties. The form is eight fixed fields written
 *    by hand, so that whole layer was translation for its own sake. Decision log 07e.
 *
 * 2. SPECIFICITY IS LOAD-BEARING. `index.html` links this sheet, then Vite's own bundle, which
 *    carries Tailwind's preflight and antd's runtime styles, so anything here written at the same
 *    specificity as a rule over there LOSES on document order. Every selector below is therefore
 *    anchored on `#root`, the page's mount point, which outranks both. Do not "simplify" that
 *    prefix away: the rule stops applying the moment you do.
 */

/* antd's `App` wrapper resets the text colour and size under it (`rgba(0, 0, 0, 0.88)`, 14px),
   which quietly takes this page off the estate's ink and body scale. `src/theme/antdTheme.ts`
   carries the MBNXT values into antd's own tokens; this keeps the wrapper on the estate's
   text-base step (16 / 24) as well. */
#root .ant-app {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── Fields ──────────────────────────────────────────────────────────────────────────────────
   Sizes and colours are `spec/ui/input.md` + `preview/input.html` for the control and
   `spec/ui/form-field.md` + `preview/form-field.html` for the field around it, resolved through
   legal.css's tokens so the form re-themes with the rest of the site (print included) instead of
   carrying a second palette to keep in step by hand.

   The control: h-11 (44px), rounded-xs (8px), a 1px black/50 border, white ground. The field: a
   14/700 label with a 6px gap down to the control and a 13px message under it, red-800 and bold
   when the field is invalid. */

#root .notice-form {
  margin-top: var(--sp-lg);
}

#root .notice-form .ant-form-item {
  margin-bottom: var(--sp-lg);
}

/* Labels carry long questions, and a question mark or a bracket is a legal line-break point: at
   390px the browser stranded the last token alone on its own line (`word-break: keep-all` is
   CJK-only and does not prevent this). `text-wrap: pretty` avoids single-token orphan last
   lines, proven on the live render. */
#root .notice-form .ant-form-item-label > label {
  font-size: 0.875rem;      /* FieldLabel text-sm 14 / 700 */
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.005em;
  text-wrap: pretty;
  height: auto;
  white-space: normal;
}

#root .notice-form .ant-input,
#root .notice-form .ant-input-affix-wrapper,
#root .notice-form .ant-select-selector {
  min-height: 2.75rem;      /* h-11, spec/ui/input.md sizes */
  padding: 0.5rem 0.75rem;  /* px-3 */
  border-color: var(--field-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}

#root .notice-form textarea.ant-input {
  line-height: 1.55;
}

/* Hover ring, 3px black/25: `spec/ui/input.md:75` base classes, `hover:not-disabled:ring-[3px]`.
   Literal, not `--field-border`: that token is black/50, stepped up from the corpus's black/25
   for the RESTING border's own WCAG 1.4.11 non-text contrast (see the token block in legal.css).
   The hover ring keeps the corpus's own black/25. */
#root .notice-form .ant-input:hover:not(:focus),
#root .notice-form .ant-select:not(.ant-select-focused) .ant-select-selector:hover {
  box-shadow: 0 0 0 3px rgba(11, 17, 30, 0.25);
}

/* FOCUS IS BLUE, not green. `spec/anti-patterns.md:23-25` reserves green for CTAs and prices and
   makes blue the inputs/links/form-state colour, so the ring is blue-600 while the submit pill
   stays green-600, which IS a CTA. (The corpus is not of one mind here: `preview/input.html:29`
   draws the input's own focus ring as black/75, the same ring the button family uses. The
   anti-pattern card is the newer and more specific statement, and it is the one this estate
   follows; the disagreement is recorded, not patched.) The DS ring is 3px of a solid colour,
   where antd's own default is a 2px wash. */
#root .notice-form .ant-input:focus,
#root .notice-form .ant-input-focused,
#root .notice-form .ant-select-focused .ant-select-selector {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus);
}

#root .notice-form .ant-form-item-has-error .ant-input,
#root .notice-form .ant-form-item-has-error .ant-select .ant-select-selector {
  border-color: var(--danger);
}

#root .notice-form .ant-form-item-has-error .ant-input:focus {
  box-shadow: 0 0 0 3px var(--danger);
}

/* ── Hints and errors ────────────────────────────────────────────────────────────────────────
   Every field's explanation sits under its control and STAYS there when the field is invalid:
   the error is a second line below it, never a replacement for it. A control that swapped the two
   would answer a mistake by deleting the guidance that prevents it. */

/* The two are ordered against each other, not left in antd's own DOM order, which puts the error
   first and pushes a permanent sentence down the page the moment a transient one appears. The
   `order` goes on the WRAPPERS antd actually renders (`.ant-form-item-explain`, not the
   `-error` element inside it), or the flex container never sees it. */
#root .notice-form .ant-form-item-extra {
  order: 1;
  max-width: 42em;
  padding-top: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;     /* text-xs 13 / 18 */
  line-height: 1.125rem;
}

/* FieldMessage, error: red-800 and bold (`preview/form-field.html:23`). The BORDER is red-700 and
   the MESSAGE is red-800: two different tokens, and red-700 as text on white is the lighter of
   the two. */
#root .notice-form .ant-form-item-explain {
  order: 2;
  padding-top: 0.25rem;
}

#root .notice-form .ant-form-item-explain-error {
  color: var(--danger-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.125rem;
}

/* antd sizes a single select from its own `controlHeight` token, which this estate leaves at the
   antd default because the token is shared with the legal-document editor. Left alone, the 44px
   selector below overflows a 32px wrapper and lands on top of the sentence under it. */
#root .notice-form .ant-select-single {
  height: auto;
}

#root .notice-form .ant-select-single .ant-select-selector {
  height: 2.75rem;
  padding: 0 0.75rem;
}

#root .notice-form .ant-select-single .ant-select-selection-search-input {
  height: 100%;
}

#root .notice-form .ant-select-single .ant-select-selection-item,
#root .notice-form .ant-select-single .ant-select-selection-placeholder {
  line-height: 2.75rem;
}

/* ── The repeatable web addresses ────────────────────────────────────────────────────────────
   One label and one explanation for the whole set, then a row per address so a reporter can see,
   correct and remove each one. Every row after the first names its position in an aria-label. */

#root .notice-form .notice-urls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

#root .notice-form .notice-urls__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
}

#root .notice-form .notice-urls__row .notice-urls__field {
  flex: 1 1 auto;
  margin-bottom: 0;
}

#root .notice-form .notice-urls__row .ant-btn {
  min-height: 2.75rem;
  color: var(--ink-muted);
  font-weight: 600;
}

#root .notice-form .notice-urls__row .ant-btn:hover {
  color: var(--danger-ink);
}

/* An outlined green control, the same family as the help card's call to action, so it reads as an
   action on the form rather than as a link in the middle of it. antd paints the label on the inner
   span, so the colour is set there too: on the button alone the span's own rule wins. */
#root .notice-form .notice-urls__add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 2.375rem;
  padding: 8px 16px;
  border: 1px solid var(--primary-dark);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: none;
}

#root .notice-form .notice-urls__add,
#root .notice-form .notice-urls__add > span {
  color: var(--primary-dark);
}

#root .notice-form .notice-urls__add:hover,
#root .notice-form .notice-urls__add:hover > span {
  color: var(--primary-dark);
}

#root .notice-form .notice-urls__add:hover {
  border-color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}

#root .notice-form .notice-urls__add-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ── Checkbox rows ───────────────────────────────────────────────────────────────────────────
   Both checkboxes carry a whole sentence, not a word, so the row is a panel with the box aligned
   to the first line of it rather than centred against three wrapped lines. */

#root .notice-form .notice-declaration .ant-checkbox-wrapper,
#root .notice-form .notice-confirmation .ant-checkbox-wrapper {
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-weight: 600;
  line-height: 1.5;
}

/* The box itself is 20px (`preview/checkbox.html:23-26`), aligned to the first line of the
   sentence beside it rather than to the middle of three wrapped ones. */
#root .notice-form .notice-declaration .ant-checkbox,
#root .notice-form .notice-confirmation .ant-checkbox {
  margin-top: 0.125rem;
}

#root .notice-form .notice-declaration .ant-checkbox .ant-checkbox-inner,
#root .notice-form .notice-confirmation .ant-checkbox .ant-checkbox-inner {
  width: 1.25rem;
  height: 1.25rem;
}

/* Checked is BLUE, never green: `spec/anti-patterns.md:23-25` and README GATE 2. antd paints a
   checked box with `colorPrimary`, which is this estate's CTA green, so it is corrected here
   rather than in the theme, where the same token is what makes the submit pill right. */
#root .notice-form .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--focus);
  border-color: var(--focus);
}

#root .notice-form .ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: var(--focus);
}

/* One invalid treatment on this form, panels included. A box somebody must tick is a control, and
   an unticked required one gets the same red boundary a text field gets when it is empty; the
   panel border IS that control's boundary, since the checkbox itself has none to paint. */
#root .notice-form .notice-confirmation.ant-form-item-has-error .ant-checkbox-wrapper {
  border-color: var(--danger);
}

/* The child-sexual-abuse declaration used to paint its own amber box on the checkbox. It sits
   inside `.notice-exception` now, which IS that box, so the control keeps no boundary of its own:
   two nested amber rules read as a panel inside a panel. */
#root .notice-form .notice-exception .notice-declaration .ant-checkbox-wrapper {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--warn-ink);
}

/* ── Actions ─────────────────────────────────────────────────────────────────────────────────
   One pill, the house CTA: green at rest, one shade darker on hover. Button, `default` variant at
   the LG size: `spec/ui/button.md:52,80` (green-600 filled, white text, hover green-700, h-13
   52px, px-6 24px, text-base 16, font-bold, pill) with the DS's own `--shadow-button`. Green is
   right here: this is a CTA, the one place the corpus reserves it for. */

#root .notice-form .notice-form__actions {
  margin-top: var(--sp-xl);
  margin-bottom: 0;
}

#root .notice-form .notice-submit {
  min-height: 3.25rem;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: 0px 2px 6px -2px rgba(8, 14, 28, 0.15), 0px 4px 32px -8px rgba(8, 14, 28, 0.2);
}

#root .notice-form .notice-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 17, 30, 0.75);
}

/* Disabled is opacity .4 and nothing else: `spec/ui/button.md:41` (`disabled:opacity-40`), and
   `spec/anti-patterns.md:99-101` is explicit that .5 is the shadcn default this overrides. The
   pill keeps its green, so it still reads as this form's primary action waiting on something. */
#root .notice-form .notice-submit:disabled,
#root .notice-form .notice-submit.ant-btn-loading {
  background-color: var(--primary);
  color: var(--on-brand);
  opacity: 0.4;
  box-shadow: none;
}

/* Alert, `red-subtle` variant: `preview/alert.html:45` (red-50 ground, red-800 ink, rounded-xs,
   px-3 py-2) and no border, because a subtle alert's wash IS its boundary. */
#root .notice-form .notice-form__error {
  margin-top: var(--sp-md);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--danger-bg);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--danger-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}

/* ── The receipt ─────────────────────────────────────────────────────────────────────────────
   Article 16(4): what a reporter is left holding once the notice is filed. The reference number is
   the one thing on it they may have to quote back, so it is set apart as a real token. */

#root .ant-result {
  padding: var(--sp-xl) 0 0;
}

#root .ant-result-title {
  font-family: var(--font-body);
  font-size: 1.5rem;               /* text-h2 24 / 29 / 800 */
  line-height: 1.8125rem;
  font-weight: 800;
  color: var(--ink);
}

#root .ant-result-subtitle {
  color: var(--ink-muted);
  text-align: left;
}

/* The reference number is the one thing a reporter may have to quote back, so it is set apart as
   a real token: the `light` badge's own ground, with tabular figures now that the mono face is
   retired. rounded-xxs, 4px. */
#root .ant-result-subtitle code {
  padding: 0.0625rem 0.4375rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #edeff1;             /* MBNXT specialDark-300 */
  border-radius: 4px;
}

/* Printing the report page prints the notice text, never the form chrome. */
@media print {
  #root .notice-form {
    display: none;
  }
}

/* ── The report page's two columns ────────────────────────────────────────────────────────────
   The form, and beside it what happens to a notice, which law this is under, and where to go if
   this is the wrong form. One column below 64em, where the form comes first.

   The page widens from the 40rem reading column the same way a document page does, and for the
   same reason: a sidebar does not fit beside one. `--sheet` rather than a max-width on the grid,
   because the breadcrumb above resolves through the same token. */

body:has(#report-page) {
  --sheet: 66rem;
}

.report-columns {
  display: grid;
  gap: var(--sp-2xl);
  align-items: start;
}

@media (min-width: 64em) {
  .report-columns {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--sp-3xl);
  }
}

/* The scope line under the lede: what this form is NOT for. Closed with a rule, because the
   numbered steps start under it and the reader should see where the preamble ends. */
#root .report-scope {
  margin: var(--sp-lg) 0 var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ── A numbered step of the form ──────────────────────────────────────────────────────────────
   The disc, then the question and its boxes. The disc is green because it is a marker, not a
   control: `spec/anti-patterns.md` reserves green for calls to action, and every CONTROL on this
   page keeps the blue focus and blue checked state the sheet above sets. */

#root .notice-section {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-md);
  padding: var(--sp-lg) 0;
}

#root .notice-section + .notice-section {
  border-top: 1px solid var(--line-soft);
}

#root .notice-section__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-brand);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
}

#root .notice-section__title {
  margin: 0;
  font-size: 1.1875rem;            /* text-h4-ish: a step's question, not a page heading */
  font-weight: 800;
  line-height: 1.5rem;
  color: var(--ink);
}

#root .notice-section__help {
  margin: var(--sp-2xs) 0 var(--sp-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* The line under a whole group of controls, where one `extra` cannot carry it (the URL list). */
#root .notice-section__foot {
  margin: var(--sp-2xs) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Name and email side by side from 40em: two short fields, one line of the form. */
#root .notice-identity {
  display: grid;
  gap: 0 var(--sp-md);
}

@media (min-width: 40em) {
  #root .notice-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── The Article 16(2)(c) exception ───────────────────────────────────────────────────────────
   AMBER, never red: it is an exemption the Regulation grants, not something the reporter got
   wrong. Set apart from the numbered run because it changes what the form asks of them. */

#root .notice-exception {
  margin: var(--sp-lg) 0 var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--warn-line);
  border-left-width: 4px;
  border-radius: var(--radius-sheet);
  background: var(--warn-bg);
}

#root .notice-exception__title {
  margin: 0 0 var(--sp-xs);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--warn-ink);
}

#root .notice-exception .notice-declaration {
  margin: 0;
}

/* The submit button's arrow, the estate's own glyph. */
#root .notice-submit__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  transition: transform 0.2s;
}

#root .notice-submit:hover .notice-submit__arrow {
  transform: translateX(1.75px);
}

#root .notice-receipt__back {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-dark);
}

/* ── The explanatory column ───────────────────────────────────────────────────────────────────
   Secondary to the form: smaller type, one tinted card and the rest plain, no filled green. */

.report-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  min-width: 0;
}

#root .report-card {
  padding: var(--sp-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--surface);
}

/* The one tinted card: what happens after a notice is filed is the thing a reporter most wants
   to know, so it is the one that reads as an answer rather than as reference material. */
#root .report-card--how {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}

#root .report-card h2 {
  margin: 0 0 var(--sp-sm);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.375rem;
  color: var(--ink);
}

#root .report-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

#root .report-card__note {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

#root .report-card a {
  color: var(--primary-dark);
  font-weight: 700;
}

/* The three steps. The disc matches the form's own numbering, at the sidebar's smaller size. */
#root .report-steps {
  list-style: none;
  margin: 0 0 0;
  padding: 0;
}

#root .report-steps li {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr);
  gap: var(--sp-sm);
  padding-bottom: var(--sp-md);
}

#root .report-steps li:last-child {
  padding-bottom: 0;
}

#root .report-steps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-brand);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
}

#root .report-steps h3 {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.25rem;
  color: var(--ink);
}

#root .report-links {
  list-style: none;
  margin: var(--sp-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

#root .report-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary-dark);
  text-decoration: none;
}

#root .report-links a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#root .report-link-arrow {
  flex: none;
  width: 13px;
  height: 13px;
}

/* The column is not part of the notice a reporter prints. */
@media print {
  .report-aside {
    display: none;
  }
}

/* The left column holds the whole notice: its framing copy and the form under it, so the sidebar's
   first card sits level with the title rather than with the first step. */
.report-main {
  min-width: 0;
}

/* The required asterisk, after the words (see the `requiredMark` render in the form). */
#root .notice-required {
  margin-left: 2px;
  color: var(--danger, #b3261e);
  font-weight: 700;
}