/* AdEQ — the form page's own stylesheet.
 *
 * Every rule here is written under [data-screen="form"], which app.js sets on
 * <html> for this screen and no other, so nothing in this file can reach the
 * script page, the client page or Home however careless the selector is. See
 * screen-script.css for why that wall exists.
 *
 * `.page-head` is the example that matters: six screens use it, and the two
 * that make it sticky have to say so without the other four hearing.
 */

/* A HEAD THAT STAYS, and does not travel before it sticks.
   `main` opens with 16px of padding, so a bar left alone rests 16px lower
   than it pins and slides that far on the first flick of the wheel, taking
   the page with it. Pulled up through that padding and given the same 16px
   back as its own, so its resting place and its stuck place are one pixel. */
[data-screen="form"] .page-head.is-stuck-head {
  position: sticky; top: var(--header-h); z-index: 8;
  background: var(--paper);
  margin: -16px 0 0; padding: var(--s-2) 0 var(--s-2);
  /* Two pixels of paper below it, painted not laid out: the toolbar hides the
     seam with its own background, but a bordered card below cannot. */
  box-shadow: 0 2px 0 var(--paper);
}

/* THE TOOLBAR, UNDER THE HEAD AND LEVEL WITH THE RAIL.
   Even padding above and below — the script page's version kept 13px over its
   pills and 7px under them and read visibly high in its own strip. */
[data-screen="form"] .fm-bar {
  position: sticky; top: var(--stick-top); z-index: 9;
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1h) 0; margin: 0 0 var(--s-1);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-faint);
}

/* The Activity rail rests on the same line, and clears the head by the two
   pixels its own border and corner live in. */
[data-screen="form"] .fm-rail {
  top: calc(var(--stick-top) + 2px);
  max-height: calc(100vh - var(--stick-top) - 2px - var(--pad-page-end));
  z-index: 9;
}

/* WHOSE TURN IT IS, BESIDE THE STAGE THAT SAYS IT IS SOMEBODY'S.
   The same 12.5px mute as `.script-waiting`, and no margin of its own: the
   bar is a flex row with an 8px gap, which already spaces it. */
[data-screen="form"] .fm-waiting {
  font-size: 12.5px; color: var(--mute);
}

/* ADDING AND REMOVING AN ANSWER, on the answer itself.
   Franz, 2026-09-23: let him add and remove answer options on each
   multiple-choice question, the way Meta's builder does.

   THEY ARE QUIET UNTIL THE ROW IS TOUCHED. A question with six answers would
   otherwise carry twelve buttons, which is a control panel where a list should
   be. They appear on hover or focus — the same contract `.fm-copy` already has
   on a field — and focus-within means the keyboard reaches them without a
   mouse ever moving. */
[data-screen="form"] .fm-opt-act {
  flex: none; align-self: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  width: 22px; height: 22px; padding: 0;
  font: 400 14px/1 var(--font-body); color: var(--mute); cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
[data-screen="form"] .fm-opt:hover .fm-opt-act,
[data-screen="form"] .fm-opt:focus-within .fm-opt-act,
[data-screen="form"] .fm-opt-act:focus-visible { opacity: 1; }
[data-screen="form"] .fm-opt-act:hover { color: var(--accent); border-color: var(--rule); }
/* Remove is the one that takes something away, so it is the one that turns the
   alarm colour — and only on hover, so a list of answers is not a row of red. */
[data-screen="form"] .fm-opt-act.is-drop:hover { color: var(--alarm); border-color: var(--alarm); }
[data-screen="form"] .fm-opt-act:disabled { opacity: .35; cursor: default; }

/* THE ADD BUTTON SITS WHERE THE WRITING STARTS.
   Franz, 2026-09-24: "bring the button towards the left in margin with the
   text above and not the number".

   It was centred on the dashed rule between two sections, which is the right
   place for a divider and the wrong place for a control: the eye reading a
   column of copy has to travel to the middle of the page and back for it. Left
   is where every line of text in this form begins.

   56px is the number gutter — .fm-f's 18px of padding plus .fm-n's 38px — so
   the button lines up with the FIELD TEXT rather than with the "1)" beside it,
   which is the distinction he drew. */
/* CENTRED, BOTH WAYS. Franz, 2026-10-03: "this question ui is not in the
   centre of each two cards come on man i need it centre always". That
   overrides the 24 Sep left alignment above. Horizontally it sits in the
   middle of the rule; vertically the card above already leaves 14px of
   margin, so the row adds 2px on top and 16px below, giving the same 16px
   either side of the pill. The 2px is PADDING, not margin: a margin there
   collapses into the card's var(--s-2) and disappears. */
[data-screen="form"] .scene-insert-row { justify-content: center; padding: var(--s-nudge) 0 0; margin: 0 0 var(--s-2); }

/* THE RAIL ENDS CLOSER TO THE FLOOR. Franz, 2026-09-24: "birng hte acitivity
   oclumn till the bottom a bit the padidng is too strong but graceful".
   --stick-pad is the top inset it shares with the sticky bars and is right up
   there; at the bottom it was the same number again, which left a band of empty
   card under the last entry. Half of it, and the rail runs further down the
   window. */
[data-screen="form"] .fm-rail {
  padding-bottom: calc(var(--stick-pad) / 2);
  max-height: calc(100vh - var(--stick-top) - 2px - var(--pad-page-end));
}

/* ── an activity entry folds from its own top right ─────────────────────────
   Franz, 2026-09-24: "we dont need a compare text and bring hte collapthing in
   the top right of the entry that makes it more ergnomical and natural looking
   mate the compare text and ui can come when its uncollapsed".

   The whole entry is the <details> now, and its <summary> is the head — what
   changed, when, and the chevron the stylesheet puts at the end of every
   summary in the product. So the control is where the eye already is, instead
   of on a second line below carrying a word ("Compare") that only repeated
   what the chevron already said.

   The word comes back on the inside, where it is a label for the diff under it
   rather than a button pretending to be one. */
[data-screen="form"] .act-fold > summary { align-items: flex-start; gap: var(--s-1); }
[data-screen="form"] .act-fold > summary::after { margin-top: var(--s-half); }
/* The title row and the name stack inside the summary, so both stay visible
   while it is shut and the chevron sits beside the pair rather than below it. */
[data-screen="form"] .act-fold > summary .act-stack { flex: 1; min-width: 0; }
[data-screen="form"] .act-fold > summary .act-by { margin-top: var(--s-nudge); }
[data-screen="form"] .act-fold > summary:hover .act-what { color: var(--accent); }
[data-screen="form"] .act-open { margin-top: var(--s-1); }
[data-screen="form"] .act-open-h {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 var(--s-half);
}

/* A CONTACT FIELD AND ITS REMOVE BUTTON, on one line.
   Franz, 2026-09-24: "i should be bale to add or delte contact form fields ehre
   too like in quesitons mate". The × keeps the same manners as the one on an
   answer: invisible until the row is touched, alarm-coloured only on hover. */
[data-screen="form"] .fm-field-row { display: flex; align-items: center; gap: var(--s-1); }
[data-screen="form"] .fm-field-row .fm-input { flex: 1; min-width: 0; }
[data-screen="form"] .fm-field-row .fm-opt-act { opacity: 0; }
[data-screen="form"] .fm-field-row:hover .fm-opt-act,
[data-screen="form"] .fm-field-row:focus-within .fm-opt-act { opacity: 1; }
[data-screen="form"] .fm-add-field { align-self: flex-start; margin-top: var(--s-nudge); }

/* THE PILL CENTRES ITS OWN LABEL. Franz, 2026-09-24: "also these arent in the
   middle mate in the vertical and hortizontal mate".

   The row was already centring the button — both middles measured at the same
   pixel — so the crookedness was one level in. The label lives in a <span>
   carrying `.chip`, and `.chip` is written for a <button>: on an inline-block
   span, vertical padding does not centre the text in the box it makes, it just
   pushes the line down from the top. The glyph and the word then sit high, by
   about two pixels, which is exactly the amount that reads as wrong without
   being nameable.

   inline-flex with both axes centred makes the box hold the text rather than
   sit under it, and a fixed height stops the descender in "Question" from
   moving the whole pill. */
[data-screen="form"] .scene-insert-mark.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h-sm); padding: 0 var(--pad-chip-x); line-height: 1;
}

/* NO RULE UNDER THE TOOLBAR. Franz, 2026-09-24: "also i dont want this line
   below the tool bar mate".
   It was drawing a second horizontal line a few pixels above the first card's
   own top border, so the eye read two edges where the design has one. The
   toolbar's own paper already separates it from the form while it is stuck. */
[data-screen="form"] .fm-bar { border-bottom: 0; }