/* =============================================================================
   Claim wizard
   web/assets/css/new-case.css — loaded fourth, by /app/new only:

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/base.css">
     <link rel="stylesheet" href="/assets/css/app.css">
     <link rel="stylesheet" href="/assets/css/new-case.css">

   Only what the eight-step claim form needs and the three stylesheets above do
   not already provide. base.css supplies .form, .field, .check, .dropzone,
   .filelist, .progress, .notice, .card, .kv and the button and chip furniture;
   app.css supplies .stepper. Nothing here restates any of it.

   The blocks:
     1. Wizard frame       the rail, the panels, the autosave indicator
     2. Evidence slots     one named upload per document the claim needs
     3. Declarations       the seven sentences, English above Arabic
     4. Track B table      quoted statement / why false / evidence
     5. Fee and payment    the figure, and the sentence before the pay button

   Rules, as everywhere: every colour is a var(--token); every spacing value is
   a --s-* step; nothing states its meaning in colour alone; the page does not
   scroll horizontally at 360px.
   ============================================================================= */

/* ====================================================== 1. wizard frame ==== */

/* The page runs in the wide shell so that the eight-step rail can name every
   step. Everything that is read rather than scanned — the heading, the panels,
   the summary — is held to the narrow measure and centred under it, because a
   form field 1,200px wide is a form field nobody reads to the end of. */
.wizard__col {
  max-width: var(--shell-narrow);
  margin-inline: auto;
}

/* The rail reports which of the eight steps is being filled in. It scrolls away
   with the page: it is read on arriving at a step, not while typing into one,
   and pinning eighty pixels of it under a sixty-pixel header would cost more
   screen than it returns. */
.wizard__rail {
  padding-block: var(--s-4);
}

/* app.css gives every step an equal share. The current one is set in the UI
   weight, which is wider at the same length, so it gets a larger share — a rail
   whose one bold label is the only one ellipsed reads as a fault. */
.wizard__rail .stepper__step[aria-current="step"] {
  flex-grow: 1.7;
}

/* The autosave indicator. Deliberately quiet: it reports on a background
   write, not on anything with legal effect, so it never becomes a toast and it
   never moves the layout. The width is reserved so the line does not reflow
   between "Saving" and "Saved 23:04". */
.wizard__save {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 20px;
  min-width: 20ch;
  font-size: var(--fs-caption);
  color: var(--text3);
}

.wizard__save svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.wizard__save[data-state="saving"] { color: var(--text2); }
.wizard__save[data-state="saved"]  { color: var(--ok); }
.wizard__save[data-state="failed"] { color: var(--warn); }

/* The save line sits under the rail, on the reading measure, so it is beside
   the form it reports on rather than out at the page edge — and it is the one
   thing that stays in view, pinned beneath the header, because it is what a
   claimant looks for while typing into a form they cannot afford to lose. */
.wizard__saveline {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-raised);
  max-width: var(--shell-narrow);
  margin-inline: auto;
  margin-block-start: var(--s-3);
  padding-block: var(--s-2);
  background: var(--bg);
}

/* A step. The heading is focused when the step changes, so a keyboard or
   screen-reader user lands on the name of what they are now filling in rather
   than at the top of the document. */
.wizard__panel {
  max-width: var(--shell-narrow);
  margin-inline: auto;
  scroll-margin-block-start: var(--s-6);
}

.wizard__panel:focus-visible {
  outline: none;
}

.wizard__heading:focus-visible {
  outline: var(--focus-outline-width) solid var(--accent);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--r-xs);
}

/* Step navigation. Back sits left, continue right, and on a narrow screen they
   stack with continue first, because that is the one being reached for. */
.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--border);
}

@media (max-width: 480px) {
  .wizard__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .wizard__nav .btn {
    width: 100%;
  }
}

/* Two fields on one line above 640px, one below. Used for the paired inputs —
   given name and family name, date and reference — where the pair genuinely
   belongs together. */
.pair {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A live character count beneath a capped textarea. Not a live region: it
   changes on every keystroke, and the cap is already announced through
   aria-describedby. */
.charcount {
  align-self: flex-end;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  color: var(--text3);
}

.charcount[data-over="true"] {
  color: var(--danger);
}

/* ==================================================== 2. evidence slots ==== */

/* One slot per document the claim needs, each with its own name, its own
   reason for existing, and its own dropzone. A single "attach files" control
   would leave the registry unable to tell the signed Agreement from the page
   carrying the clause, and both are cited by hash in the filed request. */
.slot + .slot {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: var(--hairline) solid var(--border);
}

.slot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-end: var(--s-2);
}

.slot__why {
  margin-block-end: var(--s-3);
  font-size: var(--fs-caption);
  color: var(--text3);
  line-height: var(--lh-ui);
}

/* The delete control on a staged exhibit. A file may be removed only while the
   claim is a draft; once filed, its hash is in the journal chain and the API
   refuses. */
.filelist__remove {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text3);
  cursor: pointer;
  line-height: 0;
}

.filelist__remove:hover {
  color: var(--danger);
}

.filelist__remove svg {
  width: 14px;
  height: 14px;
}

/* ===================================================== 3. declarations ===== */

/* The seven sentences. Every one is shown in full, in both languages, with no
   truncation and nothing behind a disclosure: the record has to be able to say
   exactly what the claimant was shown, and a sentence hidden behind "read more"
   is a sentence a party will later say they never saw. */
.decl {
  align-items: flex-start;
  flex-wrap: wrap;
}

/* wrap is there for the error line below; the sentence itself must shrink to
   the space beside the box rather than wrap under it. */
.decl > span {
  flex: 1 1 0;
  min-width: 0;
}

.decl + .decl {
  margin-block-start: var(--s-3);
}

/* ui.js applyFieldErrors() has no .field to attach to inside a .check, so its
   message lands beside the box as a third flex item and is squeezed into a
   column. It belongs on its own line, indented to the text it refers to. */
.decl .field__error {
  flex: 1 0 100%;
  margin-block-start: var(--s-2);
  margin-inline-start: calc(16px + var(--s-3));
}

.decl__en {
  display: block;
  color: var(--text);
  line-height: var(--lh-body);
}

.decl__ar {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-prose);
  color: var(--text2);
}

/* The first declaration is the one that replaced human screening: it is what
   the Cure Notice issues on. The rule marks it as the load-bearing one; the
   note beside it says so in words, because a rule is not a statement. */
.decl--primary {
  border-color: var(--accent-line);
  background: var(--bg-2);
}

.decl__weight {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-ui);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--accent);
}

/* An outstanding declaration: named by the API in its refusal, or found
   unticked by the step check. Both routes look the same, because to the
   claimant they are the same fact. */
.decl[data-outstanding="true"],
.decl.is-invalid {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* ==================================================== 4. Track B table ===== */

/* One allegation: the words complained of, why they are said to be false, and
   the evidence relied on. Three columns above 860px, stacked below. */
.alleg {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 220px);
  padding: var(--s-4);
  background: var(--bg-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
}

.alleg + .alleg {
  margin-block-start: var(--s-3);
}

.alleg__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* base.css draws a chevron on every <select> and sets the padding for it. A
   multi-select is a list box, not a dropdown: it has no chevron to draw, and
   the reserved padding leaves its options indented away from their column. */
.alleg select[multiple] {
  min-height: 0;
  padding: var(--s-2);
  padding-inline-end: var(--s-2);
  background-image: none;
  background-color: var(--bg-2);
  color: var(--text);
  cursor: default;
}

.alleg select[multiple] option {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs);
  color: var(--text);
}

.alleg select[multiple] option:checked {
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 860px) {
  .alleg {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================= 5. fee and payment ====== */

/* The fee, as the API states it. No figure on this page is written in the
   markup: the fee schedule is a fact of record and /public/config is the only
   place it is stated. */
.fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.fee > div {
  flex: 1 1 300px;
  min-width: 0;
}

.fee__amount {
  font-family: var(--font-display);
  font-size: var(--fs-num-hero);
  font-weight: var(--fw-title);
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.fee__lines {
  width: 100%;
  margin-block-start: var(--s-4);
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.fee__lines th,
.fee__lines td {
  padding-block: var(--s-2);
  text-align: start;
  border-block-end: var(--hairline) solid var(--border);
}

.fee__lines td:last-child {
  text-align: end;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-num);
  white-space: nowrap;
}

/* The sentence immediately above the pay button. It is set apart and it is not
   quiet: that the fee is not refundable is the consequence a claimant is most
   likely to say they were not told. */
.fee__terms {
  margin-block-start: var(--s-5);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

/* The read-back of the claim on the final step. Dense, quiet, and every value
   as it will be filed. */
.summary + .summary {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-5);
  border-block-start: var(--hairline) solid var(--border);
}

.summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-3);
}

/* A quoted review, printed as the claimant pasted it. pre-wrap because the line
   breaks in the original are part of what was published. */
.quoted {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border-inline-start: 2px solid var(--border3);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}