/* erpweave.com/signup: the approved sign-up mock (weave-app docs/superpowers/artifacts/2026-10-21-weave-threads/
   weave-signup.html), on the site's own components and tokens. */
.su-main { padding-block: 40px 96px; }
.su-main [hidden] { display: none !important; }  /* .field and .btn set their own display */
.su-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 28px; }
.su-closed { padding: 14px 16px; border-radius: var(--r-input); background: var(--notice-bg); color: var(--notice-ink); margin-bottom: 20px; }
.su-closed a { color: inherit; text-decoration: underline; }
.signup-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 24px; list-style: none; padding: 0; }
.signup-steps::after { transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease); }
.signup-steps .step { padding-block: 18px 4px; padding-inline-end: 12px; background: none; border: 0; text-align: start; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.signup-steps .step:disabled { cursor: default; }
.signup-steps .step .lbl { font-size: 15px; line-height: 1.35; color: var(--text-3); font-weight: 500; }
.signup-steps .step.done .lbl { color: var(--text); }
.signup-steps .step[aria-current="step"] .lbl { color: var(--primary); font-weight: 600; }
.su-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.su-grid .form-card { gap: 18px; }
.su-panel { display: grid; gap: 16px; padding: 0; }  /* the landing page pads every <section> */
.su-panel[hidden] { display: none; }
.su-sub { color: var(--text-2); font-size: 15px; }
.su-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.su-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.su-agree input { margin-top: 4px; accent-color: var(--primary); }
.su-agree a, .su-sub a { color: var(--primary); }
.su-trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; }
.hint { font-size: 13px; color: var(--text-3); }
.su-lang { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.su-lang legend { font-size: 13px; color: var(--text-3); margin-bottom: 6px; width: 100%; }
.su-lang label { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; }
.su-lang input { accent-color: var(--primary); }
.su-group { display: grid; gap: 10px; margin-top: 8px; }
.su-group h4 { margin: 0; display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.su-group h4 small { font-size: 13px; font-weight: 400; color: var(--text-3); }
.su-group .modules { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.su-group .module { text-align: start; font: inherit; color: inherit; cursor: pointer; grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; }
.su-group .module .tile { width: 36px; height: 36px; background: var(--primary-subtle); }
.su-group .module .tile svg { width: 18px; height: 18px; color: var(--primary); }
.su-group .module[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.su-group .module[aria-pressed="true"] .tile { background: var(--primary); }
.su-group .module[aria-pressed="true"] .tile svg { color: var(--on-primary); }
.su-group .module:disabled { cursor: default; }
.su-group .module.soon .tile { background: var(--border-strong); }
.su-group .module.soon h3 { color: var(--text-2); }
.su-group .module:disabled:hover { translate: none; border-color: var(--border); }
.su-group .module h3 { font-size: 15px; }
.su-group .module p { font-size: 13px; }
.su-summary { position: sticky; top: 88px; gap: 12px; }
.su-summary .addr-line { font: 500 14px/1.4 var(--mono); color: var(--text-2); direction: ltr; text-align: start; overflow-wrap: anywhere; }
.su-picked { margin: 0; padding-inline-start: 18px; color: var(--text-2); font-size: 14px; display: grid; gap: 4px; }
@media (max-width: 900px) {
	.su-grid { grid-template-columns: 1fr; }
	.su-summary { position: static; }
	.signup-steps { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
	.signup-steps .step .lbl { font-size: 13px; }
}
/* The currency choices look like the text fields, in either theme: no browser box. The arrow is
   two halves of a square in --muted, at the end of the line (left in Arabic). */
.field select { appearance: none; font-size: 15px; line-height: 1.4; font-family: inherit; color: var(--text); background-color: var(--sunken); border: 1px solid transparent; border-radius: var(--r-input); padding: 10px 12px; padding-inline-end: 36px; width: 100%; cursor: pointer; transition: border-color .2s, background-color .2s;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; }
[dir="rtl"] .field select { background-position: 14px 50%, 19px 50%; }
.field select:focus { outline: none; border-color: var(--primary); background-color: var(--surface); }
.field select option { color: var(--text); background: var(--surface); }