/* Shared by the pages built like the app's screens (Register, Login): base, FormField/Input/Select,
   password eye, error box and Buttons. Measured from the imcongo-ui components; text sizes are the imcongo-ui
   roles in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-body-text-font-weight) var(--text-body-text-font-size)/var(--text-body-text-line-height) var(--text-body-text-font-family); }
button, input, select { font: inherit; }

/* Field: FormField label + Input / Select */
.field { display: grid; gap: var(--space-1-5); }
.field label { color: var(--text-label-color); letter-spacing: .3px; font: var(--text-label-font-weight) var(--text-label-font-size)/var(--text-label-line-height) var(--text-label-font-family); letter-spacing: .3px; }
.req { color: var(--color-danger); font-weight: inherit; }
.field input, .field select { width: 100%; padding: var(--space-3); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-ink); font: var(--text-field-text-font-weight) var(--text-field-text-font-size)/var(--text-field-text-line-height) var(--text-field-text-font-family); }
.field input::placeholder { color: var(--color-placeholder); font-weight: var(--text-body-text-font-weight); opacity: 1; }
.field input:hover, .field select:hover { background: var(--color-line-soft); border-color: var(--color-secondary); }
.field input:focus, .field select:focus { background: var(--color-card); border-color: var(--color-secondary); outline: 0; }
.field .is-invalid, .field .is-invalid:hover { border-color: var(--color-danger); }
.field select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; }
.field select:has(option[value=""]:checked) { color: var(--color-placeholder); font-weight: var(--text-body-text-font-weight); }
.hint { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; color: var(--color-ink); }
.hint svg { flex: none; width: 16px; height: 16px; color: var(--color-inkSoft, #6B7278); }

/* Password with an eye */
.secret { position: relative; display: flex; align-items: center; }
.secret input { padding-right: var(--space-8); }
.eye { position: absolute; right: var(--space-3); display: none; padding: 0; border: 0; background: none; color: var(--color-ink-soft); cursor: pointer; }
.js .eye { display: flex; }
.eye .eye-off, .eye.shown .eye-on { display: none; }
.eye.shown .eye-off { display: flex; }

.form-error { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-accent-tint); color: var(--color-danger); }
.btn { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); cursor: pointer; text-align: center; font: var(--text-button-text-font-weight) var(--text-button-text-font-size)/var(--text-button-text-line-height) var(--text-button-text-font-family); }
.btn-outline { padding-inline: var(--space-5); border: 1.5px solid var(--color-line); background: transparent; color: var(--color-ink); }
.btn-outline:hover { background: var(--color-line-soft); }
.btn-primary { flex: 1; border: 0; background: var(--color-secondary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-secondary-dark); }
.btn:disabled { opacity: .5; cursor: default; }

/* Password rules under a password field, ticked as it follows them. */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.rules li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-soft); }
.rules svg { flex: none; }
.rules .rule-ok { display: none; }
.rules li.ok { color: var(--color-primary-dark); }
.rules li.ok .rule-ok { display: block; }
.rules li.ok .rule-off { display: none; }

/* Searchable select (public/js/searchable-select.js): the app's SearchableSelect. */
.ss { position: relative; }
.ss .ss-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ss-trigger { width: 100%; padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card) no-repeat right var(--space-3) center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); color: var(--color-ink); text-align: left; cursor: pointer; font: var(--text-field-text-font-weight) var(--text-field-text-font-size)/var(--text-field-text-line-height) var(--text-field-text-font-family); }
.ss-trigger.is-empty { color: var(--color-placeholder); font-weight: var(--text-body-text-font-weight); }
.ss-trigger:hover { background-color: var(--color-line-soft); border-color: var(--color-secondary); }
.ss-trigger:focus-visible, .ss-trigger[aria-expanded=true] { background-color: var(--color-card); border-color: var(--color-secondary); outline: 0; }
.ss-trigger.is-invalid, .ss-trigger.is-invalid:hover { border-color: var(--color-danger); }
.ss-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; padding: var(--space-1-5); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card); box-shadow: 0 4px 16px rgba(30, 40, 30, .16); }
.ss-panel[hidden] { display: none; }
.ss-search { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-ink); font: var(--text-field-text-font-weight) var(--text-field-text-font-size)/var(--text-field-text-line-height) var(--text-field-text-font-family); }
.ss-search:focus { border-color: var(--color-secondary); outline: 0; }
.ss-list { list-style: none; margin: var(--space-1-5) 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.ss-list li { padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-sm); cursor: pointer; font: var(--text-field-text-font-weight) var(--text-field-text-font-size)/var(--text-field-text-line-height) var(--text-field-text-font-family); }
.ss-list li.active { background: var(--color-line-soft); }
.ss-list li.selected { background: var(--color-secondary-tint); color: var(--color-secondary-dark); }