/* ====================================================================== Maritime Passport — Partner Portal FORMS layer (MAR-816). The in-product control vocabulary: the field set, the Figma 0.1 form kit, the checkbox tile and privacy note, the bulk-import step rail, column mapping and drop zone, and the inline reason / verdict kit. Separate from portal.overlay.css by the ticket's hard constraint — forms and overlays do not share a file. Tokens come from portal.css, linked ahead of this file. * a NEW control family gets its own portal..css, linked from partner/_head.html — it does not grow this file (MAR-816). ====================================================================== */ /* ── fields ── */ .pp-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; } .pp-f { display:flex; flex-direction:column; gap:6px; min-width:0; } /* The third instance of the MAR-976 origin trap (`.pp-note` and `.pp-card form` are the other two, both in portal.primitives.css): the `display:flex` above is an author declaration and beats the UA's `[hidden] { display:none }` on ORIGIN, not specificity, so a field the page reveals on demand renders permanently open. Found by rendering MAR-1140 — the API-keys create form reveals its `Expires after` field only when the *Issuing* kind is picked, and without this every partner sees an expiry input on a standard key, i.e. offered exactly the lifetime a standard key does not have. Fixed on the primitive rather than the page, for the reason the other two give: api-keys.html sets no `screen_css`. */ .pp-f[hidden] { display:none; } .pp-f > label { font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.01em; } .pp-help { font-size:11.5px; color:var(--ink-3); } .pp-help--err { color:var(--status-danger-fg); } /* ── form kit (MAR-779, screen 20) — the in-product control vocabulary on the Design 0.1 surface. Figma 0.1 ships no form controls (docs/design/mp-design-system/readme.md — sections 1–14 are marketing vocabulary), so these controls start the second UI kit the bundle calls for: white fills, warm hairlines, the 8px input radius from the bundle's spacing scale, and the shared focus/status tokens. This is now the ONLY control kit (MAR-834). The legacy single-line set that used to sit above is gone, and with it the reason a monospace field rendered a different height from its plain neighbour: the base rule declares an explicit line-height, so the box no longer depends on the font's own idea of `normal`. The modifiers below therefore change the typeface, the affordance, or the ink — never a metric. (Dotted class names stay out of this comment on purpose — test_no_class_is_defined_in_two_files reads comments too.) ── */ .pp-fieldset { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; } .pp-field { display:flex; flex-direction:column; gap:6px; min-width:0; } .pp-field--full { grid-column:1/-1; } .pp-field__label { font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.01em; } .pp-field__input { font-family:inherit; font-size:14px; line-height:1.4; color:var(--ink); padding:12px 15px; border-radius:var(--r-sm); background:var(--bg-surface); border:1px solid var(--mp-card-border); } .pp-field__input::placeholder { color:var(--ink-3); } /* keyboard focus is visible by contract — ring from the shared token, the same consumption idiom as the admin console's inputs */ .pp-field__input:focus { outline:none; border-color:var(--mp-navy); box-shadow:var(--shadow-focus); } /* A real select draws OUR arrow, not the UA's. The native one is painted inside the border box and ignores padding-right, so it sat ~5px from the edge while the text kept the base rule's 15px inset — the two insets now agree. Suppression uses the same idiom as the checkbox further down, and the mark arrives as a background-image because a pseudo-element never renders on a replaced element (which is exactly why the read-only look-alike below can afford ::after and this rule cannot). Longhands, so the base rule's background colour survives; padding-right clears the chevron so a long option label cannot run underneath. The stroke is the BAKED light value of the ink-3 token — var() cannot reach inside a data-URI, and the %23 encoding hides the value from the hex-literal guard, so test_select_chevron_stroke_tracks_the_ink_3_token in test_partner_design_foundation.py is what keeps the two in sync. Retune the token, retune this. Geometry (10x6, 1.3 stroke) was chosen against the read-only look-alike on the docs screen, where the two sit on one page. It is OPTICAL, not a pixel match, and cannot be: the glyph is U+2304, absent from Poppins, so it already renders from a per-platform fallback face. */ select.pp-field__input { cursor:pointer; appearance:none; -webkit-appearance:none; padding:12px 36px 12px 15px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20stroke='%23444444'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%201l4%204L9%201'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; } /* The typeface swap for reference codes (ICMID, training standard). Family and tracking ONLY — the base rule owns the metrics, which is what keeps a monospace field the same height as the plain one beside it. */ .pp-field__input--mono { font-family:var(--mono); letter-spacing:.05em; } /* A read-only element that presents like a select: the caller supplies the value, this supplies the affordance. Real plus the Required pill beside it */ .pp-maprow__tgt { display:flex; align-items:center; gap:10px; min-width:0; } .pp-maprow__tgt select { flex:1; min-width:0; } @media (max-width:700px) { .pp-maprow { grid-template-columns:1fr; } .pp-maprow__arw { text-align:left; } } /* the drop zone — promoted from portal.branding.css (MAR-658's logo drop) now that the CSV wizard is its second user; here it's a