/* ==========================================================================
T29 — Guest Order Tracking
ONE ROUTE: `/sales/guest/form/`. Body class read VERBATIM from the live pod, not derived —
`sales-guest-form page-layout-1column`. A body class guessed by analogy once shipped 100% dead
CSS on this repo.
GREENFIELD: a CSSOM walk over all 28 readable sheets found ZERO rules anywhere naming
`.sales-guest-form`. (The two unreadable sheets are the cross-origin Google Fonts ones, so that
enumeration is complete rather than merely large.) Nothing here can regress a closed page by
editing a shared rule, because there is no shared rule to edit.
THE COMP'S THIRD ELEMENT IS NOT BUILT, AND THAT IS A DECISION.
The artboard draws a result card — order number, date, total, an "Out for delivery" pill, a
"Track ↗" link — beneath the form. There is no block for it on this route: `sales_guest_form.xml`
renders exactly one block (`Magento\Sales\Block\Widget\Guest\Form`), and a guest has no order
context until a lookup succeeds. That surface is `/sales/guest/view/`, which `_t25.css` already
styles with 62 `sales-guest-view` selectors. Building a second copy here would be register #58's
failure with the serial numbers filed off. Registers #54 (the pill names statuses Magento lacks)
and #55 (the guest family) carry the rest.
THE ZIP FIELD STAYS, AND THE COMP IS WRONG TO DROP IT — register #73.
The comp draws one field labelled "Email or postal code". Magento renders THREE controls: a
`select#quick-search-type-id` (Email / ZIP Code) plus `#oar-email` and `#oar-zip`, toggled by the
`ordersReturns` widget. The survey MEASURED that removing `oar_zip` from a real POST returns
HTTP 500 — `Guest::compareStoredBillingDataWithInput()` reads `$postData['oar_zip']`
unconditionally. So building the comp literally takes a working page to a 500. All three controls
are styled; the deviation is declared rather than hidden.
COLUMN CAP IS 560, NOT 608. `_t21.css:114`, `_t22.css:118` and `_t23.css:96-104` all compute
their cap as *comp column + 2×24*, because those comps quote a content width. T29's artboard
already contains its padding inside `max-width: 560px` (`padding: 56px 24px 0`), so its content
column is 512 and 560 is the outer number. Following the sibling convention without reading the
comp would produce 608 — a 48px error that no probe would flag as wrong, only as different.
========================================================================== */
/* --------------------------------------------------------------------------
1. The centred column
`page-layout-1column`, so `.column.main` is the full content width and the cap goes here.
-------------------------------------------------------------------------- */
.sales-guest-form .page-main {
max-width: 560px;
margin-left: auto;
margin-right: auto;
padding-top: 56px;
padding-left: 24px;
padding-right: 24px;
}
.sales-guest-form .page-title-wrapper {
text-align: center;
margin-bottom: 6px;
}
.sales-guest-form .page-title {
font-family: var(--hrv-font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.12;
text-wrap: balance;
}
/* --------------------------------------------------------------------------
2. THE FORM IS 40px WIDER THAN THE WHOLE COLUMN UNTIL THIS RULE
Blank, in `styles-l.css` under `@media (min-width: 768px), print`:
.form.password.reset, .form.send.confirmation, .form.password.forget,
.form.create.account, .form.search.advanced, .form.form-orders-search
{ min-width: 600px; width: 50% } (0,2,0)
Measured live before this sheet existed: 600px at vw=768, 688px at vw=1440 (50% of 1376).
**`min-width: 600px` is forty pixels wider than the comp's entire 560px outer column**, so left
alone it forces horizontal overflow rather than merely being too wide.
WEIGHT DIFFERS FROM THE PRIOR ART, WHICH IS WHY THIS IS NOT A COPY-PASTE. `_t22.css:141-150` and
`_t23.css:140-148` neutralise the same Blank rule, and both record their arithmetic: the Blank
selectors there are `.form.create.account` / `.form.password.forget` at (0,3,0), beaten at
(0,4,0). T29's is `.form.form-orders-search` — measured (0,2,0), ONE CLASS LIGHTER, because it
has no route-specific triple. This override is (0,5,0) and clears it by three.
THAT FIGURE WAS FIRST WRITTEN (0,4,0), AND THE UNDERCOUNT WAS INHERITED, NOT INVENTED.
`_t22.css:139` claims (0,4,0) for `.customer-account-create .column.main .form.create.account`,
which is (0,6,0); `_t23.css:138` does the same. I followed the sibling wording instead of
counting - which is how a wrong figure propagates between files that cite each other, because
the citation makes the next reader LESS likely to check. Register #74; it will recur on T38.
Note the shared Blank selector also lists `.form.search.advanced`, which is T38 Advanced Search,
still queued. Scoping to `.sales-guest-form` keeps this off that page.
-------------------------------------------------------------------------- */
.sales-guest-form .column.main .form.form-orders-search {
width: auto;
min-width: 0;
max-width: none;
float: none;
margin: 22px 0 0;
}
/* The fieldset is the card. */
.sales-guest-form .column.main .form.form-orders-search > .fieldset {
background: var(--hrv-surface);
border: 1px solid var(--hrv-border);
border-radius: var(--hrv-radius);
/* Bottom padding is 14px less than the other sides, absorbing the last field's margin rather
than cancelling it. The first version used `.field:last-of-type { margin-bottom: 0 }`, which
was WRONG IN A WAY NO PROBE WOULD SHOW: `:last-of-type` matches per element TYPE, and among
the fieldset's `div` children the last is `#oar-zip` - which core ships `display:none` via a
inline style — NOT a stylesheet rule (an earlier version of this comment cited a
`renderStyleAsTag` rule at (1,0,1); a CSSOM walk finds ZERO rules naming `#oar-zip`, so that
figure was invented). The conclusion stands either way. So it zeroed the margin of a HIDDEN
element while
`#oar-email`, the visually last field, kept its 14px: 28px padding + 14px orphan = 42px of
dead space, with the intended tightening appearing only after the user toggled to ZIP Code.
One rule, two different gaps by toggle state. Padding has no state dependency. */
/* 28px on three sides, 14px at the bottom, absorbing the last field's margin so the interior
reads 28 / 28. I briefly reverted this to symmetric after the functional gate reported the
card was TOP-loose — and that was over-correcting: the top looked wrong because the legend
was ANCHORED OUTSIDE the card (see §4), not because the padding was. Fixing the legend fixed
the top; reverting the padding then made the bottom 42 against a 28 top. TWO SYMPTOMS, ONE
CAUSE — and I treated them as two. Measured after: top 28, bottom 28. */
padding: 28px 28px 14px;
margin: 0;
}
/* --------------------------------------------------------------------------
3. The 25.8% gutter — `.field` becomes a flex column
Blank splits every field into a floated 25.8% label and a 74.2% control at (0,4,0), gated
`(min-width: 768px), print`. Measured live at 1440: label 177.5px right-aligned, control
510.484px at x=209.5 — and 688 × 0.258 = 177.504, so the engine agrees with the arithmetic.
NEUTRALISED BY MAKING `.field` A FLEX COLUMN, NOT BY DECLARING `float: none`. Float is simply
inert on a flex item, so this never has to out-weigh a float declaration. That is T27's approach
and it is the fifth time this theme has performed it — register #58 exists because four page
files each rewrote it independently, and this is the fifth. It is written locally again ONLY
because #58 is explicitly gated on #60 (the eyebrow-vs-component label decision), which is the
user's to make.
UNGATED ON PURPOSE. Blank's rule lives in `(min-width: 768px), print` — a comma list including
print. An override gated in a plain `@media (min-width: 768px)` would lose in print context.
(`_t27.css` records that its own version of this reasoning was FALSE there, because `styles-l.css`
is link-gated to `screen` on that page. Verified for THIS route rather than assumed: same
`styles-l.css`, same `media="screen and (min-width: 768px)"` link attribute — so print is not
actually at risk here either. The rules stay ungated because there is no reason to gate them,
which is a different claim from the one `_t27.css` first made.)
-------------------------------------------------------------------------- */
.sales-guest-form .form.form-orders-search .fieldset > .field {
display: flex;
flex-direction: column;
margin: 0 0 14px;
}
/* The eyebrow. `components/_forms.css:145-153` sets `.fieldset > .field > .label` to 13px/600 at
(0,3,0) — a genuine tie with Blank's (0,3,0), won on document order. This is (0,6,0) and clears
both. Register #60 is the open question of whether the eyebrow or the component's 13/600 is the
theme's intended default; until that is decided, page files follow their comp.
(First written (0,5,0) - the same undercount as the one above. The correction used to sit HERE
while the false figure stayed three lines up, so BOTH stood in one comment block. That is
register #74's own failure mode, inside the file that filed #74: appending a correction is not
the same as making one, and the stale number is the one a skimmer reads first.) */
.sales-guest-form .form.form-orders-search .fieldset > .field > .label {
width: auto;
float: none;
text-align: left;
padding: 0;
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hrv-text-muted);
}
.sales-guest-form .form.form-orders-search .fieldset > .field > .control {
width: auto;
float: none;
}
/* THE SPACER PSEUDOS. `.fieldset > .field::before/::after` carry `content: ''; display: table`, and
making `.field` a flex container BLOCKIFIES them into real flex items. On T27 exactly this turned
a 1px float into a 263px occupied cell. Killed here before it can happen rather than after.
(0,5,1) over Blank's (0,2,1).
THE PROMOTION IS ONLY LIVE AT 768+. Those pseudos live in `styles-l.css`, which Blank links
`media="screen and (min-width: 768px)"`, so below 768 they carry no `content` and this kill
rule is inert. Left ungated deliberately - an inert rule costs nothing - but the earlier
wording implied the trap was always live.
`#oar-zip` DOES GET THE FLEX TREATMENT — and this paragraph previously said it does not.
Measured by driving the real widget: jQuery `.show()` REMOVES the inline `display` property
here rather than writing `block`, because the element was hidden by an inline `display:none`
that jQuery itself had cached. Computed display therefore falls back to this sheet's `flex`.
Both belt and braces are live.
THE WRONG VERSION CAME FROM THE S1 REVIEW AND I WROTE IT IN WITHOUT CHECKING — one task after
filing register #74, which says precisely that a citation makes the next reader less likely to
check. The danger was concrete: a future editor reading the old wording could have deleted
`display: flex` on `.field` believing `#oar-zip` did not rely on it. It does. */
.sales-guest-form .form.form-orders-search .fieldset > .field::before,
.sales-guest-form .form.form-orders-search .fieldset > .field::after {
display: none;
}
/* --------------------------------------------------------------------------
4. The legend and its bare ` `
`guest/form.phtml` ships ``
followed by a bare ` `. Blank floats the legend and indents it 25.8%; the ` ` exists only
to clear that float.
`_t22.css:207-227` is the ONLY prior art in this theme — `_t23.css:39` records that its two
routes have zero legends and zero ` `s. T22's own comment notes the `display: none` on the
` ` is load-bearing: without it the ` ` becomes a grid item.
THE LEGEND IS RESTYLED, NOT HIDDEN. The comp draws no legend at all, but it is the fieldset's
accessible name — removing it costs a screen-reader affordance to match a picture. T22 made the
same call. Kept as a quiet eyebrow above the fields.
-------------------------------------------------------------------------- */
/* `display: block` IS THE LOAD-BEARING DECLARATION HERE, AND THE FUNCTIONAL GATE FOUND WHY.
A `