/* Public form composition. Controls themselves come unmodified from ui/. */

/*
 * The "theme reset" block below is not redundancy. Chaplin styles bare
 * elements, and some of those rules outrank ui/forms.css: `input[type="text"]`
 * and its siblings are (0,1,1) against .lp-control__input's (0,1,0), so the
 * theme wins padding, border and radius on every control the form draws. The
 * element selectors — section, fieldset, legend, button, form — reach the
 * group, the choice list and the accordion head the same way. Scoping to
 * .lpd-partner-form is what wins the cascade back. Geometry still lives in
 * ui/; nothing here restates it, everything here only undoes the theme.
 */

/* Chaplin clips #site-content with overflow:hidden, which cuts every select menu
   that reaches past the last card. Only this page needs it lifted. */
#site-content:has(.lpd-partner-form) { overflow:visible; }

/* Root ---------------------------------------------------------------- */
/* The form fills the theme's content column and takes the page colour from it;
   only the footer paints a background of its own. overflow stays visible so the
   tab bar can stick. */
.lpd-partner-form { --lpd-sage:#597570; --lpd-pale:#e9f2ed; --lpd-serif:"adobe-caslon-pro",Georgia,"Times New Roman",serif; width:100%; margin:0 auto; color:var(--lp-ink); font:var(--lp-weight-regular) var(--lp-text-md)/var(--lp-text-md-line) var(--lp-font); }
.lpd-partner-form *, .lpd-partner-form *::before, .lpd-partner-form *::after { box-sizing:border-box; }
.lpd-partner-form [hidden] { display:none !important; }

/* Theme reset ---------------------------------------------------------- */
.lpd-partner-form .lpd-form-group { width:auto; padding:0; }
.lpd-partner-form fieldset { margin:0; padding:0; border:0; }
.lpd-partner-form legend { padding:0; font-size:inherit; font-weight:inherit; }
.lpd-partner-form label { margin:0; }
.lpd-partner-form button, .lpd-partner-form button:hover, .lpd-partner-form button:focus { border-radius:0; text-decoration:none; transition:none; }
.lpd-partner-form .lp-control__input, .lpd-partner-form .lp-control__select, .lpd-partner-form .lp-control__textarea { width:auto; max-width:none; height:auto; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; line-height:var(--lp-text-md-line); }
.lpd-partner-form .lp-control__input::placeholder, .lpd-partner-form .lp-control__textarea::placeholder { line-height:inherit; color:var(--lp-ink-placeholder); }
.lpd-partner-form a { text-decoration:none; }

/* Tabs ----------------------------------------------------------------- */
.lpd-partner-shell { position:relative; padding-bottom:140px; }
.lpd-partner-tabs { display:flex; align-items:flex-start; }
.lpd-partner-tab { display:flex; height:60px; align-items:center; gap:4px; padding:16px 40px 12px; background:rgba(255,255,255,.3); color:var(--lpd-sage); font-size:var(--lp-text-md); font-weight:var(--lp-weight-regular); line-height:var(--lp-text-md-line); letter-spacing:.064px; cursor:pointer; }
/* The tabs are the primary tab field's radios: clipped rather than hidden, so
   the control stays focusable and the labels remain its only visible surface. */
.lpd-partner-tab__input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.lpd-partner-tab__input:checked + .lpd-partner-tab { background:var(--lpd-sage); color:#fff; }
.lpd-partner-tab__input:focus-visible + .lpd-partner-tab { outline:2px solid var(--lpd-sage); outline-offset:-2px; }.lpd-partner-tab__icon { display:grid; width:24px; height:24px; place-items:center; opacity:.5; }.lpd-partner-tab__icon img, .lpd-partner-tab__icon svg { width:auto; height:auto; max-width:24px; max-height:24px; }

/* Steps ---------------------------------------------------------------- */
/* Each group is its own card, 8px apart — not one surface with rules between
   them. Only the open one is white and raised; a step still ahead of the
   submitter is flat and faded, which is the design's progress cue. A step
   already completed is left at full strength, because it is navigable. */
.lpd-partner-content { position:relative; z-index:1; width:100%; }
/* align-content keeps the cards their own height once view.js puts an explicit
   one on the container; the default would stretch them to fill it. overflow is
   only clipped while resizing, because at rest it would cut the card shadow. */
.lpd-accordion-surface { display:grid; align-content:start; gap:2px; }
.lpd-accordion-surface.is-resizing { overflow:hidden; transition:height .28s ease; }
.lpd-form-group[hidden] { display:none; }
.lpd-form-group.is-open { background:#fff; box-shadow:4px 4px 5px rgba(0,0,0,.05); }
.lpd-form-group { background:#fff; }
.lpd-form-group:not(.is-open):not([data-complete="true"]) { opacity:.3; }
.lpd-partner-form.lpd-ready .lpd-form-group { transition:opacity .28s ease, background-color .28s ease, box-shadow .28s ease; }
.lpd-accordion-head { display:flex; width:100%; min-height:96px; align-items:center; justify-content:space-between; gap:20px; margin:0; padding:24px 16px; border:0; background:none; color:var(--lpd-sage); font:inherit; text-align:left; cursor:pointer; }.lpd-accordion-head:focus-visible { outline:2px solid var(--lp-accent-ring); outline-offset:-2px; }
.lpd-accordion-title { display:flex; align-items:center; gap:8px; }.lpd-accordion-icon { display:grid; flex:none; width:48px; height:48px; place-items:center; border-radius:50%; background:var(--lpd-pale); color:var(--lpd-sage); }.lpd-accordion-icon img, .lpd-accordion-icon svg { width:auto; height:auto; max-width:24px; max-height:24px; }.lpd-accordion-title__text { color:var(--lpd-sage); font-family:var(--lpd-serif); font-size:24px; font-weight:700; line-height:32px; letter-spacing:-.3125px; }.lpd-accordion-chevron { box-sizing:content-box; width:14px; height:8px; padding:8px 5px; transition:transform .15s ease; }.lpd-form-group.is-open .lpd-accordion-chevron { transform:rotate(180deg); }
/* The tick and the group's own icon share the 48px slot; data-complete, which
   view.js keeps current, decides which of the two is drawn. */
.lpd-accordion-check { display:grid; flex:none; width:48px; height:48px; place-items:center; }
.lpd-check-badge { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:#060; }
.lpd-check-badge img { width:18px; height:13px; }
.lpd-form-group[data-complete="true"] .lpd-accordion-icon, .lpd-form-group:not([data-complete="true"]) .lpd-accordion-check { display:none; }

.lpd-accordion-panel { display:none; padding:0 16px 48px; }.lpd-form-group.is-open .lpd-accordion-panel { display:grid; gap:24px; }.lpd-form-group:not(.is-open) .lpd-accordion-panel { display:none; }

/* Fields --------------------------------------------------------------- */
/* No .lp-choices rules: a multi-choice field is a drop-down here, not a list of
   checkboxes. The library still carries them for the admin's own screens. */
/* The frame draws a labelled text box 128px tall counting its label, which is
   26px shorter than the library's default box. Overridden as the token so the
   admin's own screens keep the taller one. The "Other" box has no label and is
   drawn at its content height; a textarea cannot be that, so it takes the two
   lines the frame shows. */
.lpd-partner-form { --lp-textarea-height:102px; }
.lpd-partner-form .lpd-other .lp-control--textarea { height:72px; }
.lpd-partner-form .lp-field { margin:0; }.lpd-partner-form .lpd-other { margin:0; }
.lpd-partner-form .lpd-error { color:var(--lp-danger-ink); }

/* Footer --------------------------------------------------------------- */
/* Fixed, not sticky: sticky releases at the end of its containing block, which
   here is the form, so it would come unstuck the moment the site footer came
   into view. Fixed keeps it on the viewport for the whole page. Out of flow, it
   no longer paints a band by breakout — the element itself is the band — and
   the page owes it the clearance below. z-index clears .lpd-partner-content (1)
   and the tab bar (2), which would otherwise paint over it. */
.lpd-partner-footer { position:fixed; right:0; bottom:0; left:0; z-index:3; margin:0; padding:24px 0 36px; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.08); }
/* The bar is only on screen once the step's button can actually be pressed —
   view.js puts .lpd-can-advance on the form from the same `complete` that
   un-disables it, and takes it off again when an answer is cleared. It slides
   out rather than being hidden, so both directions animate; translate keeps it
   off the flow either way. The confirmation bar is exempt: it replaces the
   buttons, so nothing would ever bring it back. Behind .lpd-partner-js so a
   form with no scripting keeps its Submit, and behind .lpd-ready for the
   transition alone, or it would animate itself in once on load. */
.lpd-partner-form.lpd-partner-js:not(.lpd-can-advance) .lpd-partner-footer:not(.lpd-partner-footer--sent) { transform:translateY(100%); }
.lpd-partner-form.lpd-ready .lpd-partner-footer { transition:transform .28s ease; }
/* Lines the contents up with the theme's content column, which the footer is no
   longer inside: the same min() chaplin's .section-inner is. */
.lpd-partner-footer__inner { display:flex; width:min(112rem, 100% - 4rem); align-items:flex-start; margin-inline:auto; gap:12px; }
.lpd-partner-footer__text { flex:1; margin:0; color:var(--lpd-sage); font-size:var(--lp-text-sm); line-height:var(--lp-text-sm-line); letter-spacing:-.1504px; }
/* Qualified by element and scoped to the form, which is more than a class needs
   to be. chaplin-child paints every button[type="submit"] its own green at
   (0,1,1) and its :hover darker again — so an unqualified class would lose, and
   Submit would come out a different colour from Continue for no reason anyone
   asked for. Same fight as the theme reset at the top of this file.
   Disabled fades the label rather than the button: the background is already
   a 40% sage, and dropping opacity on the whole thing would fade that too. */
.lpd-partner-form button.lpd-partner-continue, .lpd-partner-form button.lpd-partner-submit { display:inline-flex; height:40px; flex:none; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; background:var(--lpd-sage); color:#fff; font:var(--lp-weight-regular) var(--lp-text-md)/var(--lp-text-md-line) var(--lp-font); letter-spacing:.032px; cursor:pointer; }
.lpd-partner-form button.lpd-partner-continue:hover, .lpd-partner-form button.lpd-partner-submit:hover { background:var(--lpd-sage); }
.lpd-partner-form button.lpd-partner-continue[disabled], .lpd-partner-form button.lpd-partner-submit[disabled] { background:rgba(89,117,112,.4); color:rgba(255,255,255,.5); cursor:not-allowed; }
/* Both buttons are the one Button component, whose icon slot is 24x24 — that is
   what the 8px gap is measured to. The send fills its slot; the arrow is 18x14
   artwork drawn inside one, so the slot is padding rather than a wrapper. Both
   files export with preserveAspectRatio="none", so the box an icon is given has
   to be the size it was drawn at or the strokes stretch. */
.lpd-partner-continue img, .lpd-partner-submit img { width:24px; height:24px; opacity:.5; }
.lpd-partner-continue img { padding:5px 3px; }
.lpd-partner-continue[disabled] img, .lpd-partner-submit[disabled] img { opacity:.25; }

/* Submitted ------------------------------------------------------------ */
/* The form stays on screen as the backdrop to the confirmation, faded whole
   rather than step by step — so the per-step dimming that marks progress is
   dropped, or the cards would fade twice and unevenly. The shell also carries
   `inert`; the pointer rule is only what makes that visible to the cursor. */
.lpd-partner-form--sent .lpd-partner-shell { opacity:.3; pointer-events:none; }
.lpd-partner-form--sent .lpd-form-group:not(.is-open):not([data-complete="true"]) { opacity:1; }
.lpd-partner-footer--sent { padding:36px 0; background:#f7fcf9; }
.lpd-partner-footer__done { position:relative; display:flex; align-items:center; justify-content:center; gap:4px; margin:0; color:#060; font-size:var(--lp-text-md); line-height:19.6px; letter-spacing:-.1504px; }
/* The frame's gap of 4px is to a 36px slot holding a 27px disc, not to the disc
   itself, so the slot is what keeps the spacing honest. The tick is the same
   file the step heads use at 0.75 scale. */
.lpd-partner-footer__check { display:grid; flex:none; width:36px; height:36px; place-items:center; }
.lpd-partner-footer__check .lpd-check-badge { width:27px; height:27px; }
.lpd-partner-footer__check .lpd-check-badge img { width:13.5px; height:9.75px; }

/* Around the form ------------------------------------------------------ */
.lpd-partner-form .lpd-notice { margin:0 0 24px; }.lpd-partner-form .lpd-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }.lpd-partner-form .lpd-turnstile { margin:0 0 24px; }

/* The theme gives #site-footer a 6rem top margin (8rem wide), which on this
   page leaves a band of page colour under the white form footer. The two are
   meant to meet, so it is zeroed wherever the form renders. The padding is the
   clearance the fixed footer takes out of the viewport — without it the last
   of the site footer can never be scrolled out from under it. */
body:has(.lpd-partner-form) #site-footer { margin-top:0; padding-bottom:100px; }

/* view.js checks the same query before it animates a height. */
@media (prefers-reduced-motion:reduce) { .lpd-accordion-surface.is-resizing, .lpd-partner-form.lpd-ready .lpd-form-group, .lpd-partner-form.lpd-ready .lpd-partner-footer, .lpd-accordion-chevron { transition:none; } }

/* On a phone the form runs edge to edge: the theme's content column is a
   .section-inner at calc(100% - 4rem), so the breakout is on .entry-content
   rather than on the form, which cannot see the gutter it sits in. The cards
   carry their own 16px inset; the footer does not, so it gets one here. */
@media (max-width:640px) {
	body:has(.lpd-partner-form) .entry-content { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
	.lpd-partner-shell { padding-bottom:64px; }
	/* Stacked, the footer is taller, so the clearance it needs grows with it. */
	body:has(.lpd-partner-form) #site-footer { padding-bottom:160px; }
	/* Stacked, the bar is two full rows tall — sticking that to the top would
	   take a third of the viewport, so it scrolls away with the page instead. */
	.lpd-partner-tabs { position:static; flex-direction:column; }
	/* height becomes a floor: unwrapped the label was one line, stacked at full
	   width the longer branch takes two. */
	.lpd-partner-tab { width:100%; height:auto; min-height:60px; padding-inline:16px; font-size:var(--lp-text-sm); }
	.lpd-accordion-title__text { font-size:21px; line-height:27px; }
	/* Full-bleed with the rest of the form; the column min() is desktop only.
	   Stacked, align-items still start-aligns the row, so the button is put
	   back on the right one child at a time rather than by flipping the
	   container — the help text above it stays left. */
	.lpd-partner-footer__inner { width:100%; flex-direction:column; padding-inline:16px; }
	.lpd-partner-footer__inner > button { align-self:flex-end; }
	/* The confirmation bar has no __inner to carry the inset, so it takes one. */
	.lpd-partner-footer__done { padding-inline:16px; }
}