/* ==========================================================================
   app2 sign-up + countries & methods (SIGNUP-CATALOG-CONTRACT.md) · 1 Oct 2026
   Lock: design-system/app2/MASTER.md + pages/signup.md. pg-app.css v3 tokens only (no raw colours, no raw
   sizes outside the type scale). .su = the console's public sign-up pages (sign-in shell), .sa = back office.
   ========================================================================== */

/* ---------- shared ---------- */
.su-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.su-mono, .sa .su-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- public: the wider sign-up card ---------- */
.su .su-card{ max-width:760px; }
.su .su-form h1{ margin-bottom:var(--s3); }
.su .pg-lead{ max-width:62ch; }
/* a long form reads at the MASTER label step (11px), one notch above the sign-in card's 8.5px */
.su .pg-auth-card .su-field > label{ font-size:11px; letter-spacing:.12em; color:var(--ink-mute); }
.su-opt{ font-family:var(--body); font-size:11px; line-height:1; letter-spacing:0; text-transform:none; color:var(--ink-mute); margin-left:var(--s1); }
.su .su-field.has-err .pg-input{ border-color:var(--err); box-shadow:0 0 0 3px var(--err-wash); }
.su .pg-help{ font-size:13px; line-height:1.45; }
.su .pg-help.pg-err{ color:var(--err); font-weight:500; }

.su-sec{ border:0; margin:0 0 var(--s5); padding:var(--s5) 0 0; border-top:1px solid var(--hair); min-width:0; }
.su-sec:first-of-type{ border-top:0; padding-top:var(--s2); }
.su-sec > legend{ float:left; width:100%; display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4); padding:0;
  font-family:var(--disp); font-weight:700; font-size:18px; line-height:1.25; letter-spacing:-.01em; color:var(--navy); }
.su-sec > legend + *{ clear:both; }
.su-n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--acc-deep); background:var(--acc-wash); }
.su-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4); }
@media (max-width:640px){ .su-grid{ grid-template-columns:1fr; } }

/* select: the pg-input look + a CSS chevron (no image, no colour literal) */
.su-select{ position:relative; display:block; }
.su-select select.pg-input{ -webkit-appearance:none; appearance:none; padding-right:var(--s7); cursor:pointer; }
.su-select::after{ content:''; position:absolute; right:var(--s4); top:50%; width:8px; height:8px; margin-top:-6px; pointer-events:none;
  border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute); transform:rotate(45deg); }
.su .su-textarea{ min-height:112px; padding:var(--s3) var(--s4); line-height:1.5; resize:vertical; }

/* error summary */
.su-errsum{ margin:0 0 var(--s5); padding:var(--s4); border-radius:var(--r-in); background:var(--err-wash); border:1px solid var(--err-edge); }
.su-errsum:focus{ outline:2px solid var(--acc); outline-offset:3px; }
.su-errsum h2{ font-family:var(--disp); font-size:15px; font-weight:700; color:var(--err); margin:0 0 var(--s2); }
.su-errsum ul{ margin:0; padding-left:var(--s5); display:flex; flex-direction:column; gap:var(--s1); }
.su-errsum a{ color:var(--err); text-decoration:underline; text-underline-offset:3px; font-size:14px; }

/* ---------- picker ---------- */
.su-pick-tools{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s3) 0; }
.su-filter-wrap{ flex:1 1 240px; }
.su-filter-wrap[hidden]{ display:none; }
.su .su-filter{ min-height:44px; }
.su-count{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-soft); margin-left:auto; }
.su-count.is-on{ color:var(--acc-deep); font-weight:600; }
.su-nomatch{ font-size:14px; color:var(--ink-mute); margin:var(--s2) 0; }
#su-picker.has-err .su-region{ border-color:var(--err-edge); }
#su-picker:focus{ outline:none; }

.su-region{ border:1px solid var(--line); border-radius:var(--r-in); background:var(--ctrl-bg); margin-bottom:var(--s2); }
.su-region > summary{ list-style:none; display:flex; align-items:center; gap:var(--s3); min-height:52px; padding:0 var(--s4); cursor:pointer;
  border-radius:var(--r-in); font-family:var(--disp); font-weight:700; font-size:15px; color:var(--navy); }
.su-region > summary::-webkit-details-marker{ display:none; }
.su-region > summary:hover{ background:var(--row-hover); }
.su-region > summary:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.su-region-name{ flex:1 1 auto; min-width:0; }
.su-region-meta{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.06em; color:var(--ink-mute); white-space:nowrap; }
.su-region-meta [data-su-region-count]:not(:empty){ color:var(--acc-deep); font-weight:600; margin-right:var(--s2); }
.su-chev{ flex:none; color:var(--ink-mute); transition:transform var(--t-micro) var(--ease-hover); }
.su-region[open] > summary .su-chev{ transform:rotate(180deg); }
.su-region[open] > summary{ border-bottom:1px solid var(--hair); border-radius:var(--r-in) var(--r-in) 0 0; }
.su-geos{ padding:var(--s2) var(--s4) var(--s3); }

.su-geo{ border:0; margin:0; padding:var(--s3) 0; min-width:0; }
.su-geo + .su-geo{ border-top:1px solid var(--hair); }
.su-geo[hidden]{ display:none; }
.su-geo > legend{ float:left; width:100%; display:flex; align-items:baseline; gap:var(--s2); padding:0; margin:0 0 var(--s2);
  font-family:var(--body); font-weight:600; font-size:14px; color:var(--ink); }
.su-geo > legend + *{ clear:both; }
.su-geo-cur{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.06em; color:var(--ink-mute); }
.su-methods{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s1); }
.su-m{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; min-height:48px; }
.su-m-name{ display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:500; color:var(--ink); min-width:0; }
.su-m-kind{ font-size:12px; font-weight:400; color:var(--ink-mute); }
.su-dirs{ display:flex; gap:var(--s2); flex:none; }
.su-dir{ position:relative; display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; padding:0 var(--s3); margin:0; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-seg); background:var(--white); font-size:13px; font-weight:500; color:var(--ink-soft);
  transition:border-color var(--t-micro) var(--ease-hover), background var(--t-micro) var(--ease-hover), color var(--t-micro) var(--ease-hover); }
.su-dir input{ width:18px; height:18px; margin:0; accent-color:var(--blood); cursor:pointer; }
.su-dir:hover{ border-color:var(--acc-lite); }
.su-dir:has(input:checked){ border-color:var(--acc); background:var(--acc-wash); color:var(--acc-deep); }
.su-dir:has(input:focus-visible){ outline:2px solid var(--acc); outline-offset:2px; }
@media (max-width:560px){
  .su-m{ align-items:flex-start; flex-direction:column; gap:var(--s2); padding:var(--s1) 0 var(--s2); }
  .su-dirs{ width:100%; }
  .su-dir{ flex:1 1 0; justify-content:center; }
  .su-geos{ padding:var(--s1) var(--s3) var(--s2); }
}

/* consents, honeypot, submit */
.su-consent{ margin:var(--s2) 0; }
.su-consent .su-check{ align-items:flex-start; gap:var(--s3); font-size:14px; line-height:1.5; color:var(--ink-soft); min-height:44px; padding:var(--s2) 0; }
.su-consent .su-check input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--blood); }
.su-consent a{ color:var(--acc-deep); text-decoration:underline; text-underline-offset:3px; }
.su-consent.has-err .su-check{ color:var(--err); }
.su-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.su .su-submit{ margin-top:var(--s3); }
.su .su-submit[disabled]{ opacity:.6; cursor:progress; }
.su-after{ font-size:13px; color:var(--ink-mute); text-align:center; margin:var(--s3) 0 0; }

/* result pages */
.su-result .su-result-b{ position:relative; z-index:3; padding:var(--s6) var(--s6) var(--s5); }
.su-mark{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--r-pill); margin-bottom:var(--s4);
  color:var(--acc-deep); background:var(--acc-wash); border:1px solid var(--safe-edge); }
.su-mark.is-pos{ color:var(--pos); background:var(--pos-wash); border-color:var(--pos-edge); }
.su-mark.is-warn{ color:var(--warn); background:var(--warn-wash); border-color:var(--warn-edge); }
.su-strong{ color:var(--navy); font-weight:600; word-break:break-all; }
.su-kv{ margin:var(--s4) 0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.su-kv > div{ display:grid; grid-template-columns:160px 1fr; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--hair); }
.su-kv dt{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); padding-top:2px; }
.su-kv dd{ margin:0; font-size:14px; color:var(--ink-soft); }
.su-kv dd.su-mono{ font-size:16px; font-weight:600; color:var(--navy); }
.su-cta{ margin:var(--s2) 0 var(--s2); }
.su-narrow .pg-field > label{ font-size:11px; }
@media (max-width:560px){
  .su-result .su-result-b{ padding:var(--s5) var(--s4) var(--s4); }
  .su-kv > div{ grid-template-columns:1fr; gap:var(--s1); }
}

/* ==========================================================================
   back office (.sa) — inside admin.layouts.app (pg-app + pg-admin)
   ========================================================================== */
.sa{ display:flex; flex-direction:column; gap:var(--s5); }
.sa-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.sa-intro p{ margin:0; max-width:64ch; font-size:14px; color:var(--ink-soft); }
.sa-stats{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.sa-stat{ display:flex; flex-direction:column; gap:2px; min-width:96px; }
.sa-stat b{ font-family:var(--mono); font-weight:600; font-size:24px; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums; }
.sa-stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }

.sa-tabs{ display:inline-flex; gap:var(--s1); padding:var(--s1); border-radius:var(--r-btn); background:var(--seg-track); border:1px solid var(--line); flex-wrap:wrap; }
.sa .sa-tabs a{ display:inline-flex; align-items:center; gap:var(--s2); min-height:36px; padding:0 var(--s4); border-radius:var(--r-seg); font-size:13px; font-weight:500;
  color:var(--ink-soft); text-decoration:none; }
.sa .sa-tabs a:hover{ color:var(--acc-deep); }
.sa .sa-tabs a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.sa .sa-tabs a[aria-current="page"]{ background:var(--white); color:var(--navy); font-weight:600; box-shadow:var(--btn-shadow); }
.sa-tabs .n{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }

.sa-filters{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end; }
.sa-filters .sa-f{ display:flex; flex-direction:column; gap:var(--s1); min-width:160px; flex:1 1 160px; }
.sa-filters .sa-f.is-q{ flex:2 1 220px; }
.sa-filters label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin:0; }
.sa-filters .sa-actions{ display:flex; gap:var(--s2); flex:none; }

.sa .table td .sa-sub, .sa-sub{ display:block; font-size:12px; color:var(--ink-mute); font-weight:400; white-space:normal; }
.sa .table td.wrap{ white-space:normal; }
.sa-pairs{ display:flex; flex-wrap:wrap; gap:var(--s1); max-width:420px; }
.sa-chip{ display:inline-flex; align-items:center; gap:var(--s1); padding:2px var(--s2); border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--glass-hi); font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.sa-chip.is-route{ border-color:var(--pos-edge); background:var(--pos-wash); color:var(--pos); }
.sa-chip.is-off{ color:var(--ink-mute); border-style:dashed; }
.sa-chip .d{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-mute); }

.sa-empty{ padding:var(--s7) var(--s5); text-align:center; color:var(--ink-soft); }
.sa-empty h3{ font-family:var(--disp); font-size:18px; font-weight:700; color:var(--navy); margin:0 0 var(--s2); }
.sa-empty p{ margin:0 auto; max-width:48ch; font-size:14px; }

/* detail */
.sa-split{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:var(--s5); align-items:start; }
@media (max-width:1100px){ .sa-split{ grid-template-columns:1fr; } .sa-split > .sa-col.is-actions{ order:-1; } }
.sa-col{ display:flex; flex-direction:column; gap:var(--s5); min-width:0; }
.sa-head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.sa-head h2{ font-family:var(--disp); font-size:22px; font-weight:700; color:var(--navy); margin:0; letter-spacing:-.01em; }
.sa-ref{ font-family:var(--mono); font-size:13px; color:var(--ink-mute); }
.sa-kv{ margin:0; display:grid; grid-template-columns:180px 1fr; }
.sa-kv dt, .sa-kv dd{ padding:var(--s3) 0; border-top:1px solid var(--hair); margin:0; font-size:14px; }
.sa-kv dt{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); padding-top:calc(var(--s3) + 2px); }
.sa-kv dd{ color:var(--ink); overflow-wrap:anywhere; }
.sa-kv dt:first-of-type, .sa-kv dt:first-of-type + dd{ border-top:0; }
@media (max-width:560px){ .sa-kv{ grid-template-columns:1fr; } .sa-kv dd{ border-top:0; padding-top:0; } }

.sa-action{ display:flex; flex-direction:column; gap:var(--s3); }
.sa-action h3{ font-family:var(--disp); font-size:16px; font-weight:700; color:var(--navy); margin:0; }
.sa-action p{ margin:0; font-size:14px; color:var(--ink-soft); }
.sa-action ul{ margin:0; padding-left:var(--s5); font-size:14px; color:var(--ink-soft); display:flex; flex-direction:column; gap:var(--s1); }
.sa-action .sa-warn{ color:var(--warn); }
.sa-row{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }

.sa-timeline{ list-style:none; margin:0; padding:0; }
.sa-timeline li{ position:relative; padding:0 0 var(--s4) var(--s5); }
.sa-timeline li::before{ content:''; position:absolute; left:4px; top:7px; width:8px; height:8px; border-radius:var(--r-pill); background:var(--info); }
.sa-timeline li::after{ content:''; position:absolute; left:7px; top:19px; bottom:2px; width:2px; background:var(--hair); }
.sa-timeline li:last-child::after{ display:none; }
.sa-timeline li.is-email::before{ background:var(--acc); }
.sa-timeline li.is-good::before{ background:var(--pos-dot); }
.sa-timeline li.is-bad::before{ background:var(--err-dot); }
.sa-timeline li.is-note::before{ background:var(--warn-dot); }
.sa-timeline .t{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.sa-timeline .s{ display:block; font-size:14px; color:var(--ink); }
.sa-timeline .b{ display:block; margin-top:var(--s1); padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:var(--glass-hi); border:1px solid var(--hair);
  font-size:13px; color:var(--ink-soft); white-space:pre-line; overflow-wrap:anywhere; }

/* commercials editor */
.sa-rate{ border:1px solid var(--line); border-radius:var(--r-in); padding:var(--s4); background:var(--glass-hi); }
.sa-rate + .sa-rate{ margin-top:var(--s3); }
.sa-rate h3{ font-family:var(--disp); font-size:15px; font-weight:700; color:var(--navy); margin:0 0 var(--s1); }
.sa-rate .sa-sub{ margin-bottom:var(--s3); }
.sa-rate-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s3) var(--s4); }
@media (max-width:1200px){ .sa-rate-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .sa-rate-grid{ grid-template-columns:1fr; } }
.sa-rate-grid .form-label{ margin-bottom:var(--s1); }
.sa-unit{ position:relative; display:block; }
.sa-unit .form-control{ padding-right:var(--s7) !important; font-family:var(--mono); }
.sa-unit .u{ position:absolute; right:var(--s3); top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:12px; color:var(--ink-mute); pointer-events:none; }
.sa-err{ display:block; margin-top:var(--s1); font-size:13px; color:var(--err); }
.sa-savebar{ position:sticky; bottom:var(--s3); z-index:5; display:flex; justify-content:flex-end; gap:var(--s2); padding:var(--s3); border-radius:var(--r-in);
  background:var(--topbar-bg); -webkit-backdrop-filter:var(--topbar-blur); backdrop-filter:var(--topbar-blur); border:1px solid var(--glass-edge); box-shadow:var(--topbar-shadow); }

/* email preview */
.sa-preview{ width:100%; min-height:760px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--white); }
.sa-subject{ font-size:14px; color:var(--ink-soft); }
.sa-subject b{ color:var(--navy); }

/* catalogue */
.sa-region-h{ display:flex; align-items:center; gap:var(--s3); }
.sa-region-h .n{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.sa-flag-dir{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-mute); }
.sa-logo{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:24px; }
.sa-logo img{ max-width:56px; max-height:24px; width:auto; height:auto; }
.sa-form-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3) var(--s4); align-items:end; }
@media (max-width:1100px){ .sa-form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .sa-form-grid{ grid-template-columns:1fr; } }
.sa-checks{ display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; min-height:44px; }
.sa-checks label{ display:inline-flex; align-items:center; gap:var(--s2); margin:0; font-size:14px; color:var(--ink-soft); cursor:pointer; }
.sa-checks input{ width:18px; height:18px; accent-color:var(--blood); }
.sa-pair{ border-top:1px solid var(--hair); padding:var(--s4) 0; }
.sa-pair:first-child{ border-top:0; padding-top:0; }
.sa-pair-h{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); }
.sa-pair-h h3{ font-family:var(--disp); font-size:15px; font-weight:700; color:var(--navy); margin:0; }
.sa-help{ font-size:12px; color:var(--ink-mute); margin-top:var(--s1); display:block; }
.sa details > summary{ cursor:pointer; color:var(--acc-deep); font-size:14px; font-weight:500; min-height:44px; display:flex; align-items:center; }
.sa details > summary:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); }

@media (prefers-reduced-motion:reduce){ .su-chev, .su-dir{ transition:none; } }
.sa-action form{ margin:0; }