/*
 * DEPO quick sign-up engine — structure shared by the sign-up demos (each keeps its own copy):
 * rows, the phone line, the place list, chips, the strength meter. The look is the demo's
 * (css/<slug>.css). Variables: --su-progress (0–100 %, set by js/signup.js).
 */
.su-field { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.su-label { display: flex; align-items: baseline; gap: .5em; }
.su-num { font-variant-numeric: tabular-nums; }
.su-input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.su-hint:empty, .su-error:empty { display: none; }
.su-hint, .su-error { margin: 0; }
.su-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: inherit; }
.su-group-label { display: flex; align-items: baseline; gap: .5em; }
@media (max-width: 480px) { .su-row { grid-template-columns: 1fr; } }

.su-with-prefix, .su-with-toggle { position: relative; display: flex; align-items: center; }
.su-prefix { position: absolute; left: var(--su-pad, 14px); pointer-events: none; }
.su-with-prefix .su-input { padding-left: calc(var(--su-pad, 14px) + 1.05em); }
.su-status { position: absolute; right: var(--su-pad, 14px); font-weight: 700; pointer-events: none; }
.su-eye { position: absolute; right: 6px; font: inherit; cursor: pointer; background: none; border: 0; }
.su-with-toggle .su-input { padding-right: 4.5em; }
.su-suggest { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.su-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.su-meter i { height: 3px; border-radius: 2px; background: var(--su-meter-off, rgba(127, 127, 127, .25)); transition: background .25s; }
.su-meter[data-strength="1"] i:nth-child(-n+1), .su-meter[data-strength="2"] i:nth-child(-n+2),
.su-meter[data-strength="3"] i:nth-child(-n+3), .su-meter[data-strength="4"] i:nth-child(-n+4) { background: var(--su-meter-on, currentColor); }
.su-meter[data-strength="0"] i:first-child, .su-meter[data-strength="1"] i:first-child { background: var(--su-meter-weak, #d64545); }

.su-checks { display: grid; gap: 10px; }
.su-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.su-check input { margin: .2em 0 0; }
.su-age-proof[hidden] { display: none; }
.su-age-proof { margin: -4px 0 0 30px; }
.su-age-proof { margin: 0; font-size: .9em; opacity: .8; }

.su-actions { display: grid; gap: 10px; }
.su-quick, .su-full, .su-more-link, .su-again { font: inherit; cursor: pointer; }
.su-more-link { justify-self: start; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; }

/* phone: a country select drawn as flag + code, then the number */
.su-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.su-cc-flag { font-size: .8em; font-weight: 700; letter-spacing: .06em; opacity: .75; }
.su-cc { position: relative; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; cursor: pointer; }
.su-cc-select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.su-cc:focus-within { outline: 2px solid var(--su-focus, currentColor); outline-offset: 2px; }
.su-cc::after { content: ""; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }

/* location: a list under the field */
.su-combo { position: relative; }
.su-places { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; }
.su-places[hidden] { display: none; }
.su-place { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 10px; cursor: pointer; }
.su-place-flag { grid-row: 1 / 3; align-self: center; min-width: 2.2em; font-size: .72em; font-weight: 700; letter-spacing: .06em; text-align: center; opacity: .75; }
.su-place-region { grid-column: 2; font-size: .85em; opacity: .7; }
.su-place--none, .su-place-note { cursor: default; display: block; }

/* chips (gender, role) */
.su-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip { position: relative; cursor: pointer; }
.su-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-chip span { display: inline-flex; align-items: center; }

[data-su-more][hidden], [data-su-done][hidden] { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.su-optional { margin: 6px 0 -4px; font-size: .9em; opacity: .8; }