/* ==========================================================================
   Applicant status page — spacing, alignment and payment refinements.
   Loaded last so it overrides without editing the shared portal stylesheet.
   ========================================================================== */

/* ---- breathing room between blocks --------------------------------------
   The Application Details card lives INSIDE .ap-status-layout, a grid whose
   `gap` only spaces its own columns. The wrapper itself had no bottom margin,
   so it sat flush against the next section — which is why adding margin to
   .ap-card alone never fixed it. Space the wrapper, not just the cards. */
.ap-status-layout{margin-bottom:22px}
.ap-card{margin-bottom:22px}
.ap-card:last-of-type{margin-bottom:0}
/* Any top-level section following the layout keeps the same rhythm. */
.ap-status-layout + section,
.ap-status-layout + form{margin-top:0}

/* ---- Exit Application ---------------------------------------------------
   It read as a heading rather than a control. */
.ap-topbar .ap-btn,
.ap-header .ap-btn{
  font-size:13px;font-weight:700;letter-spacing:0;
  padding:9px 16px;border-radius:8px;line-height:1.2}

/* ---- payment deadline ---------------------------------------------------
   Label left, value right in a shaded badge, matching the status pill. */
.ap-deadline-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ap-deadline-row small{margin:0}
.ap-deadline-badge{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:#fef3c7;border:1px solid #fcd34d;color:#92400e;
  font-size:12.5px;font-weight:800;white-space:nowrap}

/* ---- the two payment choices sit side by side --------------------------- */
.ap-pay-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-top:14px}
.ap-pay-actions form{margin:0;flex:1 1 240px;display:flex}
.ap-pay-actions .ap-pay-choice{flex:1 1 240px;justify-content:center;text-align:center}
.ap-pay-actions form .ap-pay-choice{width:100%}
@media(max-width:560px){
  .ap-pay-actions{flex-direction:column}
  .ap-pay-actions .ap-pay-choice,.ap-pay-actions form{flex:1 1 auto}
}

/* ---- required marker on the payment form ------------------------------- */
.ap-required-star{color:#dc2626;font-weight:800;margin-left:2px}

/* ---- label text and its required marker stay on one line ----------------
   The form labels are flex columns, so a bare span became its own row. */
.ap-label-text{display:inline-flex;align-items:baseline;gap:3px}

/* ---- applicant declaration ---------------------------------------------
   Opens over the page rather than navigating away, so the applicant never
   loses their place. Each statement is ticked individually: five ticks means
   five things read, where one box for all five gets clicked past. */
.ap-decl-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:120}
.ap-decl-modal{background:#fff;border-radius:14px;max-width:640px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(15,23,42,.3)}
.ap-decl-modal header{padding:19px 22px 15px;border-bottom:1px solid #e2e8f0}
.ap-decl-modal header h3{margin:0 0 3px;font-size:17px;color:#12306b}
.ap-decl-modal header p{margin:0;color:#64748b;font-size:12.5px}
.ap-decl-modal form{display:flex;flex-direction:column;min-height:0}
.ap-decl-body{padding:6px 22px 4px;overflow-y:auto}
.ap-decl-modal footer{padding:15px 22px 19px;border-top:1px solid #e2e8f0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ap-decl-count{margin-right:auto;font-size:12px;color:#64748b;font-weight:700}
.ap-decl-term{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid #e2e8f0;border-radius:10px;margin:11px 0;background:#f8fafc;cursor:pointer}
.ap-decl-term:hover{border-color:#b9c7db}
.ap-decl-term.is-checked{background:#f0fdf4;border-color:#86efac}
.ap-decl-term input{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto;cursor:pointer}
.ap-decl-term span{font-size:13px;line-height:1.6}

/* ---- payment terms ------------------------------------------------------ */
.ap-terms{margin:16px 0 4px}
.ap-terms h4{margin:0 0 8px;font-size:13px;color:#12306b}
.ap-terms ul{margin:0;padding:0;list-style:none}
.ap-terms li{position:relative;padding:8px 0 8px 22px;font-size:12.5px;color:#334155;border-bottom:1px solid #eef2f7}
.ap-terms li:last-child{border-bottom:0}
.ap-terms li::before{content:"";position:absolute;left:6px;top:15px;width:5px;height:5px;border-radius:50%;background:#94a3b8}

/* ---- payment preference ------------------------------------------------- */
.ap-pref{margin:16px 0}
.ap-pref h4{margin:0 0 9px;font-size:13px;color:#12306b}
.ap-pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
@media(max-width:620px){.ap-pref-grid{grid-template-columns:1fr}}
.ap-pref-opt{display:flex;gap:11px;align-items:flex-start;border:1px solid #e2e8f0;border-radius:11px;padding:14px;cursor:pointer;background:#fff}
.ap-pref-opt:hover{border-color:#b9c7db}
.ap-pref-opt.is-sel{border-color:#2468e8;background:#f5f9ff;box-shadow:0 0 0 1px #2468e8}
.ap-pref-opt input{margin-top:2px;width:16px;height:16px;flex:0 0 auto}
.ap-pref-opt strong{display:block;font-size:13.5px;margin-bottom:3px}
.ap-pref-opt small{display:block;color:#64748b;font-size:12px;line-height:1.5}

/* ---- declaration prompt -------------------------------------------------
   Message and button on one line, so the card reads as a single action
   rather than three stacked blocks with dead space between them. */
.ap-decl-prompt{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:15px 17px;margin-top:4px;
  border:1px solid #bfdbfe;border-radius:11px;background:#f5f9ff}
.ap-decl-prompt p{margin:0;flex:1 1 300px;font-size:13px;color:#1e40af;line-height:1.55}
.ap-decl-prompt .ap-btn{flex:0 0 auto}
@media(max-width:560px){
  .ap-decl-prompt{align-items:stretch}
  .ap-decl-prompt .ap-btn{width:100%;justify-content:center}
}

/* ---- provisional offer card -------------------------------------------- */
.ap-offer-head{border:1px solid #86efac;background:linear-gradient(180deg,#f0fdf4,#fff);border-radius:11px;padding:18px;margin-bottom:15px}
.ap-offer-head h1{margin:0 0 6px;font-size:19px;color:#166534;line-height:1.3}
.ap-offer-full{font-size:13.5px;font-weight:750;color:#0f172a;margin-bottom:9px}
.ap-offer-attr{font-size:12px;color:#64748b;line-height:1.6}
.ap-terms-list{margin:0;padding:0;list-style:none}
.ap-terms-list li{position:relative;padding:9px 0 9px 22px;font-size:12.5px;color:#334155;border-bottom:1px solid #eef2f7}
.ap-terms-list li:last-child{border-bottom:0}
.ap-terms-list li::before{content:"";position:absolute;left:6px;top:16px;width:5px;height:5px;border-radius:50%;background:#94a3b8}
.ap-offer-decide{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:17px;padding-top:16px;border-top:1px solid #e2e8f0}
.ap-offer-decide form{margin:0}
.ap-btn-accept{background:#128a4b;border-color:#128a4b;color:#fff}
.ap-btn-accept:hover{background:#0f7340;border-color:#0f7340}

/* ---- acceptance ---------------------------------------------------------
   A moment, then it settles: the tick pops, the mark draws itself, confetti
   falls once. Suppressed entirely for anyone who asked for reduced motion. */
.ap-accepted{position:relative;overflow:hidden;border:1px solid #86efac;border-radius:12px;
  background:linear-gradient(180deg,#ecfdf5,#fff);padding:26px 22px;text-align:center;margin-bottom:22px}
.ap-tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#128a4b;
  display:flex;align-items:center;justify-content:center;animation:apPop .45s cubic-bezier(.2,.9,.3,1.4)}
.ap-tick svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ap-tick svg path{stroke-dasharray:32;stroke-dashoffset:32;animation:apDraw .4s .3s forwards ease-out}
.ap-accepted h2{margin:0 0 6px;font-size:20px;color:#166534;animation:apRise .45s .15s both}
.ap-accepted p{margin:0 auto;max-width:470px;color:#166534;font-size:13.5px;animation:apRise .45s .25s both}
.ap-confetti{position:absolute;top:-12px;width:9px;height:14px;opacity:0;border-radius:2px;animation:apFall 2.4s ease-in forwards}
@keyframes apPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes apDraw{to{stroke-dashoffset:0}}
@keyframes apRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes apFall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(250px) rotate(540deg)}}
@media (prefers-reduced-motion: reduce){
  .ap-tick,.ap-accepted h2,.ap-accepted p{animation:none}
  .ap-tick svg path{stroke-dashoffset:0;animation:none}
  .ap-confetti{display:none}
}

/* ---- withdrawal --------------------------------------------------------- */
.ap-wd-count{margin:6px 0 12px;font-size:11.5px;color:#64748b}
.ap-wd-count.is-short{color:#991b1b;font-weight:700}
.ap-wd-confirm{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid #e2e8f0;
  border-radius:10px;background:#f8fafc;margin:4px 0 4px;cursor:pointer}
.ap-wd-confirm.is-on{background:#fef2f2;border-color:#fca5a5}
.ap-wd-confirm input{margin-top:2px;width:17px;height:17px;flex:0 0 auto}
.ap-wd-confirm span{font-size:12.5px;line-height:1.6}

/* ---- offer card: spacing and rhythm ------------------------------------- */
.ap-offer h3{margin:22px 0 4px;font-size:13px;color:#12306b;letter-spacing:.02em}
.ap-terms-list{margin:0 0 4px;border:1px solid #e2e8f0;border-radius:10px;background:#fbfdff;padding:4px 14px}
.ap-terms-list li{padding:11px 0 11px 20px;line-height:1.6}
.ap-terms-list li::before{top:18px}
.ap-offer .ap-money{margin-bottom:4px}

/* Buttons: equal height, real padding, and never crushed together. */
.ap-offer-decide{gap:14px;margin-top:20px;padding-top:18px}
.ap-offer-decide .ap-btn{min-height:46px;padding:12px 22px;font-size:13.5px}
@media(max-width:560px){
  .ap-offer-decide{flex-direction:column;align-items:stretch}
  .ap-offer-decide form,.ap-offer-decide .ap-btn{width:100%}
  .ap-offer-decide .ap-btn{justify-content:center}
}

/* ---- withdrawal form ----------------------------------------------------
   The portal styles labels as a flex ROW, which put the textarea beside its
   own caption and squeezed it to a few characters wide. Inside this form a
   label is a stacked block. */
#apWdForm label{display:block;width:100%;margin-bottom:4px}
#apWdForm .ap-label-text{display:block;margin-bottom:7px;font-size:12.5px;font-weight:750}
#apWdForm textarea{
  display:block;width:100%;min-height:110px;padding:11px 13px;
  border:1px solid #d7dfea;border-radius:9px;font:inherit;font-size:13.5px;
  line-height:1.6;resize:vertical;background:#fff}
#apWdForm textarea:focus{outline:2px solid #2468e8;outline-offset:1px}
#apWdForm .ap-wd-confirm{display:flex;width:100%;margin:10px 0 2px}
#apWdForm .ap-wd-confirm span{font-weight:400}
#apWdForm .ap-offer-decide{margin-top:16px;padding-top:16px}

/* ==========================================================================
   Offer card alignment.
   .ap-card carries no padding of its own — the portal supplies it through
   .ap-card-body, which the offer content now uses. These rules handle the
   three things that inset alone does not fix.
   ========================================================================== */

/* Action strip: buttons centred within it, not resting on the divider. */
.ap-offer-decide{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:82px;margin-top:18px;padding:18px 0;
  border-top:1px solid #e6ecf3}
.ap-offer-decide form{margin:0;display:flex}
.ap-offer-decide .ap-btn{min-height:46px;padding:12px 22px;font-size:13.5px}

/* A short explanation does not need the full width of the card, and the
   confirmation box is capped to match so the two edges line up. */
.ap-wd-field{max-width:520px}
.ap-wd-field label{display:block;width:100%}
#apWdForm textarea{width:100%;min-height:110px}
.ap-wd-count{margin:6px 0 14px}
#apWdForm .ap-wd-confirm{max-width:520px;width:100%}

@media(max-width:600px){
  .ap-wd-field,#apWdForm .ap-wd-confirm{max-width:none}
  .ap-offer-decide{flex-direction:column;align-items:stretch;min-height:0}
  .ap-offer-decide form,.ap-offer-decide .ap-btn{width:100%}
  .ap-offer-decide .ap-btn{justify-content:center}
}

/* ---- fee breakdown inside the offer -------------------------------------
   The rows were flush to the card body with no inset of their own, so the
   labels and figures sat hard against the edges. Boxed like the terms list,
   which puts both columns on a clear margin. */
.ap-offer .ap-money{
  border:1px solid #e2e8f0;border-radius:10px;background:#fbfdff;
  padding:2px 14px;margin:0 0 4px}
.ap-offer .ap-money-row{padding:11px 0;gap:24px;align-items:baseline}
.ap-offer .ap-money-row span{color:#475569}
.ap-offer .ap-money-row strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.ap-offer .ap-money-row:last-child{border-bottom:0}
.ap-offer .ap-money-row.due{
  margin:0 -14px;padding:12px 14px;border-bottom:0;
  background:#fef2f2;color:#991b1b;font-weight:850;
  border-top:1px solid #fecdd3}
.ap-offer .ap-money-row.due:first-child{border-radius:9px 9px 0 0}
.ap-offer .ap-money-row.due:last-child{border-radius:0 0 9px 9px}

/* Payment deadline inside the offer fee box — amber, distinct from the
   contribution row above it. */
.ap-offer .ap-money-row.deadline{
  margin:0 -14px;padding:12px 14px;border-bottom:0;border-top:1px solid #fcd34d;
  background:#fffbeb;color:#92400e;font-weight:800;border-radius:0 0 9px 9px}
.ap-offer .ap-money-row.due:last-child{border-radius:0 0 9px 9px}
.ap-offer .ap-money-row.due:not(:last-child){border-radius:0}

/* ---- respond-by, beside the decision ------------------------------------
   A deadline nobody sees is not a deadline they missed. It sits with the
   buttons, where the decision is actually made. */
.ap-respond-by{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:#fef3c7;border:1px solid #fcd34d;color:#92400e;
  font-size:12.5px;font-weight:800;white-space:nowrap}
.ap-respond-by.is-urgent{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
@media(max-width:640px){
  .ap-respond-by{margin-left:0;width:100%;justify-content:center}
}

/* ---- released account details -------------------------------------------
   Shown in the portal, never emailed. Replaces the guide and the request
   button once an administrator has released them. */
.ap-bank-panel{
  border:1px solid #93c5fd;border-radius:11px;background:#f5f9ff;
  padding:16px 17px;margin:16px 0 4px}
.ap-bank-panel h4{margin:0 0 6px;font-size:13.5px;color:#12306b}
.ap-bank-note{margin:0 0 13px;font-size:12.5px;color:#334155}
.ap-bank-rows{background:#fff;border:1px solid #dbe3ee;border-radius:9px;padding:2px 14px;margin-bottom:14px}
.ap-bank-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid #eef2f7;font-size:13px}
.ap-bank-row:last-child{border-bottom:0}
.ap-bank-row span{color:#64748b;flex:0 0 auto}
.ap-bank-row strong{text-align:right;word-break:normal}
/* An IBAN must not break across lines — a half-copied number is unusable. */
.ap-iban{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
  overflow-x:auto;max-width:100%}
.ap-bank-submit{width:100%;justify-content:center;min-height:46px}
@media(max-width:560px){
  .ap-bank-row{flex-direction:column;gap:3px}
  .ap-bank-row strong{text-align:left}
  .ap-iban{font-size:12px}
}

/* ---- a returned payment ------------------------------------------------
   The reason must be visible: being told to correct something without being
   told what is worse than a plain refusal. */
.ap-review-note{display:block}
.ap-review-note strong{display:block;margin-bottom:5px}
.ap-review-note span{display:block;padding:9px 11px;margin:7px 0;border-radius:7px;
  background:rgba(255,255,255,.65);font-size:12.5px;line-height:1.6}
.ap-review-note small{display:block;font-size:12px;opacity:.85}

/* ---- per-section save ---------------------------------------------------
   At the foot of its section, where a save belongs: after the fields it
   saves, not above them. */
.ap-sec-actions{display:flex;justify-content:flex-end;margin:14px 0 6px}
.ap-sec-save{
  flex:0 0 auto;min-height:40px;padding:10px 20px;border-radius:9px;
  border:1px solid #2468e8;background:#2468e8;color:#fff;
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;line-height:1.2}
.ap-sec-save:hover{background:#1d55c4;border-color:#1d55c4}
.ap-sec-save:disabled{opacity:.65;cursor:default}
.ap-sec-save.is-ok{background:#128a4b;border-color:#128a4b;color:#fff}
.ap-sec-save.is-bad{background:#b91c1c;border-color:#b91c1c;color:#fff}

/* ---- per-document upload ------------------------------------------------
   The button sits with the file input, enabled only once a file is chosen. */
.ap-doc-pick{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ap-doc-pick input[type=file]{flex:1 1 170px;min-width:0;font-size:12.5px}
.ap-doc-send{
  flex:0 0 auto;padding:8px 15px;border-radius:8px;
  border:1px solid #128a4b;background:#128a4b;color:#fff;
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;line-height:1.2}
.ap-doc-send:disabled{background:#e2e8f0;border-color:#e2e8f0;color:#94a3b8;cursor:default}
.ap-doc-send.is-ok{background:#dcfce7;border-color:#86efac;color:#166534}
.ap-doc-send.is-bad{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
@media(max-width:520px){
  .ap-doc-pick{flex-direction:column;align-items:stretch}
  .ap-doc-send{width:100%}
}

@media(max-width:520px){
  .ap-sec-actions{justify-content:stretch}
  .ap-sec-save{width:100%}
}

/* A saved section stays green, so the person can see at a glance what is
   already done. It reverts the moment they edit that section again. */
.ap-sec-save.is-ok{background:#128a4b;border-color:#128a4b;color:#fff}
.ap-sec-save.is-ok:hover{background:#0f7340;border-color:#0f7340}

/* ---- the acceptance moment ----------------------------------------------
   Plays centred over a dimmed page so it cannot be missed at any scroll
   position, then settles into the page and gives way to the next step. */
.ap-veil{
  position:fixed;inset:0;background:rgba(15,23,42,.62);z-index:140;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:apVeilIn .3s both}
.ap-veil.is-out{animation:apVeilOut .45s both}
.ap-veil .ap-accepted{max-width:520px;width:100%;margin:0;box-shadow:0 30px 70px rgba(15,23,42,.35)}
@keyframes apVeilIn{from{opacity:0}to{opacity:1}}
@keyframes apVeilOut{to{opacity:0;visibility:hidden}}
.ap-accepted.is-fading{
  transition:opacity .6s ease,max-height .6s ease,margin .6s ease,padding .6s ease;
  opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;
  border-width:0;overflow:hidden}

/* ---- withdrawal ---------------------------------------------------------
   The same shape as the acceptance moment in a deliberately different tone:
   grey rather than green, a plain mark rather than a tick, no confetti. It
   does not fade — this is the applicant's current state, not a passing note. */
.ap-moment{
  position:relative;overflow:hidden;border-radius:12px;padding:26px 22px;
  text-align:center;margin-bottom:16px;border:1px solid}
.ap-moment.calm{border-color:#cbd5e1;background:linear-gradient(180deg,#f8fafc,#fff)}
.ap-moment.calm h2{margin:0 0 6px;font-size:19px;color:#334155}
.ap-moment.calm p{margin:0 auto;max-width:500px;font-size:13.5px;color:#475569}
.ap-moment-mark{
  width:60px;height:60px;margin:0 auto 14px;border-radius:50%;background:#64748b;
  display:flex;align-items:center;justify-content:center}
.ap-moment-mark svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.ap-withdrawn .ap-message{text-align:left}
@media (prefers-reduced-motion: reduce){
  .ap-veil,.ap-accepted.is-fading{animation:none;transition:none}
}

/* ---- withdrawal card: one column of equal-width blocks ---------------------
   The moment loses its excess padding and the oversized mark; the reason,
   the appeal and the support details each sit in a block of the same width,
   padding and radius, so the button and the support box line up. */
.ap-wd-body{display:flex;flex-direction:column;gap:12px}
.ap-wd-moment.ap-moment{margin-bottom:0;padding:18px 18px 16px}
.ap-wd-moment .ap-moment-mark{width:44px;height:44px;margin:0 auto 10px}
.ap-wd-moment .ap-moment-mark svg{width:24px;height:24px}
.ap-wd-moment.ap-moment.calm h2{font-size:18px;margin-bottom:6px}
.ap-wd-moment.ap-moment.calm p{max-width:560px;line-height:1.55}
.ap-wd-block{border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;background:#fff;text-align:left}
.ap-wd-block .ap-row{padding:0;border-bottom:0;grid-template-columns:170px minmax(0,1fr)}
.ap-wd-block .ap-row strong{font-size:13.5px;line-height:1.5}
.ap-wd-block .ap-section-title{margin:0 0 10px!important}
.ap-wd-note{margin-top:10px;padding-top:10px;border-top:1px solid #eef2f7}
.ap-wd-appeal .ap-message{margin-bottom:12px}
.ap-wd-appeal .ap-message[style*="margin-bottom:0"]{margin-bottom:0!important}
.ap-wd-appeal .ap-btn{min-width:160px}
.ap-wd-appeal [data-ap-appeal-form]{margin-top:12px!important}
.ap-wd-appeal .ap-action-stack{display:flex;gap:10px;flex-wrap:wrap}
.ap-wd-support .ap-message{margin:0}
@media(max-width:600px){
  .ap-wd-moment.ap-moment{padding:16px 14px 14px}
  .ap-wd-block{padding:12px 14px}
  .ap-wd-appeal .ap-btn,.ap-wd-appeal .ap-action-stack .ap-btn{width:100%}
}

/* APPLY-EMAIL-1 (owner, 2026-09-29): full email + "Not your email? Change it" on the /apply PIN page. */
.ce-to{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 20px;padding:12px 14px;border:1px solid #cfe0f5;border-radius:14px;background:linear-gradient(120deg,#eef5ff 0%,#eefaf3 100%)}
.ce-to svg{width:22px;height:22px;flex:none;stroke:#1f5fca;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ce-to div{min-width:0;flex:1;text-align:left}
.ce-to small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.ce-to b{display:block;font-size:16px;color:#0f172a;word-break:break-all}
.ce-to .ce-link{background:none!important;border:0!important;box-shadow:none!important;padding:6px 10px;border-radius:999px;color:#1f5fca!important;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;width:auto;min-height:0}
.ce-to .ce-link:hover{background:#fff!important}
.ce-panel{margin:0 0 4px;padding:16px;border:1px dashed #9dbbe8;border-radius:14px;background:#fbfdff}
.ce-panel h3{margin:0 0 4px;font-size:15px}
.ce-panel p{margin:0 0 10px;font-size:13px;color:#475569}
.ce-panel .ua-actions{display:flex;gap:10px;align-items:center}
.ce-panel .ce-cancel{background:#fff!important;color:#475569!important;border:1px solid #cbd5e1!important;box-shadow:none!important}
.ce-hint{margin-top:8px;font-size:12px;color:#64748b}
[data-ce-pin][hidden],.ce-panel[hidden],.ce-link[hidden]{display:none!important}

/* DECL-STAGES-1: stage 1 of Declarations as one screen, and the confirmations
   an added stage asks inside an accepting form. */
.ap-dcl{padding:0;overflow:hidden}
.ap-dcl-inner{padding:24px 26px}
.ap-dcl-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:#64748b;margin-bottom:14px}
.ap-dcl-steps i{width:6px;height:6px;border-radius:50%;background:#cbd5e1}
.ap-dcl-steps .done{color:#15803d;font-weight:700}
.ap-dcl-steps .done:before{content:"\2713  ";}
.ap-dcl-steps b{color:#1d4ed8}
.ap-dcl-kicker{display:block;font-size:11.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#2563eb}
.ap-dcl h2{margin:4px 0 4px;font-size:22px;color:#0f172a}
.ap-dcl-sub{margin:0;color:#64748b;font-size:14px}
.ap-dcl-prog{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:linear-gradient(120deg,#eef5ff,#eefaf3);border:1px solid #cfe0f5;margin:16px 0 18px}
.ap-dcl-prog svg{width:22px;height:22px;flex:none;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ap-dcl-prog b{display:block;color:#0f172a}.ap-dcl-prog small{color:#64748b;font-size:12.5px}
.ap-dcl-chk{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid #e2e8f0;border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.ap-dcl-chk input{position:absolute;opacity:0;width:1px;height:1px}
.ap-dcl-box{width:20px;height:20px;border-radius:6px;border:2px solid #94a3b8;flex:none;margin-top:1px;display:grid;place-items:center;background:#fff}
.ap-dcl-chk.ok{border-color:#86efac;background:#f0fdf4}
.ap-dcl-chk.ok .ap-dcl-box{background:#16a34a;border-color:#16a34a}
.ap-dcl-chk.ok .ap-dcl-box:after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ap-dcl-chk.no{border-color:#fecaca;background:#fff7f7}
.ap-dcl-chk input:focus-visible+.ap-dcl-box{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}
.ap-dcl-text{font-size:14.5px;line-height:1.45;color:#0f172a}
.ap-dcl-why{display:block;margin-top:6px;font-style:normal;font-size:13px;color:#b91c1c;font-weight:700}
.ap-dcl-why[hidden]{display:none}
.ap-dcl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ap-dcl-foot span{font-size:13px;color:#64748b}
.ap-dcl-stage{margin:0 0 12px;padding:12px;border:1px solid #dbeafe;border-radius:12px;background:#f8fbff}
.ap-dcl-stage>strong{display:block;font-size:13px;color:#1e3a8a;margin-bottom:8px}
.ap-dcl-stage small{display:block;font-size:12px;color:#64748b}
.ap-dcl-stage .ap-dcl-chk{padding:10px 12px;margin-bottom:8px}
.ap-dcl-stage .ap-dcl-text{font-size:13.5px}
@media(max-width:640px){.ap-dcl-inner{padding:18px 16px}.ap-dcl-foot .ap-btn{width:100%}}
form[data-dcl-group]{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:0}
form[data-dcl-group] .ap-dcl-stage{align-self:stretch}