/* Page-scoped rules migrated out of Setting[custom_css].
 *
 * This file is the Phase 3 half of a migration whose Phase 4 half is components.css:
 * the rules here are the ones that are genuinely about a page rather than about a
 * thing, and they are copied with their selectors and values intact rather than
 * being renamed into components that would have one call site each.
 *
 * It loads AFTER components.css and BEFORE application.css, and the operator's row
 * is still injected last, so while that row is live nothing here changes a pixel --
 * the row wins every tie. Cutover is when this file starts mattering.
 *
 * Every block carries the baseline line range it came from, so the parity harness's
 * findings can be traced back to a rule someone wrote rather than to a value someone
 * chose. Do not "tidy" a value here: several declarations in the row have never
 * painted, and the ones that have are load-bearing in ways the reconciliation
 * document spells out.
 */

/* ---------------------------------------------------------------------------
 * /vouchers -- baseline:1492-1570
 *
 * The button and the field are NOT here. They are .gp-btn and .gp-field__control
 * in components.css, applied alongside Bootstrap's .btn/.btn-primary and
 * .form-control in app/views/vouchers/index.html.erb.
 *
 * Two things in the original block are deliberately absent:
 *
 *   - `.btn-primary::after`, the glass rim. All three call sites are
 *     <input type="submit">, and a replaced element generates no pseudo-elements,
 *     so that rule has never painted. The parity harness reports its computed
 *     values as differences and flags them INERT for exactly this reason.
 *   - `#vouchers .form-control { color: var(--green) }`. text_field_tag emits
 *     id="code", so `#vouchers #code` outranks it and paints dk-green. The
 *     declaration is dead, like the non-breaking space in the .footer selector.
 *     Note that the `height` from that same block IS carried, at the bottom of this
 *     section -- one dead declaration in a rule does not make the rule dead.
 * ------------------------------------------------------------------------ */

/* The !important is carried across rather than cleaned up, and that is a decision.
 * Bootstrap's .mt-5 is `margin-top: 3rem !important`, so a normal declaration here
 * loses to it whatever the source order -- importance beats specificity. It also
 * has to stay a page-scoped selector rather than becoming a class on the markup:
 * the layout's flash wrapper carries .mt-5 too (app/views/layouts/application.html.erb,
 * the div wrapping `flash.each`), and that is shared by every page. */
#vouchers .d-flex.mt-5 {
  margin-top: 1rem !important;
}

#vouchers h1 {
  text-align: center;
}

/* The voucher artwork. Still the Squarespace CDN URL it has always been -- moving it
 * to a local asset is a real improvement and a separate change, because it is one
 * of four third-party requests the venue's wifi has to make during a show. The local
 * file already exists (Voucher+Mockup5.webp) and is not yet committed.
 *
 * The parity harness blocks this host in every mode, so the box's geometry is
 * compared and its paint is not. */
#vouchers h1::before {
  content: "";
  display: block;
  width: 300px;
  height: 200px;
  background-image: url("https://images.squarespace-cdn.com/content/543df105e4b01ddd00dd714c/ccf9e88f-9b2b-4863-92cc-cecb3c1fcda2/Voucher+Mockup5.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#vouchers .text-center.mb-4 {
  padding-left: 30px;
  padding-right: 30px;
}

/* The only thing stacking the form above the button. Migrating the button and the
 * field without this renders an unstacked, uncentred page -- which is why the
 * reconciliation document lists it first among the rules that are easy to miss. */
#vouchers .row {
  flex-direction: column;
  align-items: center;
}

/* /vouchers is the only one of the four form pages that sets a size on the control.
 * #login, [id$="-edit"] and #referrals-new all set weight/colour/centring/radius and
 * no font-size, so this stays a page rule rather than moving into .gp-field__control
 * and silently shrinking the text on three pages that never asked for it. */
#vouchers #code {
  font-size: var(--gp-font-size-body);
}

/* The 42px control. This is the other half of the note above: it came out of
 * .gp-field__control because #vouchers is the only one of the four form pages that
 * sets a height at all, so carrying it in the component would have resized the
 * referral field to match a page it has nothing to do with. Written with the row's own
 * selector rather than .gp-field__control so that the cutover arithmetic is the same
 * one the row does today. */
#vouchers .form-control {
  height: var(--gp-control-height);
}

/* ---------------------------------------------------------------------------
 * /terms -- baseline:1691-1727
 *
 * Nothing is componentised here and no markup changes: this page has no button, no
 * field and no card. It is a Phase 3 verbatim migration and nothing else, which is
 * also what made it the page that forced the harness to be able to compare two
 * documents that are byte-identical. See docs/plans/referrals-and-terms-parity.md.
 *
 * Measured on the rendered page at 390px, not read out of the CSS: /terms renders NO
 * navbar. WelcomeController skips :check_if_logged_in for :terms, so @attendee is nil
 * whether or not anyone is signed in, and the layout guards the whole <nav> behind
 * `if @attendee`. The page shows the logged-out logo block instead. That is why the
 * only <h1> on this page is the title, and the only <ul>/<li> are inside the
 * ActionText body -- both assumptions these rules depend on, both asserted by
 * spec/requests/terms_parity_fixture_spec.rb rather than believed.
 * ------------------------------------------------------------------------ */

/* The page title lives in CSS. The view renders <h1>Terms</h1>; the h1 is collapsed
 * to nothing and the visible words are the CONTENT of its ::after. A screen reader
 * gets "Terms", because generated content is not reliably exposed -- so this is a
 * real defect and it is migrated AS IS. Moving the copy into the view changes the
 * accessible name, which is a change, and the freeze runs to 4 October. */
#terms h1:first-child {
  font-size: 0 !important;
  text-align: center;
}

#terms h1:first-child::after {
  content: "Terms of Service";
  font-size: calc(1.375rem + 1.5vw);
}

/* DEAD AS SHIPPED, and carried anyway. font-size loses to the `font-size: 0
 * !important` on the more specific h1:first-child (1,1,1 against 1,0,1), and
 * text-align is the same value that rule already sets. It would only come alive if
 * the page rendered a second <h1>, which -- with no navbar -- it cannot. Deleting it
 * is a decision about the design rather than a tidy-up, and it belongs after the run
 * with the rest of the dead rules. */
#terms h1 {
  font-size: calc(.8rem + 1.5vw);
  text-align: center;
}

/* 0.8rem = 12.8px, 1.2 = 15.36px line-height, measured. The 30px side padding sits
 * inside .container's own 12px, so the text column is 306px wide at 390px. */
#terms .trix-content {
  font-size: .8rem;
  line-height: 1.2;
  text-align: justify;
  padding-left: 30px;
  padding-right: 30px;
}

#terms .trix-content div:first-child {
  text-align: center;
}

#terms li {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

#terms ul {
  padding-left: 1rem;
}

/* ---------------------------------------------------------------------------
 * /referrals/new -- baseline:1730-1815
 *
 * The third writing of the same form page as /vouchers and /attendees/:id/edit. The
 * button and the field are NOT here -- they are .gp-btn and .gp-field__control on the
 * markup in app/views/referrals/new.html.erb, alongside Bootstrap's own classes.
 *
 * `.btn-primary::after` is deliberately absent, as on /vouchers: the call site is
 * f.submit, which emits <input type="submit">, and a replaced element generates no
 * pseudo-element box. That rule has never painted.
 *
 * `.gp-form` is deliberately NOT used for the form width. .gp-form is
 * `min(var(--gp-dimension-form-width), 100% - 2rem)`, which resolves to 288px in this
 * wrapper against the 320px that ships -- a 32px narrowing at every viewport. A width
 * belongs to the layout, so the layout keeps it.
 *
 * Three of the rules below never render anything, measured on the page rather than
 * deduced. They are migrated verbatim because deleting a dead rule is a decision about
 * the design, not a tidy-up, and this migration is not allowed to make one.
 * ------------------------------------------------------------------------ */

#referrals-new .text-center.mb-4 {
  padding-left: 30px;
  padding-right: 30px;
}

/* 1.4rem = 22.4px, and this is the bare `.mt-5` rather than `.d-flex.mt-5` as on
 * /vouchers -- so it also catches the layout's flash wrapper and the .row.mt-5 that
 * holds the QR code. Narrowing the selector would move two things this page has
 * always positioned. */
#referrals-new .mt-5 {
  margin-top: 1.4rem !important;
}

#referrals-new .d-flex.justify-content-center.align-items-center.mb-5 {
  padding-left: 30px;
  padding-right: 30px;
}

/* DEAD AS SHIPPED: the 350px never paints. The form is a flex item inside the 380px
 * .mb-5 wrapper above, which has 30px of side padding, so its container's content box
 * is 320 and flex-shrink takes it there -- at every viewport, not only narrow ones.
 * Measured 320px at 390px wide. The margins DO render. */
#referrals-new form {
  width: 350px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

/* (0,1,1,1) -- this is what the label actually renders at. See .form-label below. */
#referrals-new .mb-3 label {
  font-size: 0.75rem;
}

/* Copied character for character, ordering trap included. `margin-bottom: 0
 * !important` is followed by a `margin: auto` SHORTHAND, which resets all four sides
 * -- and loses on the fourth, because importance beats source order. So this is
 * margin-bottom 0, margin auto on the other three. Tidying it changes the page.
 *
 * Its padding is dead: the longer .d-flex.justify-content-center.align-items-center.mb-5
 * selector above is (1,4,0) against this rule's (1,1,0), so 30px wins over 10px. */
#referrals-new .mb-5 {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 0 !important;
  width: 380px;
  margin: auto;
}

/* DEAD font-size, live everything else. `.mb-3 label` above is (1,1,1) against this
 * rule's (1,1,0), and bootstrap_form wraps every field in .mb-3, so the label ships at
 * 0.75rem and never at 0.6rem. text-transform and margin-bottom are uncontested and do
 * render -- which is why the label is uppercase at 12px rather than at 9.6px.
 * design/tokens.json records the same thing about font/size-label. */
#referrals-new .form-label {
  margin-bottom: 0rem !important;
  text-transform: uppercase;
  font-size: 0.6rem;
}

#referrals-new .mb-3 {
  text-align: center;
}