/* AR «Настройки» v2 — the settings-only layer on top of ar-v2.css
 * (founder-approved mockup v2, 2026-10-08, C:/tmp/ar-mockups/index.html#settings).
 *
 * ar-v2.css already carries the mockup's step components (steps, stepnav,
 * stepc, srcs/srcc, zbox/zrow, mailrow, pays/pay, letter, adv). This file
 * adds only what the REAL page needs beyond the static mockup: the add panel,
 * the transports list, inline forms, flashes, the permission popover, the
 * signature block and the «Дополнительно» body that hosts the existing cards.
 * Every class is prefixed `arv2s-` (or re-uses an `arv2-` component).
 *
 * Two scopes, on purpose (foundation review 2026-10-08):
 *   `.arv2 …`   — the v2 pieces (header, step nav, steps 1–4, the summary row
 *                 and index of «Дополнительно»), each in its own .arv2 wrapper;
 *   `.cv5-ar …` — the page grid and the «Дополнительно» shell, which hold the
 *                 existing v5 settings cards. Those cards are NEVER inside .arv2
 *                 (its root font/line-height and element resets would restyle
 *                 them), so the shell is styled here with the cv5 tokens.
 */

/* ── Page grid + «Дополнительно» shell (outside .arv2) ── */
.cv5-ar .arv2s-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:start}
.cv5-ar .arv2s-navcol{align-self:stretch;background:transparent}
.cv5-ar .arv2s-main{min-width:0}
.cv5-ar .arv2s-wrap{background:transparent}
.cv5-ar .arv2s-more{margin-top:16px;background:var(--cv5-card,#fff);border:1px solid var(--cv5-line,#e3e7f0);border-radius:14px;box-shadow:0 8px 24px rgba(29,40,72,.045);scroll-margin-top:16px;min-width:0}
.cv5-ar .arv2s-more > summary{list-style:none;cursor:pointer;display:block}
.cv5-ar .arv2s-more > summary::-webkit-details-marker{display:none}
.cv5-ar .arv2s-more > summary:focus-visible{outline:2px solid #0B5CAD;outline-offset:2px;border-radius:14px}
.cv5-ar .arv2s-adv-body{padding:6px 22px 22px;min-width:0}
.cv5-ar .arv2s-adv-body > .cv5-sect{margin-bottom:14px}
.cv5-ar .arv2s-adv-body .cv5-sect,.cv5-ar .arv2s-adv-body .cv5-card{scroll-margin-top:16px;min-width:0}
/* The legacy grid is `1fr 1fr` (one column ≤1000px): a `1fr` track grows to
   its widest child's min-content, which pushed a card past the edge on a
   phone. minmax(0,1fr) keeps every card inside «Дополнительно». */
.cv5-ar .arv2s-adv-body .cv5-sects{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv5-ar .arv2s-onb{margin-bottom:16px}
.cv5-ar .arv2s-onb:empty{display:none}

/* ── Layout ── */
.arv2 .arv2-stepc{scroll-margin-top:16px}
.arv2 .arv2-stepc.arv2s-now{border-color:var(--amber-b);box-shadow:0 0 0 3px var(--amber-s),var(--sh)}
.arv2 .arv2s-anchor{display:block;height:0;scroll-margin-top:16px}
.arv2 .arv2s-flush{margin-left:0}
.arv2 .arv2s-mt{margin-top:6px}
.arv2 .arv2s-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.arv2 .arv2s-note{font-size:12.5px;color:var(--ink3);line-height:1.5}
.arv2 .arv2s-note a,.arv2 .arv2s-quiet{color:var(--acc)}
.arv2 .arv2s-quiet{font-size:12.5px;font-weight:600;align-self:flex-start}
.arv2 .arv2s-lead2{color:var(--ink2);font-size:13px;margin-bottom:12px}
.arv2 .arv2-step-b + .arv2-step-b{margin-top:10px}

/* ── Flash lines (saved / error / held) ── */
.arv2 .arv2s-flash{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.45;margin-bottom:14px;border:1px solid transparent}
.arv2 .arv2s-flash .arv2-i{margin-top:1px}
.arv2 .arv2s-flash.arv2s-ok{background:var(--emer-s);border-color:var(--emer-b);color:var(--emer-ink)}
.arv2 .arv2s-flash.arv2s-bad{background:var(--rose-s);border-color:var(--rose-b);color:var(--rose-ink)}
.arv2 .arv2s-flash.arv2s-warn{background:var(--amber-s);border-color:var(--amber-b);color:var(--amber-ink)}
.arv2 .arv2s-flash a{color:inherit;font-weight:650;text-decoration:underline}

/* ── Step 1: source cards ── */
.arv2 a.arv2-srcc{color:inherit;text-decoration:none!important}
.arv2 .arv2-srcc .arv2s-sub,.arv2 .arv2s-tile .arv2s-sub{font-size:12px;color:var(--ink3);margin:0}
.arv2 .arv2s-addtxt{display:block;font-size:12.5px;color:var(--ink2);line-height:1.45}
.arv2 .arv2-srcc .cv5-beta,.arv2 .arv2s-tile .cv5-beta{margin-left:auto}
.arv2 .arv2s-when{display:block;color:var(--ink4);font-size:11.5px;margin-top:2px}
.arv2 .arv2s-zact{display:flex;justify-content:flex-end}
.arv2 .arv2s-inline{display:inline;margin:0}
.arv2 .arv2s-perm{position:relative}
.arv2 .arv2s-perm > summary{list-style:none}
.arv2 .arv2s-perm > summary::-webkit-details-marker{display:none}
.arv2 .arv2s-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(380px,80vw);background:#fff;border:1px solid var(--line2);border-radius:10px;box-shadow:var(--sh2);padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--ink2);display:grid;gap:10px;justify-items:start}

/* Small disclosures inside cards (Stripe key, permissions, bank CSV upload). */
.arv2 .arv2s-fold > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--acc);list-style:none;display:inline-flex;align-items:center;gap:6px}
.arv2 .arv2s-fold > summary::-webkit-details-marker{display:none}
.arv2 .arv2s-fold > summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.arv2 .arv2s-fold[open] > summary::after{transform:rotate(225deg) translateY(-1px)}
.arv2 .arv2s-fold[open] > summary{margin-bottom:8px}
.arv2 .arv2s-fold > .arv2s-note{margin-bottom:8px}
.arv2 .arv2s-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.arv2 .arv2s-row .arv2-inp{flex:1 1 180px;width:auto;min-width:0}
.arv2 .arv2s-stack{display:grid;gap:8px;justify-items:start;margin:0}
.arv2 .arv2s-lbl{font-size:12px;font-weight:650;color:var(--ink2)}
.arv2 .arv2s-file{font-size:12.5px;max-width:100%}
.arv2 .arv2s-num{max-width:110px;flex:0 0 110px}

/* The add panel — every system not connected yet, with its connect flow. */
.arv2 .arv2s-addp{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fafbfd;scroll-margin-top:16px}
.arv2 .arv2s-addp > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.arv2 .arv2s-addp > summary::-webkit-details-marker{display:none}
.arv2 .arv2s-addp .arv2s-t{flex:1;min-width:0}
.arv2 .arv2s-addp .arv2s-t b{display:block;font-weight:650;font-size:14px}
.arv2 .arv2s-addp .arv2s-t span{font-size:12.5px;color:var(--ink3)}
.arv2 .arv2s-addp > summary .arv2-chev{transition:transform .15s;color:var(--ink3)}
.arv2 .arv2s-addp[open] > summary .arv2-chev{transform:rotate(90deg)}
.arv2 .arv2s-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4px 16px 14px}
.arv2 .arv2s-tile{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0;scroll-margin-top:16px}
.arv2 .arv2s-tile p{font-size:12.5px;color:var(--ink2);line-height:1.45}
.arv2 .arv2s-tile .arv2s-tile-cta{align-self:flex-start;margin-top:auto}
.arv2 .arv2s-foot{padding:0 16px 14px}

/* ── Step 2: mailbox transports ── */
.arv2 .arv2s-bm-outlook{background:#0f6cbd}
.arv2 .arv2s-bm-smtp{background:#5b6b86}
.arv2 .arv2s-opts{display:grid;gap:10px;margin-bottom:10px}
.arv2 .arv2s-opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.arv2 .arv2s-opt .arv2-t{flex:1 1 220px;min-width:0}
.arv2 .arv2s-opt .arv2-t b{display:block;font-weight:650}
.arv2 .arv2s-opt .arv2-t span{font-size:12.5px;color:var(--ink3)}
.arv2 .arv2s-opt .arv2s-smtp{flex:1 1 100%}
.arv2 .arv2s-scope{display:flex;gap:6px;align-items:flex-start;margin-top:8px}
.arv2 .arv2s-scope .arv2-i{width:14px;height:14px;margin-top:2px;color:var(--emer)}
.arv2 .arv2s-change{margin-top:10px}

/* ── Step 3: ways to pay ── */
.arv2 .arv2-pay .arv2-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.arv2 .arv2s-linkf .arv2-inp{flex:1 1 150px;width:auto;min-width:0}

/* ── Step 4: the letter ── */
.arv2 .arv2s-seg{margin-bottom:12px;flex-wrap:wrap;max-width:100%}
.arv2 .arv2s-letmeta{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink3);margin-bottom:8px}
.arv2 .arv2s-letmeta .arv2-i{width:14px;height:14px}
.arv2 .arv2s-letw .arv2-letter{overflow-wrap:anywhere}
.arv2 .arv2s-letw .arv2-fig{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.arv2 .arv2-letter .arv2-subj .arv2-fig{color:var(--emer-ink);font-weight:600;margin-right:0}
.arv2 .arv2s-ltxt{white-space:pre-line;margin:0 0 10px}
.arv2 .arv2s-trailer{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line2)}
.arv2 .arv2s-trailer .arv2s-ltxt{font-size:12.5px;color:var(--ink3)}
.arv2 .arv2s-ltxt:last-child{margin-bottom:0}
.arv2 .arv2s-lg-code{background:var(--emer-t);box-shadow:inset 0 0 0 1px var(--emer-b)}
.arv2 .arv2s-lg-ai{background:var(--info-s);box-shadow:inset 0 0 0 1px var(--info-b)}

/* Signature & consent (the creditor identity; legacy form inside). */
.arv2 .arv2s-sign{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:16px}
.arv2 .arv2s-sign-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.arv2 .arv2s-sign-h b{font-weight:650;font-size:14px}
.arv2 .arv2s-sign-save{margin-left:auto}
.arv2 .arv2s-signb{margin-top:10px}
.arv2 .arv2s-signed{font-size:13.5px;margin-bottom:4px}
.arv2 .arv2s-signed b{font-weight:650}

/* ── Forms rebuilt with v2 components (creditor, SMTP): same fields/routes ── */
.arv2 .arv2s-form{display:grid;gap:12px;margin:10px 0 0}
.arv2 .arv2s-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.arv2 .arv2s-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.arv2 .arv2s-field{display:grid;gap:5px;min-width:0}
.arv2 select.arv2-inp{background:#fff}
.arv2 .arv2s-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink2);cursor:pointer}
.arv2 .arv2s-check input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--acc)}
.arv2 .arv2s-check b{color:var(--ink);font-weight:650}

/* ── «Дополнительно»: the summary row and the index (each in its own .arv2) ── */
.arv2.arv2s-sumin,.arv2.arv2s-advidx{background:transparent}
.arv2.arv2s-sumin{display:flex;align-items:center;gap:12px;padding:16px 22px}
.arv2.arv2s-sumin .arv2s-t{flex:1;min-width:0}
.arv2.arv2s-sumin .arv2s-t b{display:block;font-weight:650;font-size:15px;color:var(--ink)}
.arv2.arv2s-sumin .arv2s-t span{font-size:12.5px;color:var(--ink3)}
.arv2.arv2s-sumin .arv2s-chev{color:var(--ink3);transition:transform .15s}
.cv5-ar .arv2s-more[open] .arv2s-chev{transform:rotate(90deg)}
.arv2 a.arv2-adv-i{color:inherit;text-decoration:none!important;border-radius:8px}
.arv2 a.arv2-adv-i:hover b{color:var(--acc)}

/* ── Connect hub (live /setup) ── */
.arv2 .arv2s-free h3{font-size:15px;font-weight:650;margin-bottom:4px}
.arv2 .arv2s-free form{margin-top:10px}

@media (max-width:1180px){
  .arv2 .arv2s-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .cv5-ar .arv2s-adv-body .cv5-sects{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .cv5-ar .arv2s-layout{grid-template-columns:minmax(0,1fr)}
  .cv5-ar .arv2s-navcol{display:none}
}
@media (max-width:760px){
  .arv2 .arv2s-tiles{grid-template-columns:1fr;padding:4px 12px 12px}
  .arv2 .arv2s-addp > summary{padding:12px}
  .arv2 .arv2s-zact{justify-content:stretch}
  .arv2 .arv2s-zact > *,.arv2 .arv2s-zact .arv2-btn,.arv2 .arv2s-zact form{width:100%}
  .arv2 .arv2s-perm > summary{width:100%}
  .arv2 .arv2s-pop{position:static;width:auto;margin-top:8px;box-shadow:none}
  .cv5-ar .arv2s-adv-body{padding:4px 12px 16px}
  .arv2.arv2s-sumin{padding:16px}
  .arv2 .arv2s-grid2,.arv2 .arv2s-grid3{grid-template-columns:minmax(0,1fr)}
  .arv2 .arv2s-sign-save{margin-left:0}
  .arv2 .arv2s-opt .arv2-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.arv2 .arv2s-fold > summary::after,.arv2 .arv2s-addp > summary .arv2-chev{transition:none}}
/* Same 1280px column as every other v2 tab. */
.cv5-ar .arv2s-page{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
@media (max-width:760px){.cv5-ar .arv2s-page{padding-left:6px;padding-right:6px}}
.arv2 .arv2s-zstripe{grid-column:1/-1;padding-top:4px}