/* Strata Platform -- Phase Pill helper styles
 *
 * Pill is rendered into module containers via Strata.PhasePill.renderHTML.
 * Selectors are unscoped (no [data-module="..."] prefix) because the pill
 * is a platform-level helper meant to render inside any module. Tokens
 * resolve per theme so dark + light render correctly without a duplicate
 * [data-theme="light"] block.
 *
 * Edit modal HTML uses the existing platform classes (.strata-overlay,
 * .strata-modal, .strata-form-grid, .input-field, .dropdown, .btn-*) so
 * no additional modal styles ship here.
 */

.strata-phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-speed, 150ms) var(--transition-fn, ease),
              border-color var(--transition-speed, 150ms) var(--transition-fn, ease),
              color var(--transition-speed, 150ms) var(--transition-fn, ease);
  touch-action: manipulation;
}

.strata-phase-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line, var(--border-strong));
  color: var(--text-primary);
}

.strata-phase-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-phase-pill.set {
  border-color: var(--accent-line, var(--border-strong));
  color: var(--text-primary);
}

.strata-phase-pill.set::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.strata-phase-pill.unset::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  background: transparent;
}

.strata-phase-pill-label {
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}

.strata-phase-pill-value {
  color: inherit;
  letter-spacing: 0.04em;
}

.strata-phase-pill.unset .strata-phase-pill-value {
  font-style: italic;
  font-weight: 500;
}

/* iOS auto-zoom prevention for the reason textarea inside the modal.
 * The modal is body-mounted on .strata-overlay (no data-module scope),
 * so the rule must reach it directly. */
@media (max-width: 640px) {
  .strata-overlay #strata-pp-reason,
  .strata-overlay #strata-pp-phase {
    font-size: 16px;
  }
}