/* arc-setup.css - Task 257 (Darren 19 Oct 2026: "create a style common across these pages"). ONE look for every set-up section on the
   Profile (arc-setup-sections.js): the chip picker, the panels, the credits panel and the two-case referral card. */
.su-box{display:grid;gap:10px}
.su-note{margin:0;font-size:.9rem;line-height:1.5;color:#3d4a5c}
.su-lbl{display:block;margin:6px 0 2px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1a2744}
.su-group{margin:0 0 10px}
.su-chips{display:flex;flex-wrap:wrap;gap:8px}
.su-chip{min-height:38px;padding:8px 14px;border-radius:999px;border:1.5px solid #c9d2de;background:#fff;color:#1a2744;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;line-height:1.2;transition:background .12s,border-color .12s,color .12s}
.su-chip:hover{border-color:#1a2744}
.su-chip[aria-pressed="true"]{background:#1a2744;border-color:#1a2744;color:#fff}
.su-chip[aria-pressed="true"]::before{content:"\2713  ";color:#f2c94c;font-weight:800}
.su-chip--own{border-color:#e0b54f;background:#fffaf0}
.su-chip--own[aria-pressed="true"]{background:#e0b54f;border-color:#e0b54f;color:#0b1730}
.su-chip--own[aria-pressed="true"]::before{color:#0b1730}
.su-chip:focus-visible,.su-btn:focus-visible{outline:3px solid #f2c94c;outline-offset:2px}
.su-chip[disabled]{opacity:.6;cursor:progress}
.su-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.su-in{flex:1 1 220px;min-width:0;min-height:42px;padding:9px 12px;border:1.5px solid #c9d2de;border-radius:10px;font:inherit}
.su-btn{min-height:44px;padding:10px 20px;border-radius:999px;border:0;background:#1a2744;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.su-btn--quiet{background:#fff;color:#1a2744;border:2px solid #1a2744}
.su-btn[disabled]{opacity:.55;cursor:not-allowed}
.su-msg{min-height:1.2em;margin:4px 0 0;font-size:.9rem}.su-msg.bad{color:#b42318;font-weight:700}.su-msg.good{color:#0b6b3a;font-weight:700}
.su-more{margin:4px 0 8px}.su-more summary{cursor:pointer;font-weight:700;color:#1a2744;font-size:.9rem}.su-more>div{margin-top:10px}
.su-link{padding:10px 12px;border-radius:10px;background:#f5f3ef;font-size:.9rem;word-break:break-all}
.su-earn{position:relative;overflow:hidden;border-radius:16px;padding:20px 20px 16px;margin:0 0 14px;color:#fff;background:linear-gradient(135deg,#0b1730 0%,#14284f 60%,#1d3a73 100%);border:2px solid #e0b54f;box-shadow:0 14px 32px rgba(11,23,48,.28)}
.su-earn-badge{display:inline-block;padding:4px 11px;border-radius:999px;background:#f2c94c;color:#0b1730;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.su-earn-head{margin:12px 0 6px;font-size:clamp(1.1rem,3vw,1.45rem);font-weight:800;line-height:1.25}
.su-earn-num{font-size:clamp(2.1rem,6vw,2.9rem);font-weight:900;color:#f2c94c;margin-right:4px;vertical-align:-4px}
.su-earn-sub{margin:0 0 12px;color:#e9eef7}.su-earn-sub strong{color:#f2c94c}
.su-earn-lbl{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f2c94c}
.su-ladder{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.su-ladder li{background:rgba(255,255,255,.08);border:1px solid rgba(242,201,76,.45);border-radius:10px;padding:8px 10px;font-size:.88rem}
.su-ladder b{font-size:1.1rem}.su-ladder span{display:block;font-weight:800;color:#f2c94c;font-size:1.05rem}
.su-earn-note{margin:0;font-size:.8rem;color:#c9d3e6}
/* the value exchange (Darren's ruled wording, arc-value-exchange.js) as two clear cases */
.su-vx .arc-vx{border:0 !important;border-radius:14px !important;padding:0 !important;background:transparent !important;margin:12px 0 0 !important}
.su-vx .arc-vx>strong{display:block !important;margin:0 0 4px !important;font-size:1.05rem;color:#1a2744}
.su-vx .arc-vx>p:nth-of-type(1){margin:0 0 10px !important;color:#3d4a5c}
.su-vx .arc-vx>p:nth-of-type(2),.su-vx .arc-vx>p:nth-of-type(3){position:relative;margin:0 0 10px !important;padding:28px 14px 12px !important;border-radius:12px;font-size:.92rem !important;line-height:1.6 !important}
.su-vx .arc-vx>p:nth-of-type(2){background:#f3f6fc;border:1px solid #cfd9ee;border-left:5px solid #1a2744}
.su-vx .arc-vx>p:nth-of-type(3){background:#f2fbf8;border:1px solid #bfe3d9;border-left:5px solid #2bbfb3}
.su-vx .arc-vx>p:nth-of-type(2)::before,.su-vx .arc-vx>p:nth-of-type(3)::before{position:absolute;top:8px;left:14px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.su-vx .arc-vx>p:nth-of-type(2)::before{content:"A member buys from you \2192  your agreed fee applies";color:#1a2744}
.su-vx .arc-vx>p:nth-of-type(3)::before{content:"A member brings you an outside client \2192  no ARC fee";color:#0b6b62}
/* Task 262: What solutions do you provide? (inside the bio form, above LinkedIn) */
.pc-solutions{margin:18px 0;padding:18px;border:1.5px solid #e2d9c8;border-radius:14px;background:#fffdf8}
.su-h{margin:0 0 6px;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;color:#1a2744}
.su-note--hub{font-weight:700;color:#8a6d1a}
.su-chip--sugg{border-style:dashed;border-color:#e0b54f;background:#fffaf0}
.su-count{font-size:.84rem;color:#5b6b80}
/* Task 268: ghost mode until a referral fee is loaded */
.su-gate{margin:0 0 18px;padding:16px 18px;border-radius:14px;background:#fff7e6;border:1.5px solid #e0b54f}
.su-gate-h{margin:0 0 4px;font-weight:800;color:#7a4b00}
.su-gate-btn{margin-top:10px}
/* Task 265: Your target market */
.su-sel{width:100%;max-width:420px;background:#fff}
.su-sub{margin:14px 0 2px;font-size:1rem;color:#1a2744}
.su-indgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.su-sel[disabled]{opacity:.5;cursor:not-allowed}
.su-new{margin-top:6px;max-width:420px;width:100%}