/* ============================================================================ RECORD FORMS v109 — matched to the reference by measurement, loaded last. Measured side by side (their New Vehicle page vs ours, same task): Fleetio Moventra (before) form card 880px (73%) 425px (58% of content) rail 280px 210px input height 44px 32px input background white beige fill (#F4F2EE) section heading 22px bold 11px UPPERCASE eyebrow rail active green left bar filled orange pill The two that decide how a form FEELS are the control height and the section heading. A 32px filled input reads as a dense settings row; a 44px outlined one reads as a form you are meant to fill in. And an 11px uppercase eyebrow does not announce a section - it whispers a category, so the form reads as one undifferentiated column of fields. ========================================================================== */ /* ── 1. THE FIELD ITSELF ────────────────────────────────────────────────── Outlined, not filled. The border does the work, so the control separates from the card without a second surface colour - which is also why theirs survives a white-on-white card. */ body .veh-form-sec .input, body .veh-form-sec input:not([type=checkbox]):not([type=radio]), body .veh-form-sec select, body .veh-form-sec textarea, body .recordform9 .input, body .recordform9 input:not([type=checkbox]):not([type=radio]), body .recordform9 select{ min-height:42px;height:auto;padding:10px 12px;font-size:14px;line-height:1.4; background:var(--panel);border:1px solid var(--line-3);border-radius:8px; width:100%;box-sizing:border-box} body .veh-form-sec textarea{min-height:92px} @media (hover:hover){ body .veh-form-sec .input:hover,body .veh-form-sec select:hover, body .veh-form-sec input:not([type=checkbox]):hover{border-color:var(--fg-2)} } body .veh-form-sec .input:focus-visible, body .veh-form-sec input:focus-visible, body .veh-form-sec select:focus-visible, body .veh-form-sec textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)} /* ── 2. SECTION HEADINGS ANNOUNCE A SECTION ────────────────────────────── Their "Identification" is a real heading at the top of the pane, not a category tag. Ours becomes one: same size as a card title, sentence case, with a rule under it so the eye can find where a group starts. */ body .veh-form-sec .section-label{ font-size:17px;font-weight:660;letter-spacing:-.012em;text-transform:none; color:var(--fg);margin:30px 0 16px;padding-bottom:10px; border-bottom:1px solid var(--line-1)} body .veh-form-sec .vfs-body9>.section-label:first-child{margin-top:0} /* ── 3. LABEL, HINT, SPACING ───────────────────────────────────────────── Label sits close to its control; the hint sits under it in grey. Fields are spaced far enough apart that a label clearly belongs to the box beneath it and not the one above. */ body .veh-form-sec .field-label{ font-size:13.5px;font-weight:560;color:var(--fg);margin:0 0 7px;text-transform:none} body .veh-form-sec .field-hint{ font-size:12.5px;line-height:1.5;color:var(--muted);margin:7px 0 0} body .veh-form-sec .field-wrap+.field-wrap, body .veh-form-sec .field+.field{margin-top:20px} body .veh-form-sec .form-grid{gap:20px 18px;margin-top:0} body .veh-form-sec .form-grid+.form-grid{margin-top:20px} body .veh-form-sec .vfs-body9{padding:24px 26px 26px} @media (max-width:640px){body .veh-form-sec .vfs-body9{padding:16px}} /* ── 4. GIVE THE FORM THE WIDTH ────────────────────────────────────────── The shell was leaving 42px of the content area unused and the rail was taking a larger share than theirs, so the form column ended up at 58% where the reference runs 73%. */ body .veh-modal-shell{width:100%;max-width:none;gap:22px} body .veh-modal-rail{flex:0 0 196px;align-self:flex-start;position:sticky;top:12px} body .veh-modal-panewrap{flex:1 1 auto;min-width:0} body .veh-form-sec.vfs-card9{width:100%;max-width:none} /* ── 5. RAIL: A MARKER, NOT A FILLED PILL ──────────────────────────────── Theirs marks the active section with a bar on the leading edge and coloured text. A filled pill competes with the primary button on the same screen. */ body .veh-modal-rail{padding:8px;border-radius:12px} body .veh-rail-btn{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border:0;border-left:3px solid transparent;border-radius:0 8px 8px 0; background:none;color:var(--fg-2);font-size:14px;font-weight:520; text-align:left;cursor:pointer} body .veh-rail-btn svg{width:17px;height:17px;flex:0 0 17px;opacity:.75} @media (hover:hover){body .veh-rail-btn:hover{background:var(--hover);color:var(--fg)}} body .veh-rail-btn.on{ background:none;border-left-color:var(--accent); color:var(--accent);font-weight:640} body .veh-rail-btn.on svg{opacity:1} /* ── 6. THE FEE / LINE-ITEM ROW ────────────────────────────────────────── Reported: the remove "x" sits below the inputs it belongs to and the row floats far from the price above it. The row is a grid whose last column is the button, all three aligned on one baseline. */ body .oi-fee-row,body .fee-row9,body .oi-fees .fee-line9, body .oi-feesbox .oi-fee{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) 40px; gap:10px;align-items:end;margin-top:12px} body .oi-fee-row>*,body .oi-feesbox .oi-fee>*{margin:0;min-width:0} /* the button lines up with the BOTTOM of the inputs, not the labels above them */ body .oi-fee-row .icon-btn,body .oi-feesbox .oi-fee .icon-btn, body .oi-fee-row button[aria-label*="emove"],body .oi-fee-row .oi-x{ width:40px;height:42px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:8px;background:var(--panel); align-self:end;margin:0} @media (hover:hover){ body .oi-fee-row .icon-btn:hover{border-color:var(--danger);color:var(--danger)} } /* the column captions above a line-item row */ body .oi-feesbox .oi-fee-head,body .fee-head9{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) 40px;gap:10px; font-size:11px;font-weight:680;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);margin:18px 0 0} @media (max-width:640px){ body .oi-fee-row,body .oi-feesbox .oi-fee, body .oi-feesbox .oi-fee-head,body .fee-head9{grid-template-columns:minmax(0,1fr) 96px 40px} } /* ── 7. FLEET MAP RAIL ANIMATES ────────────────────────────────────────── Reported: collapsing and expanding the map's side list jumps. It has a width to transition, so give it one - and the same easing the app sidebar uses, so the two do not feel like different products. */ .cc-rail,.cc-wrap>.cc-rail{ transition:width .22s cubic-bezier(.2,.8,.3,1), min-width .22s cubic-bezier(.2,.8,.3,1), opacity .16s linear} .cc-rail-tgl,.cc-rail-tgl-ic{transition:transform .22s cubic-bezier(.2,.8,.3,1)} .cc-collapsed .cc-rail-tgl-ic,.cc-rail.collapsed .cc-rail-tgl-ic{transform:rotate(180deg)} /* the map itself resizes alongside it rather than snapping afterwards */ .cc-map{transition:width .22s cubic-bezier(.2,.8,.3,1)} /* Deliberately NOT keyed to .mv-noanim: that class is permanent (added ~1s after first paint, never removed), so a `transition:none` behind it would disable this animation forever - which is exactly the bug fixed in fix-v91 §5. The 80ms .soft-refreshing window is the one that suppresses movement. */ body .soft-refreshing .cc-rail,body .soft-refreshing .cc-map{transition:none} /* ── 8. THE EYEBROW OVERRIDE FIGHT ──────────────────────────────────────── type-v89.css sets `body .section-label{font-size:11px!important; text-transform:uppercase!important}` as the app-wide eyebrow rule. That is right for a settings card and wrong inside a record form, where the same class is used for a real section heading - which is why "Identification" was still whispering at 11px after the rule above. Matching !important, scoped to forms only, so the app-wide eyebrow is untouched everywhere else. */ body .veh-form-sec .section-label, body .recordform9 .section-label, body .veh-modal-panewrap .section-label{ font-size:17px!important;font-weight:660!important; text-transform:none!important;letter-spacing:-.012em!important; color:var(--fg)!important; margin:30px 0 16px!important;padding-bottom:10px; border-bottom:1px solid var(--line-1)} body .veh-form-sec .vfs-body9>.section-label:first-child{margin-top:0!important} /* With the section heading doing the announcing, the card header only needs to name the box - the sub-line under it repeated what the rail already said. */ body .veh-form-sec .vfs-head9 p{display:none} body .veh-form-sec .vfs-head9{padding:14px 26px 12px} body .veh-form-sec .vfs-head9 h3{font-size:13px;font-weight:680;letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} @media (max-width:640px){body .veh-form-sec .vfs-head9{padding:12px 16px 10px}} /* ── 9. THE FEE ROW, WITH THE CLASS IT ACTUALLY HAS ────────────────────── The row is .oi-row-fee (my earlier guess, .oi-fee-row, matched nothing - which is why the reported misalignment survived). Measured: grid 357/130/32 with align-items:center, inputs 36px tall, remove button 32px carrying a stray top margin - so it sat 5px BELOW the inputs it belongs to, and 9px below their top. Same height, same baseline, no margin. */ body .oi-row-fee{ display:grid;grid-template-columns:minmax(0,1fr) 130px 36px; gap:10px;align-items:center;margin-top:10px} body .oi-row-fee>*{margin:0!important;min-width:0} body .oi-row-fee>input{height:36px;min-height:36px} body .oi-row-fee .icon-btn,body .oi-row-fee .oi-del{ width:36px;height:36px;min-height:36px;padding:0;margin:0!important; display:inline-flex;align-items:center;justify-content:center;align-self:center; border:1px solid var(--line-2);border-radius:8px;background:var(--panel);color:var(--muted)} @media (hover:hover){ body .oi-row-fee .icon-btn:hover,body .oi-row-fee .oi-del:hover{ border-color:var(--danger);color:var(--danger);background:var(--panel)} } /* the fee block sat a long way under the price row for no reason */ body .oi-feesbox{margin-top:14px} body .oi-feesbox>*+*{margin-top:8px} body .oi-fee-head,body .oi-feesbox .oi-head{ display:grid;grid-template-columns:minmax(0,1fr) 130px 36px;gap:10px; font-size:11px;font-weight:680;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);margin:0} @media (max-width:640px){ body .oi-row-fee,body .oi-fee-head{grid-template-columns:minmax(0,1fr) 92px 36px} } /* ── 10. THE RAIL IS A TAB STRIP ON A PHONE ────────────────────────────── Measured at 375px on the New Vehicle form: the shell already stacks, but the rail kept flex:0 0 196px and flex-direction:column, so it rendered as a 291px tall list of six items and the first actual field started at y=577. You scrolled most of a screen height before reaching anything you could type in. On a phone the same six sections become a horizontal strip - the pattern the rest of the app already uses for tabs - and the active marker moves from the leading edge to the bottom edge, because a left bar means nothing in a row. justify-content is flex-start ON PURPOSE: a centred flex row that overflows spills equally in both directions and the left overflow is unreachable, since scrollLeft:0 is already past it. Same trap as the marketing nav. */ @media (max-width:760px){ body .veh-modal-shell{flex-direction:column;gap:12px} body .veh-modal-rail{ position:static;top:auto;flex:0 0 auto;width:auto;align-self:stretch; display:flex;flex-direction:row;justify-content:flex-start; /* nowrap is explicit: something upstream sets wrap, and a wrapping strip became three 44px rows (145px) instead of one that scrolls */ flex-wrap:nowrap; gap:2px;padding:4px;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none} body .veh-modal-rail::-webkit-scrollbar{display:none} body .veh-rail-btn{ flex:0 0 auto;white-space:nowrap;width:auto; padding:9px 12px;border-left:0;border-radius:8px; border-bottom:2.5px solid transparent} body .veh-rail-btn.on{ border-left-color:transparent;border-bottom-color:var(--accent);border-radius:8px 8px 0 0} body .veh-modal-panewrap{width:100%} }