/* ==========================================================================
   input.css
   Input System — PEGMENT Design System
   ========================================================================== */
/* ==========================================================================
   Input System — PEGMENT Design System

   Component:  <div class="input-wrapper"> with <input class="input">

   Variants:
     .input-wrapper--with-label     — has label above input
     .input-wrapper--with-hint      — has hint text below input
     .input-wrapper--with-error     — error state with red border + icon
     .input-wrapper--with-error-message  — includes error message text below
     .input-wrapper--phone          — includes country code selector

   Also in this file:
     .select           — trigger + <pg-avatar>/dot marker that opens a
                          .select-dropdown listbox (self-contained, no
                          dependency on dropdown.css)
     .select--lg        — large size (44px), mirrors .input-wrapper--lg
     .select-dropdown   — Select's own option-list panel
     .date-input        — mm/dd/yyyy, hh:mm:ss AM + timezone, each part a
                          real focusable segment (see its own doc block,
                          further down, for the full structure)

   Sizes:      default | lg (.input-wrapper--lg)
     default: field 40px, icon 18px, label/hint body-xs, text label-lg
     lg:      field 44px, icon 20px, label/hint body-md, text body-lg

   States:
     :empty / :placeholder-shown  — placeholder visible
     :filled                      — user has entered text
     :focus / .input--focused     — keyboard/mouse focus
     :disabled / .input--disabled — non-interactive
     .input--error                — validation error

   Structure — Standard Input:
     With label:
       <div class="input-wrapper input-wrapper--with-label">
         <label class="input__label">Email</label>
         <div class="input__field">
           <span class="input__icon input__icon--leading"><i class="ti ti-mail"></i></span>
           <input class="input" type="text" placeholder="peggy@workpeg.com" />
           <span class="input__icon input__icon--trailing"><i class="ti ti-alert-circle"></i></span>
         </div>
         <span class="input__hint">This is a hint text to help user.</span>
         <span class="input__error">This is an error message.</span>
       </div>

     Without label:
       <div class="input-wrapper">
         <div class="input__field">
           <span class="input__icon input__icon--leading"><i class="ti ti-mail"></i></span>
           <input class="input" type="text" placeholder="peggy@workpeg.com" />
         </div>
       </div>

   Structure — Phone Input:
     <div class="input-wrapper input-wrapper--phone input-wrapper--with-label">
       <label class="input__label">Phone number</label>
       <div class="input__field">
         <button class="input__country" type="button" aria-haspopup="listbox" aria-expanded="false">
           <span class="input__country-flag">🇺🇸</span>
           <span class="input__country-code">US</span>
           <i class="ti ti-chevron-down input__country-arrow"></i>
         </button>
         <span class="input__divider"></span>
         <input class="input" type="tel" placeholder="+1 (555) 000-0000" />
         <span class="input__icon input__icon--trailing"><i class="ti ti-alert-circle"></i></span>
       </div>
       <span class="input__hint">This is a hint text to help user.</span>
     </div>

   COLOR TOKEN MAPPING (Light vs Dark mode):
   ──────────────────────────────────────────
   Field:
     Background:     Light = --color-surface-sunken    | Dark = --color-surface-sunken
     Border:         Light = --color-border-subtle      | Dark = --color-border-subtle
     Border focus:   Light = --color-border-default     | Dark = --color-border-default
     Border error:   Light = --color-critical-border    | Dark = --color-critical-border

   Text:
     Input text:     Light = --color-text-primary       | Dark = --color-text-primary
     Placeholder:    Light = --color-text-placeholder   | Dark = --color-text-placeholder
     Label:          Light = --color-text-secondary     | Dark = --color-text-secondary
     Hint:           Light = --color-text-tertiary       | Dark = --color-text-tertiary
     Error text:     Light = --color-critical-text     | Dark = --color-critical-text

   Icon:
     Leading:        Light = --color-icon-tertiary       | Dark = --color-icon-tertiary
     Trailing error: Light = --color-critical-icon       | Dark = --color-critical-icon

   Country selector:
     Text:           Light = --color-text-primary       | Dark = --color-text-primary
     Arrow:          Light = --color-icon-tertiary       | Dark = --color-icon-tertiary
     Hover bg:       Light = --color-surface-raised     | Dark = --color-surface-raised

   Disabled:
     Background:     Light = --color-surface-raised     | Dark = --color-surface-raised
     Border:         Light = --color-border-subtle      | Dark = --color-border-subtle
     Text:           Light = --color-text-disabled      | Dark = --color-text-disabled

   ACCESSIBILITY:
     - label[for] + input[id] association
     - aria-describedby linking hint/error text
     - aria-invalid="true" on error state
     - aria-haspopup / aria-expanded on country selector
     - role="combobox" on country selector
     - Focus ring visible for keyboard navigation
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   INPUT WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  font-size: var(--text-label-lg-size);
}

/* ═══════════════════════════════════════════════════════════════════════
   LABEL
   ═══════════════════════════════════════════════════════════════════════ */

.input__label {
  font-size: var(--text-body-md-size);
  line-height: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  user-select: none;
}

/* Required-field marker — <label class="input__label">Label <span
   class="input__required">*</span></label> */
.input__required {
  color: var(--color-critical-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUT FIELD (container for input + icons + country)
   ═══════════════════════════════════════════════════════════════════════ */

.input__field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 0 14px;
  height: 40px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  position: relative;
}

.input__field.url {
  gap: 0 !important;
}

/* Phone variant: no gap, country sits flush */
.input-wrapper--phone .input__field {
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUT ELEMENT
   ═══════════════════════════════════════════════════════════════════════ */

.input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
  text-overflow: ellipsis;
}

.input::placeholder {
  color: var(--color-text-placeholder);
}

/* ═══════════════════════════════════════════════════════════════════════
   SIZE — LARGE
   Scopes to .input-wrapper so label/hint/error scale with the field.
   ═══════════════════════════════════════════════════════════════════════ */

.input-wrapper--lg .input__field {
  height: 44px;
  font-size: var(--text-body-lg-size)
}

.input-wrapper--lg .input {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}

.input-wrapper--lg .input__icon .ti {
  --icon-size: 20px;
}

.input-wrapper--lg .input__label {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-md-line-height);
  font-weight: 500;
}

.input-wrapper--lg label.input__label {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-md-line-height);
  font-weight: 500;
}

.input-wrapper--lg .input__hint,
.input-wrapper--lg .input__error {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
}

/* ═══════════════════════════════════════════════════════════════════════
   ICONS
   ═══════════════════════════════════════════════════════════════════════ */

.input__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-icon-tertiary);
}

.input__icon .ti {
  --icon-size: 18px;
  line-height: 1;
}

/* Trailing icon (error indicator) */
.input__icon--trailing {
  color: var(--color-critical-icon);
  margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   COUNTRY SELECTOR (phone variant)
   ═══════════════════════════════════════════════════════════════════════ */

.input__country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  outline: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.input__country:hover {
  background: var(--color-surface-raised);
}

.input__country:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Country flag emoji */
.input__country-flag {
  font-size: 16px;
  line-height: 1;
}

/* Country code text (e.g. "US") */
.input__country-code {
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Dropdown arrow */
.input__country-arrow {
  font-size: 12px;
  line-height: 1;
  color: var(--color-icon-tertiary);
  transition: transform 0.15s ease;
}

.input__country[aria-expanded="true"] .input__country-arrow {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════
   DIVIDER (phone variant)
   ═══════════════════════════════════════════════════════════════════════ */

.input__divider {
  width: 1px;
  height: 20px;
  background: var(--color-border-subtle);
  margin: 0 10px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   HINT TEXT
   ═══════════════════════════════════════════════════════════════════════ */

.input__hint {
  font-size: var(--text-body-xs-size);
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   ERROR MESSAGE
   ═══════════════════════════════════════════════════════════════════════ */

.input__error {
  font-size: var(--text-body-xs-size);
  line-height: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-critical-text);
  display: none;
}

.input-wrapper--with-error-message .input__error {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   STATES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Focus ────────────────────────────────────────────────────────────── */
.input__field:has(.input:focus) {
  border-color: var(--color-border-default);
}

/* ── Filled (has value) ───────────────────────────────────────────────── */
.input:not(:placeholder-shown) {
  color: var(--color-text-primary);
}

/* ── Disabled ─────────────────────────────────────────────────────────── */
.input__field--disabled,
.input-wrapper--disabled .input__field {
  background: var(--color-surface-raised);
  border-color: var(--color-border-subtle);
  color: var(--color-text-placeholder) !important;
  cursor: not-allowed;
}

.input__field--disabled .input,
.input-wrapper--disabled .input {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.input__field--disabled .input::placeholder,
.input-wrapper--disabled .input::placeholder {
  color: var(--color-text-disabled);
}

.input__field--disabled .input__icon,
.input-wrapper--disabled .input__icon {
  color: var(--color-icon-disabled);
}

/* Disabled country selector */
.input-wrapper--disabled .input__country,
.input__field--disabled .input__country {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.input-wrapper--disabled .input__country-arrow,
.input__field--disabled .input__country-arrow {
  color: var(--color-icon-disabled);
}

.input-wrapper--disabled .input__divider,
.input__field--disabled .input__divider {
  background: var(--color-border-subtle);
}

/* ── Error ────────────────────────────────────────────────────────────── */
.input__field--error,
.input-wrapper--with-error .input__field {
  border-color: var(--color-critical-border);
}

/* Error label color */
.input-wrapper--with-error .input__label {
  color: var(--color-critical-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   COUNTRY DROPDOWN (popover menu)
   ═══════════════════════════════════════════════════════════════════════ */

.input__country-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  min-width: 240px;
  max-height: 280px;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-medium);
  border-radius: 12px;
  box-shadow: 0px 24px 48px -12px #0000002E;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.15) transparent;
}

.input__country-dropdown.is-open {
  display: flex;
}

.input__country-dropdown::-webkit-scrollbar {
  width: 3px;
}

.input__country-dropdown::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.15);
  border-radius: 3px;
}

/* Country option */
.input__country-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-body-md-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background-color 0.15s ease;
  outline: none;
}

.input__country-option:hover,
.input__country-option:focus-visible {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.input__country-option:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.input__country-option--selected {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.input__country-option-flag {
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.input__country-option-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input__country-option-code {
  font-size: var(--text-body-xs-size);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Search within dropdown */
.input__country-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--color-border-medium);
  margin-bottom: 4px;
}

.input__country-search .ti {
  color: var(--color-icon-tertiary);
  --icon-size: 18px;
  flex-shrink: 0;
}

.input__country-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--color-text-primary);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-family: var(--font-base);
  padding: 0;
  min-width: 0;
}

.input__country-search-input::placeholder {
  color: var(--color-text-placeholder);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE LAYOUT (spec page helpers)
   ═══════════════════════════════════════════════════════════════════════ */

.input-spec__row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 24px;
}

/* ── Default vs Large size comparison ───────────────────────────────────── */
.input-size-compare {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.input-size-compare__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.input-size-compare__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.input-size-compare__col-label {
  display: block;
  font-size: var(--text-label-xs-size);
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}

.input-spec__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
}

.input-spec__label {
  font-size: var(--text-label-xs-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.input-size-table-wrap {
  overflow-x: auto;
}

.input-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.input-table th,
.input-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
}

.input-table th {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.input-table tbody tr:last-child td {
  border-bottom: none;
}

.input-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.input-tag--sm {
  background-color: var(--color-critical-50);
  color: var(--color-critical-700);
}

.input-tag--default {
  background-color: var(--color-peggy-blue-50);
  color: var(--color-peggy-blue-700);
}

.input-tag--lg {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}


/* ═══════════════════════════════════════════════════════════════════════
   MONEY INPUT
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Currency symbol (leading) ──────────────────────────────────────────── */
.input__currency {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-placeholder);
  user-select: none;
  pointer-events: none;
}

.input-wrapper--money .input__field {
  gap: 4px;
}

/* Filled state: currency symbol matches input text color */
.input-wrapper--money .input__field:has(.input:not(:placeholder-shown)) .input__currency,
.input-wrapper--money .input:not(:placeholder-shown)~.input__currency {
  color: var(--color-text-primary);
}

/* Disabled: currency symbol muted */
.input-wrapper--disabled .input__currency,
.input__field--disabled .input__currency {
  color: var(--color-text-disabled);
}

/* ── Currency selector (trailing) ─────────────────────────────────────── */
.input__currency-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  outline: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.input__currency-select:hover {
  background: var(--color-surface-raised);
}

.input__currency-select:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.input__currency-select-arrow {
  font-size: 12px;
  line-height: 1;
  color: var(--color-icon-tertiary);
  transition: transform 0.15s ease;
}

.input__currency-select[aria-expanded="true"] .input__currency-select-arrow {
  transform: rotate(180deg);
}

/* Disabled currency selector */
.input-wrapper--disabled .input__currency-select,
.input__field--disabled .input__currency-select {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.input-wrapper--disabled .input__currency-select-arrow,
.input__field--disabled .input__currency-select-arrow {
  color: var(--color-icon-disabled);
}

/* ═══════════════════════════════════════════════════════════════════════
   CURRENCY DROPDOWN (popover menu)
   ═══════════════════════════════════════════════════════════════════════ */

.input__currency-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  min-width: 200px;
  max-height: 280px;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-medium);
  border-radius: 12px;
  box-shadow: 0px 24px 48px -12px #0000002E;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.15) transparent;
}

.input__currency-dropdown.is-open {
  display: flex;
}

.input__currency-dropdown::-webkit-scrollbar {
  width: 3px;
}

.input__currency-dropdown::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.15);
  border-radius: 3px;
}

/* Currency option */
.input__currency-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-body-md-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background-color 0.15s ease;
  outline: none;
}

.input__currency-option:hover,
.input__currency-option:focus-visible {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.input__currency-option:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.input__currency-option--selected {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.input__currency-option-code {
  font-size: var(--text-label-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  width: 40px;
  flex-shrink: 0;
}

.input__currency-option-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-body-sm-size);
  color: var(--color-text-tertiary);
}


/* ═══════════════════════════════════════════════════════════════════════
   LINK INPUT
   ═══════════════════════════════════════════════════════════════════════ */

/* Two independent, separately-rounded segments sitting in a row — not one
   merged pill. The protocol chip is a static, neutral badge that never
   reacts to focus/error/filled; only the url segment (the real input's
   box) carries those states, exactly like a plain .input__field would. */
.input-wrapper--link .input__field {
  background: transparent;
  border: none;
  padding: 0;
  gap: 8px;
}

/* ── Protocol chip (leading, static) ────────────────────────────────────── */
.input__protocol-segment {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  background: var(--color-surface-sunken);
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--color-surface-sunken);
}

.input__protocol {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  user-select: none;
  pointer-events: none;
}

/* ── URL segment — the actual bordered input box ────────────────────────── */
.input__url-segment {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0 12px 12px 0;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrapper--link .input {
  padding: 0;
}

/* Filled: protocol chip text matches input text color */
.input-wrapper--link .input:not(:placeholder-shown)~.input__protocol-segment .input__protocol,
.input-wrapper--link .input__url-segment:has(.input:not(:placeholder-shown))~.input__protocol-segment .input__protocol {
  color: var(--color-text-primary);
}

/* Focus: only the url segment's border highlights */
.input-wrapper--link .input__url-segment:has(.input:focus) {
  border-color: var(--color-border-strong);
}

/* Disabled: both segments muted */
.input-wrapper--disabled .input__protocol-segment,
.input__field--disabled .input__protocol-segment {
  background: var(--color-surface-raised);
  opacity: 0.6;
}

.input-wrapper--disabled .input__url-segment,
.input__field--disabled .input__url-segment {
  background: var(--color-surface-raised);
  border-color: var(--color-border-subtle);
}

/* Error: only the url segment gets the critical border; stronger ring on focus */
.input-wrapper--link.input-wrapper--with-error .input__url-segment,
.input-wrapper--link .input__field--error .input__url-segment {
  border-color: var(--color-critical-border);
}

.input-wrapper--link.input-wrapper--with-error .input__url-segment:has(.input:focus) {
  border-color: var(--color-critical-500);
  box-shadow: 0 0 0 3px var(--color-critical-bg-subtle);
}


/* ═══════════════════════════════════════════════════════════════════════
   CARD INPUT
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card icon (leading) ──────────────────────────────────────────────── */
.input__card-icon {
  border-radius: 2.67px;
  background: var(--color-surface-default);
  height: 16px !important;
  display: grid;
  align-items: center;
  width: 22px;
  justify-content: center;
}


.input-wrapper--card .input__field {
  gap: 10px;
}

/* Disabled: card icon muted */
.input-wrapper--disabled .input__card-icon,
.input__field--disabled .input__card-icon {
  opacity: 0.4;
  filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════════════
   DATE INPUT
   A compound field — month/day/year/hour/minute/second/meridiem are each
   a real, individually focusable <span tabindex="0"> ("segment"), not one
   plain text <input>. That's what gets the exact behaviour a native
   <input type="datetime-local"> already has for free (Tab between parts,
   only the part you're on highights) without giving up control over the
   field's own box model, since a native date/time input's outer chrome
   can't be restyled to match this system's border/radius/focus tokens
   across browsers. The trailing timezone abbreviation is plain text, not
   a segment — it's read-only context, not a value the field holds.

   Reuses .input-wrapper / .input__label / .input__required / .input__hint
   / .input__error / .input-wrapper--with-error(-message) / --disabled
   as-is (see the top of this file) — only the field itself is new.

   Structure:
     <div class="input-wrapper input-wrapper--with-label input-wrapper--with-hint">
       <label class="input__label">Date</label>
       <div class="date-input date-input--primary">
         <span class="date-input__segment" tabindex="0" data-part="month">mm</span><span class="date-input__sep">/</span><span class="date-input__segment" tabindex="0" data-part="day">dd</span><span class="date-input__sep">/</span><span class="date-input__segment" tabindex="0" data-part="year">yyyy</span><span class="date-input__sep">,</span><span class="date-input__segment" tabindex="0" data-part="hour">—</span><span class="date-input__sep">:</span><span class="date-input__segment" tabindex="0" data-part="minute">—</span><span class="date-input__sep">:</span><span class="date-input__segment" tabindex="0" data-part="second">—</span><span class="date-input__segment" tabindex="0" data-part="meridiem">AM</span><span class="date-input__suffix">EST</span>
       </div>
       <span class="input__hint">This is a hint text to help user.</span>
     </div>

   Time-only: the same .date-input field, just with the month/day/year
   segments (and their separators) left out — hour/minute/second/meridiem
   plus the timezone suffix are the whole field. No separate class; it's
   the date/time field's segment set, not its box, that's optional:
     <div class="date-input date-input--primary">
       <span class="date-input__segment" tabindex="0" data-part="hour">—</span><span class="date-input__sep">:</span><span class="date-input__segment" tabindex="0" data-part="minute">—</span><span class="date-input__sep">:</span><span class="date-input__segment" tabindex="0" data-part="second">—</span><span class="date-input__segment" tabindex="0" data-part="meridiem">AM</span><span class="date-input__suffix">EST</span>
     </div>

   Types: .date-input--primary (white/surface-default — the usual choice
   sitting on a page) and .date-input--secondary (surface-raised — for
   sitting on a surface that's already raised/sunken relative to the
   page, e.g. inside a card, so the field still reads as its own layer).
   Picking neither leaves the field with no background of its own.

   A segment holding a real value (not its placeholder text) gets
   .date-input__segment--filled to switch from placeholder- to
   primary-coloured text — see the "filled" example in inputs.html for
   how a partially-completed field (error state) mixes both.

   Typing digits directly into a segment / arrow-key incrementing / auto-
   advance to the next segment still isn't wired up — but clicking the
   month or day segment opens a real .calendar (see the "Calendar
   popover" rules further down, and calendar.css) on its day grid, and
   clicking the year segment opens the same popover straight on its year
   grid, as a picker for the month/day/year segments — the more common
   way these actually get filled in.

   COLOR TOKEN MAPPING:
     Field bg — primary:   --color-surface-default
     Field bg — secondary: --color-surface-raised
     Field border:        --color-border-subtle
     Field focus ring:  --btn-primary-focus-ring-offset / --btn-primary-focus-ring / --shadow-sm (:focus-within on the field)
     Placeholder text:  --color-text-placeholder
     Filled text:        --color-text-primary
     Separator / suffix: --color-text-placeholder (stays muted even filled)
     Segment focus:      --color-brand-secondary-subtle2 bg / --color-brand-secondary text
     Error border:        --color-critical-border (via .input-wrapper--with-error, reused)
     Disabled bg/text:    --color-surface-raised / --color-text-disabled (via .input-wrapper--disabled, reused)
   ═══════════════════════════════════════════════════════════════════════ */

.date-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 0 14px;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* ── Size — large — same 40/44px + 12px-radius + 14px-padding scale every
   other input on this page uses (.input-wrapper--lg .input__field), so a
   .date-input sitting next to a text/phone/money/link/card field of the
   same size lines up with it exactly. ── */
.input-wrapper--lg .date-input {
  height: 44px;
  padding: 0 14px;
  font-size: var(--text-body-lg-size);
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.date-input--primary {
  background: var(--color-surface-default);
}

.date-input--secondary {
  background: var(--color-surface-raised);
}

.date-input:focus-within {
  box-shadow: 0px 0px 0px 2px var(--btn-primary-focus-ring-offset), 0px 0px 0px 4px var(--btn-primary-focus-ring), var(--shadow-sm);
}

.date-input__segment {
  border-radius: 6px;
  padding: 1px 3px;
  margin: -1px -3px;
  color: var(--color-text-placeholder);
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.date-input__segment--filled {
  color: var(--color-text-primary);
}

.date-input__segment:hover {
  background: var(--color-surface-overlay);
}

.date-input__segment:focus {
  background: var(--color-brand-secondary-subtle2);
  color: var(--color-brand-secondary);
}

.date-input__sep,
.date-input__suffix {
  color: var(--color-text-placeholder);
  user-select: none;
}

.date-input__suffix {
  margin-left: 4px;
}

/* Trailing icon — a clock for a time/time-only field (opens a time
   picker), docked to the field's far right edge regardless of how much
   room the segments/suffix actually take up. */
.date-input__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-icon-tertiary);
  cursor: pointer;
}

.date-input__icon .ti {
  --icon-size: 18px;
  line-height: 1;
}

.input-wrapper--lg .date-input__icon .ti {
  --icon-size: 20px;
}

/* ── Error ────────────────────────────────────────────────────────────── */
.input-wrapper--with-error .date-input {
  border-color: var(--color-critical-border);
}

/* ── Disabled — same tokens .input__field--disabled already uses ───────── */
.input-wrapper--disabled .date-input {
  background: var(--color-surface-raised);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
}

.input-wrapper--disabled .date-input__segment,
.input-wrapper--disabled .date-input__sep,
.input-wrapper--disabled .date-input__suffix,
.input-wrapper--disabled .date-input__icon {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Calendar popover ─────────────────────────────────────────────────────
   No separate trigger icon — the month/day segments themselves open a
   real .calendar (calendar.css — link it alongside input.css wherever
   this is used, see inputs.html) anchored below the field, on its day
   grid; the year segment opens the same popover straight on its year
   grid (.calendar--year-view, picking a year there returns to the day
   grid, same as the standalone Calendar component). Picking a day fills
   the month/day/year segments and closes it; the calendar's own prev/
   next and today/selected states are untouched, this just wires
   segment-click → open (in the right view) and day-click → segment
   text + close.

   Structure:
     <div class="date-input-group">          (position:relative anchor)
       <div class="date-input">
         <span class="date-input__segment" data-part="month">mm</span>…
         <span class="date-input__segment" data-part="day">dd</span>…
         <span class="date-input__segment" data-part="year">yyyy</span>…
       </div>
       <div class="calendar date-input__popover" data-year="…" data-month="…">
         <div class="calendar__header">…</div>
         <div class="calendar__weekdays">…</div>
         <div class="calendar__grid"><!-- rendered by script --></div>
         <div class="calendar__year-grid"><!-- rendered by script --></div>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
.date-input-group {
  position: relative;
  width: 100%;
}

.date-input-group .date-input__popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: none;
}

.date-input-group .date-input__popover.is-open {
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEXTAREA
   Same font and state rules as the standard input — .input__field still
   supplies the border/background/focus/error/disabled treatment, and
   .input still supplies the text's font/color — this only swaps the
   fixed single-line height for an auto-growing, top-aligned box with a
   <textarea> instead of an <input>.

   Structure:
     <div class="input-wrapper input-wrapper--textarea input-wrapper--with-label">
       <label class="input__label">Description</label>
       <div class="input__field">
         <textarea class="input" placeholder="Enter a description…"></textarea>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.input-wrapper--textarea .input__field {
  height: auto;
  min-height: 96px;
  align-items: flex-start;
  padding: 10px 14px;
}

.input-wrapper--textarea .input {
  height: auto;
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
  padding-top: 2px;
}

.input-wrapper--textarea.input-wrapper--lg .input__field {
  min-height: 108px;
  padding: 12px 16px;
}

.input-wrapper--textarea.input-wrapper--lg .input {
  min-height: 84px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECT
   A text-input-styled trigger that opens a .dropdown (role="listbox")
   panel — reuses .input__field for the trigger's box model/typography
   (border, height, padding, font), and .dropdown / .dropdown__item /
   .dropdown__label / .dropdown__meta / .dropdown__check / .dropdown__dot
   from dropdown.css for the panel (link dropdown.css alongside input.css).
   This section only adds the trigger itself and its leading-marker slots.

   Structure:
     <div class="select">
       <label class="input__label" for="…">Team member</label>   (optional)
       <button class="input__field select__trigger" type="button"
               aria-haspopup="listbox" aria-expanded="false">
         <span class="select__icon"><i class="ti ti-user"></i></span>  (or <pg-avatar> / .select__dot — optional, pick one)
         <span class="select__value select__value--placeholder">Select team member</span>
         <span class="select__meta">@olivia</span>                     (optional secondary text)
         <i class="ti ti-chevron-down select__arrow"></i>
       </button>
       <div class="dropdown" role="listbox" aria-label="…">
         <div class="dropdown__item" role="option" tabindex="0">
           <span class="dropdown__label">Phoenix Baker</span>
           <span class="dropdown__meta">@phoenix</span>
         </div>
         <div class="dropdown__item dropdown__item--selected" role="option" aria-selected="true" tabindex="0">
           <span class="dropdown__label">Olivia Rhye</span>
           <span class="dropdown__check"><i class="ti ti-check"></i></span>
         </div>
       </div>
     </div>

   Search variant (trigger itself is a real, typeahead input instead of
   a button):
     <div class="input__field select__trigger select__trigger--search">
       <span class="select__icon"><i class="ti ti-search"></i></span>
       <input class="select__input" type="text" placeholder="Search" />
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  position: relative;
}

/* ── Trigger (paired with .input__field for box model + typography) ────── */
.select__trigger {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.select__trigger[aria-expanded="true"] {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.select__trigger:disabled,
.select-wrapper--disabled .select__trigger {
  cursor: not-allowed;
}

/* ── Value text ──────────────────────────────────────────────────────── */
.select__value {
  flex: 1;
  min-width: 0;
  display: flex;
  font-size: var(--text-title-sm-size);
  color: var(--color-text-primary);
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.select__value>span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.select__value--placeholder {
  color: var(--color-text-placeholder);
}

/* Secondary text next to the selected value (e.g. "@olivia") */
.select__meta {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ── Trailing chevron ────────────────────────────────────────────────── */
.select__arrow {
  flex-shrink: 0;
  color: var(--color-icon-tertiary);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.select__trigger[aria-expanded="true"] .select__arrow {
  transform: rotate(180deg);
}

/* ── Leading marker: icon ────────────────────────────────────────────── */
.select__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-icon-tertiary);
}

.select__icon .ti {
  --icon-size: 18px;
}

/* ── Leading marker: avatar (pairs with <pg-avatar size="xs">) ──────────── */
.select__trigger pg-avatar {
  flex-shrink: 0;
}

/* ── Leading marker: status dot ──────────────────────────────────────── */
.select__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-success-icon);
}

/* ── Search variant: trigger is a real input, not a button ─────────────── */
.select__trigger--search {
  cursor: text;
}

.select__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line-height);
  color: var(--color-text-primary);
}

.select__input::placeholder {
  color: var(--color-text-placeholder);
}

/* Search trigger gets the system's blue focus ring since it's a real,
   directly-typable input (keyboard-first), unlike the button triggers
   above (mouse-first, plain gray "open" state). */
.select__trigger--search:has(.select__input:focus) {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-brand-secondary-subtle2);
}

/* ── Panel positioning (optional — for a real floating popover) ─────────── */
.select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  width: auto;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECT — SIZE: LARGE
   Mirrors .input-wrapper--lg (field 44px, icon 20px, text body-lg, label
   body-md). Add .select--lg to the .select wrapper. A label immediately
   before it (the usual markup) is scaled too, via the sibling selector
   below, without needing a shared wrapper around label + trigger.
   ═══════════════════════════════════════════════════════════════════════ */

.select--lg .select__trigger {
  height: 44px;
}

.select--lg .select__value,
.select--lg .select__input {
  font-size: var(--text-title-md-size);
  line-height: var(--text-body-lg-line-height);
}

.select--lg .select__icon .ti {
  --icon-size: 20px;
}

.input__label:has(+ .select--lg) {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECT DROPDOWN
   Select's own option-list panel — same visual language as .dropdown in
   dropdown.css, but a separate, self-contained class so Select has no
   dependency on the Dropdown component (only input.css is needed).

   Structure:
     <div class="select-dropdown" role="listbox" aria-label="…">
       <div class="select-dropdown__item" role="option" tabindex="0">
         <span class="select-dropdown__label">Phoenix Baker</span>
         <span class="select-dropdown__meta">@phoenix</span>
       </div>
       <div class="select-dropdown__item select-dropdown__item--selected" role="option" aria-selected="true" tabindex="0">
         <span class="select-dropdown__label">Olivia Rhye</span>
         <span class="select-dropdown__check"><i class="ti ti-check"></i></span>
       </div>
     </div>

   Optional __header / __footer — for a dropdown that's more of a small
   dialog than a plain option list: a title + close button up top, and an
   actions row (existing .btn classes, not new ones) pinned below the
   scrolling list.
     <div class="select-dropdown">
       <div class="select-dropdown__header">
         <span class="select-dropdown__title">Title</span>
         <button class="btn btn--ghost-gray btn--icon-only btn--sm" aria-label="Close"><i class="ti ti-x"></i></button>
       </div>
       <div class="select-dropdown__search">…</div>
       <div class="select-dropdown__list">…</div>
       <div class="select-dropdown__footer">
         <button class="btn btn--ghost-gray btn--icon-only btn--sm" aria-label="Settings"><i class="ti ti-adjustments-horizontal"></i></button>
         <button class="btn btn--primary btn--rounded btn--sm">Done</button>
       </div>
     </div>

   .select-dropdown--assign — the specific variant js/pg-cell-assignee.js
   builds for its multi-select "Assign to" panel: sunken, placeholder-
   toned header (see rules below) and secondary-tinted footer actions
   (.btn--secondary-gray for settings, .btn--secondary-color for Done —
   both .btn--md, .btn--rounded on Done) in place of the plain example
   above.
   ═══════════════════════════════════════════════════════════════════════ */

.select-dropdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-medium);
  border-radius: 16px;
  box-shadow: 0px 24px 48px -12px #0000002E;
  padding: 4px;
  /* A dropdown with a __header/__footer moves that 4px gutter onto
     __list instead (see below) — header and footer sit flush against
     the panel's own edges, not inset a second time. */
  min-width: 228px;
  width: fit-content;
  overflow: hidden;
}

/* ── Item ────────────────────────────────────────────────────────────── */
.select-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  position: relative;
  outline: none;
  font-size: var(--text-title-sm-size);
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.select-dropdown__label .item--lg {
  font-size: var(--text-title-md-size);
}

.select-dropdown__item:first-child {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.select-dropdown__item:last-child {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.select-dropdown__item .ti {
  --icon-size: 18px;
}

.select-dropdown__item pg-avatar {
  flex-shrink: 0;
}

/* ── Label ───────────────────────────────────────────────────────────── */
.select-dropdown__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-dropdown__item--lg .select-dropdown__label {
  font-size: var(--text-title-md-size) !important;
}

/* ── Meta text (e.g. "@handle") ──────────────────────────────────────── */
.select-dropdown__meta {
  font-size: var(--text-title-sm-size);
  line-height: 20px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}

.select-dropdown__item--lg .select-dropdown__meta {
  font-size: var(--text-title-md-size);
  line-height: 24px;
}

/* ── Checkmark (selected indicator) ─────────────────────────────────── */
.select-dropdown__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-primary);
  margin-left: auto;
}

.select-dropdown__check .ti {
  font-size: 16px;
  line-height: 1;
}

/* ── Search header + scrollable list ────────────────────────────────────
   Optional: put a .select-dropdown__search above a .select-dropdown__list
   inside .select-dropdown to get a fixed search box over a scrolling
   option list (rather than every .select-dropdown__item being a direct,
   unscrolled child). The search box itself never scrolls away. */
.select-dropdown__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--color-border-medium);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.select-dropdown__search .ti {
  --icon-size: 16px;
  color: var(--color-icon-tertiary);
  flex-shrink: 0;
}

.select-dropdown__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-label-lg-size);
  line-height: 20px;
  padding: 0;
}

.select-dropdown__search-input::placeholder {
  color: var(--color-text-placeholder);
}

/* ── Header (optional title + close) ───────────────────────────────────── */
.select-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px 8px 10px;
  border-bottom: 1px solid var(--color-border-medium);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.select-dropdown__title {
  font-size: var(--text-label-md-size);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-placeholder);
}

/* ── Footer (optional actions row, pinned below the list) ──────────────── */
.select-dropdown__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-border-medium);
  margin-top: 4px;
  flex-shrink: 0;
}

.select-dropdown__footer > .btn:last-child {
  flex: 1;
}

/* ── Assign dropdown — variant of the header/footer above, used by the
   assignee cell's "Assign to" panel (js/pg-cell-assignee.js). Sunken
   placeholder-toned header instead of a plain title, secondary-tinted
   footer actions instead of primary/ghost. ──────────────────────────── */
.select-dropdown--assign .select-dropdown__header {
  padding: 4px 12px;
  /* background: var(--color-surface-sunken); */
  border-bottom: 1px solid var(--color-border-medium);
}

.select-dropdown--assign .select-dropdown__title {
  font-size: var(--text-label-md-size);
  line-height: var(--text-label-md-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-placeholder);
}

/* .select-dropdown--assign .select-dropdown__footer {
  background: var(--color-surface-sunken);
} */

.select-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
  --fade-size: 40px;
  /* overflow-y set without an explicit overflow-x forces overflow-x to
     auto too (per spec, a lone "visible" axis gets coerced) — so the
     list clips at its own box regardless of the panel's own padding
     around it. An item's own focus ring (e.g. .select-dropdown__item--
     editing) needs real room inside *this* box to not get clipped flat,
     not just space around the list from outside. */
  padding: 4px;
}

/* Headered dropdowns (.select-dropdown--assign and friends) move the
   panel's own 4px gutter onto the list — header/footer sit flush
   against the edges instead, not inset a second time by the panel's own
   padding. Plain item-only dropdowns (phone/country/currency, Select's
   own listbox) are untouched: no __header, so this never matches. */
.select-dropdown:has(.select-dropdown__header) {
  padding: 0;
}

/* Flush against the panel's own 16px corners — same "container radius
   minus ~2px" nesting as .select-dropdown__item:first-child/:last-child
   above, just applied to header/footer instead of the first/last item. */
.select-dropdown:has(.select-dropdown__header) .select-dropdown__header {
  border-radius: 14px 14px 0 0;
}

.select-dropdown:has(.select-dropdown__header) .select-dropdown__footer {
  border-radius: 0 0 14px 14px;
}

/* Top/bottom scroll fade — same recipe as .calendar__year-grid
   (calendar.css) and .time-picker__col: toggled by JS (has-overflow /
   at-top / at-bottom) once content actually overflows, so it hints
   there's more to scroll without ever showing on a list that fits. */
.select-dropdown__list.has-overflow {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-size), black calc(100% - var(--fade-size)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-size), black calc(100% - var(--fade-size)), transparent 100%);
}

.select-dropdown__list.has-overflow.at-top {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--fade-size)), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--fade-size)), transparent 100%);
}

.select-dropdown__list.has-overflow.at-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-size), black 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-size), black 100%);
}

.select-dropdown__list.has-overflow.at-top.at-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

.select-dropdown__empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-body-sm-size);
}

/* ── Status dot marker ──────────────────────────────────────────────── */
.select-dropdown__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-success-icon);
}

/* ── Item states ─────────────────────────────────────────────────────── */
.select-dropdown__item:hover:not(.select-dropdown__item--selected) {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.select-dropdown__item:active {
  background-color: var(--color-surface-raised);
}

.select-dropdown__item:focus-visible {
  outline: 2px solid var(--color-border-medium);
  outline-offset: -2px;
}

.select-dropdown__item--selected {
  background-color: var(--color-interactive-secondary-hover);
  color: var(--color-text-primary);
}

/* ── Danger (e.g. a "Remove" action mixed into an otherwise plain list) ─── */
.select-dropdown__item--danger .select-dropdown__label {
  color: var(--color-critical-text);
}

.select-dropdown__item--danger .ti {
  color: var(--color-critical-icon);
}

.select-dropdown__item--danger:hover {
  background-color: var(--color-critical-bg);
}

.select-dropdown__item--danger:active {
  background-color: var(--color-critical-bg);
  filter: brightness(0.96);
}

/* ── Editing (e.g. an inline rename — js/pg-cell-label.js) ─────────────── */
.select-dropdown__item--editing {
  /* Middle items only pick up rounded corners from :first-child/:last-child
     (they hug the panel's own edge there) — a mid-list item like this one
     is otherwise square, which would cut the ring off flat on whichever
     sides aren't first/last. It needs its own full radius regardless of
     position, since the ring is meant to read as a distinct pill. */
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

.select-dropdown__item--editing .select-dropdown__search-input {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECURRENCE INPUT — a form field version of the .recurrence-item row
   above (inputs.html "Recurrence Input"), sized and bordered like every
   other input (.input__field carries the box model), with the exact same
   .recurrence-item content as its value instead of plain text — icon +
   pattern name + optional detail + optional end-date tag. Clicking it
   opens the same "Repeat" editor popover a list row does: js/pg-
   recurrence.js's initItem()/openEditorFor() work on this element
   unmodified, since .recurrence-item is still the class they key off of
   (.input__field is just a second class layered on for the box model) —
   this is why it's a role="button" div, not a real <button>, matching
   .recurrence-item's own convention elsewhere (a real <button> would
   double-fire openEditorFor on Enter/Space, once natively and once from
   initItem's own keydown handler).

   Structure:
     <div class="input-wrapper input-wrapper--with-label input-wrapper--with-hint">
       <label class="input__label">Repeats</label>
       <div class="input__field recurrence-input recurrence-item" role="button" tabindex="0" aria-haspopup="dialog" aria-expanded="false">
         <span class="recurrence-item__icon"><i class="ti ti-repeat"></i></span>
         <span class="recurrence-item__title">Daily</span>
         <span class="recurrence-item__detail">12:00 AM</span>
         <span class="tag tag--default tag--sm recurrence-item__tag">Ends Dec 18</span>
         <i class="ti ti-chevron-down select__arrow"></i>
       </div>
       <span class="input__hint">…</span>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */

.input__field.recurrence-item {
  padding: 0 14px;
  cursor: pointer;
}

.recurrence-input .select__arrow {
  margin-left: auto;
}

.recurrence-input[aria-expanded="true"] {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.recurrence-input[aria-expanded="true"] .select__arrow {
  transform: rotate(180deg);
}

/* .input-wrapper--lg .input__field bumps font-size to body-lg, which would
   otherwise inherit down into the title/detail text here (the icon and
   tag already set their own explicit sizes, so only this needs resetting)
   — the box itself still grows to 44px, just its recurrence content stays
   the same size as default/small. */
.input-wrapper--lg .recurrence-input {
  font-size: var(--text-body-xs-size);
}